Mar 14, 2010
The 5 C’s of Website Usability
(5 Things Everyone Must Know About Good Web Design)
I spend a lot of my day working with all kinds of people to scope, design, code and deliver websites. I work with people having many different skill sets and coming from all kinds of disciplines. Of all of the challenges that I face in the process of getting from the conception of a website to complete, the toughest, and often-times the hardest to articulate is the concept of good usability.
I’ve put together 5 items that I believe everyone who is thinking about, in the act of or has recently completed a website should know about usability and why it is so important to you, and your end user.
- Copy (too much, too little, too complicated, too dense)
It’s usually too much, copy that is. I believe that content is king, but content does not always mean a lot of copy. It’s very important to not loose perspective of web behavior when writing messaging and content for a website. You have about 3-5 seconds to provide an engaging experience while a user is deciding if they are going to hit the “back” button or close your site. In that time, you have to visually engage them and be able to deliver some type of scannable messaging in that window. To do this, write your copy so that it’s skimmable. Make use of headlines, subheads, bullets and bolding. The length of copy is very important as well. Unless you are writing long-format editorial or scientific content, you should break your copy into digestible bites. If the content still becomes too cumbersome, consider breaking it into multiple pages (which will help with natural search-engine optimization). - Creating a visual flow
Going hand in hand with copy is the visual flow. You should break your copy into easily scannable pieces and make use of headlines, subheads and bullets to further guide the user to your key points. This can also be greatly enhanced with images and graphic devices like block-qoutes. If you have a fair amount of copy you should be sure that the main focus of the page is close to the top. If the content runs long, you risk the copy falling “below the fold” or beyond what is shown in the browser window without scrolling down in the page. The eyes of your users should move from one paragraph to the other quickly and catching all of the primary messages and headings. - Call to Action
I am used to working with commercial content on the web. Very often the site owners want an action to be executed by the users. This action can be a purchase, registration, enrollment in a service or clicking on link to a section of the website where one of these actions can be made. Not all content creators have such a direct “call to action”. If your purpose is to educate people or share information a call to action may not seem as obvious, but there is reason to keep your users attention and draw them deeper into your site. You may want to have your readers learn more about your subject or click on links to other content on your site (as I have on the my own site). You may want to establish your credibility by having users look at your background or even continue to stay engaged by following you via social media. Regardless of your tactic, you want to keep your user engaged and do not leave them on a “dead-end” or with nowhere to click. - Color
From a usability stand-point readability is king. Regardless of your branding or corporate aesthetic, you should use a high-contrast field for type and call to action. Not only will you make your site accessible to someone who may be color-blind or using a device with a weak screen (like a mobile device), but you will also lessen reading fatigue. The most desirable design solution is to use very dark text on a white field (black and white), with a san-serif typeface designed for screen-reading (Arial and Verdana come to mind as a safe standard). Recently, the quality of computer displays and advances in the way that operating systems render text has presented serif typography as an option, but conventional wisdom still makes the safe choice a san-serif typeface. Avoiding type on top of images and patterns is also recommended. Although screen-readers can parse text separately, patterns can make text difficult to read and your audience may miss key messages.
Headlines and subheads should be presented as plain-text whenever possible. Although your use of special typefaces may be limited, you should avoid relying on images to present text. There are several reasons including search engine optimization and bandwidth, but the key reason is platform interoperability. With such a huge variety of browser and mobile options, being sure that your headlines are delivered is the primary reason to rely on tried and true methods for text presentation. There are several very promising solutions currently being developed to allow designers to use a much wider range of fonts and this will likely widen options for site owners and content creators. It is also important to avoid using images for headlines and subheads whenever possible. - Conventions
Nothing helps your users more than using conventional solutions for message delivery, navigation, interactivity and the location of content. Don’t avoid innovation or even completely new alternatives for how users can engage your content, but make sure that your solution is easy to adopt and that you don’t mistake “engagement” for turning off your users. A few examples that come to mind are hyperlinks: Traditionally hyperlinks are blue with an underline. Visited links change to purple and it’s very easy to scan a page for the next chance to move to new content. I think that we (users and content creators) have come a long way and we can move comfortably to an expanded visual vocabulary for links. You should make your links obvious. Make use of color, underlining, icons (or all three) and be sure to visually cue a user that they have already seen a particular URL by enabling a different visual label for “visited” sites.
Don’t hide your navigation or branding. The “inverted L” is a truth and users are conditioned to looking in the upper left-hand corner for navigation and branding. If you do engage users with compelling content, you would like them to know who you are and how to find out more about you! If you want a user to pay special attention to a call-out, make sure it’s in the top-left of your layout or in the left-hand edge of your design. This will dramatically increase the chances that it gets noticed and clicked on. Marketers have unfortunately trained users to avoid the right-hand edge of the screen with consistent placement of banner ads and unrelated content. Use this to you advantage and stack your messages towards the left.
Many of the usability tips mentioned above are proven methods to those designing and developing websites. Many of the tips outlined are things that successful designers ignore-successfully, but may be relevant to someone starting out or, if you’re having trouble with traffic or people “sticking” on your site, you should try. It’s a return to best practices, good design and appreciating your user’s time and attention.
Learn more about usability and the how it can make or break your next project:
Don’t Make Me Think by Steve Krug
Jakob Nielsen
25 Point Usability Checklist
Usability.gov Standards
