First, the do’s
A well-designed website is a valuable investment that will generate revenue for your business—but 68% of people say they won’t explore a site if they find it unattractive. If your website hasn’t been updated in a while, your web design could unintentionally be hurting your business by turning people away at the door.
If it’s time to refresh your website, we’ve put together a list of 10 website design best practices and coupled them with the do’s and don’ts of great web design. Follow these best practices as you update your site.
1. Keep your interface consistent
One of the top principles of good UX is to keep the interface consistent throughout the entire product. The overall look and feel of your website should be consistent across all of your site’s pages. Consistency of navigation, colour schemes, typefaces, and style of writing can have a positive impact on usability and UX.
Practical tip: Make design usable first. Consistency is a double-edged sword. If your website isn’t designed correctly at first, then to make other parts of it consistent will result in consistently poor design. Thus, make design usable first, then make it consistent.
2. Design easy-to-use navigation
Navigation is the cornerstone of usability. It’s the main interaction technique on the Internet. Having good website navigation is crucial for ensuring that visitors can find what they’re looking for.
Practical tips:
- Keep top-level navigation for the essential navigation options. Limit your top-level navigation links to a maximum of seven choices ━ the number of objects an average human can hold in working memory is 7 ± 2 ━ and create sub-navigation with clear categorisation.
- Use clear labels for navigation options. Use familiar words for menu options to help visitors understand them better.
- Reduce the amount of time required for users to get to the destination. Design your navigation in a way that gets visitors where they want to go with the least number of clicks possible. When designing a website, remember the three-click rule, which says that your viewers should never be more than three clicks away from what they are looking for.
- Include navigation options in the footer of your site. A footer is a place where visitors expect to find navigation options and contact information.
3. Change the colour of visited links
Links play a vital role in the navigation process. When visited links don’t change colour, users could unintentionally revisit the same pages repeatedly. Knowing your past and present locations makes it easier to decide where to go next.
4. Make it easy to scan your pages
When users visit your site they are more likely to quickly scan the page rather than read everything on it. For example, when visitors want to find specific content or complete a certain task, they will scan a website’s pages until they find what they are looking for. Visual hierarchy refers to the arrangement or presentation of elements in a way that implies importance ━ e.g. where they eyes should focus first, second, etc.
Practical tips:
- Avoid walls of text. Chunk your information into groups to make it easier to digest visually. Breaking walls of text by headers or bullet points.
- Put more visual weight on important elements. Make important elements such as call-to-action buttons or login forms focal points so visitors see them right away. You can emphasise elements using different sizes or colours.
- Consider natural scanning patterns. People in the Western world usually read left to right and from top to bottom. A design that goes against this pattern will present a learning curve for your visitors. Well-designed websites typically lay out their content in a “F” reading shape or “Z” reading shape.
- Stick to a grid layout. A grid layout allows you to organise information in a way that makes it easier for visitors to read and comprehend information presented on the page.
5. Take content seriously
Copy is just as important as the design of your website. More than 95 percent of information on the web is in the form of written language. Even if your site is beautifully designed, it’s no more than an empty frame without good content; a good website has both great design and great content. A designer’s job is to make sure that the design aids and complements the content.
Practical tips:
- Make sure the text on the website is relevant. Irrelevant text doesn’t bring any value for your visitors and might easily confuse them. Strive to create copy where each line of text will be valuable for your visitors.
- Avoid jargon. The information written on your website should be as simple and as plain as possible for easy comprehension. A safe bet is to write for all levels of readers by picking words that are clearly and easily understandable to everybody.
Related: Why A Fluid UX Design Is Essential To Your Website Prosperity
6. Check your website for errors
A great piece of work can be easily tarnished by a small error. Here are a few common problems to be aware of:
- Watch out for dead links. A user can easily become frustrated when they click a link on a site and receive a 404 error page in response.
- Check your website for typos.
- Make sure all media content is loading correctly ━ no broken images or videos.
7. Minimise the number of choices
The number of choices people have affects their decisions; the more choices they have, the less action they take. When you present your user with too many options, you make them think too much. To increase chances for interaction, it’s better to minimise the number of choices.
8. Engage users to scroll
Scrolling sends users deeper into the page and makes them invest more time in the experience, and this increases the chance that users will convert ━ e.g. buy something, sign up for a newsletter, or contact you. Despite that people usually start scrolling as soon as the page loads, content at the top of the page is still very important. What appears at the top sets the impression and expectation of quality for visitors. People do scroll, but only if what’s above the fold is promising enough.
Practical tip: Content at the top of the page sets initial expectations. If a page provides users with high-quality content, they are willing to browse for more content.
9. Label buttons according to what they do
The label on any actionable interface element should always tie back to what it will do for the user. Users will feel more comfortable if they understand what action a button triggers. Vague labels such as “Submit” don’t provide enough information about the action. Let’s Talk is a good one for a communication hook.
10. Make things look like they work
With buttons and other interactive elements, think about how the design communicates affordance. Remember the old adage “form follows function”: the way an object looks tells users how to use it. Visual elements that look like links or buttons, but aren’t clickable ━ such as underlined words that aren’t links, or elements that have a rectangular background but aren’t buttons ━ can easily confuse users.
11. Make your website responsive
Today there are more than 5 billion devices running web browsers. This means that visitors can come to your site from various devices such as a desktop, tablet, phone, music player, or even a watch. A big part of UX design is ensuring that no matter how the visitor sees your site, all vital information will be displayed correctly on different screen sizes.
Practical tips:
- Make essential information easily findable. Unlike desktop users, when browsing mobile, users are looking for something specific such as contact information or the cost of a product they want to buy. Make this info impossible to miss.
- Size interactive elements according to the screen. Since mobile users scroll and tap with their fingers, you may need to increase the size of interactive elements, such as buttons.
12. Test your design
You may have a design that you think is fantastic, but without feedback from real users, you’ll never know how effective it is. You need to see how users react to it. Even if you can get one or two real unbiased users to interact with your website and share their thoughts with you, it will provide you with many helpful insights that you wouldn’t otherwise have.
Practical tip: Keep an eye on analytics. Web analytics are powerful tools that can help you find areas on your website that require additional attention.
Now, the don’ts
1. Don’t make users wait for content to load
Loading time is extremely important for user experience. As technology progresses, we get more impatient, and today, 47 percent of users expect a web page to load in two seconds or less. If a web page takes more time to load, visitors might become frustrated and leave the site. That’s why speed should be a priority when building a web application.
Practical tips:
- Avoid blank pages during loading. When loading takes some time, consider displaying a part of the content together with some form of visual feedback ━ such as a loading indicator.
- Optimise images. Images, especially large background images, can take a lot of time to load. You can significantly reduce the loading time by optimising your images.
- Measure your website’s current performance. Google’s PageSpeed Insights and Think With Google tools not only help you identify performance problems on your website, but they will also propose solutions to certain problems.
2. Don’t open internal link in new tabs
Users expect different behavior from internal and external links. All internal links should open in the same tab; this way, you’ll allow users to use the “back” button. If you decide to open external links in a new window, you should provide an advanced warning before automatically opening a new window or tab. This might take the form of text added to the link text stating. “opens in a new window”.
3. Don’t use too many typefaces
When you start building a site, it’s always tempting to use a lot of different typefaces ━ five or six different fonts or even upload your own. But, it’s better to avoid that temptation. Too many variations in font types can be distracting, confusing, and borderline annoying.
A common recommendation is to use a maximum of three different typefaces in a maximum of three different sizes. When designing a website think about how can you make the typography powerful by playing with weight, not different fonts.
4. Don’t show automatic pop-ups too early
A lot of websites show pop-up boxes with a request to subscribe as soon as you arrive on the page. As a designer, showing pop-up windows is probably one of the most annoying things you can do to someone visiting your website. Pop-ups are interruptive by nature, and, since they are typically used to show ads, users often close them even before reading the content.
Practical tip: Time your pop-ups. Before asking visitors to do something, you need to show how you can deliver value. Prevent the box from popping up until visitors reach the end of the page ━ i.e. read all content ━ or stay on the site for some time.
5. Don’t use generic photos of people
Images with human faces are a very effective way to get your users engaged. Our brains are predisposed to pay attention to faces. When we see faces of other humans it makes us feel like we are actually connecting with them, and not just using a product.
However, many corporate sites are notorious for their over-use of insincere photography, which is employed to “build trust.” Usability tests show that purely decorative photos rarely add value to the design and often harm the user experience.
6. Don’t let promotion steal the show
Having too many promotions or ads on a page can easily overshadow the main content and make it harder for users to accomplish tasks. If you have too many ads on the page, they’ll all be competing to get your readers to look at them. This will result in a sensory overload that will ultimately increase your bounce rates. It’s also important to acknowledge that anything that looks like an advertisement is usually ignored by users ━ the phenomenon is known as banner blindness.
7. Don’t play background music or autoplay videos with music
While background music might work in specific cases, like a promo website, it is simply a bad idea for most websites. Unexpected music or sound can annoy and potentially cause problems ━ people might be visiting your site at work, in a public place, or near someone who’s sleeping, and unexpected music could send such visitors away in an instant.
Similar to background music, autoplay videos incorporated into a block of content also irritate users. They should be used sparingly and only when appropriate and expected.
Practical tip: Put users in control. Set music to mute by default, but allow them to turn it on if they click ━ design play/pause buttons for your audio content.
8. Don’t hijack scrolling
Scroll hijacking is when designers manipulate the scrollbar to behave differently on their website. Hijacked scrolling is very annoying for many users since it takes control away from them and makes scrolling behavior completely unpredictable. When you design a website, it’s better to avoid scroll hijacking and let the user control their browsing and movement through the site.
9. Don’t use horizontal scroll
In order to stand out, some designers use horizontal scrolling on their sites. Unfortunately, horizontal scrolling is one of the few interactions that consistently generates negative responses from users. Users often have no idea they can discover content by scrolling horizontally — most of the users are accustomed to scrolling down on websites and don’t usually look left and right. As a result, they simply ignore content accessible through horizontal scrolling.
10. Don’t sacrifice usability for the sake of beauty
No matter how beautiful a design is, it should never interfere with a user’s ability to consume the content or interact with a website. One typical example of design decisions that often create terrible UX for the sake of beauty is using light grey text on light backgrounds. This combination affects the content’s readability. It’s better to avoid having busy backgrounds behind content or insufficient colour contrast, like in the example below.
Practical tip: Check the contrast ratio. Contrast ratios represent how different a colour is from another colour. Tools like Colour Contrast Checker will help you check if you have a sufficient colour contrast in just a few clicks.
Conclusion
When people interact with websites, they expect excellent user experience. If you fail to satisfy their needs, they’ll simply move to your competition, which might be just a click away. That’s why with every design decision, you should think what’s best for the visitor and try to make the experience as pleasant as possible.
Need help with your website? Let’s Talk!
