web i - 09 - usability

EASING INTO WEB DEVELOPMENTDEVELOPMENT9 USABILITY9. USABILITY

INTRODUCTION1HTML2

3 TABLES3FORMS4 FORMS4HTTP5 HTTP5CSS6 CSS6CSS FRAMEWORKS7DIGITAL MEDIA8

2 USABILITY9

Designing a Web SiteDesigning a Web Site3

Part 1: Site Design / Engineering concerned with usability

Part 2: Page Design / Art concerned with aesthetics (visual attractiveness) concerned with aesthetics (visual attractiveness)

What Do You Dislike About the Web?What Do You Dislike About the Web?4

or, what do you hate to see on a web page?

Usability MattersUsability Matters5

M f th thi d 't lik b t Many of the things we don t like about the web pertain to the usability of web sitesweb sites.

Usability is:D i i thi th t th k Designing things so that they make sense to the people who use them.

How easy is a web site to understand How easy is a web site to understand and use.

Usability in real lifeUsability in real life6

http://www.flickr.com/photos/rdolishny/2760207306

Usability in real lifeUsability in real life7

http://www.flickr.com/photos/johnswords/2717108560/http://www.flickr.com/photos/11759181@N04/1176026705/

Usability and Audience TypesUsability and Audience Types8

People visit a site for different reasons.

Thus, the type of audience affects usability.y Also, how people use the web has

changed significantly over the past changed significantly over the past ten years

Information Foragers

• users who are looking for a

Information Foragers

users who are looking for a particular piece of information.

• informavoresinformavores• concerned chiefly with usability

(how easy is it to find information).( y )

9

Information ForagersInformation Foragers10

Will rely on search engine to get to the “information patch” (i.e., web site) Will be seeking very specific “prey” (information) Because search engines make it easy to find patches, g y p ,

hunters will spend little time looking for prey

Even if hunters visit a site more often, they will still Even if hunters visit a site more often, they will still leave it quicker.

Surfers

• users who "stumble" across a site.d hi fl i h h i• concerned chiefly with aesthetics

(does this site look professional or interesting enough to continueinteresting enough to continue exploring this site).

• MinorityMinority

11

Types of Information ForagingTypes of Information Foraging12

A given user can, at different times, engage in different types of information foraging Known item seeking Exploratory seekingp y g Don’t know what you need to know Re-Finding Re Finding

http://www.boxesandarrows.com/view/four_modes_of_seeking_information_and_how_to_design_for_them

Known item seekingKnown item seeking13

Users who know what they are looking for, can describe it, and may know where to start. the user may be happy with the first answer they find

Prefer: Prefer: Search a z indexes a-z indexes navigation

Main virtue of site: able to answer user’s query fast

Exploratory seekingExploratory seeking14

Users who know roughly what they are looking for, can’t describe it, and likely don’t know where to start. They will usually recognize when they have found the

right answer, but may not know whether they have found enough information (i.e., may forage more)

Prefer: Navigation Navigation related links search search

Don’t know what you need to knowDon t know what you need to know15

Sometimes we don’t know exactly what we need to know. We may think we need one thing but need another or, we may be looking at a website without a specific , y g p

goal in mind.

Prefer: Prefer: Interesting content

Re-FindingRe Finding

f16

Users looking for things they have already seen. They may remember exactly where it is, or only

b h i i h li l id remember what site it was on, or even have little idea about where it was.

~40% of an individual’s searches are re finding ~40% of an individual s searches are re-finding searches (performing a search they have already performed in the past).*p p )

Prefer: breadcrumbs, recently viewed items, cookie support, etc breadcrumbs, recently viewed items, cookie support, etc Wishlists, shopping carts, etc

* Teevan et al, “Information Re‐Retrieval: Repeat Queries in Yahoo’s Logs”, SIGIR 2007

Other Browsing BehaviorsOther Browsing Behaviors17

Velocity of web navigation* 25% of all documents displayed for less than 4 seconds 52% less than 10 seconds “they [the participants] regularly just seemed to glimpse

over most of the information offered, before they perform their next navigation action.”

Consequence for usability?

* Weinreich et al, “Off the Beaten Tracks: Exploring Three Aspects of Web Navigation”, IW3C2 2006

Velocity of web navigationVelocity of web navigation18

Weinreich et al, “Off the Beaten Tracks: Exploring Three Aspects of Web Navigation”, IW3C2 2006

Other Browsing BehaviorsOther Browsing Behaviors19

Web site re-visitation is very common ~70%*-80%** of a user’s page visits are re-visits to a site. ~45% of a user’s page visits are re-visits to a page. * *** ~1 in 6 (16%) of visits are to Google*** ~ 60% of visits are to user’s top 10 site***

However, this data does vary markedly for different individuals

Consequence for usability?

** Cockburn et al, "Improving Web page revisitation: Analysis, design and evaluation," IT & Society 2003

*** Weinreich et al, “Off the Beaten Tracks: Exploring Three Aspects of Web Navigation”, IW3C2 2006

