Usability for Web Development 1 Course suitable for degree following CIT/CIS/CS ACM model curriculum.

1. EASING
INTO WEB
DEVELOPMENT
9.
9 USABILITY

2. 1 INTRODUCTION
2 HTML
3 TABLES
4 FORMS
5 HTTP
6 CSS
7 CSS FRAMEWORKS
8 DIGITAL MEDIA
2 9 USABILITY

3. Designing a Web Site
3
 Part 1: Site Design / Engineering
 concerned with usability
 Part 2: Page Design / Art
 concerned with aesthetics (visual attractiveness)

4. What Do You Dislike About the Web?
4
or, what do you hate to see on a web page?

5. Usability Matters
5
 Many of the things we don't lik about
M f th thi d t like b t
the web pertain to the usability of
web sites
sites.
 Usability is:
D i i
Designing thi
things so th t th make sense
that they k
to the people who use them.
 How easy is a web site to understand
and use.

6. Usability in real life
6
http://www.flickr.com/photos/rdolishny/2760207306

7. Usability in real life
7
http://www.flickr.com/photos/11759181@N04/1176026705/ http://www.flickr.com/photos/johnswords/2717108560/

8. Usability and Audience Types
8
 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
ten years

9. Information Foragers
• users who are looking for a
particular piece of information.
• informavores
• concerned chiefly with usability
(
(how easy is it to find information).
y )
9

10. Information Foragers
10
 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
leave it quicker.

11. Surfers
• users who "stumble" across a site.
• concerned chiefly with aesthetics
d hi fl ih h i
(does this site look professional or
interesting enough to continue
exploring this site).
• Minority
11

12. Types of Information Foraging
12
 A given user can, at different times, engage in
different types of information foraging
 Known item seeking
 Exploratory seeking
p 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

13. Known item seeking
13
 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:
 Search
a z
a-z indexes
 navigation
 Main virtue of site:
 able to answer user’s query fast

14. Exploratory seeking
14
 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
 related links
 search

15. Don t
Don’t know what you need to know
15
 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:
 Interesting content

16. Re Finding
Re-Finding
16
 Users looking f things they have already seen.
for
 They may remember exactly where it is, or only
remember what site it was on, or even have little idea
b h i i h li l id
about where it was.
 ~40% of an individual s searches are re-finding
individual’s re finding
searches (performing a search they have already
p
performed in the past).*
p )
 Prefer:
 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

17. Other Browsing Behaviors
17
 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

18. Velocity of web navigation
18
Weinreich et al, “Off the Beaten Tracks: Exploring Three Aspects of Web Navigation”, IW3C2 2006

19. Other Browsing Behaviors
19
 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?
* Weinreich et al, “Web Page Revisitation Revisited: Implications of a Long‐term Click‐stream Study of Browser Usage”, CHI 2007
** 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

20. Part 1: Site Design
20
 Usability is perhaps the most important goal
in web design.
 If users cannot figure out how to use your site
easily,
easily some will leave your site, never to return.
site return
 Perhaps more importantly, a good user
experience creates trust in a site.
 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
first, then experience usability (think DVDs) l
f h bl (h k ) later.

21. Factors Determining Usability
21
i. The response time (i.e., download time) for site/pages.
ii. The organization system for site.
g y
iii. The navigation system used throughout the site.
iv.
iv The content of the site
site.

22. i. Response Time
22
 If your pages take a long time to download, users
download
will leave your site.
 How long is too long?
 1 second response-time b
d i between action (e.g., mouse
i (
click) and response (page loaded) is ideal.
 For most broadband users, that means about 200 KB
 10 seconds i the upper li i f k
d is h limit for keeping user i site.
i in i
 That means, any given page should be functionally
loaded in no more than ten seconds. 2006, webdesign.about.com
Nov. 1998, www.emarketer.com
% Who Leave Load Time % still waiting Load Time
16% 10 sec 84% 10 sec
49% 15 sec 51% 15 sec
74% 20 sec 26% 20 sec
95% 30 sec 5% 30 sec
Source: Jakob Nielsen, Designing Web Usability, 1999

23. Factors Determining Response
23
Times
 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)
 cumulative file size of the images and objects in
