WEB I - 09 - Usability

EASINGINTO WEBDEVELOPMENT9.9 USABILITY

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

Designing a Web Site3  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?4 or, what do you hate to see on a web page?

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

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

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

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

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

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

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

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

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

Exploratory 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  related links  search

Don t Don’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:  Interesting content

Re Finding Re-Finding16  Users looking f things they have already seen. for  They may remember exactly where it is, or only remember what site it was on, or even have little idea b h i i h li l id about where it was.  ~40% of an individual s searches are re-finding individual’s re finding searches (performing a search they have already p performed in the past).* p )  Prefer:  breadcrumbs, recently viewed items, cookie support, etc  Wishlists, shopping carts, etc * Teevan et al, “Information Re‐Retrieval: Repeat Queries in Yahoo’s Logs”, SIGIR 2007

Other 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 navigation18 Weinreich et al, “Off the Beaten Tracks: Exploring Three Aspects of Web Navigation”, IW3C2 2006

Other 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? * Weinreich et al, “Web Page Revisitation Revisited: Implications of a Long‐term Click‐stream Study of Browser Usage”, CHI 2007 ** Cockburn et al, "Improving Web page revisitation: Analysis, design and evaluation," IT & Society 2003 *** Weinreich et al, “Off the Beaten Tracks: Exploring Three Aspects of Web Navigation”, IW3C2 2006

Part 1: Site Design20  Usability is perhaps the most important goal in web design.  If users cannot figure out how to use your site easily, easily some will leave your site, never to return. site return  Perhaps more importantly, a good user experience creates trust in a site.  In the web, users experience usability first and pay later; thus if site not usable, they will not purchase (or revisit) from your site.  in contrast, outside the web, users generally buy first, then experience usability (think DVDs) l f h bl (h k ) later.

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

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

Factors Determining Response23 Times  Average response time is determined by:  the speed of the users connection to Internet  the speed/load of the web server  the speed of the servers connection to Internet  load on the Internet (2-4 pm peak loads in North America)  cumulative file size of the images and objects in web page  Which f h Whi h of these factors do you have control f d h l over as a web designer?

Understanding 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 files g  object files (video, Flash) s

First Page of Site Response Time randyc.gif 1K bar.gif g 3K bio.gif 1K bio_over.gif 1K site.gif 1K site_over.gif 1K idea.gif id if 1K idea_over.gif 1K for.gif 1K for_over.gif for over gif 1K main.htm 4K TOTAL 16K25 Download 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 cv.gif 1K cv.htm 4K TOTAL 8K26 Download time @ 28.8 Kbps = 1.5 seconds 128 Kbps = 1 second

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

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

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

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

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

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

Organization System33  Refers to the "philosophy" and to the "execution" used to organize a sites 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 Schemes34  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

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

Ambiguous Organization36 Schemes  Divide information into categories that defy exact definition.  Much more subjective, and as well, more useful. Why?y  Answer: we dont 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

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

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

Hybrid Schemes39 Sears separates topical and functional Functional/Metaphor Topical Functional/Metaphor /Topical Functional/Metaphor Topical FunctionalTopical Metaphor Topical/Functional/ Metaphor

Designing 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 Where do I click if Im a student looking f the schedule f Introduction to Computers? f for for

Designing Schemes41  Categories generally should be mutually exclusive  However, sometimes it it sensible to cross-list an item in more than one branch of a scheme  Too much cross-listing, then scheme loses its value Academic Students Services Sciences Register Registering Humanities Student Union Visiting Social Sciences Scholarships Parties Scholarships Fine Arts Scholarships

Designing Schemes42  Be B cautious of metaphors i f h  A metaphor is something that is used to represent something else. else  advantages:  metaphor can provide a unifying framework to entire site  users can make use of their knowledge they already have  e.g., the shopping cart metaphor in e-commerce sites e commerce  disadvantages:  often difficult to make site sections "fit into your metaphor fit into"  If connection between metaphor and content is tenuous then user will have difficult time finding information.

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

Organization 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 site p p p g

Types of Organizational Structures45  Linear  Hub and Spoke p  Web  Hierarchical Hi hi l  Facets

Linear Organization46  Pages in a sequence  Wizards, checkouts, and other pipelines

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

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

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

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

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

Designing Hierarchies52  Try to balance breadth and depth  Users dont like having to "drill-down" endlessly to find an item, nor do they like having to read through hundreds of menu choices.  Key question is what is the right balance? depth breadth

