Four Guidelines to Improve Usability
Four guidelines to evaluate and improve usability across websites and digital tools.
The four guidelines here are provided to help us design and create better, more user-friendly experiences on our websites and other digital tools. None of these guidelines are specific to a particular user, but apply to anyone who uses, or might use something we create.
These heuristics can be used to quickly evaluate work to spot areas for improvement and reduce problems in new projects.
(These heuristics are heavily influenced by Nielsen Norman Group’s “10 Usability Heuristics for User Interface Design” .)
1. Meet the User Where They Are
Users bring with them their own experience, expectations, language, and capabilities (personal and technological). Follow design conventions. Use words they will understand. Ensure special needs are met. Adapt when areas of confusion present themselves.
Use Simple, Straightforward Language
A user shouldn’t need a dictionary and instruction manual to use our websites. Use easily-understood language and “[make] information appear in a natural and logical order” (Nielsen Norman Group).
We can’t require a user to learn acronyms, jargon terms, and org-specific language or to navigate within our well-defined, often rigid, institutional structures just to find basic information or to accomplish simple tasks. Doing so will only undermine their trust in the organization. We must be flexible in adapting these things to their ways of thinking.
Use Simple, Straightforward Designs
This applies to design patterns, visual design language, and device use as much as written language. Be judicious with major design changes, especially when common and/or important tasks are involved. The more important the task, the more testing should be done at every stage of design from brainstorming to post-launch.
In this case, Jakob’s Law (link will open in a different site) applies as much to our digital systems as our real-world ones: “people spend most of their time using [products and systems] *other than yours*. [Their] experiences with those other [products and systems] set their expectations.”
Meet Users Where They Are (Even When *They* Don’t Realize Where They Are)
We humans want the world to make sense and to have order. So we as designers, writers, developers, etc. try to make designs that are “intuitive”* and logical. But, our world is complex, nuanced, and infinitely variable.
In order to “meet them where they are,” we need to understand our users and how they interact within the confines of our particular system and designs. We do this through curiosity, investigation, observation, and, frankly, humility. Then, if we meet them where they are, we will bolster their trust in us and confidence that we are the best ones to help them with what they need.
*Don’t get me started on so-called intuition. Intuition almost never follows logic, common sense, or the natural order. It is, with very few exceptions, instead based on cultural customs, incredibly personal experiences, or are seemingly invented on the spot. The fact is that it’s not natural for the human mind to navigate digital experiences. These things will never be truly intuitive. So, we must create based on the habits of the modern mind. Then, we can hope that the interactions we design will eventually feel intuitive.
Dos
- Use easy-to-understand language
- Follow universal, established design patterns
- Use relatable, personal, and inclusive ***original*** imagery
- Observe people using our designs to better understand users’ expectations and goals
- Make incremental, research-supported design updates
- Regularly investigate common journeys/design patterns to ensure continued effectiveness
Don’ts
- Use acronyms, jargon, or proprietary words and phrases
- Make radical/highly-unconventional design changes around basic, important tasks
- Make changes just for the sake of change
- Use “that’s the way it’s always been done” as justification to continue doing so
2. Make Clear and Reasonable Promises
Everything on a page is a promise. These promises set a user’s expectations for what the page is for and what they can do with it. Clarity always takes priority over aesthetics or style.
Every interactive element (e.g. buttons, links, and form fields), every content heading, every photo makes a promise to a user. Proper labeling, consistent visual design, logical organizational structure, easy-to-understand content, etc. ensure the promises we make match our intentions. Without those things, the user will assume promises based on their unique expectations and experience which will differ from our intentions.
Every time a user interacts with an element that doesn’t meet their expectations, we degrade their trust in us to be able to do what they want. If we are making promises we don’t keep, like a “Buy Now” button that merely places the item in a shopping cart, the user’s frustration will build and their trust will have been eroded.
Wayfinding Promises
Wayfinding, or how we navigate a user through our sites toward their goal, makes promises in the mind of a user in ways that are both explicit and subtle. Wayfinding includes not just where a user is going, but also understanding where they are, and knowing how to start over when they’re in the wrong place.
While the primary navigation element on a webpage is the anchor link, many more elements on a page make up the full wayfinding picture: headings (especially \
headings), breadcrumbs, calls-to-action, menus, buttons, etc. The way these elements are designed, labeled, and placed on a page tell the user what to expect once they interact with each.
If a user encounters blue, underlined text within a paragraph, they will expect to be taken to another webpage within the same website (except when explicitly told otherwise) that is related to the linked text. Here the exact text that is linked is the key to making sure the user knows where it will take them and why to click/tap it.
Visual Design Promises
The way elements of our design look, where they are located in relation to other elements, and how prominent they appear all play into what a user will expect.
The more visually prominent an element (using size, color, variation, etc.) the more importance the user will place on it. Often, if an element stands out so much, the user will bypass all the surrounding content, assuming that the prominent one is the only thing that matters. Take care to evaluate how much each element on a page stands out from the rest.
Other styles or patterns that are common outside of our sites will have an inherent meaning and value when they see them in our designs. For example, if we make a card with a stock photo (or that even *looks* like a stock photo), and place it outside of the flow of the content, the user’s mind will automatically interpret that as an ad, whether it is or not, and will scan right past it.
Content Promises
The style, reading level, and length of our written content also plays into what a user expects from us. Also, as mentioned in the wayfinding section, the words we use to label navigation elements make explicit promises to the user as to how to get to where they want to go.
Often, with the text in navigation elements, we try to make them as simple as possible, especially in call-to-action elements, by reducing the number of words we include. However, this often ends up making the link and its destination and purpose muddled. At best, it’s up to the user to surmise where it will take them. At worst, it leaves it so open to interpretation that the user will guess what it means, often incorrectly.
Dos
- Write clear link labels with a clear description of the linked page
- Let the primary call-to-action have its distance: keep other calls-to-action apart from the primary to maintain its visual weight
- Have clear page titles, breadcrumbs (where appropriate), and clearly-delineated navigation menus
Don’ts
- Prioritize simplicity over clarity
- Overpromise with visual elements, especially imagery
- Overload a page with navigation menus and options. (That means, in most contexts, no more than one menu.)
3. Prioritize User Goals Over Visual Design
Users come to our sites to get something done. Know what those goals are. Ensure each element on a page exists to get the user to their goal as effortlessly and as confidently as possible. Design for design’s sake will frustrate a user and undermine their trust in the site and our system.
Make sure a user’s primary goal on a page is prioritized through the visual design. The components used, their placement, and their visual weight will dictate the ability for a user to complete their task. Any extraneous element added should be considered in the context of helping them accomplish their goals.
Typography, color, layout, and imagery all contribute to or detract from the goal. Each design choice should be first in interest to make the goal-related elements the most visible on the page.
Dos
- Focus on a single, well-defined user goal
- As necessary, define one or two secondary user goals, ensuring they don’t detract from the primary
- Use imagery that complements or supports the text:
- Use original, captioned photos
- Use more abstract illustrations/graphics/charts
Don’ts
- Add design elements that are purely decorative.
- Use stock photos
- Override design system styles.
4. Mitigate Errors & Help Recovery
Make every effort to eliminate potential errors. When errors do occur, make sure the user knows it and give them a clear, easy-to-understand path out of it.
First, understand where errors commonly occur in the design. Then, design solutions to prevent the errors to start with. However, errors will happen. Provide clear messaging when they do occur: what happened, how to go back, and how to avoid the error again.
Clarity of language and recognizable design and placement are crucial to ensuring the error messaging is helpful and effective.
Dos
- Remove ambiguity, especially where and when a user needs to make a choice
- Understand common errors: what they are and why they happen
- Create clear error messages. Clearly explain what went wrong and how to fix it
- Provide multiple “escape hatches”
- Make clear where a user is at any point in the process.
Don’ts
- Blame the user
- Rely on generic one-size-fits-all error messages/pages
- Force users into a funnel.