INFORMATION ARCHITECTURE Usability

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

Part 1: Site Design / Engineering

concerned with usability

Part 2: Page Design / Art

concerned with aesthetics (visual attractiveness)

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

Usability Matters Many of the things we don't like about the web pertain to the usability of web sites. Usability is: Designing things so that they make sense to the people who use them. How easy is a web site to understand and use.

Many of the things we don't like about the web pertain to the usability of web sites.

Usability is:

Designing things so that they make sense to the people who use them.

How easy is a web site to understand and use.

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

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

Usability and Audience Types People visit a site for different reasons. Thus, the type of audience affects usability. Also, how people use the web has changed significantly over the past ten years

People visit a site for different reasons.

Thus, the type of audience affects usability.

Also, how people use the web has changed significantly over the past ten years

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

users who are looking for a particular piece of information.

informavores

concerned chiefly with usability (how easy is it to find information).

Information Foragers

Information Foragers 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, hunters will spend little time looking for prey Even if hunters visit a site more often, they will still leave it quicker.

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, hunters will spend little time looking for prey

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

users who "stumble" across a site. concerned chiefly with aesthetics (does this site look professional or interesting enough to continue exploring this site). Minority Surfers

users who "stumble" across a site.

concerned chiefly with aesthetics (does this site look professional or interesting enough to continue exploring this site).

Minority

Surfers

Types of Information Foraging A given user can, at different times, engage in different types of information foraging Known item seeking Exploratory seeking Don’t know what you need to know Re-Finding http://www.boxesandarrows.com/view/four_modes_of_seeking_information_and_how_to_design_for_them

A given user can, at different times, engage in different types of information foraging

Known item seeking

Exploratory seeking

Don’t know what you need to know

Re-Finding

Known item seeking 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 indexes navigation Main virtue of site: able to answer user’s query fast

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 indexes

navigation

Main virtue of site:

able to answer user’s query fast

Exploratory seeking 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

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

Don’t know what you need to know 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 goal in mind. Prefer: Interesting content

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 goal in mind.

Prefer:

Interesting content

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

Users looking for things they have already seen.

They may remember exactly where it is, or only remember what site it was on, or even have little idea about where it was.

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

Prefer:

breadcrumbs, recently viewed items, cookie support, etc

Wishlists, shopping carts, etc

Other Browsing Behaviors 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 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?

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

Other Browsing Behaviors 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

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?

Part 1: Site Design 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 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) later.

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 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) later.

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

i. The response time (i.e., download time) for site/pages.

ii. The organization system for site.

iii. The navigation system used throughout the site.

iv. The content of the site.

i. Response Time If your pages take a long time to download, users will leave your site. How long is too long? 1 second response-time between action (e.g., mouse click) and response (page loaded) is ideal. For most broadband users, that means about 200 KB 10 seconds is the upper limit for keeping user in site. That means, any given page should be functionally loaded in no more than ten seconds. Source: Jakob Nielsen, Designing Web Usability , 1999 Nov. 1998, www.emarketer.com 2006, webdesign.about.com

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

How long is too long?

1 second response-time between action (e.g., mouse click) and response (page loaded) is ideal.

For most broadband users, that means about 200 KB

10 seconds is the upper limit for keeping user in site.

That means, any given page should be functionally loaded in no more than ten seconds.

Factors Determining Response 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 of these factors do you have control over as a web designer?

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 of these factors do you have control over as a web designer?

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

Again, page size is the cumulative file sizes of all the elements on a web page. This includes:

the HTML file

the image files

object files (video, Flash)

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

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

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

Subsequent Page of Site Response Time TOTAL 41K Download time @ 28.8 Kbps = 15 seconds 128 Kbps = 3 seconds artist.gif 8K artbar.gif 2K byname.gif 2K alphabet.gif 8K artist.htm 20K dot.gif 1K Other images still in cache so no need to re-download

ii. Organization System 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 . The trouble with relationships is that they are subjective.

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 .

The trouble with relationships is that they are subjective.

Grouping Exercise Group (organize) the following information: refrigerator socks bureau living room dictionary kitchen milk bookshelf bedroom

Group (organize) the following information:

refrigerator

socks

bureau

living room

dictionary

kitchen

milk

bookshelf

bedroom

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

Alphabetically

bedroom

bookshelf

refrigerator

bureau

dictionary

kitchen

living room

milk

socks

By Size

Large

kitchen

living room

bedroom

Medium

refrigerator

bureau

bookshelf

Small

socks

dictionary

milk

By Room

Kitchen stuff

refrigerator

milk

