US Web Design Standards: Guidelines For a Better User Experience

By Jennifer DeRome | October 14, 2015
Image
U.S. Web Design Standards: Guidelines For a Better User Experience

When I bought my first home, I was really excited. It was in pretty good shape, but a bit outdated. It needed a little freshening up and I was eager to make it my own. I went to the hardware store and stocked up on supplies. But when I unboxed everything at home, I realized that the previous owner had ignored industry building standards when making ‘improvements’ to the house. Counters weren’t the standard height; the plumbing came out of the wall at a weird angle. Basically, nothing fit. I had to customize everything to make it work. It was a lot more work, and in the end, didn’t look at all like I’d hoped. All because the previous owner didn’t want to abide by the industry standards.

When you think about it, a house is a lot like a website. You have to plot out the right navigation and flow for the floor plan so people know where to go and can find things easily. You wouldn’t put the laundry room in the attic and probably wouldn’t paint the walls dayglo pink. The folks that do this on the web are called information architects for a reason.

We’ve had building standards for a while, but as far as the web goes, there’s a little bit of everything out there. And one of the worst offenders is government institutions. I give you exhibit A: National Oceanic and Atmospheric Administration’s (NOAA) National Weather Service. Yikes.

Screen shot of NOAA's National Weather Service website

So it’s a welcome surprise that the U.S. Chief Information Officer (CIO) Council has recently released a new set of standards, guidelines, and open-sourced resources to help refresh government websites to make them not only more visually appealing, but more usable as well.

And while rules are all well and good when it comes to safety (like building codes), I wondered if applying standards to web design would have a stifling effect. How would a standardized approach impact a designer’s creative license? Would users be subjected to bland, cookie-cutter sites with no imagination? Or would the user experience drastically improve because designers and users alike would know what to expect from one site to the next, regardless of the company, industry, or its budget?

But after reading through just a bit of the guidelines I got that warm fuzzy feeling whenever I encounter good UX. Today I want to take a peek at a few of the standards the guideline outlines and how those standards can help improve the user experience—without stifling your creative spirit.

[clickToTweet tweet="Web design standards can help improve the user experience—without stifling your creative spirit." quote="Web design standards can help improve the user experience—without stifling your creative spirit."]

Alerts

Errors and alerts are an important part of the user experience—especially when it comes to sites like the ones the U.S. government manages. Users are typically trying to achieve pretty important tasks—like applying for health care benefits or downloading forms to file income taxes—so a lot goes into these messages, and the guidelines outline some basic UX best practices.

U.S. Web Design Standards' examples of helpful alert icons and colors.

My favorite piece of advice is this golden rule,

Be polite in error messages—don’t place blame on the user.

Accessibility

Accessibility is mentioned heavily throughout the standards, but I especially liked the section on text accessibility. It’s estimated that around 8% of men and 0.5% of women experience some form of color blindness. Choosing your site’s colors with accessibility in mind will help ensure all your users can find—and read—the information they’re looking for.

WCA (Web Content Accessibility) standards ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of at least 4.5:1. This ensures that viewers who cannot see the full-color spectrum are able to read the text.

The guide goes on to provide helpful examples of color palettes that adhere to this standard.

U.S. Web Design Standards' color palette suggestions.

Buttons

Button treatments get a lot of press, probably because there are about a zillion different ways to do them. Which is exactly why I love this guide. It provides clear, simple options for just about any situation you can think of.

U.S. Web Design Standards' button design suggestions.

And the guidance they offer on writing copy for buttons is great.

Make the first word of the button’s label a verb. For example, instead of “Complaint Filing” label the button “File a complaint.”

And,

Use sentence case for button labels.

UX for everyone

Standards don’t have to stifle creativity. By sharing best practices and implementing a uniform framework for websites, users and designers alike will enjoy a better experience. And when that happens, you can bet the user experience forecast for sites like NOAA’s will improve.  

Insights that drive innovation

Get our best human insight resources delivered right to your inbox every month. As a bonus, we'll send you our latest industry report: When business is human, insights drive innovation.

About the author(s)
Jennifer DeRome

Jennifer is a Senior Content Strategist for UserTesting. When she's not dreaming up new ways to connect with audiences, you can find her traveling around the world or enjoying a glass of wine with friends.