web page
 Which f h
Whi h of these factors do you have control
f d h l
over as a web designer?

24. Understanding Page Size
24
 Again, page size is the cumulative file sizes of all
the elements on a web page. This includes:
 the HTML file
 the image files
g
 object files (video, Flash)
s

25. First Page of Site Response Time
randyc.gif 1K
bar.gif
g 3K
bio.gif 1K
bio_over.gif 1K
site.gif 1K
site_over.gif 1K
idea.gif
id if 1K
idea_over.gif 1K
for.gif 1K
for_over.gif
for over gif 1K
main.htm 4K
TOTAL 16K
25 Download time @ 28.8 Kbps = 5 seconds
128 Kbps = 1 second

26. Subsequent Page of Site Response Time
Other images
still in cache so
no need to re-
download
bio_bar.gif 3K
cv.gif 1K
cv.htm 4K
TOTAL 8K
26 Download time @ 28.8 Kbps = 1.5 seconds
128 Kbps = 1 second

27. First Page of Site Response Time
menu.htm 1K
main.htm 1k
frameset.htm 1K
5 images +
roll-overs 60K
imagebar.gif 1K
imagmap.gif
imagmap gif 17K
rollovers 4K
logo.gif 1K
TOTAL 95K
27 Download time @ 28.8 Kbps = 32 seconds
128 Kbps = 7 seconds

28. 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
dot gif 1K
byname.gif 2K
alphabet.gif 8K
artist.htm
ti t htm 20K
TOTAL 41K
28 Download time @ 28.8 Kbps = 15 seconds
128 Kbps = 3 seconds

29. ii. Organization System
29
 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
p g paths to information by showing relationships.
p y g p
 The trouble with relationships is that they are subjective.

30. Grouping Exercise
30
 Group (organize) the following information:
 refrigerator
 socks
b
bureau
 livingroom
 di ti
dictionary
 kitchen
 milk
 bookshelf
 bedroom

31. Grouping Possibilities
31
Alphabetically By Room
bedroom Kitchen stuff
By Size
bookshelf refrigerator
Large refrigerator milk
kitchen
bureau Living Room stuff
living room
dictionary dictionary
bedroom
kitchen bookshelf
Medium living room Bedroom stuff
refrigerator
milk socks
bureau
socks bureau
bookshelf
Small
socks
dictionary By hierarchical location
y
milk
ilk Kitchen
refrigerator
milk
Living Room
bookshelf
dictionary
Bedroom
bureau
socks
Source: Fleming, J, Web Navigation, 1998

32. Subjective Organizing
32
 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 g
be 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

33. Organization System
33
 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
 Organization structure (the relationships between
these sections).

34. Organization Schemes
34
 Defines the shared characteristics of content items
and determines their logical grouping.
 Types of organization schemes:
 exact
 ambiguous
 hybrid
Source: Rosenfeld & Morville, Information Architecture for the Web, 1998

35. Exact Organization Schemes
35
 Divide information into well-defined, mutually
exclusive sections.
Courses
 Alphabetic Astronomy
Biology
Chemistry
Drama
Fencing
Press Releases
 Chronological Nov 4, 1999
Oct 21, 1999
Oct 10, 1999
Sept 3, 1999
Aug 18, 1999
Source: Rosenfeld & Morville, Information Architecture for the Web, 1998

36. Ambiguous Organization
36
Schemes
 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
depends on the usefulness of the classification to the
user.
Source: Rosenfeld & Morville, Information Architecture for the Web, 1998

37. Types Ambig o s Organization
T pes of Ambiguous Organi ation Schemes
37
Faculties
 Topical Sciences
Humanities
 E.g., yellow pages, college calendars Social Sciences
 Challenging to design, yet very help to users Fine Arts
 Task-oriented/Functional ABC College
Register in a Course
 Used by software (File, Edit, Format, View) Locate an Instructor
 Useful for web-based applications
web based Meet the Students
Choose a Loan Plan
 Metaphor-driven