* Weinreich et al, “Web Page Revisitation Revisited: Implications of a Long‐term Click‐stream Study of Browser Usage”, CHI 2007

Part 1: Site DesignPart 1: Site Design20

Usability is perhaps the most important goal Usability is perhaps the most important goal in web design. If users cannot figure out how to use your site

easily some will leave your site never to returneasily, some will leave your site, never to return. Perhaps more importantly, a good user

experience creates trust in a site. In the web, users experience usability first and In the web, users experience usability first and

pay later; thus if site not usable, they will not purchase (or revisit) from your site. in contrast, outside the web, users generally buy

f h b l ( h k ) lfirst, then experience usability (think DVDs) later.

Factors Determining UsabilityFactors Determining Usability21

i. The response time (i.e., download time) for site/pages.ii. The organization system for site.g yiii. The navigation system used throughout the site.iv The content of the siteiv. The content of the site.

i. Response Timei. Response Time22

If your pages take a long time to download users If your pages take a long time to download, users will leave your site.

How long is too long?1 d i b i ( 1 second response-time between action (e.g., mouse click) and response (page loaded) is ideal. For most broadband users, that means about 200 KB10 d i h li i f k i i i 10 seconds is the upper limit for keeping user in site.

That means, any given page should be functionallyloaded in no more than ten seconds. 2006, webdesign.about.com

Nov. 1998, www.emarketer.com

% still waiting Load Time84% 10 sec51% 15 sec26% 20 sec

% Who Leave Load Time16% 10 sec49% 15 sec74% 20 sec

Source: Jakob Nielsen, Designing Web Usability, 1999

5% 30 sec95% 30 sec

Factors Determining Response Times

23

Average response time is determined by: Average response time is determined by: the speed of the user's connection to Internet the speed/load of the web server the speed of the server's connection to Internet load on the Internet (2-4 pm peak loads in

North America)North America) cumulative file size of the images and objects in

web pageWhi h f h f d h l Which of these factors do you have control over as a web designer?

Understanding Page SizeUnderstanding Page Size24

Again, page size is the cumulative file sizes of all the elements on a web page. This includes: the HTML file the image filesg object files (video, Flash)s

First Page of Site Response Time

randyc.gif 1K

bar.gif 3Kg

bio.gif 1Kbio_over.gif 1K

site.gif 1Ksite_over.gif 1K

id if 1Kidea.gif 1Kidea_over.gif 1K

for.gif 1Kfor over gif 1K

main.htm 4K

for_over.gif 1K

25TOTAL 16KDownload time @ 28.8 Kbps = 5 seconds

128 Kbps = 1 second

Subsequent Page of Site Response Time

Other images still in cache so no need to re-download

bio_bar.gif 3K

download

cv.gif 1K

cv.htm 4K

26TOTAL 8KDownload time @ 28.8 Kbps = 1.5 seconds

128 Kbps = 1 second

First Page of Site Response Time

menu.htm 1Kmain.htm 1kframeset.htm1K

5 images +roll-overs 60K

imagebar.gif 1K

imagmap gif 17Kimagmap.gif 17K

rollovers 4K

logo.gif 1K


128 Kbps = 7 seconds

Subsequent Page of Site Response Time

Other images still in cache so no need to re-download

artbar.gif 2K

artist.gif 8K

dot gif 1K

byname.gif 2K

dot.gif 1K

alphabet.gif 8K

ti t htm 20Kartist.htm 20K


128 Kbps = 3 seconds

ii. Organization Systemii. Organization System29

The way a site is organized also affects usability. Organization is important because a web site is about

information. Organization refers to the grouping of information. Grouping: providing paths to information by showing relationships.p g p y g p The trouble with relationships is that they are subjective.

Grouping ExerciseGrouping Exercise30

Group (organize) the following information:

refrigerator socks

b bureau living room di ti dictionary kitchen milk milk bookshelf bedroom bedroom

Grouping PossibilitiesGrouping Possibilities31

Alphabeticallybedroombookshelfrefrigeratorbureau

By SizeLarge

kitchen

By RoomKitchen stuff

refrigeratormilk

Living Room stuffbureaudictionarykitchenliving roommilk

living roombedroom

Mediumrefrigeratorbureau

Living Room stuffdictionarybookshelf

Bedroom stuffsocks

socksbureaubookshelf

Smallsocksdictionary

ilk

bureau

By hierarchical locationmilk

yKitchen

refrigeratormilk

Living Roombookshelfbookshelf

dictionaryBedroom

bureausocks

Source: Fleming, J, Web Navigation, 1998

Subjective OrganizingSubjective Organizing32

Because organizing information is subjective, there are innumerable ways of organizing information. While this means there is no "perfect" way of

organizing your information, there are still "better" and "worse" ways of organizing information.

How you organize information in a web site should y gbe a balance between how the information "wants" to be organized and how the user "wants" to find it.g

Source: Fleming, J, Web Navigation, 1998

