10 Web Usability Tips

Written by Tuesday February 12th 2013

Usability is the most important function of every website. It doesn’t matter how attractive your site is. If it isn’t easy to use, it won’t engage your audience.

Usability is the most important function of every website. It doesn’t matter how attractive your site is. If it isn’t easy to use, it won’t engage your audience. While the following tips are the best practices that I’ve developed over several years, they’re open to interpretation and are simply what I believe is generally important. As technology continues to evolve, these tips will evolve as well, but the main concepts and principles will stay the same.

1. Typography

I cannot stress the importance of good typography enough. Your website must convey the relevant information in the most effective and aesthetically pleasing way possible. You accomplish that through good type.

Size: While designers love SMALL, ALL CAPS, SANS-SERIF, it is awful for readability on the web, especially with the rise of mobile users. For body copy, I’d recommend nothing smaller than 13px and a serif font for overall readability.

Space: Kerning and leading are technical terms that refer to the spacing between the individual characters and the lines of text, respectively. Both are incredibly important in overall readability as well as actual content comprehension. So space your type out, but not too much, and watch as your users actually read your content.

Color: Pay attention to the contrast between your text and the background color. Most of this is common sense, but you don’t want your users straining their eyes to read your content. Don’t use two colors that have similar chroma (the intensity or saturation of the color). Use spot colors to call attention to important headlines or call to actions, but don’t overwhelm the user with too many colors or variations.

BRO_Usability_Typography
Compare Information Architects beautiful typography against CNN’s Technology Section. iA uses a massive 21px serif font with 32px line-height for body copy.

2. Scanning and Skimming

You want to keep your content as concise as possible. Your users should be able to easily skim your content. This means using titles, subheadings, bold type and color to convey the relevant information in as few words as possible. It’s estimated that, on average, users only read the first eleven characters of titles and calls to action. Don’t use fluff, make every word count. For example, instead of using “Continue to Checkout” use “Checkout Now.” It’s shorter and to the point.

BRO_Usability_SkimmingLeft

 

3. Important Things to the Left

In the Western World, users instinctively start reading at the top left of each page. As people scroll, they also spend the majority of their attention focused on the left side of the page. Jakob Nielsen estimates that users spend 69% of their viewing time on the left side of pages. So plan accordingly. Lay everything out with this key concept in mind, placing important content and links towards the top left of pages.

BRO_Usability_Left
“Heatmaps from user eyetracking studies of three websites. The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn’t attract any fixations” (Nielsen, 2006).

 

4. Use Whitespace Effectively

When used properly, whitespace makes your content more digestible. Proper left and right margins around copy, as well as space between paragraphs, increases your audience’s comprehension of your content. Text that doesn’t have room to breathe is intimidating and will largely go unread by your users. Whenever you can, break up large blocks of copy with lists, images, and quotes. Use whitespace to group sections together and differentiate them from others to create hierarchy.

BRO_Usability_Whitespace

5. Consistency

I preach consistency in all walks of life. From fitness to finances to web design. Making the correct decisions compounds over time. With websites, develop a system and stick to it. Websites are usually composed of a header, some content, and a footer. The header and the footer should be the same on every page. Same with the design of the titles, subheadings, and buttons. You don’t want to confuse users by changing your system from page to page. Develop a uniform page structure so your users will know where all the important page elements are.

BRO_Usability_ConsistencyThe system we developed for the new brolik website.

 

6. Responsive Design

The consumption habits of your users have undergone a serious change over the last few years. There has been a considerable shift from desktops towards tablets and mobile devices. To appeal to this new audience, you need to optimize your site for these new devices. Problem is, there’s an ever increasing number of different screen sizes. The solution is to make your website seamlessly adapt to any screen size with responsive design.

BRO_Usability_Responsive

Responsive design uses media queries to create a flexible grid that adapts to the width of the screen. Columns and images will shrink and eventually stack as the screen’s width gets smaller. Go ahead and resize this window to see it in action. This approach allows you to have one website, driven by one set of the code, that adapts to any current and future screen size with ease.

More Reading:
Responsive Design in the Real World (Part 1)
Responsive Design in the Real World (Part 2: For Designers and Coders)

 

7. Clear, Simple Navigation

Good navigation should be simple and intuitive. Position it at the top of every page and keep it consistent throughout your site and limit the number of options. You don’t want to overwhelm your users with too many choices. Your logo should be in the top left of the menu, not too big, and it should link back to the homepage. Don’t say “Company Information and Team Bios” when a simple “About” will suffice. It’s also fairly common for “Sign Up” and “Sign In” links to be in the top right of each page if applicable. BRO_Usability_Navigation

 

8. Rich Content Footer

I’m a big fan of informative footers. It’s free space tucked away at the bottom of a site. Why not use it to the user’s benefit? Include a sitemap of at least the major site links and contact information, with email, phone number, and physical address if applicable. Reinforce the branding with the logo, a legal copyright message, and your mission statement or quick “about” blurb. This is also the place for social media icons and any other relevant information that your users would quickly want access to, like a site-wide call to action.

BRO_Usability_Footer

 

9. Linear Forms

From registration to check out, collecting user information through forms is an important part of many websites. Users fill out your forms from top to bottom, so it makes sense to have them flow accordingly. It’s a good idea to place the labels directly above the relevant input. Keep the forms simple to avoid distracting your users.

Also, avoid placing two forms directly next to each other. While space saving, it’s not a natural movement for the user. Highlight the active form field with a color shift or an inner shadow or an outer glow. Mark the required fields appropriately. Also, make your forms as short as possible. Don’t require a telephone number if you don’t absolutely have to.
BRO_Usability_LinearForms

 

10. Short, Descriptive URLs and Permalinks

Having a short domain name and clear and descriptive URLs makes your site easier to remember and link to. You’re assuring your users what they’re about to read. If you can, hide the page extension with your .htaccess file. Non-nerds, disregard this:

RewriteRule ^([^\.]+)$ $1.php [NC,L]

The URL brolik.com/about just looks better and more professional than brolik.com/about.php.

 

Conclusion

Every element on your website should add to the overall user experience. From the overarching key concepts to the small details, your primary focus should be on usability. You’ll create a more satisfying experience for your users that will ultimately lead to more conversions. Now, analyze your site and keep these tips in mind to see how it measures up.


About Alex Caldwell

As the Art Director, Alex manages the user experience and visual design for Brolik's web and branding clients. He is in charge of creating brand identities, designing UI/UX systems, and developing the front-end of Brolik's responsive websites. Alex started at Brolik as a design intern in 2008. After graduating in 2009 from Philadelphia University with a degree in Graphic Design Communications, he joined the team full-time as the Art Director. With a background in graphic design and a love for typography and minimalism, Alex is a stickler for tiny details that elevate projects to the next level. Follow Me on Twitter. Connect with me on Linked In. Follow me on Google+.

Like what you just read?

Sign up for updates whenever we post a new article.    

Leave a Reply

Your email address will not be published. Required fields are marked *

HVEWD

Please type the text above:

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

BRO_Usability_UX