ABC College
 metaphor can help make the unfamilar seem familiar (think of Windows Registrar’s Office
folders, trash can, and desktop)
, , p) Lecture Theatre
Student Pub
 Can be difficult to maintain over entire site Bank Machine
 Audience-specific
 Makes sense if more than clearly definable audience
clearly-definable ABC College
Potential Students
Faculty
Existing Students
Broke Students
Source: Rosenfeld & Morville, Information Architecture for the Web, 1998

38. Hybrid Organization Schemes
y g
38
 A mixture of several different organization
f l d ff ABC College
Humanities
schemes. Sciences
Locate an Instructor
 Generally,
Generally a very bad thing; yet sometimes Students
Parents
difficult to avoid Get a Library Card
Student Pub
 The point of an organization scheme is to
provide the user with a mental model to
help user understand structure of data.
 Hybrid usually results in confusion
confusion.
 If you must use hybrid scheme, try to visually
separate the different schemes. Services for Students
Find a Student Loan
Get a Library Card
Visit the Student Pub
Students Parents Faculty
y Academic Areas
Fine Art
Fine Arts Humanities Sciences Health Studies Humanities
Sciences

39. Hybrid Schemes
39
Sears separates topical and functional
Functional/Metaphor
Topical
Functional/Metaphor
/Topical
Functional/Metaphor
Topical
Functional
Topical Metaphor
Topical/Functional/
Metaphor

40. Designing Schemes
40
 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
Where do I click if I'm a student looking f the schedule f Introduction to Computers?
f for for

41. Designing Schemes
41
 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
Academic Students Services
Sciences Register Registering
Humanities Student Union Visiting
Social Sciences Scholarships Parties
Scholarships Fine Arts Scholarships

42. Designing Schemes
42
 Be
B cautious of metaphors
i f h
 A metaphor is something that is used to represent something
else.
else
 advantages:
 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 commerce
 disadvantages:
 often difficult to make site sections "fit into your metaphor
fit into"
 If connection between metaphor and content is tenuous then
user will have difficult time finding information.

43. The whole world's a Metaphor
world s
43
Example of the difficulty of making all of a site's main This seems to be a clever metaphor, but the
sections fit into a single metaphor. In the above placement of categories with shifter position is
example, why is the "New" section up in the attic? arbitrary: why is "Images" section in the Reverse
position?

44. Organization Structures
44
 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 site
p p p g

45. Types of Organizational Structures
45
 Linear
 Hub and Spoke
p
 Web
 Hierarchical
Hi hi l
 Facets

46. Linear Organization
46
 Pages in a sequence
 Wizards, checkouts, and other pipelines

47. Hub and Spoke
47
 Start from landing page, and navigate to individual
pages.
 Extension of linear

48. Web
48
 Many pages linked together without levels or
sequence
 Each page is potential hub and spoke
 E.g., MySpace
g, y p

49. Hierarchy
49
 Pages are arranged in a parent-child (tree)
relationship.
 Most sites are hierarchical

50. Facets
50
 A page belongs to one
or more facets.
 A facet is a unique
category that describes
g y
a property of a page
 Each facet might be
arranged hierarchically
 Allows a user more
freedom in finding
information
Kalbach, Designing Web Navigation (O’Reilly, 2007)

51. Example Facets
51
Source: Uta Priss, Elin Jacob, “Utilizing Faceted Structures
for Information Systems Design”, http://www.upriss.org.uk/papers/asis99.pdf

52. Designing Hierarchies
52
 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?
depth
breadth

53. Memory Implications
53
 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
shouldn't we then try to have less breadth and
breadth,
more depth?
 NO!

54. Research on Breadth vs Depth
p
54
User's
Ranking
of
f Average
A
Difficulty
access time
2x6, Breadth=2, Depth=6
4x3, Breadth=4, Depth=3
8x2, Breadth=8,
8x2 Breadth=8 Depth=2 Mean #
of Errors
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

55. Research on Breadth vs Depth
p
55
Average access time Lostness
Worst 60 Worst 70
50 60
50
40
40
30
30
20
20
10 10
Best Best
0 0
8x8x8 16x32 32x16 8x8x8 16x32 32x16
User Preference
Best 16
14
12
10
8
6
4
2
Worst 0
8x8x8 16x32 32x16
Source: Larson & Czerwinski, "Web Page Design: Implications of Memory, Structure and Scent for Information Retrieval," 1998