Organization SystemOrganization System33

Refers to the "philosophy" and to the "execution" used to organize a site's information.

In other words, an organization system refers to both its: Organization scheme (how a site is subdivided into

sections) and sections) and Organization structure (the relationships between

these sections).these sections).

Organization SchemesOrganization Schemes34

Defines the shared characteristics of content items and determines their logical grouping.

Types of organization schemes: exact exact ambiguous hybrid hybrid

Source: Rosenfeld & Morville, Information Architecture for the Web, 1998

Exact Organization SchemesExact Organization Schemes35

Divide information into well-defined, mutually exclusive sections. Alphabetic Courses

AstronomyBiologyChemistryDDramaFencing

ChronologicalPress ReleasesNov 4, 1999Oct 21, 1999Oct 10, 1999Sept 3, 1999Aug 18, 1999


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.


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


Broke Students

Hybrid Organization Schemesy g38

A f l d ff A mixture of several different organization schemes. Generally a very bad thing; yet sometimes

ABC CollegeHumanitiesSciencesLocate an InstructorStudents Generally, a very bad thing; yet sometimes

difficult to avoid The point of an organization scheme is to

StudentsParentsGet a Library CardStudent Pub

provide the user with a mental model to help user understand structure of data. Hybrid usually results in confusion Hybrid usually results in confusion. If you must use hybrid scheme, try to visually

separate the different schemes. Services for StudentsFind a Student LoanFind a Student LoanGet a Library CardVisit the Student Pub

Academic AreasFine Art

Students Parents FacultyFine Art

HumanitiesSciences

y

Fine Arts Humanities Sciences Health Studies

Hybrid SchemesHybrid Schemes39

Sears separates topical and functional

Topical

Functional/Metaphor

Functional/Metaphor/Topical/Topical

Functional/Metaphor

Topical

Functional

Metaphor

Topical/Functional/

Topical

Topical/Functional/Metaphor

Designing SchemesDesigning Schemes40

The danger with hybrid schemes is that they can utterly confuse user.

Make sure your categories are clear as possible.What does this do? What does this do?

Topical

Audience Specific/Functional/Topical/Metaphor = BIG MESS

f f fWhere do I click if I'm a student looking for the schedule for Introduction to Computers?


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


B i f h Be cautious of metaphors A metaphor is something that is used to represent something

elseelse. advantages:

metaphor can provide a unifying framework to entire site metaphor can provide a unifying framework to entire site users can make use of their knowledge they already have e.g., the shopping cart metaphor in e-commerce sites e.g., the shopping cart metaphor in e commerce sites

disadvantages: often difficult to make site sections "fit into" your metaphor often difficult to make site sections fit into your metaphor If connection between metaphor and content is tenuous then

user will have difficult time finding information.

The whole world's a MetaphorThe whole world s a Metaphor43

Example of the difficulty of making all of a site's main sections fit into a single metaphor. In the above example, why is the "New" section up in the attic?

This seems to be a clever metaphor, but the placement of categories with shifter position is arbitrary: why is "Images" section in the Reverse position?

Organization StructuresOrganization Structures44

The structure of information defines how different categories defined by the scheme relate to one another Structure defines way users navigate through

information It is the plan or map of the pages in a sitep p p g

Types of Organizational StructuresTypes of Organizational Structures45

Linear Hub and Spokep Web Hi hi l Hierarchical Facets

Linear OrganizationLinear Organization46

Pages in a sequence Wizards, checkouts, and other pipelines

Hub and SpokeHub and Spoke47

Start from landing page, and navigate to individual pages. Extension of linear

WebWeb48

Many pages linked together without levels or sequence Each page is potential hub and spoke E.g., MySpaceg , y p

HierarchyHierarchy49

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

FacetsFacets50

A page belongs to one or more facets.

A facet is a unique category that describes g ya property of a page Each facet might be Each facet might be

arranged hierarchically Allows a user more Allows a user more

freedom in finding information

Kalbach, Designing Web Navigation (O’Reilly, 2007)

Example FacetsExample Facets51

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

Designing HierarchiesDesigning Hierarchies52

Try to balance breadth and depth Users don't like having to "drill-down" endlessly to find

an item, nor do they like having to read through hundreds of menu choices.

Key question is what is the right balance?

breadth

depth

Memory ImplicationsMemory Implications53

Most people can only manage seven, plus or minus two, items of information at a time.

Thus, some researchers have suggested that your site should have 5 to 9 major sections.j

If we have limitations with short-term memory, shouldn't we then try to have less breadth and shouldn t we then try to have less breadth, and more depth? NO! NO!

Research on Breadth vs Depthp54

User's Ranking f Aof

DifficultyAverage

access time

Mean #

2x6, Breadth=2, Depth=6


8x2 Breadth=8 Depth=2of 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

Research on Breadth vs Depthp55

Average access time Lostness

40

50

60

50

60

70Worst Worst

10

20

30

10

20

30

40

0

10

8x8x8 16x32 32x160