Memory 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 shouldnt we then try to have less breadth and breadth, more depth?  NO!

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

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

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

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

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

iii. 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. Source: Steve Krug, Dont Make Me Think, 2000; Jakob Nielsen, Designing Web Usability, 1999

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

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

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

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

Searching64  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, Dont Make Me Think, 2000

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

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

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

General Navigation Questions68  A sites 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

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)?70  Every page in your site should contain the company name or logo.  This is generally placed in the upper-left corner  It is usually made into a link to the home p g as well y page  You may also want to indicate who is the author, when it was created or last modified copyright info, modified, info privacy messages, security options, etc.  This usually is placed at the bottom or footer of a s all page.

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

Where am I (on the web)?72  Home pages should allow user to quickly determine the sites purpose in a quick scan of the page.  People ill i it th h P l will visit the home page more often th any other page in your site. ft than th i it  But studies show that users will spend less time viewing a home page than an interior content page. This home page provides few clues as to what Acer does (build and sell computer equipment)

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 ?74 Company 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 g the Culture link. The amazon site, in contrast, visually shows which section and subsection we are in (the Award Winners subsection of the Books section). Note: in general, if your are indicating current location via change in navigation banner, the link should be disabled. In this example, the Award Winners isnt a75 link.

Sometimes the indicator of the sites current location is overly vague. Can you find it in this example? Unless you are trying to impress users with your originality (which often is the case for designers and artists) try to make location artists), indicators reasonably obvious (but not obnoxious).76

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

Where have I been?78  Since the web is state-less ( h server Si h bi l (the doesnt keep track of the last page you were on), it is difficult to indicate this. ) d ff l d h  the browsers 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

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

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

Visited 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 helpful because users dont have to relearn every time they go to a new site.” Spool, 1999  “Unchanging li k colors create navigational confusion b “U h i link l t i ti l f i because users don’t quite understand their different choices or where they are. This is as serious a usability problem as it ever has been.” Nielsen, 2006 Ni l Source: Jared Spool, Web Site Usability, 1999 Source: Nielsen + Loranger, Prioritizing Web Usability, 2006

Visited 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

Whatever you do, dont use too Wh t d d t t many link colors in one page or site. The Slate Magazine main page (below) uses three different link colors (plus another for visited link). (p ) Internal pages in the site (at left) use 3 different link colors plus two different visited link colors.83

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

Where can I go?85  Indicated by the page s b pages links  Every Web page should contain at least one link  never have Dead-end pages Dead end (pages with no links to any other local page in the site)  the sites links should form a navigation system that has hyperlink consistency f it from page t to page. Remember, not every visitor to a page comes through the front door; they might arrive from a search engine link or a bookmark. Source: Jakob Nielsen, Designing Web Usability, 1999

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

global navigation system local navigation system contextual navigation87

Navigation Design: First Screen88  The first screen the user sees must be as good as it can be.  This first screen might not be the home page — g p g the user might come to a page from an external link or search engine.  The part of a web page that is visible without vertical scrolling (“above the fold”) is extremely important.

Navigation Design: First Screen89  About 50% of users will almost never scroll  The majority of users scan what they see on the browser and then make their navigation choice.  Use s w sc o ve ca y Users will scroll vertically if there is some compelling content e e s so e co pe g co e (e.g., a listing of products, an article they are reading, search engine results, etc).  Home pages will only be scrolled between 14-23% of the time. time  Almost no one will use the horizontal scroll bars. NEVER require users to use the horizontal scroll bars to see important navigation elements!!!  Of those that do scroll, most will only scroll about a screen full.  Thus, you must try to fit the most important pa s of your us, us y o e os po a parts o you site—that is, the navigation system, company name, page title, and search option—above the fold. Source: Nielsen + Loranger, Prioritizing Web Usability, 2006

Scrolling Research90

Navigation: First Screen91  Most M users have monitor resolution set to h i l i 1024x768 or 1280x1024.  Recall,however, that browser buttons, status bar, window title, etc also take up space. http://www.hobo‐web.co.uk/tips/25.htm (March 2008 visit stats)

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

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

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

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

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

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

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

Examples of frozen layout101

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 readability103

Navigation: Where can I go?104  Your global navigation system should provide a way to return to the sites home page.  Methods:  provide an explicit home link to navigation bar, or  make the company logo a link b k to home page. k h l li k back h  In this case, it is nice to also add the word "Home" to the logo or use the alt attribute of the <img> tag for the logo to provide g g g p feedback to the user that logo is clickable. Go To Home Page home

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

