web i - 09 - usability
DESCRIPTION
Usability for Web Development 1 Course suitable for degree following CIT/CIS/CS ACM model curriculum.TRANSCRIPT
![Page 1: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/1.jpg)
EASING INTO WEB DEVELOPMENTDEVELOPMENT9 USABILITY9. USABILITY
![Page 2: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/2.jpg)
INTRODUCTION1HTML2
3 TABLES3FORMS4 FORMS4HTTP5 HTTP5CSS6 CSS6CSS FRAMEWORKS7DIGITAL MEDIA8
2 USABILITY9
![Page 3: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/3.jpg)
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)
![Page 4: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/4.jpg)
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?
![Page 5: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/5.jpg)
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.
![Page 6: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/6.jpg)
Usability in real lifeUsability in real life6
http://www.flickr.com/photos/rdolishny/2760207306
![Page 7: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/7.jpg)
Usability in real lifeUsability in real life7
http://www.flickr.com/photos/johnswords/2717108560/http://www.flickr.com/photos/11759181@N04/1176026705/
![Page 8: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/8.jpg)
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
![Page 9: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/9.jpg)
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
![Page 10: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/10.jpg)
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.
![Page 11: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/11.jpg)
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
![Page 12: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/12.jpg)
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
![Page 13: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/13.jpg)
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
![Page 14: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/14.jpg)
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
![Page 15: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/15.jpg)
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
![Page 16: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/16.jpg)
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
![Page 17: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/17.jpg)
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
![Page 18: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/18.jpg)
Velocity of web navigationVelocity of web navigation18
Weinreich et al, “Off the Beaten Tracks: Exploring Three Aspects of Web Navigation”, IW3C2 2006
![Page 19: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/19.jpg)
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
![Page 20: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/20.jpg)
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.
![Page 21: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/21.jpg)
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.
![Page 22: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/22.jpg)
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
![Page 23: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/23.jpg)
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?
![Page 24: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/24.jpg)
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
![Page 25: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/25.jpg)
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
![Page 26: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/26.jpg)
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
![Page 27: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/27.jpg)
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
![Page 28: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/28.jpg)
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
![Page 29: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/29.jpg)
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.
![Page 30: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/30.jpg)
Grouping ExerciseGrouping Exercise30
Group (organize) the following information:
refrigerator socks
b bureau living room di ti dictionary kitchen milk milk bookshelf bedroom bedroom
![Page 31: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/31.jpg)
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
![Page 32: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/32.jpg)
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
![Page 33: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/33.jpg)
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).
![Page 34: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/34.jpg)
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
![Page 35: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/35.jpg)
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
![Page 36: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/36.jpg)
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
![Page 37: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/37.jpg)
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
![Page 38: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/38.jpg)
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
![Page 39: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/39.jpg)
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
![Page 40: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/40.jpg)
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?
![Page 41: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/41.jpg)
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
![Page 42: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/42.jpg)
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.
![Page 43: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/43.jpg)
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?
![Page 44: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/44.jpg)
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
![Page 45: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/45.jpg)
Types of Organizational StructuresTypes of Organizational Structures45
Linear Hub and Spokep Web Hi hi l Hierarchical Facets
![Page 46: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/46.jpg)
Linear OrganizationLinear Organization46
Pages in a sequence Wizards, checkouts, and other pipelines
![Page 47: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/47.jpg)
Hub and SpokeHub and Spoke47
Start from landing page, and navigate to individual pages. Extension of linear
![Page 48: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/48.jpg)
WebWeb48
Many pages linked together without levels or sequence Each page is potential hub and spoke E.g., MySpaceg , y p
![Page 49: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/49.jpg)
HierarchyHierarchy49
Pages are arranged in a parent-child (tree) relationship. Most sites are hierarchical
![Page 50: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/50.jpg)
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)
![Page 51: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/51.jpg)
Example FacetsExample Facets51
Source: Uta Priss, Elin Jacob, “Utilizing Faceted Structuresfor Information Systems Design”, http://www.upriss.org.uk/papers/asis99.pdf
![Page 52: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/52.jpg)
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
![Page 53: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/53.jpg)
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!
![Page 54: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/54.jpg)
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
![Page 55: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/55.jpg)
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
![Page 56: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/56.jpg)
Research on Breadth vs DepthResearch on Breadth vs Depth56
Users greatly preferred this TOC to ... ...this one
![Page 57: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/57.jpg)
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.
![Page 58: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/58.jpg)
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.
![Page 59: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/59.jpg)
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
![Page 60: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/60.jpg)
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.
![Page 61: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/61.jpg)
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
![Page 62: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/62.jpg)
Navigation Conventionsg62Company ID
Utilities
Main sections (global
You are here indicator
Page Title
Main sections (global navigation)
Local Navigation
Small text footer links
![Page 63: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/63.jpg)
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)
![Page 64: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/64.jpg)
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
![Page 65: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/65.jpg)
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
![Page 66: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/66.jpg)
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
![Page 67: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/67.jpg)
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.
![Page 68: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/68.jpg)
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
![Page 69: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/69.jpg)
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
![Page 70: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/70.jpg)
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.
![Page 71: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/71.jpg)
Company logos in the upper-left corner is extremely common on the web.
71
![Page 72: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/72.jpg)
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)
![Page 73: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/73.jpg)
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
![Page 74: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/74.jpg)
Where am I ?Where am I ?74
Company IDCompany ID
Page Title
Navigation Highlight
![Page 75: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/75.jpg)
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.
![Page 76: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/76.jpg)
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
![Page 77: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/77.jpg)
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
![Page 78: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/78.jpg)
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
![Page 79: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/79.jpg)
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.
![Page 80: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/80.jpg)
Can you tell which color is the visited link and which is the non-visited link?
80
![Page 81: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/81.jpg)
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
![Page 82: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/82.jpg)
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
![Page 83: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/83.jpg)
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
![Page 84: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/84.jpg)
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
![Page 85: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/85.jpg)
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
![Page 86: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/86.jpg)
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
![Page 87: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/87.jpg)
global navigation system
local navigation systemcontextual navigation
87
![Page 88: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/88.jpg)
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.
![Page 89: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/89.jpg)
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
![Page 90: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/90.jpg)
Scrolling ResearchScrolling Research90
![Page 91: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/91.jpg)
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)
![Page 92: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/92.jpg)
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?
![Page 93: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/93.jpg)
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
![Page 94: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/94.jpg)
Navigation: First ScreenNavigation: First Screen94
Repeating backgrounds can cause problems at higher resolution.
800 x 600 1600 x 1200
![Page 95: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/95.jpg)
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
![Page 96: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/96.jpg)
Designing PagesDesigning Pages96
Ideally, your pages should work at any resolution, from 800x600 to 1280x1024 and beyond.
![Page 97: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/97.jpg)
These vital navigational elements are off-screen at smaller window size.
97
![Page 98: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/98.jpg)
This site is optimized for larger size but is still usable at smaller size
98
![Page 99: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/99.jpg)
This site is optimized for larger size but is still usable at smaller size
99
![Page 100: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/100.jpg)
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.
![Page 101: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/101.jpg)
Examples of frozen layout
101
![Page 102: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/102.jpg)
Examples of fluid layout
Notice how filling entire window might make text hard to read.
102
![Page 103: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/103.jpg)
Examples of elastic layout
Notice how size increases but doesn’t fill entire window in order to maintain readability
103
![Page 104: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/104.jpg)
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
![Page 105: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/105.jpg)
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)
![Page 106: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/106.jpg)
Navigation BarsNavigation Bars106
A chain of horizontal links made from Images
Text
![Page 107: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/107.jpg)
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.
![Page 108: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/108.jpg)
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
![Page 109: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/109.jpg)
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.
![Page 110: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/110.jpg)
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.
![Page 111: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/111.jpg)
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
![Page 112: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/112.jpg)
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 !
![Page 113: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/113.jpg)
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.
![Page 114: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/114.jpg)
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).
![Page 115: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/115.jpg)
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
![Page 116: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/116.jpg)
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.
![Page 117: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/117.jpg)
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.
![Page 118: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/118.jpg)
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
![Page 119: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/119.jpg)
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
![Page 120: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/120.jpg)
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>
![Page 121: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/121.jpg)
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
![Page 122: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/122.jpg)
Navigation: TreeNavigation: Tree122
Good for site with strong hierarchical organization Potentially problem with horizontal space when many
nodes are opened.
![Page 123: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/123.jpg)
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
![Page 124: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/124.jpg)
Navigation: Action ButtonsNavigation: Action Buttons124
Two types: Graphical action buttons An image that (hopefully) looks like a button
HTML buttons Created via <input> tag
![Page 125: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/125.jpg)
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.
![Page 126: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/126.jpg)
Sun Microsystems main page uses a pull-down menu at top, with duplicate images at bottom.
126
![Page 127: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/127.jpg)
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
![Page 128: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/128.jpg)
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.
![Page 129: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/129.jpg)
Navigation: DirectoriesNavigation: Directories129
Provides access to a wide variety of non-hierarchical information that can be organized via categories.
![Page 130: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/130.jpg)
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
![Page 131: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/131.jpg)
Navigation: Site maps and indexes
131
![Page 132: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/132.jpg)
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 133: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/133.jpg)
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 134: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/134.jpg)
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 135: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/135.jpg)
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.
![Page 136: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/136.jpg)
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
![Page 137: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/137.jpg)
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 )
![Page 138: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/138.jpg)
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.
![Page 139: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/139.jpg)
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.
![Page 140: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/140.jpg)
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">
![Page 141: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/141.jpg)
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
![Page 142: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/142.jpg)
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.
![Page 143: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/143.jpg)
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)
![Page 144: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/144.jpg)
Using DefaultsUsing Defaults144
Set defaults so that they benefit your site's visitors,not your organization.
Source: Jeff Johnson, Web Bloopers, 2003
![Page 145: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/145.jpg)
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.
![Page 146: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/146.jpg)
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.
![Page 147: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/147.jpg)
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
![Page 148: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/148.jpg)
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.
![Page 149: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/149.jpg)
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
![Page 150: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/150.jpg)
Using TabsUsing Tabs150
Tab pages provide an alternate way to navigate a linear series (also called a pipeline or Wizard).
![Page 151: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/151.jpg)
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
![Page 152: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/152.jpg)
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.
![Page 153: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/153.jpg)
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
![Page 154: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/154.jpg)
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"
![Page 155: WEB I - 09 - Usability](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c812564a7959f55d8b4616/html5/thumbnails/155.jpg)
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