Living Room stuff

dictionary

bookshelf

Bedroom stuff

socks

bureau

By hierarchical location

Kitchen

refrigerator

milk

Living Room

bookshelf

dictionary

Bedroom

bureau

socks

Subjective Organizing 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 be a balance between how the information "wants" to be organized and how the user "wants" to find it. Source: Fleming, J, Web Navigation , 1998

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 be a balance between how the information "wants" to be organized and how the user "wants" to find it.

Organization System 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).

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

Organization Schemes 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

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

Types of organization schemes:

exact

ambiguous

hybrid

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

Divide information into well-defined, mutually exclusive sections.

Alphabetic

Chronological

Of limited use. Why?

Ambiguous Organization Schemes Divide information into categories that defy exact definition. Much more subjective, and as well, more useful. Why? 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

Divide information into categories that defy exact definition.

Much more subjective, and as well, more useful. Why?

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.

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

Topical

E.g., yellow pages, college calendars

Challenging to design, yet very help to users

Task-oriented/Functional

Used by software (File, Edit, Format, View)

Useful for web-based applications

Metaphor-driven

metaphor can help make the unfamilar seem familiar (think of Windows folders, trash can, and desktop)

Can be difficult to maintain over entire site

Audience-specific

Makes sense if more than clearly-definable audience

Hybrid Organization Schemes A mixture of several different organization schemes. Generally, a very bad thing; yet sometimes difficult to avoid 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. If you must use hybrid scheme, try to visually separate the different schemes. ABC College Humanities Sciences Locate an Instructor Students Parents Get a Library Card Student Pub Services for Students Find a Student Loan Get a Library Card Visit the Student Pub Academic Areas Fine Art Humanities Sciences Students Parents Faculty Fine Arts Humanities Sciences Health Studies

A mixture of several different organization schemes.

Generally, a very bad thing; yet sometimes difficult to avoid

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.

If you must use hybrid scheme, try to visually separate the different schemes.

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

Designing Schemes The danger with hybrid schemes is that they can utterly confuse user. Make sure your categories are clear as possible. Audience Specific/Functional/Topical/Metaphor = BIG MESS Topical Where do I click if I'm a student looking for the schedule for Introduction to Computers? What does this do? What does this do?

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

Make sure your categories are clear as possible.

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

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

Designing Schemes Be cautious of metaphors A metaphor is something that is used to represent something 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 disadvantages: 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.

Be cautious of metaphors

A metaphor is something that is used to represent something 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

disadvantages:

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 Metaphor 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 Structures 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

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

Types of Organizational Structures Linear Hub and Spoke Web Hierarchical Facets

Linear

Hub and Spoke

Web

Hierarchical

Facets

Linear Organization Pages in a sequence Wizards, checkouts, and other pipelines

Pages in a sequence

Wizards, checkouts, and other pipelines

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

Start from landing page, and navigate to individual pages.

Extension of linear

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

Many pages linked together without levels or sequence

Each page is potential hub and spoke

E.g., MySpace

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

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

Most sites are hierarchical

Facets A page belongs to one or more facets. A facet is a unique category that describes 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)

A page belongs to one or more facets.

A facet is a unique category that describes a property of a page

Each facet might be arranged hierarchically

Allows a user more freedom in finding information

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

Designing Hierarchies 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

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?

Memory Implications 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. If we have limitations with short-term memory, shouldn't we then try to have less breadth, and more depth? NO!

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.

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

NO!

Research on Breadth vs Depth Source: Zaphris & Mtei, "Depth vs Breadth in the Arrangement of Web Links," 1997 User's Ranking of Difficulty Average access time Mean # of Errors 2x6, Breadth=2, Depth=6 4x3, Breadth=4, Depth=3 8x2, Breadth=8, Depth=2 4x1, 16x1 1st page Breadth=4, 2nd page=16 16x1, 4x1 1st page Breadth=16, 2nd page=4

Research on Breadth vs Depth Source: Larson & Czerwinski, "Web Page Design: Implications of Memory, Structure and Scent for Information Retrieval," 1998 Average access time Worst Best Lostness Worst Best User Preference Worst Best

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

Conclusions on Breadth vs Depth 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 space gives optimal user performance.

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 space gives optimal user performance.

Information Scent However, if the category labels (the organization scheme) are not well organized, broader structures can have just as poor performance (or even worse) as deeper structures. Information has a "scent" that users can pick up through category labels. i.e., scent is the amount of remote indication a user can 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.

However, if the category labels (the organization scheme) are not well organized, broader structures can have just as poor performance (or even worse) as deeper structures.

