Download USABILITY OF WEB SITE DESIGN

USABILITY OF WEB SITE
DESIGN
Magdalena Zalas
CONTENTS
• Usability
• ISO Standards
• Eye tracking
• Jakob Nilsen
• Web design
–
–
–
–
–
–
Page Layout
Home page
Content strategy
Navigation
Colors
Few more information
USABILITY OF WEB SITE DESIGN
WHAT IS THE USABILITY
USABILITY OF WEB SITE DESIGN
"Studies of user behavior on the Web find a low
tolerance for difficult designs or slow sites. People
don't want to wait. And they don't want to learn
how to use a home page. There's no such thing as a
training class or a manual for a Web site. People have
to be able to grasp the functioning of the site
immediately after scanning the home page—for a
few seconds at most”
Jakob Nielsen
USABILITY OF WEB SITE DESIGN
WHAT IS THE USABILITY
• Elegance and clarity
• Easy user interfaces
• Object is designed to make it for user:
– Easier to learn
– Efficiency of use
– Memorability
– Error frequency and severity
– More satisfying to use
USABILITY OF WEB SITE DESIGN
WHAT IS THE USABILITY?
• User-oriented not technology-oriented
• Make users easy accomplish their tasks
• Called User-Centered Design (UCD)
USABILITY OF WEB SITE DESIGN
DIFFERENCE BETWEEN USABILITY TESTING AND
USABILITY ENGINEERING
• Usability testing
– measurement of ease of use
– evaluate a product by testing it on users
– how real users use the system
• Usability engineering (UE)
– research and design process which ensures a
product with good usability
– making user-friendly interfaces
USABILITY OF WEB SITE DESIGN
QUESTIONS
• Who are the users, what do they know, and what can
they learn?
• What do users want or need to do?
• What is the general background of the users?
• What is the context in which the user is working?
• What has to be left to the machine?
• Can user easily accomplish task in given time?
• The disabled users can use it?
USABILITY OF WEB SITE DESIGN
ISO STANDARDS
USABILITY OF WEB SITE DESIGN
INTERNATIONAL ORGANIZATION FOR
STANDARDIZATION
•
•
•
•
Founded on 23 February 1947
seated in Geneva, Switzerland
Official language: English and French
157 members
• Member bodies (have voting rights)
• Correspondent members (countries that do not have
their own standards organization)
• Subscriber members(countries with small economies)
• ISO/IEC JTC 1 is Joint Technical Committee 1 of the ISO and the
International Electrotechnical Commission (IEC)
• deals with all matters of information technology
USABILITY OF WEB SITE DESIGN
ISO STANDARDS ABOUT USABILITY
• ISO 9126 Software quality mode
• In part about Quality Model of software
– Usability is a set of attributes that bear on the
effort needed for use, and on the individual
assessment of such use, by a stated or implied set
of users
• Learnability
• Understandability
• Operability
USABILITY OF WEB SITE DESIGN
ISO STANDARDS ABOUT USABILITY
• ISO 9241 Ergonomics of Human System
Interaction
– parts 110(old 10) and 11–17 deal with usability
aspects of software
– [Usability refers to] the extent to which a product
can be used by specified users to achieve specified
goals with effectiveness, efficiency and
satisfaction in a specified context of user
USABILITY OF WEB SITE DESIGN
EYETRACKING
USABILITY OF WEB SITE DESIGN
EYETRACKING
• Where are we looking?
• An eye tracker
– a device for measuring
• eye positions
• eye movements
– Measure o fixation
• small steps
• Technology
–
–
–
–
–
Directly observation of eye
Invasive mechanic methods
Video of eye movement
Electrooculography
Photoelectric method
ASL Eye Track 6000
USABILITY OF WEB SITE DESIGN
ALFRED YARBUS (1967)
•Pioneer ‘s study of saccadic
(simultaneous movements of
both eyes in the same
direction)
•"is dependent not only to
what is shown on the picture,
but also on the problem facing
the
observer
and
the
information that he hopes to
gain from the picture."
USABILITY OF WEB SITE DESIGN
EYETRACKING "HEATMAP"
• How much users look at different
parts of a Web page
–
–
–
–
Red areas- most often
Yellow areas- smaller fixation
Blue areas- very small fixation
Gray areas- no fixation
• F-shaped
– horizontal movement
– second horizontal movement
– vertical movement
USABILITY OF WEB SITE DESIGN
Ph.D. Jakob Nielsen
• Ph.D. in human-computer interaction (Technical University of
Denmark in Copenhagen)
• "the guru of Web page usability" (The New York Times)
• "the smartest person on the Web" (ZDNet AnchorDesk)
• "the world's leading expert on user-friendly design"
(Stuttgarter Zeitung, Germany)
• founded the "discount usability engineering”
• holds 79 United States patents how to make internet easier
USABILITY OF WEB SITE DESIGN
WEB DESIGN
USABILITY OF WEB SITE DESIGN
Page Layout
• Have no mess on your web site
• Importan things should be on the top
• The most importan things give on the top
center
• Allow user easy comparision of information
• High-to-low level of importance the
information
USABILITY OF WEB SITE DESIGN
Page Layout
•
•
•
•
Create a page no crowded by informations
Use consistent alignments
Use fluid layout
Avoid user mistakes
– Not create an ilusion about top and end of the site
•
•
•
•
Content should be visible without scrolling
Limit white place on page
Use frames
Avoid serif fonts
USABILITY OF WEB SITE DESIGN
USABILITY OF WEB SITE DESIGN
HOME PAGE
• The most important page on web site (first
impression)
• Clearly communicates the site's purpose
• Show all major options available on the page
• Key to show the quality of the site
• Should contain a limited amount of prose text
USABILITY OF WEB SITE DESIGN
HOME PAGE
• Access should be easy from every place in the
site
• It is clearly main page
• Limit length to one screenful
• Inform user about page redesign
• The panels should be narrow as well as clearly
recognized
USABILITY OF WEB SITE DESIGN
USABILITY OF WEB SITE DESIGN
CONTENT STRATEGY
• How much information is optimal
• Cost: how much time user spends to read
article
• Benefit: how much benefit units (value
information) user get from article
• Decision: do we want all or only the most
important information
USABILITY OF WEB SITE DESIGN
CONTENT STRATEGY EXAMPLES
Short articles: 105 b.u. per hour
Long articles: 167 b.u. per hour
2/3 short articles + 1/3 long articles:
181 b. u. per hour
Short art:600words(3min), 7 b.units
Long art: 1000 words(5min), 10 b.u.
USABILITY OF WEB SITE DESIGN
NAVIGATION
• Find and access information effectively and
efficiently
• On all pages should be navigation options
• Create the same scheme of navigation for all
pages
• Make a list of contents on long pages
• Make a feedback where user is in the page
• Use a color clue what user done
USABILITY OF WEB SITE DESIGN
NAVIGATION
• The best place for navigation is in the left
panel
• Make tab labels with error-free selection
possible
• Keep navigation on one screenful
• Use Appropriate Menu Types
– sequential (one open next)
– simultaneous (all are displayed)
USABILITY OF WEB SITE DESIGN
NAVIGATION
• Use site maps for Web sites with many pages
• Help users select correct links (glosses)
• Breadcrumbs allow user with complete the
task quicker
USABILITY OF WEB SITE DESIGN
SEQUENTIAL NAVIGATION
SIMULTANEOUS NAVIGATION
BREADCRUMBS
USABILITY OF WEB SITE DESIGN
COLORS
• Glaring colors distract attention
• Too much elements with the same color can
be irritate
USABILITY OF WEB SITE DESIGN
COLORS MEANING
Type of color
color
symbol
warm
red
Fire, love, passion
warm
yellow
Sun, light, focus, warm
warm
orange
Warm, vibration, citrus
cold
green
Nature, life, hope, balance
cold
blue
Calm, relaxing, harmony
neutral
black
Power, elegance, modern, evil
neutral
white
Chastity, perfect, good
neutral
gray
Sadness, conservatism, maturity
USABILITY OF WEB SITE DESIGN
FEW IDEAS
•
•
•
•
One color and hues
Two colors related but not similar
Mixed warm and cold colors
Use white background, dark letters and red
color to show something important
• Reduce colors to three
• Use colors from yours graphics and pictures to
make harmony
USABILITY OF WEB SITE DESIGN
NEVER
Use so similar colors
Use a colors which are almost identical on gray scale!
Use a gradient which makes text inposible to read
USABILITY OF WEB SITE DESIGN
USABILITY OF WEB SITE DESIGN
FEW MORE INFORMATION
• The most importan image: logo
• Introduce animation before begin
• Thumbnail versions of image shorten time of
downloading pages
• Images can help to understand subject
• Don’t use pictures like the background
USABILITY OF WEB SITE DESIGN
FEW MORE INFORMATION
• Show the data graphicaly when user must
monitor the changes in time
• Use images that look like real-world items
when appropriate
• Images should have meaning
USABILITY OF WEB SITE DESIGN
SOURCES
•
•
•
•
•
http://www.useit.com
http://en.wikipedia.org
http://www.nethut.pl
http://www.usability.gov
http://www.e-gineer.com/v1/articles/webwriting-for-many-interest-levels.htm
USABILITY OF WEB SITE DESIGN
THANK YOU
FOR YOUR ATTENTION
USABILITY OF WEB SITE DESIGN