56. Research on Breadth vs Depth
56
Users greatly preferred this TOC to ... ...this one

57. Conclusions on Breadth vs Depth
57
 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
ie
i.e.,one well-organized moderately-broad information
well-organized,
space gives optimal user performance.

58. Information Scent
58
 However, if the category labels (the organization
H h l b l (h i i
scheme) are not well organized, broader structures can
have just as p
j poor performance (or even worse) as
p ( )
deeper structures.
 Information has a "scent" that users can pick up through
category l b l
labels.
 i.e., scent is the amount of remote indication a user can
derive from a site's organization scheme and labeling about
site s
the relative location of a target.
 A well-designed organization scheme improves the scent of
information,
information thus making it easier for users to find their
information.

59. iii. Navigation Systems
59
 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.
Source: Steve Krug, Don't Make Me Think, 2000; Jakob Nielsen, Designing Web Usability, 1999

60. Navigation Conventions
60
 We rely on conventions in physical
ßêÿš¥
space (in cities, on the freeway, at the
airport, etc) and in information spaces
( i hi a b k or newspaper) th t speed
(within book ) that d We understand the meaning of these
nde stand
signs, even though we can't read their
up the navigation process. language, because of our knowledge
of traffic sign conventions.
 Likewise, various conventions have
,
emerged in the web that help users
in their navigation.
 In general it is sensible to work within
general,
these conventions.
 If not, you should have a good reason
(e.g.,
(e g potential audience is avant-garde,
avant garde
new non-conventional way is clear and
self-explanatory, etc). Even though I can not read the
language used on this page, I can still
 Remember how briefly most users view a navigate it due to it use of web
i t d t its f b
page!! conventions.
Source: Steve Krug, Don't Make Me Think, 2000; Jakob Nielsen, Designing Web Usability, 1999

61. Navigation Conventions
61
Utilities (functional or action oriented)
You are h
here indicators
d
Main sections
(global navigation)
Co pa y
Company ID
sub sections
b ti
Page Title
Local
Navigation
Small text
footer links

62. Navigation Conventions
g
You are here indicator Utilities
62
Company ID
Main sections (global
navigation)
Page Title
Local
Navigation
Small text
footer links

63. Navigation Conventions
63
Conventional arrangements of navigation elements
Global
Global Global
Local
Local Local
Inverted-L Horizontal Embedded Vertical
Kalbach, Designing Web Navigation (O’Reilly, 2007)

64. Searching
64
 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

65. Search Interface Guidelines
65
 Available on every page
 Text box plus button with label “Search”
p
 Located top right (preferred) or top left of page
 Text b
T t box size ~25 characters wide
i 25 h t id

66. Search Engine Results Page
66
(SERP)
 Should be paginated into chunks of about 10 results
 Almosteveryone (~93%) will stick to first SERP
 In Google, about 75% stick to first SERP
 Almost everyone will choose the 1st or 2nd choice
 InGoogle, almost 70% pick 1st or 2nd choice in SERP
In Google, over 50% pick 1st
I G l i k
Source: Nielsen + Loranger, Prioritizing Web usability, 2006

67. Google as Entry Point to Site
67
 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.
 Asa result, many (or even most) people will be using
Google (and not the home page) as the portal into any
page in your site.

68. General Navigation Questions
68
 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?
Source: Jakob Nielsen, Designing Web Usability, 1999

69. 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

70. 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 p g as well
y page
 You may also want to indicate who is the author,
when it was created or last modified copyright info,
modified, info
privacy messages, security options, etc.
 This
usually is placed at the bottom or footer of a
s all
page.

71. Company logos in the upper-left corner is extremely common on the web.
71

72. 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.
 People ill i it th h
P l will visit the home page more often th any other page in your site.
ft than th i it
 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)

73. 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

74. Where am I ?
74
Company ID
Page Title
Navigation Highlight

75. 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 g
the 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.
In this example, the Award Winners isn't a
75 link.

76. 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 location
artists),
indicators reasonably obvious (but not obnoxious).
76

