Usability


This page looks at usability in the context of web design.


Readable Scanable pages

People do not read websites, they scan them; the eyes generally start at the upper left, scan to the right, track back to the left again, a bit lower this time, and scan to the right, in a pattern that has come to be known as the “F” pattern.
  • Chunks of Text

    so we need to design with that in mind, breaking text into paragraph chunks, and using headings so visitors can see what the text is about quickly.
  • Headings

    A clear, h1 heading for every page helps the visitor understand where they are at any time. Even if the menu has dynamic highlighting to let the user know where they are at any moment, an h1 heading helps them confirm where they are beyond any doubt. The h1 heading has the additional benefit of helping search engines to properly and most advantageously index a site page.
  • Margins:

    Adding Margins to the left and right of the text has been proven to increase reading comprhension. See the study here: http://psychology.wichita.edu/surl/usabilitynews/62/whitespace.htm
  • Lines of Text:

    Different studies have found different results, but overall tend to suggest that lines of text should be 50-75 characters long for best readability. Shorten your lines of text by adding padding, margins, divs, or changing font size. This adjustment in text line length will work hand-in-hand with your margin adjustments for readability. Here is a link to one such study: http://psychology.wichita.edu/surl/usabilitynews/42/text_length.asp
  • Line Height:

    Line height is the distance between lines. It is important to realize that the longer your lines of text get, the more line height you need so that readers can easily locate the next line of text. Line height should also increase as font size increases to avoid crowding. Most experts say that line height should be somewhere in the neighborhood of 130% to 150%. Check here for a much more involved look at line height: http://www.pearsonified.com/2011/12/golden-ratio-typography.php.Note: Line height can be written in percentage (130%), units (1.3em), or unitless (1.3). Check here for an argument for unitless line heights: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
  • Text Justification:

    Text that is justified left (sometimes referred to as “ragged right”) has been found to be more readable than text that is right-justified, centered, or fully justified (aligned on both the left and right sides). Read more about it here: Full document – http://kaiweber.wordpress.com/2010/05/31/ragged-right-or-justified-alignment/ or more in brief here: http://kaiweber.wordpress.com/2010/05/31/ragged-right-or-justified-alignment/
  • Serif or Sans-Serif:

    This study found that serif fonts were better for reading speed and comprehension. http://psychology.wichita.edu/surl/usabilitynews/52/uk_font.htm
  • Sans-Serif – What is optimal:

    This study found that “humanist” sans-serif font types, where characters were more unique from each other, were more readable and thus could potentially save lives when being read by mobil users while driving (not that anyone should be reading text while driving!). http://uxmovement.com/content/how-sans-serif-typeface-styles-affect-readability/

Muddling Through

Also it is clear from studies that users do not figure out what is on the web page, they "muddle through", quickly trying to find the stuff they need as quickly and with as little effort as possible.

First Reasonable Plan

Studies have shown that users do not, as previously surmised, consider several plans for how to approach a website; instead, they look quickly, then launch the first reasonable plan they can come up with. For this reason (and others), websites should not make the visitor “think” any more than is absolutely necessary.

Conventions are Useful

The use of conventions, such as having a main menu at the top of the page, help pages to guide the user. The user knows where to look for such things because of past experience with pages which used the same conventions. Thus, when possible, hold to design conventions; and if you are going to break design conventions, you should not only have a good reason, but do some testing with real users to make sure that there are not usability issues with your new design.

Buttons that look like buttons

If the user ever has to ask themselves "is that a button", then it is likely because of poor navigation design. A button should look like a button, and it should act like a button.

Related Functions Related Visually

When laying out the page, parts of the page that are related logically (for example, the main menu), should be related visually (by being the same color, being in the same general area, using the same font, and so on).


Too Much Stuff is Bad

Too many elements on one page makes the page busy (this is called "noise"). Too much noise is distracting, and makes decision-making harder for the user. Ultimately, users experiencing too much noise will leave for fairer pastures.


Number of Clicks

As the user navigates the site, it might take two or five clicks to get to what they are looking for. What is critical here is not the number of clicks, but how hard each click is to figure out.


Hierarchy in Design

When designing a website, the users are in such a hurry that it can be compared to driving by a billboard at high speed. So, we need to design our sites as if they are billboards, using hierarchy – that is, the most important stuff should be bigger and come first, and the least important stuff should be smaller and lower in the frame.


Persistent Navigation

The site navigation should be persistent, that is, it should almost always be the same on every page, so users can find and use it quickly. The exception to this might be cases such as the home page where it may appear bigger or differently, or a page that uses forms like the contact page.


Header or Logo links to “home”

In recent years it has become a functional convention that clicking on the header or the site logo brings the user back to the home page, or index.html


Teleporting

Clicking on buttons and instantly going to different places is like teleportation, because we don’t see the relationship between where we were and where we are like we do when we walk or drive between two locations. So we need to help the user see where they are each time they arrive at a page. One way to do this is with "current page" menus that show what page you are currently on by highlighting or changing the color of that menu selection; another way is by using headings at the top of each page that describe the contents of that page – when these are used, they should be prominent and well-placed on the page.


Sameness in Link and Destination

When the user clicks on any given page, for example a page called "Tools", they should end up on a page with the same name or heading, not on a page called "Equipment" or something else. Changing terms in the midst of navigation is confusing to users.


Pull-Down Menus are Good and Bad

Pull-down menus are good in that they save space, but bad in that they hide valuable information from the user, and can be "twitchy" in that they sometimes don’t work well or can disappear too quickly for the user to use them properly.


Taglines

The site should have a good tagline, which gives the site branding and characterises the enterprise.


The Home Page

The buttons that lead to the home page should be in sight at all times, and the home page should explain what the site is, why the user should be here, and what the user can do here.


A Worthy Book

Some of these ideas were adapted from Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition, a great web design resource.