Government Websites Best Practices: User Experience Design

1. Top 10 performing government websites in 2021 include state.gov, whitehouse.gov, sba.gov, boston.gov, coveredca.com, govt.nz, saveourwater.com, dmv.ca.gov, usaspending.gov, and canada.ca.
2. Top performing websites combine best practices such as simple design, clear affordances, easy navigation, engaging visual design, plain language writing, smooth interactions, custom design, website-optimized branding, and high-quality graphics.
3. Websites that earned poor ratings prioritized the content about their organization instead of user-centered information, featured automatically advancing photo carousels, missed breadcrumbs and the current page signals, tried to provide more than one content topic on most of the pages, featured generic and poor quality photography, illustrations, and icons.
4. To improve your website user experience, regularly review website analytics, learn how people use the website, improve page loading speed, rewrite high-profile pages, develop an accessible design system.

Skip to the subtopic of interest:

1. What are the areas you should improve?
2. Examples of excellent government website user experience design
3. User experience best practices
4. What to avoid in the website UX

We see the most room for improvement in the areas of content quality and user interface design. Users expect content to be approachable, easy to understand, and clear. Compared to websites and mobile applications, some government websites are significantly less appealing and as such appear as not up-to-date.

In February 2021, we evaluated over 300 California, U.S., and international government websites for user experience using a derived methodology that combines SUPR-Q (Standardized User Experience Percentile Rank Questionnaire) and evaluation frameworks used in web and interactive design competitions, such as IADAS’ Webby Awards.

We looked at the content quality, interaction, ease of navigation, attractiveness, cleanliness, and simplicity of the layout. We scored the five metrics on a scale from 1–5 for a maximum of 25 total points.

We also assessed the level of visual design and if websites featured custom design outside of the standard template. We noticed details such as a modern design, distinctive branding, and authentic and engaging photography. We wanted to evaluate how, if at all, a more custom solution has an impact on the user experience scores, and if the two are correlated. (Turns out they are: websites that received high ratings from our experts also implement user experience best practices.)

A portal to many useful resources for international communities, including travelers, visa applicants, job seekers, students, and businesses, state.gov is aesthetically a well-designed website — combining typography, layout, and color from graphic design, with interactive elements and mobile-friendly design.

The White House website is straightforward and easy on the eye. Information is broken down into bite-size pieces and laid out in a streamlined single-column layout. This makes it easy for visitors to read the information on a range of devices, from mobile phones to tablets and large desktop monitors.

The top-performing websites above combine best practices, such as:

1. Simple design. The simple design usually comes off as attractive, unless oversimplified. But more importantly, using fewer attention-grabbing elements on the page reduces memory strain and choice overload, making the communication and messaging clear and easy to follow.
2. Clear affordances. In the user interaction world, affordances are hints and cues on how an interface element can be used. Successful websites offer many affordances throughout the page, such as navigation cues, interface graphics, and linguistic and pattern affordances.
3. Easy navigation. Easy navigation steers the user toward the correct information they are looking for. This includes providing breadcrumbs and intuitive dropdown options, as well as matching navigation and link labels to destination page titles. On the topic of easy navigation, as long as the user can follow a clear information scent, they don’t mind exploring multiple pages going beyond the never-proven three-clicks rule.
4. Engaging visual design. In most of our top performers, visual design is accomplished by appropriate iconography and authentic photography. A good visual design directs the user to the task they need to accomplish and contributes positively to content findability.
5. Plain language writing allows users to easily read, understand, and use the website. Good patterns include using pronouns to speak to the audience, active instead of passive voice, and simple verb forms.
6. Smooth interactions between the users and the website with every interactive element, dropdown, button, and link. In successful websites, animations are used in moderation, and only to provide meaningful user interface feedback.
7. Custom modern design, website-optimized branding, and high-quality graphics. Top performers pay attention to details such as optimizing the user experience on mobile or selecting authentic graphics. For example, the state.gov website drops the seal from the header on mobile devices and offers convenient mobile navigation. The usaspending.gov website features an animated illustration of budgetary details in the hero area, which is both attractive and useful.