Usability 2 ppt

7/30/2019 Usability 2 ppt

1/23

UsabilityShivani Parikh


2/23

Usability Guidelines

Form Labels Work Best Above The Field
http://www.tumblr.com/


3/23

The F-Shape Pattern

Nielsens eye tracking research has

demonstrated that users read webcontent 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.


4/23

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 thankyou 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 humantouch

Effect of Font Size


5/23

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


6/23

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.


7/23

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 aspossible

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


8/23

Usability GuidelinesError 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 tounderstand.

Error messages should be concise. They do not need to include full sentences orthe 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 orapplication.

Error messages in a form can be red, but they also should have a secondaryvisual 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 thepage in a summary and within the page, next to the fields with errors. This helpsusers find errors quickly.

Error messages should validate all errors on a screen at once. To the extentpossible, users should not have to fix a problem, re-select Save or Submit, thenreceive more error messages.

Error messages should be displayed in context, not shown as pop-ups. Especiallyin the case of missing or incorrect data in forms, keeping the errors within thepage 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 notaccusatory or blaming.


9/23

Small Thumbnail Images of Big, Detailed Photos


10/23

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.


11/23

No Prices

No B2C ecommerce site

should make this mistake


12/23

Inflexible Search Engines


13/23
http://www.tumblr.com/


14/23

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.
http://www.basecamphq.com/signup


15/23

Exercise


16/23

Exercise


17/23

Exercise
http://chrisglass.com/404


18/23

Exercise


19/23

Exercise

left-aligned labels


20/23

Exercise
http://www.readoz.com/


21/23

Exercise


22/23

Exercise


23/23

ThanKYou!

Documents

Usability 2 ppt