Information has a "scent" that users can pick up through category labels.

i.e., scent is the amount of remote indication a user can 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.

iii. Navigation Systems 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

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 .

Navigation Conventions We rely on conventions in physical space (in cities, on the freeway, at the airport, etc) and in information spaces (within a book or newspaper) that speed up the navigation process. Likewise, various conventions have emerged in the web that help users in their navigation. 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, new non-conventional way is clear and self-explanatory, etc). Remember how briefly most users view a page!! Source: Steve Krug, Don't Make Me Think , 2000; Jakob Nielsen, Designing Web Usability , 1999 ßêÿš¥ We understand the meaning of these signs, even though we can't read their language, because of our knowledge of traffic sign conventions. Even though I can not read the language used on this page, I can still navigate it due to its use of web conventions.

We rely on conventions in physical space (in cities, on the freeway, at the airport, etc) and in information spaces (within a book or newspaper) that speed up the navigation process.

Likewise, various conventions have emerged in the web that help users in their navigation.

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, new non-conventional way is clear and self-explanatory, etc).

Remember how briefly most users view a page!!

Navigation Conventions Company ID Main sections (global navigation) Utilities (functional or action oriented) sub sections Local Navigation You are here indicators Small text footer links Page Title

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

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

Searching 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

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.

Search Interface Guidelines Available on every page Text box plus button with label “Search” Located top right (preferred) or top left of page Text box size ~25 characters wide

Available on every page

Text box plus button with label “Search”

Located top right (preferred) or top left of page

Text box size ~25 characters wide

Search Engine Results Page (SERP) 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 1 st or 2 nd choice In Google, almost 70% pick 1 st or 2 nd choice in SERP In Google, over 50% pick 1 st Source: Nielsen + Loranger, Prioritizing Web usability , 2006

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 1 st or 2 nd choice

In Google, almost 70% pick 1 st or 2 nd choice in SERP

In Google, over 50% pick 1 st

Google as Entry Point to Site 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.

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 Questions 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

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 Am I? In any page in your site, users should be able to tell: where on the web they are where in the site they are

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

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 well

You may also want to indicate who is the author, when it was created or last modified, copyright info, privacy messages, security options, etc.

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.

Where am I (on the web)? Home pages should allow user to quickly determine the site's purpose in a quick scan of the page. 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)

Home pages should allow user to quickly determine the site's purpose in a quick scan of the page.

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.

Where am I (in the site)? You should specifying where the user is within the site by: giving each page a name. highlighting, within the navigational menu, the location 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

You should specifying where the user is within the site by:

giving each page a name.

highlighting, within the navigational menu, the location 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 ? Company ID Page Title Navigation Highlight

The amazon site, in contrast, visually shows which section and subsection we are in (the Award Winners subsection of the Books section). 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 the Culture link. 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 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 location indicators reasonably obvious (but not obnoxious).

What’s Here? – Page Titles Page Name Source: Steve Krug, Don't Make Me Think, 2000 Page Name Content here Page Name Page Name Make the page title big and prominent: typically it should be the largest text on the page. Content here Content here Content here

Where have I been? Since the web is state-less (the server doesn't keep track of the last page you were 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 feature One partial solution is to use different link and visited link colors. Source: Nielsen + Loranger, Prioritizing Web usability , 2006

Since the web is state-less (the server doesn't keep track of the last page you were 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 feature

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

Breadcrumbs Breadcrumb links Notice 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?

Visited Link Color 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 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.” Nielsen, 2006 Source: Jared Spool, Web Site Usability , 1999 Source: Nielsen + Loranger, Prioritizing Web Usability , 2006

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 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.” Nielsen, 2006

Visited Link Color 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

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.

Whatever 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). Internal pages in the site (at left) use 3 different link colors plus two different visited link colors.

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

Where can I go? Indicated by the page's links Every Web page should contain at least one link 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 consistency from page to page. Source: Jakob Nielsen, Designing Web Usability , 1999 Remember, not every visitor to a page comes through the front door; they might arrive from a search engine link or a bookmark. hyperlink

Indicated by the page's links

Every Web page should contain at least one link

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 consistency from page to page.

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

global

provides access to first-level section pages.

available in all pages

local

in a complex site, provides access to pages within a section or sub-site.

contextual

additional embedded links

only for non-critical links or for repeating main links

Might also be a series of related content links

global navigation system local navigation system contextual navigation

Navigation Design: First Screen The first screen the user sees must be as good as it can be. This first screen might not be the home page — 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.

The first screen the user sees must be as good as it can be.

This first screen might not be the home page — 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.

Navigation Design: First Screen 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 (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. 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 site—that is, the navigation system, company name, page title, and search option—above the fold. Source: Nielsen + Loranger, Prioritizing Web Usability , 2006

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

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 site—that is, the navigation system, company name, page title, and search option—above the fold.

Scrolling Research

Navigation: First Screen 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)

Most users have monitor resolution set to 1024x768 or 1280x1024.

Recall, however, that browser buttons, status bar, window title, etc also take up space.

Navigation: First Screen Users with higher resolution generally do not have their browser window maximized. Why?

Users with higher resolution generally do not have their browser window maximized.

Why?

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

They may have:

multiple monitors of different sizes

multiple windows opened

Sites often don’t take advantage of widescreen/maximized space

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

Repeating backgrounds can cause problems at higher resolution.

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

Thus, design your page with the 1024 x 768 resolution in mind.

This means content area is about 1004 x 598

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

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.

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

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

Guidelines for screen size Optimize for 1024x768 Do not design solely for a specific monitor size 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). Even better, use an elastic layout that sensibly adapts to window size.