10

8x8x8 16x32 32x16Best Best

User Preference

10

12

14

16Best

2

4

6

8

Source: Larson & Czerwinski, "Web Page Design: Implications of Memory, Structure and Scent for Information Retrieval," 1998

0

2

8x8x8 16x32 32x16Worst

Research on Breadth vs DepthResearch on Breadth vs Depth56

Users greatly preferred this TOC to ... ...this one

Conclusions on Breadth vs DepthConclusions on Breadth vs Depth57

access time is proportional to depth of hierarchy i.e., the deeper the menu, the more time the user will

spend and the less happy she/he will be. Try to avoid a depth of more than 2 or 3

increases in breadth do not seem to affect speed i e one well-organized moderately-broad information i.e., one well-organized, moderately-broad information

space gives optimal user performance.

Information ScentInformation Scent58

H if h l b l ( h i i However, if the category labels (the organization scheme) are not well organized, broader structures can have just as poor performance (or even worse) as j p p ( )deeper structures.

Information has a "scent" that users can pick up through l b lcategory labels.

i.e., scent is the amount of remote indication a user can derive from a site's organization scheme and labeling about derive from a site s organization scheme and labeling about the relative location of a target.

A well-designed organization scheme improves the scent of information thus making it easier for users to find their information, thus making it easier for users to find their information.

iii. Navigation Systemsiii. Navigation Systems59

When a user enters a web site, he/she is usually trying to find something, and he/she must decide whether to search or to browse some users are "search-dominant," others are "link-

dominant" thus, every web site should provide both:

A way to find information via a search facility, A way to find information via clicking on a hierarchical series of

links, also called a navigation system.links, also called a navigation system.

Source: Steve Krug, Don't Make Me Think, 2000; Jakob Nielsen, Designing Web Usability, 1999

Navigation ConventionsNavigation Conventions60

We rely on conventions in physical We rely on conventions in physical space (in cities, on the freeway, at the airport, etc) and in information spaces ( i hi b k ) th t d

ßêÿš¥

We nde stand the meaning of these(within a book or newspaper) that speed up the navigation process.

Likewise, various conventions have

We understand the meaning of these signs, even though we can't read their language, because of our knowledge of traffic sign conventions.

,emerged in the web that help users in their navigation. In general it is sensible to work within In general, it is sensible to work within

these conventions. If not, you should have a good reason

(e g potential audience is avant garde (e.g., potential audience is avant-garde, new non-conventional way is clear and self-explanatory, etc).

Remember how briefly most users view a Even though I can not read the language used on this page, I can still

i t it d t it f b Remember how briefly most users view a page!!

Source: Steve Krug, Don't Make Me Think, 2000; Jakob Nielsen, Designing Web Usability, 1999

navigate it due to its use of web conventions.


Utilities (functional or action oriented)h d

Company ID

Main sections(global navigation)

b ti

You are here indicators

Co pa y sub sections

Page Title

Local Navigation

Small text footer links

Navigation Conventionsg62Company ID

Utilities

Main sections (global

You are here indicator

Page Title

Main sections (global navigation)

Local Navigation

Small text footer links


Conventional arrangements of navigation elements

Global Global

Local

Global

Local Local

Inverted-L Horizontal Embedded Vertical


SearchingSearching64

About 50% of users will use search rather than navigation system. However, if your search facility is not very accurate,

adding a search facility may be counter-productive.

Source: Louis Rosenfeld, Information Architecture, 1998; Steve Krug, Don't Make Me Think, 2000

Search Interface GuidelinesSearch Interface Guidelines65

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

Search Engine Results Page (SERP)

66

Should be paginated into chunks of about 10 results Almost everyone (~93%) will stick to first SERP In Google, about 75% stick to first SERP

Almost everyone will choose the 1st or 2nd choice Almost everyone will choose the 1 or 2 choice In Google, almost 70% pick 1st or 2nd choice in SERP I G l 50% i k 1st In Google, over 50% pick 1st

Source: Nielsen + Loranger, Prioritizing Web usability, 2006

Google as Entry Point to SiteGoogle as Entry Point to Site67

One of the key changes in user behavior over the past 5 years is that users often don’t visit “good” sites but look for “good” answers. As a result, many (or even most) people will be using

Google (and not the home page) as the portal into any page in your site.

General Navigation QuestionsGeneral Navigation Questions68

A site's navigation system should answer these three user questions: Where am I? Where have I been? What’s here? Where can I go? Where can I go?


Where Am I?Where Am I?69

In any page in your site, users should be able to tell: where on the web they are where in the site they are

Where am I (on the web)?Where am I (on the web)?70

Every page in your site should contain the company name or logo. This is generally placed in the upper-left corner It is usually made into a link to the home page as welly p g

You may also want to indicate who is the author, when it was created or last modified copyright info when it was created or last modified, copyright info, privacy messages, security options, etc. This s all is placed at the bottom or footer of a This usually is placed at the bottom or footer of a

page.

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

71

Where am I (on the web)?Where am I (on the web)?72

Home pages should allow user to quickly determine the site's purpose in a quick scan of the page. P l ill i it th h ft th th i it People will visit the home page more often than any other page in your site.

But studies show that users will spend less time viewing a home page than an interior content page.

This home page provides few clues as to what Acer does (build and sell computer equipment)

Where am I (in the site)?Where am I (in the site)?73

You should specifying where the user is within the site by: giving each page a name. highlighting, within the navigational menu, the location g g g, g ,

of the current page within the larger hierarchy of the site.

Breadcrumb trail Shows the user where she is in the site hierarchy. e.g.,

Home | Products | Shoes | Athletic | Nike

Where am I ?Where am I ?74

Company IDCompany ID

Page Title

Navigation Highlight

In the Slate Magazine site, we can easily tell that this particular page is part of the Culture section.

Unfortunately, the Culture section is quite large with many subsections (this page is part of the Dialogue subsection); however, there is no way to tell this without exploring y p gthe Culture link.

The amazon site, in contrast, visually shows which section and subsection we are in (the Award Winners subsection of the Books section).

Note: in general, if your are indicating current location via change in navigation banner, the link should be disabled.

75In this example, the Award Winners isn't a link.

Sometimes the indicator of the site's current location is overly vague. Can you find it in this example?

Unless you are trying to impress users with your originality (which often is the case for designers and artists) try to make locationoften is the case for designers and artists), try to make location indicators reasonably obvious (but not obnoxious).

76

What’s Here? – Page TitlesWhat s Here? Page Titles77

Page NamePage Name

Content hereContent here

Page Name

Page Name

C t t h C t t h

M k th titl bi d i t t i ll it h ld b

Content here Content here

Make the page title big and prominent: typically it should be the largest text on the page.

Source: Steve Krug, Don't Make Me Think, 2000

Where have I been?Where have I been?78

Si h b i l ( h Since the web is state-less (the server doesn't keep track of the last page you

) d ff l d hwere on), it is difficult to indicate this. the browser's Back button and History

button help Though less than 1% of users use the history

ffeature

One partial solution is to use different link and visited link colors.

Source: Nielsen + Loranger, Prioritizing Web usability, 2006

BreadcrumbsBreadcrumbs79

Breadcrumb linksNotice that each step in trail is a link.

Most sites do not make the last step in the trail (i.e., the current section) a link.

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

80

Visited Link ColorVisited Link Color81

Using the default colors for links (blue for unvisited, purple for visited) is best choice for usability.

"Of all the graphic design elements we looked at, the only one that is strongly tied to user success was the use of browser-default link color ... Our theory is that use of the default colors is default link color ... Our theory is that use of the default colors is helpful because users don't have to relearn every time they go to a new site.” Spool, 1999

“U h i li k l t i ti l f i b “Unchanging link colors create navigational confusion because users don’t quite understand their different choices or where they are. This is as serious a usability problem as it ever has been.” Ni l 2006Nielsen, 2006

Source: Jared Spool, Web Site Usability, 1999

Source: Nielsen + Loranger, Prioritizing Web Usability, 2006

Visited Link ColorVisited Link Color82

Other strategies: use red as non-visited link color (our eyes look at red

first) use as non-visited link color the same color as primary

color scheme in site as whole; visited link color would then be a lighter, less-saturated version of that color.

Source: Jared Spool, Web Site Usability, 1999

Wh t d d 't tWhatever you do, don't use too many link colors in one page or site. The Slate Magazine main page (below) uses three different link colors (plus another for visited link).(p )

Internal pages in the site (at left) use 3 different link colors plus two different visited link colors.

83

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

84

Where can I go?Where can I go?85

Indicated b the page's Indicated by the page s links

Every Web page should Every Web page should contain at least one link never have Dead-end pages never have Dead end pages

(pages with no links to any other local page in the site)

the site's links should form a navigation system that has

i t f t hyperlink

consistency from page to page. Remember, not every visitor to a page comes

through the front door; they might arrive from a search engine link or a bookmark.


Types of Navigation SystemsTypes of Navigation Systems86

global global provides access to first-level

section pages. available in all pages

local in a complex site provides access Global system provides in a complex site, provides access

to pages within a section or sub-site.t t l

y plinks to these pages

contextual additional embedded links only for non-critical links or for y

repeating main links Might also be a series of related

content linkslocal system might provide links to these pages

content links

global navigation system

local navigation systemcontextual navigation

87

Navigation Design: First ScreenNavigation Design: First Screen88

The first screen the user sees must be as good The first screen the user sees must be as good as it can be. This first screen might not be the home page —g p g

the user might come to a page from an external link or search engine.

The part of a web page that is visible without The part of a web page that is visible without vertical scrolling (“above the fold”) is extremely important.

Navigation Design: First ScreenNavigation Design: First Screen89

About 50% of users will almost never scroll About 50% of users will almost never scroll The majority of users scan what they see on the browser and

then make their navigation choice. Users will scroll vertically if there is some compelling content Use s w sc o ve ca y e e s so e co pe g co e

(e.g., a listing of products, an article they are reading, search engine results, etc).

Home pages will only be scrolled between 14-23% of the timetime.

Almost no one will use the horizontal scroll bars. NEVER require users to use the horizontal scroll bars to see important navigation elements!!!

Of those that do scroll, most will only scroll about a screen full.

Thus, you must try to fit the most important parts of your us, you us y o e os po a pa s o you site—that is, the navigation system, company name, page title, and search option—above the fold.

Source: Nielsen + Loranger, Prioritizing Web Usability, 2006

Scrolling ResearchScrolling Research90

Navigation: First ScreenNavigation: First Screen91

M h i l i Most users have monitor resolution set to 1024x768 or 1280x1024. Recall, however, that browser buttons, status

bar, window title, etc also take up space.

http://www.hobo‐web.co.uk/tips/25.htm (March 2008 visit stats)


U i h hi h l i ll Users with higher resolution generally do not have their browser window

dmaximized. Why?


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


Repeating backgrounds can cause problems at higher resolution.

800 x 600 1600 x 1200


Thus, design your page with the 1024 x 768 resolution in mind. This means content area is about 1004 x 598

1024x768Screen Size

1024x738Browser Window

1004x598Content Area

Designing PagesDesigning Pages96

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

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

97

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

98

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

99

Guidelines for screen sizeGuidelines for screen size100

Optimize for 1024x768 Do not design solely for a specific monitor size g y p

because screen sizes vary among users. Use a liquid layout that stretches to the current Use a liquid layout that stretches to the current

user's window size (that is, avoid frozen layouts that are always the same size) are always the same size).

Even better, use an elastic layout that sensibly d i d iadapts to window size.

Examples of frozen layout

101

Examples of fluid layout

Notice how filling entire window might make text hard to read.

102

Examples of elastic layout

Notice how size increases but doesn’t fill entire window in order to maintain readability

103

Navigation: Where can I go?Navigation: Where can I go?104

Your global navigation system should provide a way to return to the site's home page.

Methods: provide an explicit home link to navigation bar, or

k h l li k b k h make the company logo a link back to home page. In this case, it is nice to also add the word "Home" to the logo or use

the alt attribute of the <img> tag for the logo to provide g g g pfeedback to the user that logo is clickable.

Go To Home Page

home

Go To Home Page

Navigation ElementsNavigation Elements105

Th diff t i t f l t b hi h There are many different user interface elements by which you can construct a navigation system. Navigation barsg Text menus Dynamic menus T Trees Action buttons Drop-down menusp Tag clouds Step + paging links

Si d i d Site maps and indexes Directories


Navigation BarsNavigation Bars106

A chain of horizontal links made from Images

Text

Navigation: TextNavigation: Text107

In order to improve download speed, many sites have replaced all-graphic menu systems with text-based menu systems that combine small, reusable graphics with text links using CSS or within tables.

Navigation BarsNavigation Bars108

It is often best to place navigation bars at top of page, since users scan web pages using same pattern as when reading: from top-left to right, then down. Tests have shown that users perform slightly better with

main navigation system at top (or bottom). However, there is less vertical screen space than

horizontal, so placing links on left-side of screen will maximize available screen space.

Source: Jared Spool et al, Web Site Usability: A Designer's Guide, 1999

Navigation: TabsNavigation: Tabs109

Tests have shown that users find tabbed interfaces very easy to use.

Ideally, the tab for the current section should be coloured to indicate the current section.

Navigation: TabsNavigation: Tabs110

If you are going to use a tab metaphor, make sure they operate as tabs.

In both of these sites, the tab metaphor only extends to the current area, which loses the meaning cues provided by tabs.

Have a tab selected when you enter the site.

Neither the Quicken or the petsmart sites have a tab initially selected...

…but both the chapters and circuit city sites do.

Navigation: IconsNavigation: Icons111

I h Icons are metaphors Be sure to provide text These icons are not exactly obvious.

labels to help clarify the meaning of icons. One way to do this to

show label only when you roll-over icon. However, this is not an ideal solution from a usability perspective.

These two examples use a rollover text explanation to help (somewhat) clarify the icon's meaning

A picture is worth a thousand words ...

112

User's Interpretation Designer’s Intended Meaning

State of your accountState of your account

Fixing your order

E-mail us

What's new

A picture maybe indeed be worth a thousand words, but for a usable iconic system, we want the user to associate only one meaning/word to the image, not a thousand !

Imagemaps vs. Individual Graphics

113

A image-based navigation system can be created via single graphic using an image map, or by breaking into individual graphics.

Imagemaps vs. Individual Graphics

114

Advantages Disadvantages

Imagemaps Generally (but notalways) faster loading

If images turned off orslow to download,y ) g

since fewer files todownload.

,image map cannot beused.

Individual Graphics Potentially faster loadingon subsequent pages

Generally slowerloading on first page.

due to browser caching.

Navigation system stillusable (if ALT used)even without imagedownloadeddownloaded.

Can implement rollovers(which is not necessarilya good thing).

Navigation & ImagesNavigation & Images115

Some users with slow connections will turn off the display of images in their browser.

You can still make your site usable for these users by filling out the alt attribute of the <img> tag.g g g

<img src='abc.gif'>g g

<img src="abc.gif" alt="Products">Products

B H dBetter Homes and Gardens web site doesn't use the ALT attribute for th i itheir images.

Since the menu in the blue bar is an i it iimage map, it is unusable for browsers with images turned off.

Metropolis's site, on the other hand, does use the ALTdoes use the ALT attribute.

The navigation elements are still

116

elements are still usable here even with images turned off.

Navigation: FooterNavigation: Footer117

It is important to provide the It is important to provide the user with text equivalents for navigational graphics ( i ll f i ) (especially for image maps) since graphics turned off or the user might have might

h S b hpress the Stop button on their browser.

Common practice to place Common practice to place text-versions of links at bottom of pages.

Navigation: Text MenusNavigation: Text Menus118

l f l k Vertical series of text links Try to avoid wrapping a text link over two or more

lilines. This typically confuses users into thinking there is more than

one linkone link.WinesMerlotZinfandel

How many wines are listed here?

ZinfandelMuscatCabernetSauvignonNebbiolo

Wines WinesWinesMerlotZinfandelMuscatCabernet Sauvignon

Wines•Merlot•Zinfandel•Muscat•Cabernet

If space is a problem, try using bullets


Cabernet SauvignonNebbiolo

•Cabernet Sauvignon•Nebbiolo


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.



A id i bl f hi h h Avoid using blue text for anything other than web links

Avoid underlining anything except web links Avoid using red + green as link color pairs g g p

Color blindness amongst 8% of males

Use the title attribute to provide more Use the title attribute to provide more information about the link.<a href="privacy html" title="Read our privacy policy">privacy</a><a href= privacy.html title= Read our privacy policy >privacy</a>

Navigation: Dynamic MenusNavigation: Dynamic Menus

Ad121

Advantages Can display more choices in a single space Familiar interaction (similar to desktop applications Familiar interaction (similar to desktop applications

Disadvantages Dynamic menus from a vertical menu requires precise mouse y a c e us o a ve ca e u equ es p ec se ouse

movement (not as much as problem from a horizontal menu)

Can be frustrating to use Not a problem to use

Navigation: TreeNavigation: Tree122

Good for site with strong hierarchical organization Potentially problem with horizontal space when many

nodes are opened.

Navigation: Action ButtonsNavigation: Action Buttons123

Text hyperlinks are sometimes not the best choice for representing actions that do something important. Text hyperlinks should be clickable with no

consequences

Buttons are better choice for indicating transactionsg

Navigation: Action ButtonsNavigation: Action Buttons124

Two types: Graphical action buttons An image that (hopefully) looks like a button

HTML buttons Created via <input> tag

Navigation: Pull-Down MenusNavigation: Pull Down Menus125

Whil d While a good way to save on screen space pull down space, pull-down menus force user to act to find out to act to find out navigation options

Works best in Works best in conjunction with button bar or text button bar or text links.

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

126

Navigation: Tag CloudsNavigation: Tag Clouds127

Provides a snapshot of various categories in a site and their relative importance/frequency. Each word is a link Sorted alphabeticallyp y Perhaps less useful for corporate sites or other sites

without categories or tagsg g

Navigation: Stepping and PagingNavigation: Stepping and Paging128

Allow users to step through a linear series of pages, or move back and forth between multiple related pages.

Navigation: DirectoriesNavigation: Directories129

Provides access to a wide variety of non-hierarchical information that can be organized via categories.

Navigation: Site maps and indexes

130

A site map is a representation of a site’s structure While not heavily used by users, they are an important

part of SEO (search engine optimization).

Indexes are alphabetic guide to a site’s content.p g Can be combined with sitemap

Navigation: Site maps and indexes

131

Page TypesPage Types132

Different page types will change the elements and organization of a page’s navigation.

They are: Navigational Navigational Content Functional Functional


Page Types: NavigationalPage Types: Navigational133

Directs people to content e.g., home pages, landing pages, search results,

galleries

Many stores combine gallery views with search engine results

Landing pages are like home page for a subsection of a site

Page Types: ContentPage Types: Content134

For most users, this is the page they are looking for. e.g., single article, product, story, blog entry, etc.

The focus of this page should be the content, not advertising, navigation, etc.advertising, navigation, etc.

Page Types: FunctionalPage Types: Functional135

Pages that perform a function/action/task e.g., search forms, submission forms, web applications. Often other navigational elements are missing if it is

important for the user to finish the task.

Data-Entry UsabilityData Entry Usability136

The data-entry section of a web application lets users enter, save, delete, and modify data, usually stored in databases or XML files on the web server. Source for this and the following slides:

Susan Fowler and Victor Stanwick, Web Application Design Handbook, 2004

Conceptual Model: Lists versus ObjectsConceptual Model: Lists versus Objects137

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

Data-Entry FormsData Entry Forms138

Contain: Users enter information using a set of fields (also called

text boxes) and controls such as checkboxes, radio buttons, and dropdown boxes for selecting items from lists.

Users act on the information using buttons.

Guidelines for fieldsGuidelines for fields139

d d d fi ld Use standard unprotected fields to accept unpredictable text entry (names, street addresses, and so on)so on).

Use protected fields (fields into which users cannot type) to show system values values saved elsewhere in type) to show system values, values saved elsewhere in the system, or calculated values.

Use required fields when you have to be sure that the Use required fields when you have to be sure that the form contains all necessary information. Don't have too many required fieldsy q

Use validated fields when business rules must be ensured.

Guidelines for fieldsGuidelines for fields140

Make entry areas the right size<input type="text" name="cpt" maxlength="6" size="6">

D ' k f h Don't make users format the text Provide keyboard and mouse navigation

<label for="fix">Fi<u>x</u>:</label>

<input type="text" name="fix" accesskey="x">

Guidelines for labelling formsGuidelines for labelling forms141

Fields should be organized in columns and groups, not in one long scrollable list down the screen. If there are too many fields to fit on one screen, then

provide multiple screens and a method, such as tabs or pop-up windows, to move between them.

Labels should be close to their data fields and controls.

Align labels consistently either left or right Align labels consistently, either left or right

Guidelines for labelling formsGuidelines for labelling forms142

If you expect to internationalize your application, put the field labels above the fields, not at the left. Other languages may require more space for labels Right-to-left languages won't make sense if labels are g g g

to the left of the fields.

Using defaultsUsing defaults143

f Use a default whenever there is a likely one. In fields, show the default entry in the field. In a set of checkboxes or radio buttons, set the most

likely choiceI d d li i k h l lik l In a dropdown list, pick the mostly likely entry.

If most of your customers are from North America, then why not y , yput Canada or United States as the default value (rather than just list them alphabetically)

Using DefaultsUsing Defaults144

Set defaults so that they benefit your site's visitors,not your organization.

Source: Jeff Johnson, Web Bloopers, 2003

Indicating a required fieldIndicating a required field145

Approaches: changing the background color of the required fields making the labels bold, putting a symbol (asterisk, arrow) in front of the field.p g y ( , )

However: B ld l d l b l 't h l th h Bold or coloured labels won t help those who use screen

readers.

Providing feedback for required fields

146

Approaches: show an error message on a separate error page and

ask people to go back to the earlier page. return to the page, show the error message, and list the

missing fields. return to the page, show the error message, and

highlight the missing fields. Indicate errors as user enters data.

Validated FieldsValidated Fields147

If a field must follow a specific format (e.g., date, postal code, credit card, etc), then: Tell the user what is the expected format

Enter Date:

Be as forgiving as possible

Enter Date (yyyy/mm/dd):

Be as forgiving as possibleWhy do so many sites reject credit card numbers, etc. if they

contain spaces?contain spaces?

Change the form so that it avoids user formatting Change the form so that it avoids user formatting mistakesSource: Jeff Johnson, Web Bloopers, 2003

Other ControlsOther Controls148

Use check boxes for entering binary (yes/no) data. Use radio buttons for choosing an option from a g p

small list of choices.

Using TabsUsing Tabs149

If form has too many fields, split them into several related tab pages. Each tab page will need a way to move to the next tab

page

Using TabsUsing Tabs150

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

Using PopupsUsing Popups151

Popup windows can also be used for: Collecting secondary information and settings for an

object or record Holding tools such as calendars, toolbars, and palettes. Delivering messages, providing feedback, or showing

background (non-essential) information. Asking questions, confirming actions, and warning of

problemsp

ListsLists152

In many sites, users generally start from lists, selecting and opening individual objects they wish to examine or change.

When they’re done with the objects, they close them y j , yand return to the list view.

How to Select and Open Objects from ListsS Op O j

153

Approaches Turning field data in list into links Action buttons/links within each list "row" Images within each list "row"g

How to Select and Open Objects from ListsS Op O j

154

Field data in list is made into a linkField data in list is made into a link

Action buttons/links within each row

Action buttons/links within each row

Images within each list "row"

Concluding Caveats on UsabilityConcluding Caveats on Usability155

In traditional software testing, usability scores (success at finding information) and user preferences (how much did the user like the site) are very strongly linked.

i.e., users almost always prefer software they find easiest to use

In web testing, however, usability and user preferences are not nearly as strongly linked. When asked, users like the sites the provide interesting and

relevant content.""…these results may mean that good content is so important to

users that other factors are secondary."


web i - 09 - usability

Technology

site design20 usability

web design

site design engineering

users page visits

information foragers

web site3

usability matters5

web page revisitation