WEB I - 09 - Usability
-
Upload
randy-connolly -
Category
Technology
-
view
110 -
download
0
description
Transcript of WEB I - 09 - Usability
EASING INTO WEB DEVELOPMENTDEVELOPMENT9 USABILITY9. USABILITY
INTRODUCTION1HTML2
3 TABLES3FORMS4 FORMS4HTTP5 HTTP5CSS6 CSS6CSS FRAMEWORKS7DIGITAL MEDIA8
2 USABILITY9
Designing a Web SiteDesigning a Web Site3
Part 1: Site Design / Engineering concerned with usability
Part 2: Page Design / Art concerned with aesthetics (visual attractiveness) concerned with aesthetics (visual attractiveness)
What Do You Dislike About the Web?What Do You Dislike About the Web?4
or, what do you hate to see on a web page?
Usability MattersUsability Matters5
M f th thi d 't lik b t Many of the things we don t like about the web pertain to the usability of web sitesweb sites.
Usability is:D i i thi th t th k Designing things so that they make sense to the people who use them.
How easy is a web site to understand How easy is a web site to understand and use.
Usability in real lifeUsability in real life6
http://www.flickr.com/photos/rdolishny/2760207306
Usability in real lifeUsability in real life7
http://www.flickr.com/photos/johnswords/2717108560/http://www.flickr.com/photos/11759181@N04/1176026705/
Usability and Audience TypesUsability and Audience Types8
People visit a site for different reasons.
Thus, the type of audience affects usability.y Also, how people use the web has
changed significantly over the past changed significantly over the past ten years
Information Foragers
• users who are looking for a
Information Foragers
users who are looking for a particular piece of information.
• informavoresinformavores• concerned chiefly with usability
(how easy is it to find information).( y )
9
Information ForagersInformation Foragers10
Will rely on search engine to get to the “information patch” (i.e., web site) Will be seeking very specific “prey” (information) Because search engines make it easy to find patches, g y p ,
hunters will spend little time looking for prey
Even if hunters visit a site more often, they will still Even if hunters visit a site more often, they will still leave it quicker.
Surfers
• users who "stumble" across a site.d hi fl i h h i• concerned chiefly with aesthetics
(does this site look professional or interesting enough to continueinteresting enough to continue exploring this site).
• MinorityMinority
11
Types of Information ForagingTypes of Information Foraging12
A given user can, at different times, engage in different types of information foraging Known item seeking Exploratory seekingp y g Don’t know what you need to know Re-Finding Re Finding
http://www.boxesandarrows.com/view/four_modes_of_seeking_information_and_how_to_design_for_them
Known item seekingKnown item seeking13
Users who know what they are looking for, can describe it, and may know where to start. the user may be happy with the first answer they find
Prefer: Prefer: Search a z indexes a-z indexes navigation
Main virtue of site: able to answer user’s query fast
Exploratory seekingExploratory seeking14
Users who know roughly what they are looking for, can’t describe it, and likely don’t know where to start. They will usually recognize when they have found the
right answer, but may not know whether they have found enough information (i.e., may forage more)
Prefer: Navigation Navigation related links search search
Don’t know what you need to knowDon t know what you need to know15
Sometimes we don’t know exactly what we need to know. We may think we need one thing but need another or, we may be looking at a website without a specific , y g p
goal in mind.
Prefer: Prefer: Interesting content
Re-FindingRe Finding
f16
Users looking for things they have already seen. They may remember exactly where it is, or only
b h i i h li l id remember what site it was on, or even have little idea about where it was.
~40% of an individual’s searches are re finding ~40% of an individual s searches are re-finding searches (performing a search they have already performed in the past).*p p )
Prefer: breadcrumbs, recently viewed items, cookie support, etc breadcrumbs, recently viewed items, cookie support, etc Wishlists, shopping carts, etc
* Teevan et al, “Information Re‐Retrieval: Repeat Queries in Yahoo’s Logs”, SIGIR 2007
Other Browsing BehaviorsOther Browsing Behaviors17
Velocity of web navigation* 25% of all documents displayed for less than 4 seconds 52% less than 10 seconds “they [the participants] regularly just seemed to glimpse
over most of the information offered, before they perform their next navigation action.”
Consequence for usability?
* Weinreich et al, “Off the Beaten Tracks: Exploring Three Aspects of Web Navigation”, IW3C2 2006
Velocity of web navigationVelocity of web navigation18
Weinreich et al, “Off the Beaten Tracks: Exploring Three Aspects of Web Navigation”, IW3C2 2006
Other Browsing BehaviorsOther Browsing Behaviors19
Web site re-visitation is very common ~70%*-80%** of a user’s page visits are re-visits to a site. ~45% of a user’s page visits are re-visits to a page. * *** ~1 in 6 (16%) of visits are to Google*** ~ 60% of visits are to user’s top 10 site***
However, this data does vary markedly for different individuals
Consequence for usability?
** Cockburn et al, "Improving Web page revisitation: Analysis, design and evaluation," IT & Society 2003
*** Weinreich et al, “Off the Beaten Tracks: Exploring Three Aspects of Web Navigation”, IW3C2 2006
* Weinreich et al, “Web Page Revisitation Revisited: Implications of a Long‐term Click‐stream Study of Browser Usage”, CHI 2007
Part 1: Site DesignPart 1: Site Design20
Usability is perhaps the most important goal Usability is perhaps the most important goal in web design. If users cannot figure out how to use your site
easily some will leave your site never to returneasily, some will leave your site, never to return. Perhaps more importantly, a good user
experience creates trust in a site. In the web, users experience usability first and In the web, users experience usability first and
pay later; thus if site not usable, they will not purchase (or revisit) from your site. in contrast, outside the web, users generally buy
f h b l ( h k ) lfirst, then experience usability (think DVDs) later.
Factors Determining UsabilityFactors Determining Usability21
i. The response time (i.e., download time) for site/pages.ii. The organization system for site.g yiii. The navigation system used throughout the site.iv The content of the siteiv. The content of the site.
i. Response Timei. Response Time22
If your pages take a long time to download users If your pages take a long time to download, users will leave your site.
How long is too long?1 d i b i ( 1 second response-time between action (e.g., mouse click) and response (page loaded) is ideal. For most broadband users, that means about 200 KB10 d i h li i f k i i i 10 seconds is the upper limit for keeping user in site.
That means, any given page should be functionallyloaded in no more than ten seconds. 2006, webdesign.about.com
Nov. 1998, www.emarketer.com
% still waiting Load Time84% 10 sec51% 15 sec26% 20 sec
% Who Leave Load Time16% 10 sec49% 15 sec74% 20 sec
Source: Jakob Nielsen, Designing Web Usability, 1999
5% 30 sec95% 30 sec
Factors Determining Response Times
23
Average response time is determined by: Average response time is determined by: the speed of the user's connection to Internet the speed/load of the web server the speed of the server's connection to Internet load on the Internet (2-4 pm peak loads in
North America)North America) cumulative file size of the images and objects in
web pageWhi h f h f d h l Which of these factors do you have control over as a web designer?
Understanding Page SizeUnderstanding Page Size24
Again, page size is the cumulative file sizes of all the elements on a web page. This includes: the HTML file the image filesg object files (video, Flash)s
First Page of Site Response Time
randyc.gif 1K
bar.gif 3Kg
bio.gif 1Kbio_over.gif 1K
site.gif 1Ksite_over.gif 1K
id if 1Kidea.gif 1Kidea_over.gif 1K
for.gif 1Kfor over gif 1K
main.htm 4K
for_over.gif 1K
25TOTAL 16KDownload time @ 28.8 Kbps = 5 seconds
128 Kbps = 1 second
Subsequent Page of Site Response Time
Other images still in cache so no need to re-download
bio_bar.gif 3K
download
cv.gif 1K
cv.htm 4K
26TOTAL 8KDownload time @ 28.8 Kbps = 1.5 seconds
128 Kbps = 1 second
First Page of Site Response Time
menu.htm 1Kmain.htm 1kframeset.htm1K
5 images +roll-overs 60K
imagebar.gif 1K
imagmap gif 17Kimagmap.gif 17K
rollovers 4K
logo.gif 1K
27TOTAL 95KDownload time @ 28.8 Kbps = 32 seconds
128 Kbps = 7 seconds
Subsequent Page of Site Response Time
Other images still in cache so no need to re-download
artbar.gif 2K
artist.gif 8K
dot gif 1K
byname.gif 2K
dot.gif 1K
alphabet.gif 8K
ti t htm 20Kartist.htm 20K
28TOTAL 41KDownload time @ 28.8 Kbps = 15 seconds
128 Kbps = 3 seconds
ii. Organization Systemii. Organization System29
The way a site is organized also affects usability. Organization is important because a web site is about
information. Organization refers to the grouping of information. Grouping: providing paths to information by showing relationships.p g p y g p The trouble with relationships is that they are subjective.
Grouping ExerciseGrouping Exercise30
Group (organize) the following information:
refrigerator socks
b bureau living room di ti dictionary kitchen milk milk bookshelf bedroom bedroom
Grouping PossibilitiesGrouping Possibilities31
Alphabeticallybedroombookshelfrefrigeratorbureau
By SizeLarge
kitchen
By RoomKitchen stuff
refrigeratormilk
Living Room stuffbureaudictionarykitchenliving roommilk
living roombedroom
Mediumrefrigeratorbureau
Living Room stuffdictionarybookshelf
Bedroom stuffsocks
socksbureaubookshelf
Smallsocksdictionary
ilk
bureau
By hierarchical locationmilk
yKitchen
refrigeratormilk
Living Roombookshelfbookshelf
dictionaryBedroom
bureausocks
Source: Fleming, J, Web Navigation, 1998
Subjective OrganizingSubjective Organizing32
Because organizing information is subjective, there are innumerable ways of organizing information. While this means there is no "perfect" way of
organizing your information, there are still "better" and "worse" ways of organizing information.
How you organize information in a web site should y gbe a balance between how the information "wants" to be organized and how the user "wants" to find it.g
Source: Fleming, J, Web Navigation, 1998
Organization SystemOrganization System33
Refers to the "philosophy" and to the "execution" used to organize a site's information.
In other words, an organization system refers to both its: Organization scheme (how a site is subdivided into
sections) and sections) and Organization structure (the relationships between
these sections).these sections).
Organization SchemesOrganization Schemes34
Defines the shared characteristics of content items and determines their logical grouping.
Types of organization schemes: exact exact ambiguous hybrid hybrid
Source: Rosenfeld & Morville, Information Architecture for the Web, 1998
Exact Organization SchemesExact Organization Schemes35
Divide information into well-defined, mutually exclusive sections. Alphabetic Courses
AstronomyBiologyChemistryDDramaFencing
ChronologicalPress ReleasesNov 4, 1999Oct 21, 1999Oct 10, 1999Sept 3, 1999Aug 18, 1999
Source: Rosenfeld & Morville, Information Architecture for the Web, 1998
Ambiguous Organization Schemes
36
Divide information into categories that defy exact definition.
Much more subjective, and as well, more useful. Why?y Answer: we don't always know what we are looking for.
The success of an ambiguous organization scheme The success of an ambiguous organization scheme depends on the usefulness of the classification to the user.
Source: Rosenfeld & Morville, Information Architecture for the Web, 1998
T pes of Ambig o s Organi ation SchemesTypes of Ambiguous Organization Schemes37
Faculties Topical
E.g., yellow pages, college calendars
Challenging to design, yet very help to users
FacultiesSciencesHumanitiesSocial SciencesFine Arts
Task-oriented/Functional Used by software (File, Edit, Format, View)
Useful for web-based applications
ABC CollegeRegister in a CourseLocate an InstructorMeet the Students Useful for web based applications
Metaphor-driven metaphor can help make the unfamilar seem familiar (think of Windows
folders, trash can, and desktop)
Choose a Loan Plan
ABC CollegeRegistrar’s OfficeLecture Theatre , , p)
Can be difficult to maintain over entire site
Audience-specific Makes sense if more than clearly definable audience
Student PubBank Machine
Makes sense if more than clearly-definable audience ABC CollegePotential StudentsFacultyExisting StudentsBroke Students
Source: Rosenfeld & Morville, Information Architecture for the Web, 1998
Broke Students
Hybrid Organization Schemesy g38
A f l d ff A mixture of several different organization schemes. Generally a very bad thing; yet sometimes
ABC CollegeHumanitiesSciencesLocate an InstructorStudents Generally, a very bad thing; yet sometimes
difficult to avoid The point of an organization scheme is to
StudentsParentsGet a Library CardStudent Pub
provide the user with a mental model to help user understand structure of data. Hybrid usually results in confusion Hybrid usually results in confusion. If you must use hybrid scheme, try to visually
separate the different schemes. Services for StudentsFind a Student LoanFind a Student LoanGet a Library CardVisit the Student Pub
Academic AreasFine Art
Students Parents FacultyFine Art
HumanitiesSciences
y
Fine Arts Humanities Sciences Health Studies
Hybrid SchemesHybrid Schemes39
Sears separates topical and functional
Topical
Functional/Metaphor
Functional/Metaphor/Topical/Topical
Functional/Metaphor
Topical
Functional
Metaphor
Topical/Functional/
Topical
Topical/Functional/Metaphor
Designing SchemesDesigning Schemes40
The danger with hybrid schemes is that they can utterly confuse user.
Make sure your categories are clear as possible.What does this do? What does this do?
Topical
Audience Specific/Functional/Topical/Metaphor = BIG MESS
f f fWhere do I click if I'm a student looking for the schedule for Introduction to Computers?
Designing SchemesDesigning Schemes41
Categories generally should be mutually exclusive However, sometimes it it sensible to cross-list an item in
more than one branch of a scheme Too much cross-listing, then scheme loses its value
AcademicSciencesHumanitiesSocial SciencesScholarships
StudentsRegisterStudent UnionScholarshipsFine Arts
ServicesRegisteringVisitingPartiesScholarshipsScholarships Fine Arts Scholarships
Designing SchemesDesigning Schemes42
B i f h Be cautious of metaphors A metaphor is something that is used to represent something
elseelse. advantages:
metaphor can provide a unifying framework to entire site metaphor can provide a unifying framework to entire site users can make use of their knowledge they already have e.g., the shopping cart metaphor in e-commerce sites e.g., the shopping cart metaphor in e commerce sites
disadvantages: often difficult to make site sections "fit into" your metaphor often difficult to make site sections fit into your metaphor If connection between metaphor and content is tenuous then
user will have difficult time finding information.
The whole world's a MetaphorThe whole world s a Metaphor43
Example of the difficulty of making all of a site's main sections fit into a single metaphor. In the above example, why is the "New" section up in the attic?
This seems to be a clever metaphor, but the placement of categories with shifter position is arbitrary: why is "Images" section in the Reverse position?
Organization StructuresOrganization Structures44
The structure of information defines how different categories defined by the scheme relate to one another Structure defines way users navigate through
information It is the plan or map of the pages in a sitep p p g
Types of Organizational StructuresTypes of Organizational Structures45
Linear Hub and Spokep Web Hi hi l Hierarchical Facets
Linear OrganizationLinear Organization46
Pages in a sequence Wizards, checkouts, and other pipelines
Hub and SpokeHub and Spoke47
Start from landing page, and navigate to individual pages. Extension of linear
WebWeb48
Many pages linked together without levels or sequence Each page is potential hub and spoke E.g., MySpaceg , y p
HierarchyHierarchy49
Pages are arranged in a parent-child (tree) relationship. Most sites are hierarchical
FacetsFacets50
A page belongs to one or more facets.
A facet is a unique category that describes g ya property of a page Each facet might be Each facet might be
arranged hierarchically Allows a user more Allows a user more
freedom in finding information
Kalbach, Designing Web Navigation (O’Reilly, 2007)
Example FacetsExample Facets51
Source: Uta Priss, Elin Jacob, “Utilizing Faceted Structuresfor Information Systems Design”, http://www.upriss.org.uk/papers/asis99.pdf
Designing HierarchiesDesigning Hierarchies52
Try to balance breadth and depth Users don't like having to "drill-down" endlessly to find
an item, nor do they like having to read through hundreds of menu choices.
Key question is what is the right balance?
breadth
depth
Memory ImplicationsMemory Implications53
Most people can only manage seven, plus or minus two, items of information at a time.
Thus, some researchers have suggested that your site should have 5 to 9 major sections.j
If we have limitations with short-term memory, shouldn't we then try to have less breadth and shouldn t we then try to have less breadth, and more depth? NO! NO!
Research on Breadth vs Depthp54
User's Ranking f Aof
DifficultyAverage
access time
Mean #
2x6, Breadth=2, Depth=6
4x3, Breadth=4, Depth=3
8x2 Breadth=8 Depth=2of Errors
8x2, Breadth=8, Depth=2
4x1, 16x1 1st page Breadth=4, 2nd page=16
16x1, 4x1 1st page Breadth=16, 2nd page=4
Source: Zaphris & Mtei, "Depth vs Breadth in the Arrangement of Web Links," 1997
Research on Breadth vs Depthp55
Average access time Lostness
40
50
60
50
60
70Worst Worst
10
20
30
10
20
30
40
0
10
8x8x8 16x32 32x160
10
8x8x8 16x32 32x16Best Best
User Preference
10
12
14
16Best
2
4
6
8
Source: Larson & Czerwinski, "Web Page Design: Implications of Memory, Structure and Scent for Information Retrieval," 1998
0
2
8x8x8 16x32 32x16Worst
Research on Breadth vs DepthResearch on Breadth vs Depth56
Users greatly preferred this TOC to ... ...this one
Conclusions on Breadth vs DepthConclusions on Breadth vs Depth57
access time is proportional to depth of hierarchy i.e., the deeper the menu, the more time the user will
spend and the less happy she/he will be. Try to avoid a depth of more than 2 or 3
increases in breadth do not seem to affect speed i e one well-organized moderately-broad information i.e., one well-organized, moderately-broad information
space gives optimal user performance.
Information ScentInformation Scent58
H if h l b l ( h i i However, if the category labels (the organization scheme) are not well organized, broader structures can have just as poor performance (or even worse) as j p p ( )deeper structures.
Information has a "scent" that users can pick up through l b lcategory labels.
i.e., scent is the amount of remote indication a user can derive from a site's organization scheme and labeling about derive from a site s organization scheme and labeling about the relative location of a target.
A well-designed organization scheme improves the scent of information thus making it easier for users to find their information, thus making it easier for users to find their information.
iii. Navigation Systemsiii. Navigation Systems59
When a user enters a web site, he/she is usually trying to find something, and he/she must decide whether to search or to browse some users are "search-dominant," others are "link-
dominant" thus, every web site should provide both:
A way to find information via a search facility, A way to find information via clicking on a hierarchical series of
links, also called a navigation system.links, also called a navigation system.
Source: Steve Krug, Don't Make Me Think, 2000; Jakob Nielsen, Designing Web Usability, 1999
Navigation ConventionsNavigation Conventions60
We rely on conventions in physical We rely on conventions in physical space (in cities, on the freeway, at the airport, etc) and in information spaces ( i hi b k ) th t d
ßêÿš¥
We nde stand the meaning of these(within a book or newspaper) that speed up the navigation process.
Likewise, various conventions have
We understand the meaning of these signs, even though we can't read their language, because of our knowledge of traffic sign conventions.
,emerged in the web that help users in their navigation. In general it is sensible to work within In general, it is sensible to work within
these conventions. If not, you should have a good reason
(e g potential audience is avant garde (e.g., potential audience is avant-garde, new non-conventional way is clear and self-explanatory, etc).
Remember how briefly most users view a Even though I can not read the language used on this page, I can still
i t it d t it f b Remember how briefly most users view a page!!
Source: Steve Krug, Don't Make Me Think, 2000; Jakob Nielsen, Designing Web Usability, 1999
navigate it due to its use of web conventions.
Navigation ConventionsNavigation Conventions61
Utilities (functional or action oriented)h d
Company ID
Main sections(global navigation)
b ti
You are here indicators
Co pa y sub sections
Page Title
Local Navigation
Small text footer links
Navigation Conventionsg62Company ID
Utilities
Main sections (global
You are here indicator
Page Title
Main sections (global navigation)
Local Navigation
Small text footer links
Navigation ConventionsNavigation Conventions63
Conventional arrangements of navigation elements
Global Global
Local
Global
Local Local
Inverted-L Horizontal Embedded Vertical
Kalbach, Designing Web Navigation (O’Reilly, 2007)
SearchingSearching64
About 50% of users will use search rather than navigation system. However, if your search facility is not very accurate,
adding a search facility may be counter-productive.
Source: Louis Rosenfeld, Information Architecture, 1998; Steve Krug, Don't Make Me Think, 2000
Search Interface GuidelinesSearch Interface Guidelines65
Available on every page Text box plus button with label “Search”p Located top right (preferred) or top left of page T t b i 25 h t id Text box size ~25 characters wide
Search Engine Results Page (SERP)
66
Should be paginated into chunks of about 10 results Almost everyone (~93%) will stick to first SERP In Google, about 75% stick to first SERP
Almost everyone will choose the 1st or 2nd choice Almost everyone will choose the 1 or 2 choice In Google, almost 70% pick 1st or 2nd choice in SERP I G l 50% i k 1st In Google, over 50% pick 1st
Source: Nielsen + Loranger, Prioritizing Web usability, 2006
Google as Entry Point to SiteGoogle as Entry Point to Site67
One of the key changes in user behavior over the past 5 years is that users often don’t visit “good” sites but look for “good” answers. As a result, many (or even most) people will be using
Google (and not the home page) as the portal into any page in your site.
General Navigation QuestionsGeneral Navigation Questions68
A site's navigation system should answer these three user questions: Where am I? Where have I been? What’s here? Where can I go? Where can I go?
Source: Jakob Nielsen, Designing Web Usability, 1999
Where Am I?Where Am I?69
In any page in your site, users should be able to tell: where on the web they are where in the site they are
Where am I (on the web)?Where am I (on the web)?70
Every page in your site should contain the company name or logo. This is generally placed in the upper-left corner It is usually made into a link to the home page as welly p g
You may also want to indicate who is the author, when it was created or last modified copyright info when it was created or last modified, copyright info, privacy messages, security options, etc. This s all is placed at the bottom or footer of a This usually is placed at the bottom or footer of a
page.
Company logos in the upper-left corner is extremely common on the web.
71
Where am I (on the web)?Where am I (on the web)?72
Home pages should allow user to quickly determine the site's purpose in a quick scan of the page. P l ill i it th h ft th th i it People will visit the home page more often than any other page in your site.
But studies show that users will spend less time viewing a home page than an interior content page.
This home page provides few clues as to what Acer does (build and sell computer equipment)
Where am I (in the site)?Where am I (in the site)?73
You should specifying where the user is within the site by: giving each page a name. highlighting, within the navigational menu, the location g g g, g ,
of the current page within the larger hierarchy of the site.
Breadcrumb trail Shows the user where she is in the site hierarchy. e.g.,
Home | Products | Shoes | Athletic | Nike
Where am I ?Where am I ?74
Company IDCompany ID
Page Title
Navigation Highlight
In the Slate Magazine site, we can easily tell that this particular page is part of the Culture section.
Unfortunately, the Culture section is quite large with many subsections (this page is part of the Dialogue subsection); however, there is no way to tell this without exploring y p gthe Culture link.
The amazon site, in contrast, visually shows which section and subsection we are in (the Award Winners subsection of the Books section).
Note: in general, if your are indicating current location via change in navigation banner, the link should be disabled.
75In this example, the Award Winners isn't a link.
Sometimes the indicator of the site's current location is overly vague. Can you find it in this example?
Unless you are trying to impress users with your originality (which often is the case for designers and artists) try to make locationoften is the case for designers and artists), try to make location indicators reasonably obvious (but not obnoxious).
76
What’s Here? – Page TitlesWhat s Here? Page Titles77
Page NamePage Name
Content hereContent here
Page Name
Page Name
C t t h C t t h
M k th titl bi d i t t i ll it h ld b
Content here Content here
Make the page title big and prominent: typically it should be the largest text on the page.
Source: Steve Krug, Don't Make Me Think, 2000
Where have I been?Where have I been?78
Si h b i l ( h Since the web is state-less (the server doesn't keep track of the last page you
) d ff l d hwere on), it is difficult to indicate this. the browser's Back button and History
button help Though less than 1% of users use the history
ffeature
One partial solution is to use different link and visited link colors.
Source: Nielsen + Loranger, Prioritizing Web usability, 2006
BreadcrumbsBreadcrumbs79
Breadcrumb linksNotice that each step in trail is a link.
Most sites do not make the last step in the trail (i.e., the current section) a link.
Can you tell which color is the visited link and which is the non-visited link?
80
Visited Link ColorVisited Link Color81
Using the default colors for links (blue for unvisited, purple for visited) is best choice for usability.
"Of all the graphic design elements we looked at, the only one that is strongly tied to user success was the use of browser-default link color ... Our theory is that use of the default colors is default link color ... Our theory is that use of the default colors is helpful because users don't have to relearn every time they go to a new site.” Spool, 1999
“U h i li k l t i ti l f i b “Unchanging link colors create navigational confusion because users don’t quite understand their different choices or where they are. This is as serious a usability problem as it ever has been.” Ni l 2006Nielsen, 2006
Source: Jared Spool, Web Site Usability, 1999
Source: Nielsen + Loranger, Prioritizing Web Usability, 2006
Visited Link ColorVisited Link Color82
Other strategies: use red as non-visited link color (our eyes look at red
first) use as non-visited link color the same color as primary
color scheme in site as whole; visited link color would then be a lighter, less-saturated version of that color.
Source: Jared Spool, Web Site Usability, 1999
Wh t d d 't tWhatever you do, don't use too many link colors in one page or site. The Slate Magazine main page (below) uses three different link colors (plus another for visited link).(p )
Internal pages in the site (at left) use 3 different link colors plus two different visited link colors.
83
A th l ti t th "Wh H I B ?"Another solution to the "Where Have I Been?" question is to provide "bread-crumbs" — that is, some visual indication of which choices the user has made, usually via hyperlinks
84
Where can I go?Where can I go?85
Indicated b the page's Indicated by the page s links
Every Web page should Every Web page should contain at least one link never have Dead-end pages never have Dead end pages
(pages with no links to any other local page in the site)
the site's links should form a navigation system that has
i t f t hyperlink
consistency from page to page. Remember, not every visitor to a page comes
through the front door; they might arrive from a search engine link or a bookmark.
Source: Jakob Nielsen, Designing Web Usability, 1999
Types of Navigation SystemsTypes of Navigation Systems86
global global provides access to first-level
section pages. available in all pages
local in a complex site provides access Global system provides in a complex site, provides access
to pages within a section or sub-site.t t l
y plinks to these pages
contextual additional embedded links only for non-critical links or for y
repeating main links Might also be a series of related
content linkslocal system might provide links to these pages
content links
global navigation system
local navigation systemcontextual navigation
87
Navigation Design: First ScreenNavigation Design: First Screen88
The first screen the user sees must be as good The first screen the user sees must be as good as it can be. This first screen might not be the home page —g p g
the user might come to a page from an external link or search engine.
The part of a web page that is visible without The part of a web page that is visible without vertical scrolling (“above the fold”) is extremely important.
Navigation Design: First ScreenNavigation Design: First Screen89
About 50% of users will almost never scroll About 50% of users will almost never scroll The majority of users scan what they see on the browser and
then make their navigation choice. Users will scroll vertically if there is some compelling content Use s w sc o ve ca y e e s so e co pe g co e
(e.g., a listing of products, an article they are reading, search engine results, etc).
Home pages will only be scrolled between 14-23% of the timetime.
Almost no one will use the horizontal scroll bars. NEVER require users to use the horizontal scroll bars to see important navigation elements!!!
Of those that do scroll, most will only scroll about a screen full.
Thus, you must try to fit the most important parts of your us, you us y o e os po a pa s o you site—that is, the navigation system, company name, page title, and search option—above the fold.
Source: Nielsen + Loranger, Prioritizing Web Usability, 2006
Scrolling ResearchScrolling Research90
Navigation: First ScreenNavigation: First Screen91
M h i l i Most users have monitor resolution set to 1024x768 or 1280x1024. Recall, however, that browser buttons, status
bar, window title, etc also take up space.
http://www.hobo‐web.co.uk/tips/25.htm (March 2008 visit stats)
Navigation: First ScreenNavigation: First Screen92
U i h hi h l i ll Users with higher resolution generally do not have their browser window
dmaximized. Why?
Navigation: First ScreenNavigation: First Screen93
They may have: multiple monitors of different sizes
multiple windows opened
Sites often don’t take advantage of Sites often don t take advantage of widescreen/maximized space
Navigation: First ScreenNavigation: First Screen94
Repeating backgrounds can cause problems at higher resolution.
800 x 600 1600 x 1200
Navigation: First ScreenNavigation: First Screen95
Thus, design your page with the 1024 x 768 resolution in mind. This means content area is about 1004 x 598
1024x768Screen Size
1024x738Browser Window
1004x598Content Area
Designing PagesDesigning Pages96
Ideally, your pages should work at any resolution, from 800x600 to 1280x1024 and beyond.
These vital navigational elements are off-screen at smaller window size.
97
This site is optimized for larger size but is still usable at smaller size
98
This site is optimized for larger size but is still usable at smaller size
99
Guidelines for screen sizeGuidelines for screen size100
Optimize for 1024x768 Do not design solely for a specific monitor size g y p
because screen sizes vary among users. Use a liquid layout that stretches to the current Use a liquid layout that stretches to the current
user's window size (that is, avoid frozen layouts that are always the same size) are always the same size).
Even better, use an elastic layout that sensibly d i d iadapts to window size.
Examples of frozen layout
101
Examples of fluid layout
Notice how filling entire window might make text hard to read.
102
Examples of elastic layout
Notice how size increases but doesn’t fill entire window in order to maintain readability
103
Navigation: Where can I go?Navigation: Where can I go?104
Your global navigation system should provide a way to return to the site's home page.
Methods: provide an explicit home link to navigation bar, or
k h l li k b k h make the company logo a link back to home page. In this case, it is nice to also add the word "Home" to the logo or use
the alt attribute of the <img> tag for the logo to provide g g g pfeedback to the user that logo is clickable.
Go To Home Page
home
Go To Home Page
Navigation ElementsNavigation Elements105
Th diff t i t f l t b hi h There are many different user interface elements by which you can construct a navigation system. Navigation barsg Text menus Dynamic menus T Trees Action buttons Drop-down menusp Tag clouds Step + paging links
Si d i d Site maps and indexes Directories
Kalbach, Designing Web Navigation (O’Reilly, 2007)
Navigation BarsNavigation Bars106
A chain of horizontal links made from Images
Text
Navigation: TextNavigation: Text107
In order to improve download speed, many sites have replaced all-graphic menu systems with text-based menu systems that combine small, reusable graphics with text links using CSS or within tables.
Navigation BarsNavigation Bars108
It is often best to place navigation bars at top of page, since users scan web pages using same pattern as when reading: from top-left to right, then down. Tests have shown that users perform slightly better with
main navigation system at top (or bottom). However, there is less vertical screen space than
horizontal, so placing links on left-side of screen will maximize available screen space.
Source: Jared Spool et al, Web Site Usability: A Designer's Guide, 1999
Navigation: TabsNavigation: Tabs109
Tests have shown that users find tabbed interfaces very easy to use.
Ideally, the tab for the current section should be coloured to indicate the current section.
Navigation: TabsNavigation: Tabs110
If you are going to use a tab metaphor, make sure they operate as tabs.
In both of these sites, the tab metaphor only extends to the current area, which loses the meaning cues provided by tabs.
Have a tab selected when you enter the site.
Neither the Quicken or the petsmart sites have a tab initially selected...
…but both the chapters and circuit city sites do.
Navigation: IconsNavigation: Icons111
I h Icons are metaphors Be sure to provide text These icons are not exactly obvious.
labels to help clarify the meaning of icons. One way to do this to
show label only when you roll-over icon. However, this is not an ideal solution from a usability perspective.
These two examples use a rollover text explanation to help (somewhat) clarify the icon's meaning
A picture is worth a thousand words ...
112
User's Interpretation Designer’s Intended Meaning
State of your accountState of your account
Fixing your order
E-mail us
What's new
A picture maybe indeed be worth a thousand words, but for a usable iconic system, we want the user to associate only one meaning/word to the image, not a thousand !
Imagemaps vs. Individual Graphics
113
A image-based navigation system can be created via single graphic using an image map, or by breaking into individual graphics.
Imagemaps vs. Individual Graphics
114
Advantages Disadvantages
Imagemaps Generally (but notalways) faster loading
If images turned off orslow to download,y ) g
since fewer files todownload.
,image map cannot beused.
Individual Graphics Potentially faster loadingon subsequent pages
Generally slowerloading on first page.
due to browser caching.
Navigation system stillusable (if ALT used)even without imagedownloadeddownloaded.
Can implement rollovers(which is not necessarilya good thing).
Navigation & ImagesNavigation & Images115
Some users with slow connections will turn off the display of images in their browser.
You can still make your site usable for these users by filling out the alt attribute of the <img> tag.g g g
<img src='abc.gif'>g g
<img src="abc.gif" alt="Products">Products
B H dBetter Homes and Gardens web site doesn't use the ALT attribute for th i itheir images.
Since the menu in the blue bar is an i it iimage map, it is unusable for browsers with images turned off.
Metropolis's site, on the other hand, does use the ALTdoes use the ALT attribute.
The navigation elements are still
116
elements are still usable here even with images turned off.
Navigation: FooterNavigation: Footer117
It is important to provide the It is important to provide the user with text equivalents for navigational graphics ( i ll f i ) (especially for image maps) since graphics turned off or the user might have might
h S b hpress the Stop button on their browser.
Common practice to place Common practice to place text-versions of links at bottom of pages.
Navigation: Text MenusNavigation: Text Menus118
l f l k Vertical series of text links Try to avoid wrapping a text link over two or more
lilines. This typically confuses users into thinking there is more than
one linkone link.WinesMerlotZinfandel
How many wines are listed here?
ZinfandelMuscatCabernetSauvignonNebbiolo
Wines WinesWinesMerlotZinfandelMuscatCabernet Sauvignon
Wines•Merlot•Zinfandel•Muscat•Cabernet
If space is a problem, try using bullets
Source: Jared Spool et al, Web Site Usability: A Designer's Guide, 1999
Cabernet SauvignonNebbiolo
•Cabernet Sauvignon•Nebbiolo
Navigation: TextNavigation: Text119
Remember that most sers will ignore Remember that most users will ignore embedded text links. Because users initially scan web pages (rather Because users initially scan web pages (rather
than carefully read), embedded links are typically missed.
if it is an important link, be sure to provide an alternative to embedded links.
This embedded link will probably be ignored.
This is still an embedded link because it is followed by text, and will probably be ignored.
This is not really an embedded link.Why? because it is on a line by itself. The following text is on a separate line.
Source: Jared Spool et al, Web Site Usability: A Designer's Guide, 1999
Navigation: TextNavigation: Text120
A id i bl f hi h h Avoid using blue text for anything other than web links
Avoid underlining anything except web links Avoid using red + green as link color pairs g g p
Color blindness amongst 8% of males
Use the title attribute to provide more Use the title attribute to provide more information about the link.<a href="privacy html" title="Read our privacy policy">privacy</a><a href= privacy.html title= Read our privacy policy >privacy</a>
Navigation: Dynamic MenusNavigation: Dynamic Menus
Ad121
Advantages Can display more choices in a single space Familiar interaction (similar to desktop applications Familiar interaction (similar to desktop applications
Disadvantages Dynamic menus from a vertical menu requires precise mouse y a c e us o a ve ca e u equ es p ec se ouse
movement (not as much as problem from a horizontal menu)
Can be frustrating to use Not a problem to use
Navigation: TreeNavigation: Tree122
Good for site with strong hierarchical organization Potentially problem with horizontal space when many
nodes are opened.
Navigation: Action ButtonsNavigation: Action Buttons123
Text hyperlinks are sometimes not the best choice for representing actions that do something important. Text hyperlinks should be clickable with no
consequences
Buttons are better choice for indicating transactionsg
Navigation: Action ButtonsNavigation: Action Buttons124
Two types: Graphical action buttons An image that (hopefully) looks like a button
HTML buttons Created via <input> tag
Navigation: Pull-Down MenusNavigation: Pull Down Menus125
Whil d While a good way to save on screen space pull down space, pull-down menus force user to act to find out to act to find out navigation options
Works best in Works best in conjunction with button bar or text button bar or text links.
Sun Microsystems main page uses a pull-down menu at top, with duplicate images at bottom.
126
Navigation: Tag CloudsNavigation: Tag Clouds127
Provides a snapshot of various categories in a site and their relative importance/frequency. Each word is a link Sorted alphabeticallyp y Perhaps less useful for corporate sites or other sites
without categories or tagsg g
Navigation: Stepping and PagingNavigation: Stepping and Paging128
Allow users to step through a linear series of pages, or move back and forth between multiple related pages.
Navigation: DirectoriesNavigation: Directories129
Provides access to a wide variety of non-hierarchical information that can be organized via categories.
Navigation: Site maps and indexes
130
A site map is a representation of a site’s structure While not heavily used by users, they are an important
part of SEO (search engine optimization).
Indexes are alphabetic guide to a site’s content.p g Can be combined with sitemap
Navigation: Site maps and indexes
131
Page TypesPage Types132
Different page types will change the elements and organization of a page’s navigation.
They are: Navigational Navigational Content Functional Functional
Kalbach, Designing Web Navigation (O’Reilly, 2007)
Page Types: NavigationalPage Types: Navigational133
Directs people to content e.g., home pages, landing pages, search results,
galleries
Many stores combine gallery views with search engine results
Landing pages are like home page for a subsection of a site
Page Types: ContentPage Types: Content134
For most users, this is the page they are looking for. e.g., single article, product, story, blog entry, etc.
The focus of this page should be the content, not advertising, navigation, etc.advertising, navigation, etc.
Page Types: FunctionalPage Types: Functional135
Pages that perform a function/action/task e.g., search forms, submission forms, web applications. Often other navigational elements are missing if it is
important for the user to finish the task.
Data-Entry UsabilityData Entry Usability136
The data-entry section of a web application lets users enter, save, delete, and modify data, usually stored in databases or XML files on the web server. Source for this and the following slides:
Susan Fowler and Victor Stanwick, Web Application Design Handbook, 2004
Conceptual Model: Lists versus ObjectsConceptual Model: Lists versus Objects137
Data-entry pages generally have two views for data: Lists (also called tables) Objects (also called records or data entry forms). j ( y )
Data-Entry FormsData Entry Forms138
Contain: Users enter information using a set of fields (also called
text boxes) and controls such as checkboxes, radio buttons, and dropdown boxes for selecting items from lists.
Users act on the information using buttons.
Guidelines for fieldsGuidelines for fields139
d d d fi ld Use standard unprotected fields to accept unpredictable text entry (names, street addresses, and so on)so on).
Use protected fields (fields into which users cannot type) to show system values values saved elsewhere in type) to show system values, values saved elsewhere in the system, or calculated values.
Use required fields when you have to be sure that the Use required fields when you have to be sure that the form contains all necessary information. Don't have too many required fieldsy q
Use validated fields when business rules must be ensured.
Guidelines for fieldsGuidelines for fields140
Make entry areas the right size<input type="text" name="cpt" maxlength="6" size="6">
D ' k f h Don't make users format the text Provide keyboard and mouse navigation
<label for="fix">Fi<u>x</u>:</label>
<input type="text" name="fix" accesskey="x">
Guidelines for labelling formsGuidelines for labelling forms141
Fields should be organized in columns and groups, not in one long scrollable list down the screen. If there are too many fields to fit on one screen, then
provide multiple screens and a method, such as tabs or pop-up windows, to move between them.
Labels should be close to their data fields and controls.
Align labels consistently either left or right Align labels consistently, either left or right
Guidelines for labelling formsGuidelines for labelling forms142
If you expect to internationalize your application, put the field labels above the fields, not at the left. Other languages may require more space for labels Right-to-left languages won't make sense if labels are g g g
to the left of the fields.
Using defaultsUsing defaults143
f Use a default whenever there is a likely one. In fields, show the default entry in the field. In a set of checkboxes or radio buttons, set the most
likely choiceI d d li i k h l lik l In a dropdown list, pick the mostly likely entry.
If most of your customers are from North America, then why not y , yput Canada or United States as the default value (rather than just list them alphabetically)
Using DefaultsUsing Defaults144
Set defaults so that they benefit your site's visitors,not your organization.
Source: Jeff Johnson, Web Bloopers, 2003
Indicating a required fieldIndicating a required field145
Approaches: changing the background color of the required fields making the labels bold, putting a symbol (asterisk, arrow) in front of the field.p g y ( , )
However: B ld l d l b l 't h l th h Bold or coloured labels won t help those who use screen
readers.
Providing feedback for required fields
146
Approaches: show an error message on a separate error page and
ask people to go back to the earlier page. return to the page, show the error message, and list the
missing fields. return to the page, show the error message, and
highlight the missing fields. Indicate errors as user enters data.
Validated FieldsValidated Fields147
If a field must follow a specific format (e.g., date, postal code, credit card, etc), then: Tell the user what is the expected format
Enter Date:
Be as forgiving as possible
Enter Date (yyyy/mm/dd):
Be as forgiving as possibleWhy do so many sites reject credit card numbers, etc. if they
contain spaces?contain spaces?
Change the form so that it avoids user formatting Change the form so that it avoids user formatting mistakesSource: Jeff Johnson, Web Bloopers, 2003
Other ControlsOther Controls148
Use check boxes for entering binary (yes/no) data. Use radio buttons for choosing an option from a g p
small list of choices.
Using TabsUsing Tabs149
If form has too many fields, split them into several related tab pages. Each tab page will need a way to move to the next tab
page
Using TabsUsing Tabs150
Tab pages provide an alternate way to navigate a linear series (also called a pipeline or Wizard).
Using PopupsUsing Popups151
Popup windows can also be used for: Collecting secondary information and settings for an
object or record Holding tools such as calendars, toolbars, and palettes. Delivering messages, providing feedback, or showing
background (non-essential) information. Asking questions, confirming actions, and warning of
problemsp
ListsLists152
In many sites, users generally start from lists, selecting and opening individual objects they wish to examine or change.
When they’re done with the objects, they close them y j , yand return to the list view.
How to Select and Open Objects from ListsS Op O j
153
Approaches Turning field data in list into links Action buttons/links within each list "row" Images within each list "row"g
How to Select and Open Objects from ListsS Op O j
154
Field data in list is made into a linkField data in list is made into a link
Action buttons/links within each row
Action buttons/links within each row
Images within each list "row"
Concluding Caveats on UsabilityConcluding Caveats on Usability155
In traditional software testing, usability scores (success at finding information) and user preferences (how much did the user like the site) are very strongly linked.
i.e., users almost always prefer software they find easiest to use
In web testing, however, usability and user preferences are not nearly as strongly linked. When asked, users like the sites the provide interesting and
relevant content.""…these results may mean that good content is so important to
users that other factors are secondary."
Source: Jared Spool et al, Web Site Usability: A Designer's Guide, 1999