Optimize for 1024x768

Do not design solely for a specific monitor size 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).

Even better, use an elastic layout that sensibly adapts to window size.

Examples of frozen layout

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

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

Navigation: Where can I go? 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 back to home page. In this case, it is nice to also add the word &quot;Home&quot; to the logo or use the alt attribute of the <img> tag for the logo to provide feedback to the user that logo is clickable. home Go To Home Page

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 back to home page.

In this case, it is nice to also add the word &quot;Home&quot; to the logo or use the alt attribute of the <img> tag for the logo to provide feedback to the user that logo is clickable.

Navigation Elements There are many different user interface elements by which you can construct a navigation system. Navigation bars Text menus Dynamic menus Trees Action buttons Drop-down menus Tag clouds Step + paging links Site maps and indexes Directories Kalbach, Designing Web Navigation (O’Reilly, 2007)

There are many different user interface elements by which you can construct a navigation system.

Navigation bars

Text menus

Dynamic menus

Trees

Action buttons

Drop-down menus

Tag clouds

Step + paging links

Site maps and indexes

Directories

Navigation Bars A chain of horizontal links made from Images Text

A chain of horizontal links made from

Images

Text

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

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 Bars 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

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.

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

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

Navigation: Tabs If you are going to use a tab metaphor, make sure they operate as 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. In both of these sites, the tab metaphor only extends to the current area, which loses the meaning cues provided by tabs. 

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

Have a tab selected when you enter the site.

Navigation: Icons Icons are metaphors Be sure to provide text 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 These icons are not exactly obvious.

Icons are metaphors

Be sure to provide text 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.

A picture is worth a thousand words ... User's Interpretation Designer’s Intended Meaning State of your account Fixing your order What's new E-mail us 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 A image-based navigation system can be created via single graphic using an image map, or by breaking into individual graphics.

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

Navigation & Images 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. <img src='abc.gif'> <img src=&quot;abc.gif&quot; alt=&quot;Products&quot;> Products 

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.

<img src='abc.gif'>

<img src=&quot;abc.gif&quot; alt=&quot;Products&quot;>

Better Homes and Gardens web site doesn't use the ALT attribute for their images. Since the menu in the blue bar is an image map, it is 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 with images turned off.

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

It is important to provide the user with text equivalents for navigational graphics (especially for image maps) since graphics turned off or the user might have might press the Stop button on their browser.

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

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

Vertical series of text links

Try to avoid wrapping a text link over two or more lines.

This typically confuses users into thinking there is more than one link.

Wines

Merlot

Zinfandel

Muscat

Cabernet Sauvignon

Nebbiolo

Navigation: Text Remember that most users will ignore 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. Source: Jared Spool et al, Web Site Usability: A Designer's Guide , 1999 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.

Remember that most users will ignore 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.

Navigation: Text Avoid using blue text for anything other than web links Avoid underlining anything except web links Avoid using red + green as link color pairs Color blindness amongst 8% of males Use the title attribute to provide more information about the link. <a href=&quot;privacy.html&quot; title=&quot;Read our privacy policy&quot;>privacy</a>

Avoid using blue text for anything other than web links

Avoid underlining anything except web links

Avoid using red + green as link color pairs

Color blindness amongst 8% of males

Use the title attribute to provide more information about the link.

<a href=&quot;privacy.html&quot; title=&quot;Read our privacy policy&quot;>privacy</a>

