usability of web site design magdalena zalas. c ontents usability iso standards eye tracking jakob...

USABILITY OF WEB SITE USABILITY OF WEB SITE DESIGNDESIGN

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 USABILITYWHAT IS THE USABILITY


"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 NielsenJakob Nielsen


WHAT IS THE USABILITYWHAT 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


WHAT IS THE USABILITY?WHAT IS THE USABILITY?

• User-oriented not technology-oriented• Make users easy accomplish their tasks• Called User-Centered Design (UCD)


DIFFERENCE BETWEEN USABILITY DIFFERENCE BETWEEN USABILITY TESTINGTESTING AND AND USABILITY ENGINEERING 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


QUESTIONSQUESTIONS• 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?


ISO STANDARDSISO STANDARDS


INTERNATIONAL ORGANIZATION FOR INTERNATIONAL ORGANIZATION FOR STANDARDIZATIONSTANDARDIZATION

• 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


ISO STANDARDS ABOUT USABILITYISO 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


ISO STANDARDS ABOUT USABILITYISO 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


EYETRACKINGEYETRACKING


EYETRACKINGEYETRACKING

ASL Eye Track 6000

• 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


ALFRED YARBUS ALFRED YARBUS (1967)(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."


EYETRACKING "HEATMAP"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


Ph.D. Jakob NielsenPh.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


WEB DESIGNWEB DESIGN


Page LayoutPage 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


Page LayoutPage 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


HOME PAGEHOME 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


HOME PAGEHOME 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


CONTENT STRATEGYCONTENT 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


CONTENT STRATEGY EXAMPLESCONTENT 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.


NAVIGATIONNAVIGATION

• 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



• 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)



• Use site maps for Web sites with many pages• Help users select correct links (glosses)• Breadcrumbs allow user with complete the

task quicker



SEQUENTIAL NAVIGATION

SIMULTANEOUS NAVIGATION

BREADCRUMBS

COLORSCOLORS

• Glaring colors distract attention

• Too much elements with the same color can be irritate


COLORS MEANINGCOLORS MEANINGType 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


FEW IDEASFEW 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


NEVERNEVER


Use so similar colors

Use a colors which are almost identical on gray scale!

Use a gradient which makes text inposible to read

FEW MORE INFORMATIONFEW 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


FEW MORE INFORMATIONFEW 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


SOURCESSOURCES

• http://www.useit.com• http://en.wikipedia.org• http://www.nethut.pl• http://www.usability.gov• http://www.e-gineer.com/v1/articles/web-

writing-for-many-interest-levels.htm


THANK YOUTHANK YOU

FOR YOUR ATTENTIONFOR YOUR ATTENTION


usability of web site design magdalena zalas. c ontents usability iso standards eye tracking jakob...

Documents