Think about when you browse the web. You’re searching Google for something and you go to a few of the top results to see if that website has your answer. When you click through to a website, what makes you leave? Sometimes, you can see right away that they’re not likely going to have the answer or resources you actually want, but do you ever feel lost trying to browse a website?
You probably do, subconsciously, all the time. As soon as we can’t figure out the next step or the point, we’re done.
But, how do you ensure that your website isn’t confusing?
Don’t Make Them Think
There’s a great book called Don’t Make Me Think that introduces this concept well, but the basic idea is to make your website as easy as possible to use. Think the grandma who has never owned a computer and no idea how the internet works – that’s who you’re designing your website for. It’s not the most fun, but planning your UX around that person means that if they can get it, everyone else who comes to your website finds it easy and simple to use, easy to find how to contact you or add something to the cart, or to find the information they need about your services.
Making your website simple to use doesn’t have to mean that you slap a logo and then a search bar in the middle of the screen (Google), but it can mean following a few best practices to make your site simple and easy to use.
Start with Clear Headlines
It’s kind of amazing how much this helps, but clear headlines, with key phrases that our customers are searching for, go really far into drawing the eye to the rest of your content. Many of the websites that we navigate off of in our Google searches might actually be able to help us, but we just can’t see the forest for the trees. Ensuring that your headlines are clear – written so that people can see your benefit and how you solve their problems – is a great way to start to signal that you can help.
But also ensuring that your headlines are visually clear – simple and easy to spot and read, also does a lot to make sure they SEE those benefits. Make your headlines larger than the body text, starting with your largest font with your H1 at the top of your page and gradually decrease the font size with your H2s, H3s, and down you go. Think of your website like a college term paper; that font size helps people to visualize what section goes with what thought, and introduces a new concept or section when you have the next H2 appear. (You only thought you were done with term papers….) Signalling those sections goes a long way in helping your client navigate clearly through your website.
Make Colors Mean Something
A lot of brands have 2-3, maybe more, brand colors to work with. When you utilize a color on your website, you want it to mean something, and then stay consistent. For instance, if you use a red background on your buttons, err on the side of caution and make all buttons that same color. If the contrast is good enough, you can also make your in-text links that same color. It helps to signal to your browsers that that particular color is something they can click on.
Similar with headlines, you can make all your H1s one color, all your H2s another brand color, and then anything below your third brand color. Utilizing colors to signal new sections helps train the eye as well, so your mouse knows where to go.
Don’t Overwhelm the Eye
Potentially most important, you want to focus on not overwhelming the eye as the user hits your screen. The easiest way to do that is the clear headlines and making your colors mean something, but you also want to use a few content-related tricks. First, focus on shorter, skimmable paragraphs of content instead of dumping the actual college term paper on your webpage. Then, break that up even more and highlight important key phrases by bolding it, making it even easier to skim. Use bullets to deliver a lot of concepts quickly and efficiently. It’s amazing how much breaking up your text and making it feel so much more digestable truly makes it easier on the eye as you go.
With color, you want to ensure that your colors are complimentary and easy on the eyes as well. Accessibility standards are key here, in that you want to ensure the contrast of the text color on the background makes it easy to read your content. I also often tell people that you want to stick to 2-3, maybe 4 colors throughout your website and then you can add in a couple neutral shades. If you have a lot of color, it can be hard for your eye to know where to go.
As a developer, I also think that you should keep your website simple. Avoid the bells and whistles unless they help your eye go down the page and through the copy. While this website was made intentionally as a point, it showcases how all of those things can mix together to make a truly confusing experience.
Just Keep it Simple
Overall, you want to focus on keeping your website simple. Any added elements, like pictures, colors, and headlines, should focus on pulling the reader down the page and further into your website. If you get a lot of calls, emails, or questions on how to find something on your website (or to answer a question that your website answers), then chances are, your website as it is is confusing. Find ways to simplify the experience and design and let your website do its work for you!