Navigation: Dynamic Menus Advantages Can display more choices in a single space Familiar interaction (similar to desktop applications Disadvantages Dynamic menus from a vertical menu requires precise mouse movement (not as much as problem from a horizontal menu) Can be frustrating to use Not a problem to use

Advantages

Can display more choices in a single space

Familiar interaction (similar to desktop applications

Disadvantages

Dynamic menus from a vertical menu requires precise mouse movement (not as much as problem from a horizontal menu)

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

Good for site with strong hierarchical organization

Potentially problem with horizontal space when many nodes are opened.

Navigation: Action Buttons 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 transactions

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 transactions

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

Two types:

Graphical action buttons

An image that (hopefully) looks like a button

HTML buttons

Created via <input> tag

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

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

Works best in conjunction with button bar or text links.

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

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

Provides a snapshot of various categories in a site and their relative importance/frequency.

Each word is a link

Sorted alphabetically

Perhaps less useful for corporate sites or other sites without categories or tags

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

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

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

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

Navigation: Site maps and 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. Can be combined with sitemap

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.

Can be combined with sitemap

Navigation: Site maps and indexes

Page Types 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)

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

They are:

Navigational

Content

Functional

Page Types: Navigational Directs people to content e.g., home pages, landing pages, search results, galleries Landing pages are like home page for a subsection of a site Many stores combine gallery views with search engine results

Directs people to content

e.g., home pages, landing pages, search results, galleries

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

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.

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

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 Usability 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

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.

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

Data-entry pages generally have two views for data:

Lists (also called tables )

Objects (also called records or data entry forms ).

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

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 fields Use standard unprotected fields to accept unpredictable text entry (names, street addresses, and so on). Use protected fields (fields into which users cannot 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 form contains all necessary information. Don't have too many required fields Use validated fields when business rules must be ensured.

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

Use protected fields (fields into which users cannot 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 form contains all necessary information.

Don't have too many required fields

Use validated fields when business rules must be ensured.

Guidelines for fields Make entry areas the right size <input type=&quot;text&quot; name=&quot;cpt&quot; maxlength=&quot;6&quot; size=&quot;6&quot;> Don't make users format the text Provide keyboard and mouse navigation <label for=&quot;fix&quot;>Fi<u>x</u>:</label> <input type=&quot;text&quot; name=&quot;fix&quot; accesskey=&quot;x&quot;>

Make entry areas the right size

<input type=&quot;text&quot; name=&quot;cpt&quot; maxlength=&quot;6&quot; size=&quot;6&quot;>

Don't make users format the text

Provide keyboard and mouse navigation

<label for=&quot;fix&quot;>Fi<u>x</u>:</label>

<input type=&quot;text&quot; name=&quot;fix&quot; accesskey=&quot;x&quot;>

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

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

Guidelines for labelling forms 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 to the left of the fields.

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 to the left of the fields.

Using defaults 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 choice In a dropdown list, pick the mostly likely entry. If most of your customers are from North America, then why not put Canada or United States as the default value (rather than just list them alphabetically)

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 choice

In a dropdown list, pick the mostly likely entry.

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

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

Indicating a required field Approaches: changing the background color of the required fields making the labels bold, putting a symbol (asterisk, arrow) in front of the field. However: Bold or coloured labels won't help those who use screen readers.

Approaches:

changing the background color of the required fields

making the labels bold,

putting a symbol (asterisk, arrow) in front of the field.

However:

Bold or coloured labels won't help those who use screen readers.

Providing feedback for required fields 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.

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 Fields 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 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 Enter Date: Enter Date (yyyy/mm/dd): Source: Jeff Johnson, Web Bloopers, 2003

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

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

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

Use check boxes for entering binary (yes/no) data.

Use radio buttons for choosing an option from a small list of choices.

Using Tabs 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

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 Tabs Tab pages provide an alternate way to navigate a linear series (also called a pipeline or Wizard ).

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

Using Popups 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 problems

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 problems

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

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 and return to the list view.

How to Select and Open Objects from Lists Approaches Turning field data in list into links Action buttons/links within each list &quot;row&quot; Images within each list &quot;row&quot;

Approaches

Turning field data in list into links

Action buttons/links within each list &quot;row&quot;

Images within each list &quot;row&quot;

How to Select and Open Objects from Lists 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 &quot;row&quot;

Concluding Caveats on Usability 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 . &quot;…these results may mean that good content is so important to users that other factors are secondary.&quot; Source: Jared Spool et al, Web Site Usability: A Designer's Guide , 1999

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 .

&quot;…these results may mean that good content is so important to users that other factors are secondary.&quot;