Navigation Bars106  A chain of horizontal links made from  Images  Text

Navigation: 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 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.  Testshave shown that users perform slightly better with main navigation system at top (or bottom).  However, there is less vertical screen space than horizontal, so placing links on left-side of screen will maximize available screen space. Source: Jared Spool et al, Web Site Usability: A Designers Guide, 1999

Navigation: 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: 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: Icons111  Icons are metaphors I h  Be sure to provide text These icons are not exactly obvious. labels to help clarify the meaning of icons.  One way to do this to show label only when you roll-over icon. However, this is not an ideal solution from a usability perspective. These two examples use a rollover text explanation to help (somewhat) clarify the icons meaning

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

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

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

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

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

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

Navigation: Text119  Remember that most users will ignore sers embedded text links.  Because users initially scan web pages (rather than carefully read), embedded links are typically missed.  if it is an important link, be sure to provide an alternative to embedded links. This embedded link will probably be ignored. This is still an embedded link because it is followed by text, and will probably be ignored. This is not really an embedded link. Why? because it is on a line by itself. The following text is on a separate line. Source: Jared Spool et al, Web Site Usability: A Designers Guide, 1999

Navigation: Text120  Avoid i blue A id using bl text f anything other than for hi h h web links  Avoid underlining anything except web links  Avoid using red + green as link color pairs g g p  Color blindness amongst 8% of males  Use the title attribute to provide more information about the link. <a href="privacy html" title="Read our privacy policy">privacy</a> href= privacy.html title= Read policy >privacy</a>

Navigation: Dynamic Menus121  Advantages Ad  Can display more choices in a single space  Familiar interaction (similar to desktop applications  Disadvantages  Dynamic menus from a vertical menu requires precise mouse y a c e us o ve ca e u equ es p ec se ouse movement (not as much as problem from a horizontal menu) Can be frustrating to use Not a problem to use

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

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

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

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

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

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

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

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

Navigation: Site maps and130 indexes  A site map is a representation of a site’s structure  While not heavily used by users, they are an important part of SEO (search engine optimization).  Indexes are alphabetic guide to a site’s content. p g  Can be combined with sitemap

Navigation: Site maps and131 indexes

Page Types132  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)

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

Page 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 Data-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 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 Data-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 fields139  Use standard unprotected fields to accept d d d fi ld unpredictable text entry (names, street addresses, and so on) on).  Use protected fields (fields into which users cannot type) to show system values values saved elsewhere in values, the system, or calculated values.  Use required fields when you have to be sure that the form contains all necessary information.  Dont have too many required fields y q  Use validated fields when business rules must be ensured.

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

Guidelines for labelling forms141  Fields should be organized in columns and groups, not in one long scrollable list down the screen.  Ifthere are too many fields to fit on one screen, then provide multiple screens and a method, such as tabs or pop-up windows, to move between them.  Labels should be close to their data fields and controls.  Align labels consistently, either left or right consistently

Guidelines 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 wont make sense if labels are g g g to the left of the fields.

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

Using Defaults144  Set defaults so that they benefit your sites visitors, not your organization. Source: Jeff Johnson, Web Bloopers, 2003

Indicating 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 Boldor coloured labels wont help th l dl b l t h l those who use screen h readers.

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

Other 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 Tabs149  If form has too many fields, split them into several related tab pages.  Eachtab page will need a way to move to the next tab page

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

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

Lists152  In many sites, users generally start from lists, selecting and opening individual objects they wish to examine or change.  When they’re done with the objects, they close them y j , y and return to the list view.

How to Select and Open Objects from Lists S Op O j153  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 Lists S Op O j154 Field data in list is made into a link Action buttons/links within each row Action buttons/links within each row Images within each list "row"

Concluding Caveats on Usability155  In traditional software testing, usability scores (success at finding information) and user preferences (how much did the user like the site) are very strongly linked.  i.e., users almost always prefer software they find easiest to use  In web testing, however, usability and user preferences are not nearly as strongly linked.  When asked, users like the sites the provide interesting and relevant content. "…these results may mean that good content is so important to users that other factors are secondary." Source: Jared Spool et al, Web Site Usability: A Designers Guide, 1999

WEB I - 09 - Usability

by Randy Connolly on Mar 06, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 8

Statistics

WEB I - 09 - Usability — Presentation Transcript

http://www.slideshare.net	7
http://do.notuse.me	1