All of us spend a lot of time on our phones, tablets, or computers, and screen time has become essential to our work and personal lives. We read the news, research content, and complete various tasks. Through this constant usage and repetition, we've each developed a set of heuristics (mental shortcuts that help us make decisions quickly) about websites and applications we interact with.
One of the main things your visitors to your website will use to judge your site (and your brand) is their user experience. There are little clues they look for, mostly unconsciously, to understand if a website is trustworthy and worth their time.
In this guide, you will earn the essential elements that create a positive user experience and how you can implement them on your website to give you a fighting chance.
Before starting, conduct user research
Whether you realize it or not, you have beliefs about what works and what doesn't work for your website, business or brand. Some of them may be correct, some of them may be wrong, but you won't know unless you do the research.
Neal Taparia, the founder of Solitaired, assumed that inserting ads on the page would have a negative impact on user experience. Taparia decided to test it and realized that there was no statistically significant change in their KPIs on pages with ads versus pages without ads. Because he tested his assumption, he discovered another income stream for his brand.
I challenge you to test as many of your assumptions as you can. Start with the obvious ones like:
- Your headlines
- Brand imagery
- Short copy vs. long copy
- The page layout
- Button layout and position
Anything on your website that you haven't explicitly tested is a candidate for experimentation.
Design for web behavior
The internet has a set of norms and behaviors that are in stark contrast to offline norms and behaviors. For example, the cart abandonment rate online ranges from 56% to 81%. Now in real life, it's difficult to see someone enter a store, fill up their cart with groceries or clothes, and then leave it in the middle of the aisle. These differences make it important to design all aspects of your website to cater to the behaviors people exhibit online. There are multiple areas to tackle.
Site content
The web is full of distractions; people don't usually read every word on your site. They scan pages. This helps them understand if they're in the right place and if they should devote time to reading most of the page.
When scanning a webpage, they're looking for useful headings and an easy reading experience. There are four things you can do to cater to this behavior and improve the user experience:
- Create shorter paragraphs. This guide is full of short easy-to-digest paragraphs that allow you to read quickly. It also makes it harder to lose your spot if you get distracted by something else for a moment.
- Use multiple subheadings. Subheadings break up the text and highlight the main points of the content. It also helps organize the flow of the page. As you can see, I’ve used a main subheading and nested subheadings in this section.
- Incorporate bulleted lists. This delivers information quickly while aiding comprehension and reducing monotony.
- Highlight text with bold or underlines. Doing so draws the eye and makes sure the reader doesn't skip important text while scanning.
In an older study by Nielsen Norman Group, these changes improved usability by 159%.
Imagery
There are many forms and uses for imagery across a website. They can be there to aid comprehension, like with infographics; lead users to take a certain action, like with pointer arrows, or instill the right emotions and perspective, as is the case with product imagery.
The right imagery can enhance the user experience, but it can be tricky to get right. For example, the human eye is drawn to images of human faces and will follow the gaze of the person in an image. If, on a webpage, an image of a person is looking away from your call to action, then visitors' gaze will follow the direction of where the person in the image is looking. You can counteract this by using imagery that focuses the visitor's attention on your CTA with arrows or using images of people to direct the gaze of your visitors to your CTA.
Navigation
The last easy win when designing for web behavior is optimizing the navigation. You may want to push the boundaries of design, but when conversions are important, don't. That means avoiding menus that don't look like menus or menus placed in strange locations.
Place your menu at the top of the page, use simple language to describe the links, and avoid creating menus with too many nested options. The more nested options you have, the easier it is for someone to miss something. Instead, add those options on the page they're going to (if applicable). This can have a marked impact on e-commerce KPIs especially.
Default to clarity over cleverness
There's a movement that advocates for differentiating your brand in every area you can. There are merits to this approach, but being a me-too brand isn't always bad. For example, most niches have their own vocabulary. In the marketing and business space, it can be assumed that you know what a landing page and a CTA are. In finance circles, everyone should know what a Roth IRA and a short sale are.
The same principle applies online. Most users on the web understand what add to cart, sign up and log out mean. When you change these common terms to something else to be different, you hurt the user experience. Be careful with things you believe are common sayings in any niche. Avoid jargon, and stick to real terms within your website copy and content.
Use common design elements that users understand
When the web was new, hyperlinks were a novelty. Now, almost every web user understands blue text with an underline is a hyperlink. It takes time for any new element to be commonly understood, so if you're trying to push the boundaries of design or be different, it can backfire.
Try to avoid design elements that aren't used often. These include but aren't limited to:
- Round buttons
- Menus on the left or right side of the screen that need to be clicked before opening
- Clickable logos placed within the content of the page
- A color scheme with many colors (this is just bad design)
- More than three different fonts
- Product image cards of various sizes
Stick to what your users know. You can implement changes and see how they affect the user experience, but do so on small test groups. If you have statistically significant test results and don't see a negative change in your KPIs, then you can roll it out across your website with confidence. You also want to watch what your competitors are doing and what people in other industries are trying.
Implement a clear visual hierarchy
When looking at a webpage, people look at what takes up the most visual real estate. In general, images are looked at first, then headings, then the next largest text, then buttons and, finally, whatever is left.
If there's text above the main heading but it's in a smaller font, people will look at the heading first. When there's an image above the fold, it will be viewed first.
In addition to this, people tend to read content online in two ways:
- F patterns
- Z patterns
An F pattern means a visitor will read from the top left of the page, move to the right, go back to the left of the page, go down, read to the right a bit, then scan down the page.
A Z pattern means a visitor will start at the top left of the page, move to the right, move back to the left while dropping their gaze, and read to the right in a straight line. Content that doesn't fall within those two areas isn't read.
Why does this matter?
The order in which people read information shapes how they understand it. If you want something to be seen first, it has to have a higher visual hierarchy.
There are no hard-and-fast rules here, because there are exceptions to everything, but the following guidelines should serve you well:
- Take advantage of size to emphasize or deemphasize the importance of an element. (The larger something is, the more important it appears to be.)
- Use pops of color to direct readers' attention. (This is especially effective on CTA buttons.)
- Use, at a minimum, three text sizes to emphasize content. The heading, subheadings and body copy are good places to start.
- Use white space generously to emphasize important elements and de-emphasize others.
- Pay attention to your composition, and use simple techniques like the rule of thirds or the rule of odds.
These are a few general rules that can help you enhance the user experience on your website and make it easier for people to understand what is important. As you constantly work to improve your visual hierarchy, you'll get a better grasp on what works for you.
Conclusion
The user experience is something that shouldn't be taken lightly. It's the difference between a website that converts and one that isn't appealing to visitors. Start with the areas that will have the greatest impact on your bottom line first. After that, continue to tweak your website until you have an exceptional user experience that encourages people to come back over and over again.