77. What s
What’s Here? – Page Titles
77
Page Name
Page Name
Content here Content here
Page Name
Page Name
Content here
C t th Content here
C t th
Make th
M k the page titl bi and prominent: typically it should be
title big d i t t i ll h ld b
the largest text on the page.
Source: Steve Krug, Don't Make Me Think, 2000

78. Where have I been?
78
 Since the web is state-less ( h server
Si h bi l (the
doesn't keep track of the last page you
were on), it is difficult to indicate this.
) d ff l d h
 the browser's Back button and History
button help
 Though less than 1% of users use the history
feature
 One partial solution is to use different link
and visited link colors.
Source: Nielsen + Loranger, Prioritizing Web usability, 2006

79. Breadcrumbs
79
Notice that each step in trail is a link.
Breadcrumb links
Most sites do not make the last step in the
trail (i.e., the current section) a link.

80. Can you tell which color is the visited
link and which is the non-visited link?
80

81. Visited Link Color
81
 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
helpful because users don't have to relearn every time they go to
a new site.” Spool, 1999
 “Unchanging li k colors create navigational confusion b
“U h i link l t i ti l f i 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.”
Nielsen, 2006
Ni l
Source: Jared Spool, Web Site Usability, 1999
Source: Nielsen + Loranger, Prioritizing Web Usability, 2006

82. Visited Link Color
82
 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

83. Whatever you do, don't use too
Wh t d d 't t
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

84. Another l ti t th "Wh
A th solution to the "Where Have I Been?"
H B ?"
question is to provide "bread-crumbs" — that is,
some visual indication of which choices the user has
made, usually via hyperlinks
84

85. Where can I go?
85
 Indicated by the page s
b page's
links
 Every Web page should
contain at least one link
 never have Dead-end pages
Dead end
(pages with no links to any
other local page in the site)
 the site's links should form a
navigation system that has hyperlink
consistency f
it from page t 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

86. Types of Navigation Systems
86
 global
 provides access to first-level
section pages.
 available in all pages
 local
Global system p
y provides
 in a complex site provides access
site, links to these pages
to pages within a section or sub-
site.
 contextual
t t l
 additional embedded links
 only for non-critical links or for
y
repeating main links
local system might provide
 Might also be a series of related links to these pages
content links

87. global navigation system
local navigation system
contextual navigation
87

88. Navigation Design: First Screen
88
 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
vertical scrolling (“above the fold”) is
extremely important.

89. Navigation Design: First Screen
89
 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.
 Use s w sc o ve ca y
Users will scroll vertically if there is some compelling content
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
time.
time
 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 pa s of your
us, us y o e os po a parts 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

90. Scrolling Research
90

91. Navigation: First Screen
91
 Most
M users have monitor resolution set to
h i l i
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)

92. Navigation: First Screen
92
 Users with hi h resolution generally
U i h higher l i ll
do not have their browser window
maximized.d
 Why?

93. Navigation: First Screen
93
 They may have:
 multiple monitors of different sizes
 multiple windows opened
 Sites often don t take advantage of
don’t
widescreen/maximized space

94. Navigation: First Screen
94
 Repeating backgrounds can cause problems at
higher resolution.
800 x 600 1600 x 1200

95. Navigation: First Screen
95
 Thus, design your page with the 1024 x 768
resolution in mind.
 This means content area is about 1004 x 598
1024x738
1004x598 Browser 1024x768
Content Window Screen Size
Area

96. Designing Pages
96
 Ideally, your pages should work at any resolution,
from 800x600 to 1280x1024 and beyond.

97. These vital navigational elements are
off-screen at smaller window size.
97

98. This site is optimized for larger size but is still
usable at smaller size
98

99. This site is optimized for larger size but is still
usable at smaller size
99

100. Guidelines for screen size
100
 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
user's window size (that is, avoid frozen layouts that
are always the same size)
size).
 Even better, use an elastic layout that sensibly
adapts to window size.
d i d i

101. Examples of frozen layout
101

102. Examples of fluid layout
Notice how filling entire
window might make text
hard to read.
102

103. Examples of elastic layout
Notice how size increases
but doesn’t fill entire
window in order to
maintain readability
103

