When talking to someone in the offline world, stating the obvious is usually not a good thing.
If I told you that circles are round, for example, or that bald men have no hair, you would likely react with “Duh!”
Or consider this statement by funny man Steve Martin: “A day without sunshine is like, you know, night.”
Now if you’re a standup comedian and looking for laughs, then stating the obvious can bring a smile to the face of your listeners instead of an odd look.
In the online world, however, things are a little different.
Sometimes it is appropriate to make things obvious on your website, but not for the purpose of being annoying or funny.
Given the nature of the Internet and online reader behavior, it behooves you to make things as easy to understand and use as possible on your website.
That is the main idea of the book, Don’t Make Me Think, by Steve Krug, a usability expert. Why a lesson on usability in relation to writing engaging web content? Usability is crucial for user engagement.
Website usability made easy
In an earlier lesson, you learned some basic qualities of engaging content. One quality you don’t hear enough about in connection with engagement is usability.
Usability refers to how easy your website is to use. This quality ensures a positive user experience.
Poor web usability causes visitors to feel confused. And confusion is the enemy of engagement.
Your goal is to make things on your website as clear as possible so that people don’t have to think about what to do. Clarity is achieved not only with content, but also with all the other supporting elements on your website.
Usability is a broad subject. What follows are the fundamentals of website usability arranged under seven categories. Applying these best practices will ensure a positive user experience and improve engagement on your website.
Identity is your branding and company information. The three items under branding are crucial for orienting visitors and letting them know they are in the right place.
- Company name and logo are displayed prominently: Place in upper left corner of the header. Tells visitors who you are. Helps them know they are in the right place.
- Tagline explains purpose of site concisely: Located in the header near the logo, this identifies the target audience and states a tangible benefit.
- Value proposition is stated clearly on the page: Consisting of a headline and short block of text, this communicates the value you deliver and why people should buy from you.
- About page uses customer-focused content: Explains who you are and what you do from the reader’s perspective.
- Contact page allows easy communication. Provides all contact information for the company such as a contact form, live chat, email address, phone number, and physical address.
- Terms of service clearly states legal information: If you provide a service on your website, you should have a terms of service that states the legal information your visitors need to be aware of. Link to this in your footer.
Having clear navigation is critical to the success of your website. Like the signage in a store, it helps direct readers to different areas of your website.
- Located directly under the header or in the left sidebar. Don’t put in the right sidebar where readers are likely to ignore it.
- Uses conventional terms for labels or categories. For example, “Home,” “About,” and “Contact.” Don’t try to be clever or different with your labels. Save your creativity for your content.
- Groups similar items together under each category. This helps people see how your products and information are organized.
- Appears consistently on every page. This helps readers to stay oriented wherever they are on your site.
- Located at the top of the page. This lets readers see where they are in the site hierarchy.
- Uses the greater than symbol (>) between levels. This is a convention that readers have come to expect and understand.
- Last item is bolded. Boldface makes the page name prominent. This should not be a link. Similar to a “You are here” label on a map in a shopping mall.
- Text links are easy to recognize. Best practice is to use a distinctive color (blue is standard) and underlining.
- Visited links are in a different color. This should be a color that is distinctive and less intense, such as the standard purple.
- Phrasing is specific and uses active words. For example, “Download your free special report.” Don’t use generic labels such as “Click here” or “More.”
- Number of links is kept to a minimum in body text. Too many links are distracting.
- Links open in the same window or tab. Opening links in separate windows or tabs confuses many readers and annoys others.
- Links to non-text elements are clearly labeled. If you link to a PDF file, audio or video file, email address, or web application, clearly label them so readers will know what will happen when they click.
- There are no broken links. Obviously, broken links are not usable to your readers.
Having a search function on your website supplements the main navigation. This gives users the ability to find specific information quickly and easily.
- Positioned near upper right corner on every page. Alternatively, you can place at the top of the left sidebar.
- Uses a simple search form with a search button next to it. The search function should not be a link to a search page.
- Textbox is wide enough so people can see what they type. Recommended size is 30 characters.
Follow these guidelines to ensure that your website is accessible to everyone, including people with disabilities.
- Number of typefaces is limited to two per site. More than that is distracting to site visitors.
- Type size is large enough to be read easily. This will improve readability of body text. Also, allow your readers to adjust type sizes on the website.
- Font styles (bold and italic) are used sparingly. Using bold and italic text for emphasis should not be overdone. Avoid underlining text, as this looks like a link and may confuse readers.
- Dark text is used on a light background for high contrast. This improves legibility of the type face.
- Page elements do not rely on color alone to communicate. Readers who are color-blind will have difficulty understanding meaning based on color codes that communicate information.
- Images are relevant to the message and meaningful. Don’t just add a picture for decorative purposes.
- Graphics are edited for appropriate size and resolution. Large files sizes for graphics slow page load time.
- Alt tags are provided with descriptive text. This will help with visually impaired readers who use a screen reader.
If you don’t understand the technical side of usability, partner with your IT department to implement these essential best practices.
- Website is mobile-friendly. Having a responsive site will benefit you as well as people using smartphones and tablets. If your site is not responsive, it will not position well in the search results.
- Web pages load quickly. A fast page load speed is important for usability and SEO. Make sure your site pages load in less than 3 seconds.
- The 404 error page is customized. Don’t use generic messages. Make this page useful to the visitor by including a search box and links to other pages on your site.
- Friendly URLs are used. Adjust the URL settings in your content management system (CMS) to make them display in a format that can be read by humans.
All the foregoing elements are there to support the content on your website. Here are some content-specific guidelines to ensure readability.
- Messaging is reader-focused. Use the second person point of view (“you”) when appropriate and write about what interests your reader.
- Text is written in plain language. Use simple words and sentence structure. Avoid jargon or technical language.
- Key messages are above the fold. Place the most important information at the top of the screen.
- Body text is scannable. Use simple formatting techniques to make text easy to scan.
- Number of choices is kept to a minimum. Too many choices only confuse readers. They are likely to make a suboptimal choice or make no choice at all.
- Unnecessary words are omitted. A wall of words is daunting, especially online. Communicate with the fewest possible words.
Although this lesson focuses on written content, I am including multimedia for completeness. These elements must be taken into consideration for usability and engagement.
- Flash and animated elements are avoided. The iPad and iPhone do not support Flash. Animated elements are distracting to readers.
- Audio and video is set to manually play by default. Having your audio or video play automatically is annoying. Allow your site visitors the ability to control playback and volume.
- Transcripts for audio and video are provided. Adding transcripts is not only good for accessibility, but also for those who prefer to read rather than listen to or watch a recording.
This has been a long lesson. Whole books have been written on the topic of web usability. As a bonus, I have condensed this post into a handy checklist for you to use when evaluating your website for usability issues.
Download your free Website Usability Checklist (PDF). Use this to solve common usability problems on your website before you conduct user testing. Share this with your colleagues and friends.
- Krug, Steve. Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability. New Riders, 2014.
- Usability.gov – a one-stop resource for user experience best practices and strategies.
- Nielsen, Jakob. 113 Design Guidelines for Homepage Usability. Nielsen Norman Group, 2001.