Usability

Shivani Parikh

Usability Guidelines
Form Labels Work Best Above The Field

The F-Shape Pattern

Nielsens eye tracking research has demonstrated that users read web content in an F-shaped pattern.

The F-shape reading pattern refers to the viewing order: users start by reading across the top line and then look down the page a little and read across again and then continue down the left side.

Usability Guidelines
Most Users Do Not Scroll Blue Is The Best Color For Links The Ideal Search Box Is 27-Characters Wide White Space Improves Comprehension Effective User Testing Doesnt Have To Be Extensive Banner blindness Quality Of Design Is An Indicator Of Credibility Warn people when a task will take longer than a few seconds. E.g. IRCTC Provide thank you when forms are submitted Error prevention: Even better than good error messages is a careful design which prevents a problem from occurring in the first place. The need for instructions generally indicates bad design Color Blindness Photographs of people can induce trustworthiness by adding a human touch Effect of Font Size

Usability Guidelines
Effect of Domain Name Extensions (i.e. .com,.org, .edu,), no numbers, no hyphens, short domain names e.g. Section508.gov is still ok since its meaningful Usability studies have shown that 8.6 seconds is the maximum time web

users will wait for a page to download

We read web pages in a different manner to the way we read printed matter. We generally don't read pages word-for-word - instead we scan web pages. When we scan web pages certain items stand out: Headings, Link text, Bold text, Bulleted lists Did you notice that images were left out of that list? Contrary to the way in which we read printed matter, we see text before we see images on the Internet. For optimal website usability don't place important information in images as it might go unnoticed. Navigation-only pages (such as the home page) can be viewed without scrolling Avoid Plug-ins

Usability Guidelines
Restrictions must not be placed on users Impossible to e-mail the link to someone else Problems with printing (pages should be in printable format) Users feel trapped if external links open in the same window The site automatically enters field formatting data (e.g. currency symbols, commas for 1000s, trailing or leading spaces). Users do not need to enter characters like or % Field labels on forms clearly explain what entries are desired

Text boxes on forms are the right length for the expected answer
There is a clear distinction between "required" and "optional" fields on forms Forms pre-warn the user if external information is needed for completion (e.g. a passport number, PAN no, SSN no)

Pull-down menus, radio buttons and check boxes are used in preference to
text entry fields on forms (i.e. text entry fields are not overused). With data entry screens, the cursor is placed where the input is needed.

Usability Guidelines
Data formats are clearly indicated for input (e.g. dates) and output (e.g. units of values). Forms allow users to stay with a single interaction method for as long as possible

The site makes it easy to correct errors (e.g. when a form is incomplete,
positioning the cursor at the location where correction is required). There is a visible change when the mouse points at something clickable The site makes it easy to correct errors (e.g. when a form is incomplete,

positioning the cursor at the location where correction is required)

Delivery costs are highlighted at the very beginning of checkout. The site is free of typographic errors and spelling mistakes. The content is up-to-date, authoritative and trustworthy.

The site contains third-party support (e.g. citations, testimonials) to verify

the accuracy of information. The site avoids extensive use of upper case text No horizontal scrolling should ever be given URL > 75 Characters

Usability Guidelines
Error Messages
All error messages should contain 2 parts: a description of the problem what the user needs to do to fix it Error messages should be written in the users language and should be easy to understand. Error messages should be concise. They do not need to include full sentences or the word please. Error messages should be consistent in look and behavior. They should have a specified style to enhance predictability and professionalism of the site or application. Error messages in a form can be red, but they also should have a secondary visual cue for color-blind users. One example is to use red, bold text. In long forms, field-level error messages should appear both at the top of the page in a summary and within the page, next to the fields with errors. This helps users find errors quickly. Error messages should validate all errors on a screen at once. To the extent possible, users should not have to fix a problem, re-select Save or Submit, then receive more error messages. Error messages should be displayed in context, not shown as pop-ups. Especially in the case of missing or incorrect data in forms, keeping the errors within the page provides the users with context for the errors where and when they need it. Error messages should not make the user feel stupid. Ensure that language is not accusatory or blaming.

Small Thumbnail Images of Big, Detailed Photos

Photo details
The left photo is from the whitehouse.gov site. It shows the U.S. President, the Secretary of the Interior, and the Director of the National Park Service walking in the Santa Monica mountains.

If I hadn't told you that, you wouldn't have known by looking at the thumbnail: It's just a photo of three people. You can't even really tell that they're in a park, let alone which one.

The right photo is from cnn.com, which usually does a great job with small images on the homepage.

This photo illustrated a story about flooding; in this case, you can clearly
see what's going on, even though the image is only 65 x 49 pixels.

No Prices
No B2C ecommerce site should make this mistake

Inflexible Search Engines

The Basecamp sign-up page has a smart trick. It has no website navigation aside from a home-page link. This keeps the user focused on the sign-up

process, without any distractions or means of leaving the page.

Exercise

Exercise

Exercise

Exercise

Exercise

left-aligned labels

Exercise

Exercise

Exercise

ThanK You!