104. 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
 make the company logo a link b k to home page.
k h l li k back h
 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 p
feedback to the user that logo is clickable.
Go To Home Page
home

105. Navigation Elements
105
 There are many different user interface elements by which
Th diff t i t f l t b hi h
you can construct a navigation system.
 Navigation bars
g
 Text menus
 Dynamic menus
 Trees
T
 Action buttons
 Drop-down menus
p
 Tag clouds
 Step + paging links
 Site
Si maps and indexes
di d
 Directories
Kalbach, Designing Web Navigation (O’Reilly, 2007)

106. Navigation Bars
106
 A chain of horizontal links made from
 Images
 Text

107. Navigation: Text
107
 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.

108. Navigation Bars
108
 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.
 Testshave 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

109. Navigation: Tabs
109
 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.

110. Navigation: Tabs
110
 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. 

111. Navigation: Icons
111
 Icons are metaphors
I h
 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

112. A picture is worth a thousand words
...
112
User's Interpretation Designer’s Intended Meaning
State 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 !

113. Imagemaps vs. Individual
113
Graphics
 A image-based navigation system can be created
via single graphic using an image map, or by
breaking into individual graphics.

114. Imagemaps vs. Individual
114
Graphics
Advantages Disadvantages
Imagemaps  Generally (but not  If images turned off or
always) faster loading
y ) g slow to download,,
since fewer files to image map cannot be
download. used.
Individual Graphics  Potentially faster loading  Generally slower
on subsequent pages loading on first page.
due to browser caching.
 Navigation system still
usable (if ALT used)
even without image
downloaded.
downloaded
 Can implement rollovers
(which is not necessarily
a good thing).

115. Navigation & Images
115
 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
Products
<img src="abc.gif" alt="Products"> 

116. Better H
B Homes and d
Gardens web site
doesn't use the
ALT attribute for
their i
th i images.
Since the menu in
the blue bar is an
image map, it is
i i
unusable for
browsers with
images turned off.
Metropolis's site, on
the other hand,
does use the ALT
attribute.
The navigation
elements are still
usable here even
116 with images turned
off.

117. Navigation: Footer
117
 It is important to provide the
user with text equivalents for
navigational graphics
(especially f i
( i ll for image maps) )
since graphics turned off or
the user might have might
press the Stop button on their
h S b h
browser.
 Common practice to place
text-versions of links at bottom
of pages.

118. Navigation: Text Menus
118
 Vertical series of text l k
l f links
 Try to avoid wrapping a text link over two or more
lines.
li
 This typically confuses users into thinking there is more than
one link
link.
Wines How many wines are listed here?
Merlot
Zinfandel
Muscat
Cabernet
Sauvignon
Nebbiolo
Wines  Wines If space is a problem, try using bullets
Merlot •Merlot
Zinfandel •Zinfandel
Muscat •Muscat
Cabernet Sauvignon •Cabernet
Nebbiolo Sauvignon
•Nebbiolo
Source: Jared Spool et al, Web Site Usability: A Designer's Guide, 1999

119. Navigation: Text
119
 Remember that most users will ignore
sers
embedded text links.
 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

120. Navigation: Text
120
 Avoid i blue
A id using bl text f anything other than
for hi h h
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
information about the link.
<a href="privacy html" title="Read our privacy policy">privacy</a>
href= privacy.html title= Read policy >privacy</a>

121. Navigation: Dynamic Menus
121
 Advantages
