As we previously established, including customers really is a key component of user-centered design that leads to better performing websites. However, randomly testing interfaces with no prior planning is likely to result in disappointing outcomes. Hence, why it’s important to make sure that design validation always delivers on its promise of providing insights that will improve the overall design. In order to maximize design test results, fundamental design patterns should be taken care of before presenting test participants with the design concept.
As you’ve probably gathered, user research and design validation with users shouldn’t be taken lightly. Nevertheless, getting into the regular practice of including customers is not always an easy endeavor. It often requires budget and time approval for teams and individuals, which many organizations are still not too happy to give away. Even if approval is attained, keep in mind that involving users also sets certain expectations. This is why it’s important to maximize every opportunity to learn from users and improve the design concept.
To get the best outcome from a test, it’s always a good idea to eliminate any sloppiness that might ruin the effort. As such, by taking care of any low hanging fruit, we can then focus on gathering insights that we wouldn’t have otherwise been able to identify ourselves. In other words, if we are already aware what needs to be fixed, we really don’t need to spend testers’ time to tell us the very same thing.
Let’s see what we have…
- Ensure text is clear and readable. A good rule of thumb is to keep text size above 16px, while establishing harmonic headings and subheads sizing using tools such as modularscale.com.
- Organize individual content elements using appropriate amounts of white-space, and group related element together. Doing so will make it easier for testers to scan each page. A good rule of thumb is 1 space unit between two paragraphs; 2 space units between the main content and supplementary content; 3 space units between major sections on the page (for example, between the header, content and footer).
- Provide sufficient color contrast. This usually applies to text and background color combinations, but the contrast between two adjacent background colors that is too low can be difficult to perceive for some users as well. (Remember that time when you presented your design on an outdated projector and the colors didn’t look nearly as vivid as on your Apple screen back in the office?) To help you design WCAG 2.0 / Section 508 compliant websites, be sure to test color contrast ratio using the numerous tools available.
- Design affordance for every interactive element. This doesn’t mean avoiding flat design, but being consistent in how interactive and non-interactive elements are designed. A simple trick to accomplish clarity between interactive and non-interactive elements is to use one typographic style for content elements (subheads, paragraphs and captions) and another style for interface elements (navigation, tabs, buttons).
- Respect well-established conventions. A huge usability offender we still see nowadays is the use of a right pointing triangle icon (▶) or plus sign (+) in bulleted lists. Such icons are commonly used to signify expanding accordions or sublists (in which case they should turn into a downward pointing triangle or minus symbol to signify the collapse). Using them in other instances simply creates confusion. We’ve seen on multiple occasions, testers who attempted to expand a list item because an inappropriate icon was used instead of a more appropriate middot (•) or an en-dash (–).
- Improve page loading and content rendering. Take care of webfonts, image and video placeholders and provide appropriate fallback options. In doing so, don’t let poor loading times and random rendering influence the user experience and the outcome of the usability test (unless, of course, you are running a usability test on a poorly performing interface to prove your point). Keep in mind, that when testing websites for usability, it’s always a good idea to clear caches between sessions.
- Use good quality high resolution photos. Yes, this somewhat contradicts the previous tip. However, we know from experience that imagining better photos is not the same as seeing better photos. The good news is that a single and carefully selected high resolution photo performs much better than a few subpar photos. By being cautious of how we export images from a graphic editor and running them through file-size optimizers such as TinyPNG, we are able to provide great experience at a low performance cost.
- Create a 404 page for all links to non-existing pages in the test prototype. In doing so, we remove the need for having to explain why some links work and some don’t. Test participants are generally able to easily recover from a 404 by clicking the back button. Otherwise, test participants can be left extremely confused if they are simply taken to the top of the page after following a link populated with an empty hash (#).
Maximize the test to learn the things you don’t know
Getting customers to test an interface is not an effortless process. It takes a lot of time to screen and recruit perfect participants. This is why we are careful not to waste an opportunity to learn something new, and not necessarily just watching users point out insufficiencies that we’re already aware of.