Introduction to digital usability

Digital usability defined

Usability refers to how easy or hard it is to learn and use a digital product like a website or application. Usability reflects how well users can do things like find information, fill out a form, or ask for help. Everyone should be able to easily interact with the county online. This requires good usability practices.

Accessibility and plain language

Accessibility is part of usability. Accessibility refers to how easy or hard it is for people with disabilities to use a digital product. For more information, visit Accessibility.

Plain language is also part of usability. Plain language is the practice of making information easy to find, understand, and use. For more information, visit Digital text standards and Plain language.

How people use the county’s main website

People visit the county online to find information or complete a task.

Mobile use

More and more people access the county online with mobile devices. Some residents only have a mobile device and no laptop. Some lines of business get more than half their web traffic from mobile devices. So we expect mobile traffic to continue to grow.

Time on site

Visitors to the county’s main website only spend an average of about 2-and-a-half minutes on the site. So the site works well for information that’s concise and actionable.

Digital usability checklist

Good usability requires specific techniques. Use this list to help make your digital products as usable as possible.

1. Help users not lose their place

Keep them informed of the state of their interaction. For example, give users information about their location within a sequence of steps.
Inform them ahead of time of any action that has consequences. For example, give a warning message if using the back button will cause them to lose data.
Present feedback to users quickly. For example, an error message for an empty form field should appear right away.

This principle is visibility of system status.

2. Support learning

Give information in a way that’s familiar and follows a logical order. For example, alphabetize a list of cities within Hennepin County.
Use words and terms familiar to users and avoid internal jargon. For example, use the local street name and not its county highway name.
Follow real-world conventions. For example, use numbered steps for a process that goes in order.

This principle is match between system and real world.

3. Let users change their mind

Create a way to back out of an action without too much effort. For example, let someone go to a previous step without losing their data.
Let users stay in control and avoid getting stuck. For example, provide a Cancel button.
Allow users to leave the interface. For example, create a clear Exit button.

This principle is user control and freedom.

4. Don’t distract users with inconsistencies

Follow common online standards and conventions. For example, place the hamburger menu in the upper right corner of mobile screens.
Use the same colors for the same items within a website or application. For example, use the color red for warning messages and blue for submit buttons.
Use the same design element within a website. For example, avoid square buttons on one page and round buttons on another page.

This principle is consistency and standards.

5. Help users prevent errors

Make it easy for users to avoid mistakes. For example, provide help text to explain a complicated question.
Provide useful constraints. For example, use radio buttons that allow only one choice for a class date and time.
Build in protections against errors that have big consequences. For example, create a warning message, Are you sure you want to delete this account?

This principle is error prevention.

6. Reduce the information users must remember

Avoid making users rely on memory. For example, restate a case number in a confirmation email and not only on the last screen of an application.
Give help at the point where users need it. For example, clarify the purpose of a text field right above the text field.
Provide reminders for tasks with deadlines. For example, send an email reminder for appointments.

This principle is recognition rather than recall.

7. Support users of all experience levels

Allow shortcuts for experienced users while letting new users learn your digital product. For example, use auto-complete in a form so return users don't have to re-enter information. Give instructions so new users can learn how to fill out the form.
Add specific shortcuts for return users. For example, add a Skip introduction option for users who have read it before.
Let users customize their experience. For example, let users save their information in a long form, and return to it. For example, let users filter the view of complex or multidimensional content.

This principle is flexibility and efficiency of use.

8. Limit information, tasks, and visual design to the essentials

Focus on what users need the most. For example, a road detour page should only have information related to the detour itself.
Remove or de-emphasize information that users rarely or never use. For example, put legal disclaimers at the bottom of a page where they don’t interfere with key content.
Don’t use visual elements that distract users from their tasks. For example, avoid unnecessary animation.

This principle is aesthetic and minimalist design.

9. Help users identify and recover from errors

State the error using clear language and how to solve the error. For example, tell users they missed an empty field and must fill it out.
Make error messages stand out. For example, use bold red text and an alert icon.
Let the user fix an error right away. For example, offer auto-correct suggestions for fixing an address.

This principle is help users recognize, diagnose, and recover from errors.

10. Make it easy to get help

Where possible, make help available at the same point as the user task. For example, put a tooltip next to a form field to clarify the purpose of the field.
Make help easy to search for and focus it on the user’s task. For example, provide contact information at the top of the page.
List concrete steps to carry out. For example, tell users they need their account number when they call for help.

This principle is help and documentation.

Adapted from Nielsen Norman Group

We adapted the checklist from 10 Usability Heuristics for User Interface Design, Nielsen Norman Group.