Ad
 Can display more choices in a single space
 Familiar interaction (similar to desktop applications
 Disadvantages
 Dynamic menus from a vertical menu requires precise mouse
y a c e us o 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

122. Navigation: Tree
122
 Good for site with strong hierarchical organization
 Potentially
problem with horizontal space when many
nodes are opened.

123. Navigation: Action Buttons
123
 Text hyperlinks are sometimes not the best choice
for representing actions that do something
important.
 Texthyperlinks should be clickable with no
consequences
 Buttons are better choice for indicating transactions
g

124. Navigation: Action Buttons
124
 Two types:
 Graphical action buttons
 An image that (hopefully) looks like a button
 HTML buttons
 Created via <input> tag

125. Navigation: Pull-Down Menus
Pull Down
125
 While
Whil a good way
d
to save on screen
space, pull down
space pull-down
menus force user
to act to find out
navigation options
 Works best in
conjunction with
button bar or text
links.

126. Sun Microsystems main page uses a
pull-down menu at top, with
duplicate images at bottom.
126

127. Navigation: Tag Clouds
127
 Provides a snapshot of various categories in a site
and their relative importance/frequency.
 Each word is a link
 Sorted alphabetically
p y
 Perhaps less useful for corporate sites or other sites
without categories or tags
g g

128. Navigation: Stepping and Paging
128
 Allow users to step through a linear series of pages,
or move back and forth between multiple related
pages.

129. Navigation: Directories
129
 Provides access to a wide variety of non-
hierarchical information that can be organized via
categories.

130. Navigation: Site maps and
130
indexes
 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

131. Navigation: Site maps and
131
indexes

132. Page Types
132
 Different page types will change the elements and
organization of a page’s navigation.
 They are:
 Navigational
 Content
 Functional
Kalbach, Designing Web Navigation (O’Reilly, 2007)

133. Page Types: Navigational
133
 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

134. Page Types: Content
134
 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.

135. Page Types: Functional
135
 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.

136. Data Entry
Data-Entry Usability
136
 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

137. Conceptual Model: Lists versus Objects
137
 Data-entry pages generally have two views for
data:
 Lists
(also called tables)
 Objects (also called records or data entry forms).
j ( y )

138. Data Entry
Data-Entry Forms
138
 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.

139. Guidelines for fields
139
 Use standard unprotected fields to accept
d d d fi ld
unpredictable text entry (names, street addresses, and
so on)
on).
 Use protected fields (fields into which users cannot
type) to show system values values saved elsewhere in
values,
the system, or calculated values.
 Use required fields when you have to be sure that the
form contains all necessary information.
 Don't have too many required fields
y q
 Use validated fields when business rules must be
ensured.

140. Guidelines for fields
140
 Make entry areas the right size
<input type="text" name="cpt" maxlength="6" size="6">
 Don't k
D ' make users format the text
f h
 Provide keyboard and mouse navigation
<label for="fix">Fi<u>x</u>:</label>
<input type="text" name="fix" accesskey="x">

141. Guidelines for labelling forms
141
 Fields should be organized in columns and groups,
not in one long scrollable list down the screen.
 Ifthere 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
consistently

142. Guidelines for labelling forms
142
 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.

143. Using defaults
143
 Use a default whenever there is a likely one.
f
 In fields, show the default entry in the field.
 In a set of checkboxes or radio buttons, set the most
likely choice
I a d
In dropdown list, pick the mostly lik l entry.
d li i k h l likely
If most of your customers are from North America, then why not
y , y
put Canada or United States as the default value (rather than
just list them alphabetically)

144. Using Defaults
144
 Set defaults so that they benefit your site's visitors,
not your organization.
Source: Jeff Johnson, Web Bloopers, 2003

145. Indicating a required field
145
 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
Boldor coloured labels won't help th
l dl b l t h l those who use screen
h
readers.

146. 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.

147. Validated Fields
147
 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:
Enter Date (yyyy/mm/dd):
 Be as forgiving as possible
 Why do so many sites reject credit card numbers, etc. if they
contain spaces?
 Change the form so that it avoids user formatting
mistakes
Source: Jeff Johnson, Web Bloopers, 2003

148. Other Controls
148
 Use check boxes for entering binary (yes/no) data.
 Use radio buttons for choosing an option from a
g p
small list of choices.

149. Using Tabs
149
 If form has too many fields, split them into several
related tab pages.
 Eachtab page will need a way to move to the next tab
page

150. Using Tabs
150
 Tab pages provide an alternate way to navigate a
linear series (also called a pipeline or Wizard).

151. Using Popups
151
 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
p
problems

152. Lists
152
 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 , y
and return to the list view.

153. How to Select and Open Objects from Lists
S 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

154. How to Select and Open Objects from Lists
S Op O j
154
Field 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"

155. Concluding Caveats on Usability
155
 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