The design of your site plays a critical role in determining visitor engagement and conversion. We’ve listed our top 31 design practices to help visitors as they peruse your site and these suggestions will typically lead to higher levels of conversion. This is not necessarily an all-inclusive list of best design practices, but the types of design roadblocks we tend to see most often.
1. Assume your web visitors are dumber than you think, lazier than you think, less patient than you think, and will be interrupted more often than you think. They also don’t like change, as they’ve formed habits of usage based on their experiences on other websites. Although this may sound a bit harsh, remember that visitors arrive on your site to solve a problem, will likely be multitasking and looking for the easiest and fastest way to accomplish their goals.
2. Relevancy – understand your visitor’s mindset, concerns, level of knowledge and goals, and design your site – organization, hierarchy of information and messaging – to be relevant to the people who will actually be using your site … your web visitors.
3. Use negative space (or white space) to ease visual clutter, create clearer delineations among content/visual elements and improve scanning ability.
4. Be consistent with the visual treatment of buttons and links throughout your site. This makes it easier for your visitors to more quickly identify clickable objects as they scan pages.
5. Understand the hierarchical nature of different types of visual elements. The human eye is attracted least to text, followed more strongly by an image, then even more strongly by an image or photo with a face, and finally most strongly to motion. Be careful with motion – it’s the visual element most likely to attract attention … even when visitors are looking away from it, they’ll still see it in their peripheral vision.
6. Understand hierarchical power of visual characteristics – size, shape, position, color, contrast. Typically larger sized objects, differently shaped objects, objects placed higher on a page, objects with bright colors and objects with a strong contrast attract more visual attention.
7. Limit font treatments. Too many font treatments (typically over 6 or so), may create visual clutter and slow your visitor down.
8. Use the highest quality images and, if possible, avoid the popular stock images you may see on other sites as they can reduce credibility.
9. Use and maintain a consistent font hierarchy (font faces, sizes, colors & contrast) with larger or bolder font treatments for headlines, somewhat smaller or less bold for subheads, and smallest for copy. A consistent font hierarchy quickly communicates to your visitor the structure of your content.
10. Use consistent justification of headings for easier scanning.
11. Use a consistent color theme that matches your brand and target audience expectations.
12. Keep your navigation consistent across the entire site.
13. Avoid rotating banners. Many usability studies show that visitors have just enough patience to see your 2nd panel before they either begin scrolling the page or heading to your navigation to look for the information important to them. And worst yet, they may make incorrect determinations on your offerings based on only the 1 or 2 banners they actually saw.
14. Avoid hiding your navigation behind a hamburger icon on your desktop site. Hiding your navigation creates more work for your visitors by reducing discoverability of the layout of your site as well as creating additional physical interaction cost in terms of the additional click to expose the navigation.
15. Simplify all interfaces by removing unnecessary elements or content. Remember, the less the design draws attention to itself, the better, or as Steve Jobs famously stated, “Design is not just what it looks like and feels like. Design is how it works”.
16. Display a persistent header to allow for easier navigation (and quick access to contact information) regardless of the visitor’s position on the page.
17. Don’t overload your visitors with too much choice. As Hick’s Law states – The time it takes to make a decision increases with the number and complexity of the available choices. Simplify by featuring the differences among choices and easy to use filters.
18. Gestalt principle law of proximity – Humans tend to group things together that are seen as being close together. You can make it easier for your visitors by keeping like items near each other.
19. Gestalt principle law of similarity – Humans group similar things together. This similarity can occur in the form of shape, color, contrast or other visual qualities.
20. Gestalt principle law of enclosure – Enclosing objects together within a visual boundary will unify them to the visitor. For example, enclosing all form fields, messaging and the call to action will help visitors quickly understand the relationship among those elements as being a singular form.
21. Hero images should help identify the page purpose or your offerings, appear authentic, and create the desired emotion of target visitors.
22. To relieve visitors of difficult memory exercises, use chunking. Studies have shown that a longer string of single items is more difficult to remember than shorter strings of like items. Try to arrange information into smaller groups.
23. Ensure product images are large enough for visitors to examine details that are likely important to them. Offer zoom capability.
24. Let the user control the visit experience. Auto-start videos (what if your visitors are in a place where they don’t want audio played?), manually scrolling testimonials (how do you know how fast they can read and process text?) are two examples that can be problematic for your visitors.
25. Break up copy into sections with distinct paragraphs, bullets, clear headings and iconography. Icons tend to be good targets, quick to recognize, can be visually pleasing.
26. Mobile – use full width buttons. Since mobile device users use their thumbs, full width buttons will make it easier for them to click on the desired action.
27. Mobile – be sure there’s sufficient visual distance between clickable objects to reduce the likelihood of mis-clicks on these smaller devices.
28. Mobile – avoid small fonts. Remember that not only are the devices smaller, but visitors may be moving about while using their device and lighting can be unpredictable and changing.
29. Mobile – in the same vein, be sure to use strong contrast.
30. Mobile – provide a link to your full desktop site as some visitors may want to ensure they can access all pages and content on your site on a mobile device even if it is more difficult to use.
31. Mobile – ensure that your phone number is a call link.
As we stated at the beginning of the article, there are several more good UX design tips, but we really wanted to focus on those items we tend to see most frequently when doing UX assessments for our clients. If you’re interested in more UX design practices or CRO services, contact us to learn more.
