Usability 2009 J T Burns1 Usability & Usability Engineering.
Usability 2 ppt
-
Upload
vishalastronomy -
Category
Documents
-
view
221 -
download
0
Transcript of Usability 2 ppt
-
7/30/2019 Usability 2 ppt
1/23
UsabilityShivani Parikh
-
7/30/2019 Usability 2 ppt
2/23
Usability Guidelines
Form Labels Work Best Above The Field
http://www.tumblr.com/ -
7/30/2019 Usability 2 ppt
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.
-
7/30/2019 Usability 2 ppt
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
-
7/30/2019 Usability 2 ppt
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
-
7/30/2019 Usability 2 ppt
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/30/2019 Usability 2 ppt
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
-
7/30/2019 Usability 2 ppt
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.
-
7/30/2019 Usability 2 ppt
9/23
Small Thumbnail Images of Big, Detailed Photos
-
7/30/2019 Usability 2 ppt
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.
-
7/30/2019 Usability 2 ppt
11/23
No Prices
No B2C ecommerce site
should make this mistake
-
7/30/2019 Usability 2 ppt
12/23
Inflexible Search Engines
-
7/30/2019 Usability 2 ppt
13/23
http://www.tumblr.com/ -
7/30/2019 Usability 2 ppt
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 -
7/30/2019 Usability 2 ppt
15/23
Exercise
-
7/30/2019 Usability 2 ppt
16/23
Exercise
-
7/30/2019 Usability 2 ppt
17/23
Exercise
http://chrisglass.com/404 -
7/30/2019 Usability 2 ppt
18/23
Exercise
-
7/30/2019 Usability 2 ppt
19/23
Exercise
left-aligned labels
-
7/30/2019 Usability 2 ppt
20/23
Exercise
http://www.readoz.com/ -
7/30/2019 Usability 2 ppt
21/23
Exercise
-
7/30/2019 Usability 2 ppt
22/23
Exercise
-
7/30/2019 Usability 2 ppt
23/23
ThanKYou!