in Business, Design, Development, General, Uncategorized, User Experience

US Web Design Standards: Offering a clear and consistent user experience across websites

The most important objective for any business website is that it should be attractive, clear, consistent and user friendly with good functionality and easy-to-follow navigation. When it comes to government websites in the US, a country that hosts some of the top tech companies in the world, you’d think that they would be the most ideal and optimal websites. But sadly, that is not the case. When American people try to access government services websites they face a lot of problems due to inconsistency in design and interaction patterns as also confusing navigation, all of which contribute towards a poor user experience, causing frustration.

Focussing to maintain simplicity, clarity and consistency across all government services websites, US Digital Service in collaboration with 18F has come out with “U.S. Web Design Standards”, a set of guidelines for visual styles and common UI components and patterns to create attractive and easy-to-use websites.

The new design standards have been created with an aim to fulfill four goals:

1. Making the ‘best’ thing the ‘easiest’: Simple easy-to-use tools designed to help designers and developers create high quality websites.

2. Out of the box accessibility: Creating tools that meet high standards of 508 compliance and ADA accessibility, from colors to code.

3. Flexibility: Developing easily adaptable patterns and designs to give consistency across different devices and also across different government websites, while allowing agencies to customize according to their unique needs.

4. Using best practices: Using “tried-and-true best practices” after reviewing, testing, evaluating and repurposing patterns, code, and designs from several government and private style guides.

U.S. Digital Service and 18F designers and developers have together built tools that will provide a beautiful online experience to users. The U.S. Web Design Standards are designed to “set a new bar for simplicity and consistency” and officially support Internet Explorer 9 and above but can also support other browsers through progressive enhancement. The standards include a Visual Style Guide and a library of open source UI Components.

Visual Style Guide

This guide offers a common visual style but is flexible enough to be applied to a wide variety of digital platforms. The styles are clean, aesthetically modern and pleasing, and confirm to high standards. The styles promote a sense of credibility and trust among the users.

Typography and color palette provided in the guide offer consistency, flexibility and adaptability, meeting a wide variety of layout needs.  Of course, you can customize this style guide as per your requirements, but consistency in look and usability should be maintained as far as possible.

Typography

To give websites “clear and consistent headings, highly legible body paragraphs, clear labels, and easy-to-use input fields”, two open source font families Source Sans Pro and Merriweather have been used. These two fonts provide good legibility and can adapt to several different visual styles. Different pairings of both the fonts have been used to offer both traditional and contemporary design styles.

Color palette 

The color palette is simple, minimalist, flexible and distinctly American, meeting the high 508 color contrast requirement standards.  The colors support a range of visual styles which communicate warmth and trustworthiness to the user with their “bright saturated tints of blue and red, grounded in sophisticated deeper shades of cool blues and grays.”

UI Components and patterns

The guide provides HTML mockups of commonly used UI components that follow the visual style guide. The specs of each design such as margins, padding, line height, stroke weight etc., can be viewed live on the website using the browser’s developer tools. All the designs in a variety of design file formats can be downloaded.

The website says, “The UI components are built on a solid HTML foundation, progressively enhanced to provide core experiences across browsers. All users get critical information and experiences. New browsers get the prettiest experiences, while older browsers get less pretty, but usable ones. If JavaScript fails, users will still get a robust HTML foundation.”

Grid: Structure to the website is provided by the 12-column responsive grid. A grid layout enables visitors to read the page more quickly. Using a single grid system for the entire site is recommended.

Buttons: Several primary and secondary button styles are available to signal actions which you want the visitors to take such as sign up, download or log out. Usually, primary buttons are used for actions that take the user to the next step and secondary buttons are used for actions that are carried out on the current page.

Labels: Labels are used to draw the visitor’s attention to a new or important content on a page that they might otherwise miss.

Tables: You can use tables when you want to show information in a tabular form such as statistical data. Tables help users decipher information easily. They can be bordered or borderless.

Alerts: Alerts are used to inform users about important or time-sensitive changes such as error status, success status, warning status or information updates.

Accordions: These are vertically stacked list of headers having show/hide functionality to reveal or hide additional content. When the user clicks a label, it expands to show the content within. Accordions can also be bordered or borderless.

Form controls: Form controls are various input elements that allow a user to enter/select information on a page. They include text input area, date input, dropdown lists, radio buttons, checkboxes etc.

Form templates: The guide also provides templates for some commonly used forms by government websites. These templates can be customized but it is best that they meet the accessibility requirements as per the guidelines. Form templates include name form, address form, sign-in form and password reset form.

Search bar: A search bar is typically a single line text box usually accompanied by a search button. The user can enter a query in the form of a keyword or a phrase and submit for searching specific content.

Side navigation: It is a hierarchical, vertical navigation to be placed on the side of a page. Horizontal navigation and page headers are currently under development.

Footers: Footers help users who don’t find what they want even when they reach the bottom of a page.

Having a consistent feel across the whole website is very important for a great user experience. One can take inspiration from the US web design standards to build one’s own website that has clarity, consistency and usability.

Nexibeo specializes in creating and managing beautiful, responsive websites that can attract visitors, generate leads, grow sales and drive revenues. We can certainly comply to the new US Web Design standards. If you want to build a new website or overhaul your old one, we are the team you are looking for. Contact us to know more.