In her Make your website more usable in 10 easy steps session at the WordSesh 2021 virtual WordPress professionals conference, Monique Dubbleman explained how implementing 10 design principles can create a more usable website.
She explained what each principle was, providing examples of websites demonstrating the specific principle.
What I liked about Dubbleman’s talk were the website examples, personal experiences, and actionable tips she shared for providing a better experience for users.
Here are my notes from her talk.
Make Your Website More Usable in 10 Easy Steps
Think about when you recently visited a website, but couldn’t complete a task or get the info you wanted. Many people encounter similar issues, because the website isn’t very usable.
While it’s helpful to have clean code and good visual design, if a user can’t accomplish their goal on your website, you haven’t created a usable website.
Which is why you want to consider the 10 design principles for your projects.
- Visibility of system status
Who hasn’t been unexpectedly surprised (and frustrated) by a system update on their Mac or Windows digital device? With a message that says it will take less than a minute? And you’ve been waiting several minutes for the update to complete.Recommendation: Provide realistic message updates, progress bar to inform user how long it will take or where they are in a multi-step process.
- Match between system and the real world
People like a reference, create mental maps for understanding.Recommendation: use words, sentences, and concepts that people can understand. Example: shopping cart icon is often used for online purchasing. Clear, concise wording for link text allows users to know exactly where the link will take them.
- User control and freedom of choice
Who hasn’t been annoyed with automatic sliders on websites? Or autoplay videos or audio? Moving or loud sounds on websites can be distracting to users.Recommendation: If you must use sliders, video, or audio on a page, provide options for users to pause or activate them. If your site supports multiple countries/languages, provide options for users to change to a specific country/language. (IKEA does a nice job of providing options for country/language.)
- Consistency and standards
Be consistent in your design, use conventions that people are familiar with. Place design elements where people expect to find them. Meet expectations of users, avoid reinventing the wheel.Recommendation: Provide consistency in your design layout. Selecting a logo on a website returns users to the home page. Login and shopping cart are typically located in top-right. Consider a content inventory to analyze headings, buttons, and other interface elements.
- Error prevention
Design websites to help people avoid mistakes that can cause errors. Guide people as they interact with your website.Recommendation: Review buttons and interface elements that may cause users to make mistakes. (Example of poor design: Microsoft Teams “Leave Meeting button” with no confirmation message, causing people to unexpectedly leave meeting.) Provide helpful information as people fill out forms, rather than waiting til end of form.
- Recognition rather than recall
Since it’s easier for people to recognize something than recall them, ask what they can confirm.Recommendation: Provide clues to users to help them gather information. Example: when resetting password, Twitter hides some of your phone number and email address so you don’t have to try and remember which one of your many phone numbers/email addresses you used.
- Flexibility and efficiency of use
Create designs that are efficient for expert users of your site and easy for new users.Recommendation: Consider how you might provide quick methods for experts to use your site while offering methods that are user-friendly to new users.
- Aesthetics and minimalistic design
Create a visual hierarchy with your design so users can navigate and understand your site.Recommendation: Make use of clear content, calls to action, and minimal design to allow users to perform their tasks quickly and easily. (Nice shoutout to one of my favorite services, Harvest)
- Help users recognize, diagnose, and recover from errors.
When something goes wrong on the site, explain what went wrong and how the user can fix it. Avoid abandoning the user.Recommendation: Provide value with your error messages. Don’t leave user wondering what to do: offer options for diagnosing error. Instead of sending user to help documentation, provide link to specific help topic. Offer options to contact customer support for additional help.
- Help and documentation
There will be times when users need help using your site, using features on your site. Be prepared, offer help for your tools and interfaces.Recommendation: From popovers, videos, chat, help center, and knowledge base, you have numerous options for providing help to users. Whatever you use, provide context. Avoid general help, provide the right help so users aren’t left searching throughout your entire knowledge base.
Summary
We’ve all experienced websites where we’ve struggled to find the info we needed or became frustrated when trying to complete a task.
Using the 10 design principles, you can design a more usable website resulting in happier users and potentially, new customers.
