WEB I - 09 - Usability
23 likes1,326 views
The document discusses the importance of usability in web design, emphasizing how the organization and navigation of a website can significantly affect user experience. Different types of web users, such as information foragers and surfers, have varying needs that should be addressed through effective site design. Key factors for enhancing usability include response time, content organization, and intuitive navigation structures.
![Other Browsing Behaviors
17
Velocity of web navigation*
25% of all documents displayed for less than 4 seconds
52% less than 10 seconds
“they [the participants] regularly just seemed to glimpse
over most of the information offered, before they perform
their next navigation action.”
Consequence for usability?
* Weinreich et al, “Off the Beaten Tracks: Exploring Three Aspects of Web Navigation”, IW3C2 2006](https://image.slidesharecdn.com/08usability-withlogo-090306115815-phpapp02/85/WEB-I-09-Usability-17-320.jpg)
WEB I - 09 - Usability
- 2. 1 INTRODUCTION 2 HTML 3 TABLES 4 FORMS 5 HTTP 6 CSS 7 CSS FRAMEWORKS 8 DIGITAL MEDIA 2 9 USABILITY
- 3. Designing a Web Site 3 Part 1: Site Design / Engineering concerned with usability Part 2: Page Design / Art concerned with aesthetics (visual attractiveness)
- 4. What Do You Dislike About the Web? 4 or, what do you hate to see on a web page?
- 5. Usability Matters 5 Many of the things we don't lik about M f th thi d t like b t the web pertain to the usability of web sites sites. Usability is: D i i Designing thi things so th t th make sense that they k to the people who use them. How easy is a web site to understand and use.
- 6. Usability in real life 6 http://www.flickr.com/photos/rdolishny/2760207306
- 7. Usability in real life 7 http://www.flickr.com/photos/11759181@N04/1176026705/ http://www.flickr.com/photos/johnswords/2717108560/
- 8. Usability and Audience Types 8 People visit a site for different reasons. Thus, the type of audience affects usability. y Also, how people use the web has changed significantly over the past ten years
- 9. Information Foragers • users who are looking for a particular piece of information. • informavores • concerned chiefly with usability ( (how easy is it to find information). y ) 9
- 10. Information Foragers 10 Will rely on search engine to get to the “information patch” (i.e., web site) Will be seeking very specific “prey” (information) Because search engines make it easy to find patches, g y p , hunters will spend little time looking for prey Even if hunters visit a site more often, they will still leave it quicker.
- 11. Surfers • users who "stumble" across a site. • concerned chiefly with aesthetics d hi fl ih h i (does this site look professional or interesting enough to continue exploring this site). • Minority 11
- 12. Types of Information Foraging 12 A given user can, at different times, engage in different types of information foraging Known item seeking Exploratory seeking p y g Don’t know what you need to know Re-Finding Re Finding http://www.boxesandarrows.com/view/four_modes_of_seeking_information_and_how_to_design_for_them
- 13. Known item seeking 13 Users who know what they are looking for, can describe it, and may know where to start. the user may be happy with the first answer they find Prefer: Search a z a-z indexes navigation Main virtue of site: able to answer user’s query fast
- 14. Exploratory seeking 14 Users who know roughly what they are looking for, can’t describe it, and likely don’t know where to start. They will usually recognize when they have found the right answer, but may not know whether they have found enough information (i.e., may forage more) Prefer: Navigation related links search
- 15. Don t Don’t know what you need to know 15 Sometimes we don’t know exactly what we need to know. We may think we need one thing but need another or, we may be looking at a website without a specific , y g p goal in mind. Prefer: Interesting content
- 16. Re Finding Re-Finding 16 Users looking f things they have already seen. for They may remember exactly where it is, or only remember what site it was on, or even have little idea b h i i h li l id about where it was. ~40% of an individual s searches are re-finding individual’s re finding searches (performing a search they have already p performed in the past).* p ) Prefer: breadcrumbs, recently viewed items, cookie support, etc Wishlists, shopping carts, etc * Teevan et al, “Information Re‐Retrieval: Repeat Queries in Yahoo’s Logs”, SIGIR 2007
- 17. Other Browsing Behaviors 17 Velocity of web navigation* 25% of all documents displayed for less than 4 seconds 52% less than 10 seconds “they [the participants] regularly just seemed to glimpse over most of the information offered, before they perform their next navigation action.” Consequence for usability? * Weinreich et al, “Off the Beaten Tracks: Exploring Three Aspects of Web Navigation”, IW3C2 2006
- 18. Velocity of web navigation 18 Weinreich et al, “Off the Beaten Tracks: Exploring Three Aspects of Web Navigation”, IW3C2 2006
- 19. Other Browsing Behaviors 19 Web site re-visitation is very common ~70%*-80%** of a user’s page visits are re-visits to a site. ~45% of a user’s page visits are re-visits to a page. * *** ~1 in 6 (16%) of visits are to Google*** ~ 60% of visits are to user’s top 10 site*** However, this data does vary markedly for different individuals Consequence for usability? * Weinreich et al, “Web Page Revisitation Revisited: Implications of a Long‐term Click‐stream Study of Browser Usage”, CHI 2007 ** Cockburn et al, "Improving Web page revisitation: Analysis, design and evaluation," IT & Society 2003 *** Weinreich et al, “Off the Beaten Tracks: Exploring Three Aspects of Web Navigation”, IW3C2 2006
- 20. Part 1: Site Design 20 Usability is perhaps the most important goal in web design. If users cannot figure out how to use your site easily, easily some will leave your site, never to return. site return Perhaps more importantly, a good user experience creates trust in a site. In the web, users experience usability first and pay later; thus if site not usable, they will not purchase (or revisit) from your site. in contrast, outside the web, users generally buy first, then experience usability (think DVDs) l f h bl (h k ) later.
- 21. Factors Determining Usability 21 i. The response time (i.e., download time) for site/pages. ii. The organization system for site. g y iii. The navigation system used throughout the site. iv. iv The content of the site site.
- 22. i. Response Time 22 If your pages take a long time to download, users download will leave your site. How long is too long? 1 second response-time b d i between action (e.g., mouse i ( click) and response (page loaded) is ideal. For most broadband users, that means about 200 KB 10 seconds i the upper li i f k d is h limit for keeping user i site. i in i That means, any given page should be functionally loaded in no more than ten seconds. 2006, webdesign.about.com Nov. 1998, www.emarketer.com % Who Leave Load Time % still waiting Load Time 16% 10 sec 84% 10 sec 49% 15 sec 51% 15 sec 74% 20 sec 26% 20 sec 95% 30 sec 5% 30 sec Source: Jakob Nielsen, Designing Web Usability, 1999
- 23. Factors Determining Response 23 Times Average response time is determined by: the speed of the user's connection to Internet the speed/load of the web server the speed of the server's connection to Internet load on the Internet (2-4 pm peak loads in North America) cumulative file size of the images and objects in web page Which f h Whi h of these factors do you have control f d h l over as a web designer?
- 24. Understanding Page Size 24 Again, page size is the cumulative file sizes of all the elements on a web page. This includes: the HTML file the image files g object files (video, Flash) s
- 25. First Page of Site Response Time randyc.gif 1K bar.gif g 3K bio.gif 1K bio_over.gif 1K site.gif 1K site_over.gif 1K idea.gif id if 1K idea_over.gif 1K for.gif 1K for_over.gif for over gif 1K main.htm 4K TOTAL 16K 25 Download time @ 28.8 Kbps = 5 seconds 128 Kbps = 1 second
- 26. Subsequent Page of Site Response Time Other images still in cache so no need to re- download bio_bar.gif 3K cv.gif 1K cv.htm 4K TOTAL 8K 26 Download time @ 28.8 Kbps = 1.5 seconds 128 Kbps = 1 second
- 27. First Page of Site Response Time menu.htm 1K main.htm 1k frameset.htm 1K 5 images + roll-overs 60K imagebar.gif 1K imagmap.gif imagmap gif 17K rollovers 4K logo.gif 1K TOTAL 95K 27 Download time @ 28.8 Kbps = 32 seconds 128 Kbps = 7 seconds
- 28. Subsequent Page of Site Response Time Other images still in cache so no need to re- download artbar.gif 2K artist.gif 8K dot.gif dot gif 1K byname.gif 2K alphabet.gif 8K artist.htm ti t htm 20K TOTAL 41K 28 Download time @ 28.8 Kbps = 15 seconds 128 Kbps = 3 seconds
- 29. ii. Organization System 29 The way a site is organized also affects usability. Organization is important because a web site is about information. Organization refers to the grouping of information. Grouping: providing p g paths to information by showing relationships. p y g p The trouble with relationships is that they are subjective.
- 30. Grouping Exercise 30 Group (organize) the following information: refrigerator socks b bureau livingroom di ti dictionary kitchen milk bookshelf bedroom
- 31. Grouping Possibilities 31 Alphabetically By Room bedroom Kitchen stuff By Size bookshelf refrigerator Large refrigerator milk kitchen bureau Living Room stuff living room dictionary dictionary bedroom kitchen bookshelf Medium living room Bedroom stuff refrigerator milk socks bureau socks bureau bookshelf Small socks dictionary By hierarchical location y milk ilk Kitchen refrigerator milk Living Room bookshelf dictionary Bedroom bureau socks Source: Fleming, J, Web Navigation, 1998
- 32. Subjective Organizing 32 Because organizing information is subjective, there are innumerable ways of organizing information. While this means there is no "perfect" way of organizing your information, there are still "better" and "worse" ways of organizing information. How you organize information in a web site should y g be a balance between how the information "wants" to be organized and how the user "wants" to find it. g Source: Fleming, J, Web Navigation, 1998
- 33. Organization System 33 Refers to the "philosophy" and to the "execution" used to organize a site's information. In other words, an organization system refers to both its: Organization scheme (how a site is subdivided into sections) and Organization structure (the relationships between these sections).
- 34. Organization Schemes 34 Defines the shared characteristics of content items and determines their logical grouping. Types of organization schemes: exact ambiguous hybrid Source: Rosenfeld & Morville, Information Architecture for the Web, 1998
- 35. Exact Organization Schemes 35 Divide information into well-defined, mutually exclusive sections. Courses Alphabetic Astronomy Biology Chemistry Drama Fencing Press Releases Chronological Nov 4, 1999 Oct 21, 1999 Oct 10, 1999 Sept 3, 1999 Aug 18, 1999 Source: Rosenfeld & Morville, Information Architecture for the Web, 1998
- 36. Ambiguous Organization 36 Schemes Divide information into categories that defy exact definition. Much more subjective, and as well, more useful. Why?y Answer: we don't always know what we are looking for. The success of an ambiguous organization scheme depends on the usefulness of the classification to the user. Source: Rosenfeld & Morville, Information Architecture for the Web, 1998
- 37. Types Ambig o s Organization T pes of Ambiguous Organi ation Schemes 37 Faculties Topical Sciences Humanities E.g., yellow pages, college calendars Social Sciences Challenging to design, yet very help to users Fine Arts Task-oriented/Functional ABC College Register in a Course Used by software (File, Edit, Format, View) Locate an Instructor Useful for web-based applications web based Meet the Students Choose a Loan Plan Metaphor-driven ABC College metaphor can help make the unfamilar seem familiar (think of Windows Registrar’s Office folders, trash can, and desktop) , , p) Lecture Theatre Student Pub Can be difficult to maintain over entire site Bank Machine Audience-specific Makes sense if more than clearly definable audience clearly-definable ABC College Potential Students Faculty Existing Students Broke Students Source: Rosenfeld & Morville, Information Architecture for the Web, 1998
- 38. Hybrid Organization Schemes y g 38 A mixture of several different organization f l d ff ABC College Humanities schemes. Sciences Locate an Instructor Generally, Generally a very bad thing; yet sometimes Students Parents difficult to avoid Get a Library Card Student Pub The point of an organization scheme is to provide the user with a mental model to help user understand structure of data. Hybrid usually results in confusion confusion. If you must use hybrid scheme, try to visually separate the different schemes. Services for Students Find a Student Loan Get a Library Card Visit the Student Pub Students Parents Faculty y Academic Areas Fine Art Fine Arts Humanities Sciences Health Studies Humanities Sciences
- 39. Hybrid Schemes 39 Sears separates topical and functional Functional/Metaphor Topical Functional/Metaphor /Topical Functional/Metaphor Topical Functional Topical Metaphor Topical/Functional/ Metaphor
- 40. Designing Schemes 40 The danger with hybrid schemes is that they can utterly confuse user. Make sure your categories are clear as possible. What does this do? What does this do? Topical Audience Specific/Functional/Topical/Metaphor = BIG MESS Where do I click if I'm a student looking f the schedule f Introduction to Computers? f for for
- 41. Designing Schemes 41 Categories generally should be mutually exclusive However, sometimes it it sensible to cross-list an item in more than one branch of a scheme Too much cross-listing, then scheme loses its value Academic Students Services Sciences Register Registering Humanities Student Union Visiting Social Sciences Scholarships Parties Scholarships Fine Arts Scholarships
- 42. Designing Schemes 42 Be B cautious of metaphors i f h A metaphor is something that is used to represent something else. else advantages: metaphor can provide a unifying framework to entire site users can make use of their knowledge they already have e.g., the shopping cart metaphor in e-commerce sites e commerce disadvantages: often difficult to make site sections "fit into your metaphor fit into" If connection between metaphor and content is tenuous then user will have difficult time finding information.
- 43. The whole world's a Metaphor world s 43 Example of the difficulty of making all of a site's main This seems to be a clever metaphor, but the sections fit into a single metaphor. In the above placement of categories with shifter position is example, why is the "New" section up in the attic? arbitrary: why is "Images" section in the Reverse position?
- 44. Organization Structures 44 The structure of information defines how different categories defined by the scheme relate to one another Structure defines way users navigate through information It is the plan or map of the pages in a site p p p g
- 45. Types of Organizational Structures 45 Linear Hub and Spoke p Web Hierarchical Hi hi l Facets
- 46. Linear Organization 46 Pages in a sequence Wizards, checkouts, and other pipelines
- 47. Hub and Spoke 47 Start from landing page, and navigate to individual pages. Extension of linear
- 48. Web 48 Many pages linked together without levels or sequence Each page is potential hub and spoke E.g., MySpace g, y p
- 49. Hierarchy 49 Pages are arranged in a parent-child (tree) relationship. Most sites are hierarchical
- 50. Facets 50 A page belongs to one or more facets. A facet is a unique category that describes g y a property of a page Each facet might be arranged hierarchically Allows a user more freedom in finding information Kalbach, Designing Web Navigation (O’Reilly, 2007)
- 51. Example Facets 51 Source: Uta Priss, Elin Jacob, “Utilizing Faceted Structures for Information Systems Design”, http://www.upriss.org.uk/papers/asis99.pdf
- 52. Designing Hierarchies 52 Try to balance breadth and depth Users don't like having to "drill-down" endlessly to find an item, nor do they like having to read through hundreds of menu choices. Key question is what is the right balance? depth breadth
- 53. Memory Implications 53 Most people can only manage seven, plus or minus two, items of information at a time. Thus, some researchers have suggested that your site should have 5 to 9 major sections. j If we have limitations with short-term memory, shouldn t shouldn't we then try to have less breadth and breadth, more depth? NO!
- 54. Research on Breadth vs Depth p 54 User's Ranking of f Average A Difficulty access time 2x6, Breadth=2, Depth=6 4x3, Breadth=4, Depth=3 8x2, Breadth=8, 8x2 Breadth=8 Depth=2 Mean # of Errors 4x1, 16x1 1st page Breadth=4, 2nd page=16 16x1, 4x1 1st page Breadth=16, 2nd page=4 Source: Zaphris & Mtei, "Depth vs Breadth in the Arrangement of Web Links," 1997
- 55. Research on Breadth vs Depth p 55 Average access time Lostness Worst 60 Worst 70 50 60 50 40 40 30 30 20 20 10 10 Best Best 0 0 8x8x8 16x32 32x16 8x8x8 16x32 32x16 User Preference Best 16 14 12 10 8 6 4 2 Worst 0 8x8x8 16x32 32x16 Source: Larson & Czerwinski, "Web Page Design: Implications of Memory, Structure and Scent for Information Retrieval," 1998
- 56. Research on Breadth vs Depth 56 Users greatly preferred this TOC to ... ...this one
- 57. Conclusions on Breadth vs Depth 57 access time is proportional to depth of hierarchy i.e., the deeper the menu, the more time the user will spend and the less happy she/he will be. Try to avoid a depth of more than 2 or 3 increases in breadth do not seem to affect speed ie i.e.,one well-organized moderately-broad information well-organized, space gives optimal user performance.
- 58. Information Scent 58 However, if the category labels (the organization H h l b l (h i i scheme) are not well organized, broader structures can have just as p j poor performance (or even worse) as p ( ) deeper structures. Information has a "scent" that users can pick up through category l b l labels. i.e., scent is the amount of remote indication a user can derive from a site's organization scheme and labeling about site s the relative location of a target. A well-designed organization scheme improves the scent of information, information thus making it easier for users to find their information.
- 59. iii. Navigation Systems 59 When a user enters a web site, he/she is usually trying to find something, and he/she must decide whether to search or to browse some users are "search-dominant," others are "link- dominant" thus, every web site should provide both: A way to find information via a search facility, A way to find information via clicking on a hierarchical series of links, also called a navigation system. Source: Steve Krug, Don't Make Me Think, 2000; Jakob Nielsen, Designing Web Usability, 1999
- 60. Navigation Conventions 60 We rely on conventions in physical ßêÿš¥ space (in cities, on the freeway, at the airport, etc) and in information spaces ( i hi a b k or newspaper) th t speed (within book ) that d We understand the meaning of these nde stand signs, even though we can't read their up the navigation process. language, because of our knowledge of traffic sign conventions. Likewise, various conventions have , emerged in the web that help users in their navigation. In general it is sensible to work within general, these conventions. If not, you should have a good reason (e.g., (e g potential audience is avant-garde, avant garde new non-conventional way is clear and self-explanatory, etc). Even though I can not read the language used on this page, I can still Remember how briefly most users view a navigate it due to it use of web i t d t its f b page!! conventions. Source: Steve Krug, Don't Make Me Think, 2000; Jakob Nielsen, Designing Web Usability, 1999
- 61. Navigation Conventions 61 Utilities (functional or action oriented) You are h here indicators d Main sections (global navigation) Co pa y Company ID sub sections b ti Page Title Local Navigation Small text footer links
- 62. Navigation Conventions g You are here indicator Utilities 62 Company ID Main sections (global navigation) Page Title Local Navigation Small text footer links
- 63. Navigation Conventions 63 Conventional arrangements of navigation elements Global Global Global Local Local Local Inverted-L Horizontal Embedded Vertical Kalbach, Designing Web Navigation (O’Reilly, 2007)
- 64. Searching 64 About 50% of users will use search rather than navigation system. However, if your search facility is not very accurate, adding a search facility may be counter-productive. Source: Louis Rosenfeld, Information Architecture, 1998; Steve Krug, Don't Make Me Think, 2000
- 65. Search Interface Guidelines 65 Available on every page Text box plus button with label “Search” p Located top right (preferred) or top left of page Text b T t box size ~25 characters wide i 25 h t id
- 66. Search Engine Results Page 66 (SERP) Should be paginated into chunks of about 10 results Almosteveryone (~93%) will stick to first SERP In Google, about 75% stick to first SERP Almost everyone will choose the 1st or 2nd choice InGoogle, almost 70% pick 1st or 2nd choice in SERP In Google, over 50% pick 1st I G l i k Source: Nielsen + Loranger, Prioritizing Web usability, 2006
- 67. Google as Entry Point to Site 67 One of the key changes in user behavior over the past 5 years is that users often don’t visit “good” sites but look for “good” answers. Asa result, many (or even most) people will be using Google (and not the home page) as the portal into any page in your site.
- 68. General Navigation Questions 68 A site's navigation system should answer these three user questions: Where am I? Where have I been? What’s here? Where can I go? Source: Jakob Nielsen, Designing Web Usability, 1999
- 69. Where Am I? 69 In any page in your site, users should be able to tell: where on the web they are where in the site they are
- 70. Where am I (on the web)? 70 Every page in your site should contain the company name or logo. This is generally placed in the upper-left corner It is usually made into a link to the home p g as well y page You may also want to indicate who is the author, when it was created or last modified copyright info, modified, info privacy messages, security options, etc. This usually is placed at the bottom or footer of a s all page.
- 71. Company logos in the upper-left corner is extremely common on the web. 71
- 72. Where am I (on the web)? 72 Home pages should allow user to quickly determine the site's purpose in a quick scan of the page. People ill i it th h P l will visit the home page more often th any other page in your site. ft than th i it But studies show that users will spend less time viewing a home page than an interior content page. This home page provides few clues as to what Acer does (build and sell computer equipment)
- 73. Where am I (in the site)? 73 You should specifying where the user is within the site by: giving each page a name. highlighting, within the navigational menu, the location g g g, g , of the current page within the larger hierarchy of the site. Breadcrumb trail Shows the user where she is in the site hierarchy. e.g., Home | Products | Shoes | Athletic | Nike
- 74. Where am I ? 74 Company ID Page Title Navigation Highlight
- 75. In the Slate Magazine site, we can easily tell that this particular page is part of the Culture section. Unfortunately, the Culture section is quite large with many subsections (this page is part of the Dialogue subsection); however, there is no way to tell this without exploring y p g the Culture link. The amazon site, in contrast, visually shows which section and subsection we are in (the Award Winners subsection of the Books section). Note: in general, if your are indicating current location via change in navigation banner, the link should be disabled. In this example, the Award Winners isn't a 75 link.
- 76. Sometimes the indicator of the site's current location is overly vague. Can you find it in this example? Unless you are trying to impress users with your originality (which often is the case for designers and artists) try to make location artists), indicators reasonably obvious (but not obnoxious). 76
- 77. What s What’s Here? – Page Titles 77 Page Name Page Name Content here Content here Page Name Page Name Content here C t th Content here C t th Make th M k the page titl bi and prominent: typically it should be title big d i t t i ll h ld b the largest text on the page. Source: Steve Krug, Don't Make Me Think, 2000
- 78. Where have I been? 78 Since the web is state-less ( h server Si h bi l (the doesn't keep track of the last page you were on), it is difficult to indicate this. ) d ff l d h the browser's Back button and History button help Though less than 1% of users use the history feature One partial solution is to use different link and visited link colors. Source: Nielsen + Loranger, Prioritizing Web usability, 2006
- 79. Breadcrumbs 79 Notice that each step in trail is a link. Breadcrumb links Most sites do not make the last step in the trail (i.e., the current section) a link.
- 80. Can you tell which color is the visited link and which is the non-visited link? 80
- 81. Visited Link Color 81 Using the default colors for links (blue for unvisited, purple for visited) is best choice for usability. "Of all the graphic design elements we looked at, the only one that is strongly tied to user success was the use of browser- default link color ... Our theory is that use of the default colors is helpful because users don't have to relearn every time they go to a new site.” Spool, 1999 “Unchanging li k colors create navigational confusion b “U h i link l t i ti l f i because users don’t quite understand their different choices or where they are. This is as serious a usability problem as it ever has been.” Nielsen, 2006 Ni l Source: Jared Spool, Web Site Usability, 1999 Source: Nielsen + Loranger, Prioritizing Web Usability, 2006
- 82. Visited Link Color 82 Other strategies: use red as non-visited link color (our eyes look at red first) use as non-visited link color the same color as primary color scheme in site as whole; visited link color would then be a lighter, less-saturated version of that color. Source: Jared Spool, Web Site Usability, 1999
- 83. Whatever you do, don't use too Wh t d d 't t many link colors in one page or site. The Slate Magazine main page (below) uses three different link colors (plus another for visited link). (p ) Internal pages in the site (at left) use 3 different link colors plus two different visited link colors. 83
- 84. Another l ti t th "Wh A th solution to the "Where Have I Been?" H B ?" question is to provide "bread-crumbs" — that is, some visual indication of which choices the user has made, usually via hyperlinks 84
- 85. Where can I go? 85 Indicated by the page s b page's links Every Web page should contain at least one link never have Dead-end pages Dead end (pages with no links to any other local page in the site) the site's links should form a navigation system that has hyperlink consistency f it from page t to page. Remember, not every visitor to a page comes through the front door; they might arrive from a search engine link or a bookmark. Source: Jakob Nielsen, Designing Web Usability, 1999
- 86. Types of Navigation Systems 86 global provides access to first-level section pages. available in all pages local Global system p y provides in a complex site provides access site, links to these pages to pages within a section or sub- site. contextual t t l additional embedded links only for non-critical links or for y repeating main links local system might provide Might also be a series of related links to these pages content links
- 87. global navigation system local navigation system contextual navigation 87
- 88. Navigation Design: First Screen 88 The first screen the user sees must be as good as it can be. This first screen might not be the home page — g p g the user might come to a page from an external link or search engine. The part of a web page that is visible without vertical scrolling (“above the fold”) is extremely important.
- 89. Navigation Design: First Screen 89 About 50% of users will almost never scroll The majority of users scan what they see on the browser and then make their navigation choice. Use s w sc o ve ca y Users will scroll vertically if there is some compelling content e e s so e co pe g co e (e.g., a listing of products, an article they are reading, search engine results, etc). Home pages will only be scrolled between 14-23% of the time. time Almost no one will use the horizontal scroll bars. NEVER require users to use the horizontal scroll bars to see important navigation elements!!! Of those that do scroll, most will only scroll about a screen full. Thus, you must try to fit the most important pa s of your us, us y o e os po a parts o you site—that is, the navigation system, company name, page title, and search option—above the fold. Source: Nielsen + Loranger, Prioritizing Web Usability, 2006
- 91. Navigation: First Screen 91 Most M users have monitor resolution set to h i l i 1024x768 or 1280x1024. Recall,however, that browser buttons, status bar, window title, etc also take up space. http://www.hobo‐web.co.uk/tips/25.htm (March 2008 visit stats)
- 92. Navigation: First Screen 92 Users with hi h resolution generally U i h higher l i ll do not have their browser window maximized.d Why?
- 93. Navigation: First Screen 93 They may have: multiple monitors of different sizes multiple windows opened Sites often don t take advantage of don’t widescreen/maximized space
- 94. Navigation: First Screen 94 Repeating backgrounds can cause problems at higher resolution. 800 x 600 1600 x 1200
- 95. Navigation: First Screen 95 Thus, design your page with the 1024 x 768 resolution in mind. This means content area is about 1004 x 598 1024x738 1004x598 Browser 1024x768 Content Window Screen Size Area
- 96. Designing Pages 96 Ideally, your pages should work at any resolution, from 800x600 to 1280x1024 and beyond.
- 97. These vital navigational elements are off-screen at smaller window size. 97
- 98. This site is optimized for larger size but is still usable at smaller size 98
- 99. This site is optimized for larger size but is still usable at smaller size 99
- 100. Guidelines for screen size 100 Optimize for 1024x768 Do not design solely for a specific monitor size g y p because screen sizes vary among users. Use a liquid layout that stretches to the current user's window size (that is, avoid frozen layouts that are always the same size) size). Even better, use an elastic layout that sensibly adapts to window size. d i d i
- 101. Examples of frozen layout 101
- 102. Examples of fluid layout Notice how filling entire window might make text hard to read. 102
- 103. Examples of elastic layout Notice how size increases but doesn’t fill entire window in order to maintain readability 103
- 104. Navigation: Where can I go? 104 Your global navigation system should provide a way to return to the site's home page. Methods: provide an explicit home link to navigation bar, or make the company logo a link b k to home page. k h l li k back h In this case, it is nice to also add the word "Home" to the logo or use the alt attribute of the <img> tag for the logo to provide g g g p feedback to the user that logo is clickable. Go To Home Page home
- 105. Navigation Elements 105 There are many different user interface elements by which Th diff t i t f l t b hi h you can construct a navigation system. Navigation bars g Text menus Dynamic menus Trees T Action buttons Drop-down menus p Tag clouds Step + paging links Site Si maps and indexes di d Directories Kalbach, Designing Web Navigation (O’Reilly, 2007)
- 106. Navigation Bars 106 A chain of horizontal links made from Images Text
- 107. Navigation: Text 107 In order to improve download speed, many sites have replaced all-graphic menu systems with text- based menu systems that combine small, reusable graphics with text links using CSS or within tables.
- 108. Navigation Bars 108 It is often best to place navigation bars at top of page, since users scan web pages using same pattern as when reading: from top-left to right, then down. Testshave shown that users perform slightly better with main navigation system at top (or bottom). However, there is less vertical screen space than horizontal, so placing links on left-side of screen will maximize available screen space. Source: Jared Spool et al, Web Site Usability: A Designer's Guide, 1999
- 109. Navigation: Tabs 109 Tests have shown that users find tabbed interfaces very easy to use. Ideally, the tab for the current section should be coloured to indicate the current section.
- 110. Navigation: Tabs 110 If you are going to use a tab metaphor, make sure they operate as tabs. In both of these sites, the tab metaphor only extends to the current area, which loses the meaning cues provided by tabs. Have a tab selected when you enter the site. Neither the Quicken or the petsmart sites have a tab initially selected... …but both the chapters and circuit city sites do.
- 111. Navigation: Icons 111 Icons are metaphors I h Be sure to provide text These icons are not exactly obvious. labels to help clarify the meaning of icons. One way to do this to show label only when you roll-over icon. However, this is not an ideal solution from a usability perspective. These two examples use a rollover text explanation to help (somewhat) clarify the icon's meaning
- 112. A picture is worth a thousand words ... 112 User's Interpretation Designer’s Intended Meaning State of your account Fixing your order E-mail us What's new A picture maybe indeed be worth a thousand words, but for a usable iconic system, we want the user to associate only one meaning/word to the image, not a thousand !
- 113. Imagemaps vs. Individual 113 Graphics A image-based navigation system can be created via single graphic using an image map, or by breaking into individual graphics.
- 114. Imagemaps vs. Individual 114 Graphics Advantages Disadvantages Imagemaps Generally (but not If images turned off or always) faster loading y ) g slow to download,, since fewer files to image map cannot be download. used. Individual Graphics Potentially faster loading Generally slower on subsequent pages loading on first page. due to browser caching. Navigation system still usable (if ALT used) even without image downloaded. downloaded Can implement rollovers (which is not necessarily a good thing).
- 115. Navigation & Images 115 Some users with slow connections will turn off the display of images in their browser. You can still make your site usable for these users by filling out the alt attribute of the <img> tag. g g g <img src='abc.gif'> g g Products <img src="abc.gif" alt="Products">
- 116. Better H B Homes and d Gardens web site doesn't use the ALT attribute for their i th i images. Since the menu in the blue bar is an image map, it is i i unusable for browsers with images turned off. Metropolis's site, on the other hand, does use the ALT attribute. The navigation elements are still usable here even 116 with images turned off.
- 117. Navigation: Footer 117 It is important to provide the user with text equivalents for navigational graphics (especially f i ( i ll for image maps) ) since graphics turned off or the user might have might press the Stop button on their h S b h browser. Common practice to place text-versions of links at bottom of pages.
- 118. Navigation: Text Menus 118 Vertical series of text l k l f links Try to avoid wrapping a text link over two or more lines. li This typically confuses users into thinking there is more than one link link. Wines How many wines are listed here? Merlot Zinfandel Muscat Cabernet Sauvignon Nebbiolo Wines Wines If space is a problem, try using bullets Merlot •Merlot Zinfandel •Zinfandel Muscat •Muscat Cabernet Sauvignon •Cabernet Nebbiolo Sauvignon •Nebbiolo Source: Jared Spool et al, Web Site Usability: A Designer's Guide, 1999
- 119. Navigation: Text 119 Remember that most users will ignore sers embedded text links. Because users initially scan web pages (rather than carefully read), embedded links are typically missed. if it is an important link, be sure to provide an alternative to embedded links. This embedded link will probably be ignored. This is still an embedded link because it is followed by text, and will probably be ignored. This is not really an embedded link. Why? because it is on a line by itself. The following text is on a separate line. Source: Jared Spool et al, Web Site Usability: A Designer's Guide, 1999
- 120. Navigation: Text 120 Avoid i blue A id using bl text f anything other than for hi h h web links Avoid underlining anything except web links Avoid using red + green as link color pairs g g p Color blindness amongst 8% of males Use the title attribute to provide more information about the link. <a href="privacy html" title="Read our privacy policy">privacy</a> href= privacy.html title= Read policy >privacy</a>
- 121. Navigation: Dynamic Menus 121 Advantages Ad Can display more choices in a single space Familiar interaction (similar to desktop applications Disadvantages Dynamic menus from a vertical menu requires precise mouse y a c e us o ve ca e u equ es p ec se ouse movement (not as much as problem from a horizontal menu) Can be frustrating to use Not a problem to use
- 122. Navigation: Tree 122 Good for site with strong hierarchical organization Potentially problem with horizontal space when many nodes are opened.
- 123. Navigation: Action Buttons 123 Text hyperlinks are sometimes not the best choice for representing actions that do something important. Texthyperlinks should be clickable with no consequences Buttons are better choice for indicating transactions g
- 124. Navigation: Action Buttons 124 Two types: Graphical action buttons An image that (hopefully) looks like a button HTML buttons Created via <input> tag
- 125. Navigation: Pull-Down Menus Pull Down 125 While Whil a good way d to save on screen space, pull down space pull-down menus force user to act to find out navigation options Works best in conjunction with button bar or text links.
- 126. Sun Microsystems main page uses a pull-down menu at top, with duplicate images at bottom. 126
- 127. Navigation: Tag Clouds 127 Provides a snapshot of various categories in a site and their relative importance/frequency. Each word is a link Sorted alphabetically p y Perhaps less useful for corporate sites or other sites without categories or tags g g
- 128. Navigation: Stepping and Paging 128 Allow users to step through a linear series of pages, or move back and forth between multiple related pages.
- 129. Navigation: Directories 129 Provides access to a wide variety of non- hierarchical information that can be organized via categories.
- 130. Navigation: Site maps and 130 indexes A site map is a representation of a site’s structure While not heavily used by users, they are an important part of SEO (search engine optimization). Indexes are alphabetic guide to a site’s content. p g Can be combined with sitemap
- 131. Navigation: Site maps and 131 indexes
- 132. Page Types 132 Different page types will change the elements and organization of a page’s navigation. They are: Navigational Content Functional Kalbach, Designing Web Navigation (O’Reilly, 2007)
- 133. Page Types: Navigational 133 Directs people to content e.g., home pages, landing pages, search results, galleries Many stores combine gallery views with search engine results Landing pages are like home page for a subsection of a site
- 134. Page Types: Content 134 For most users, this is the page they are looking for. e.g., single article, product, story, blog entry, etc. The focus of this page should be the content, not advertising, navigation, etc.
- 135. Page Types: Functional 135 Pages that perform a function/action/task e.g., search forms, submission forms, web applications. Often other navigational elements are missing if it is important for the user to finish the task.
- 136. Data Entry Data-Entry Usability 136 The data-entry section of a web application lets users enter, save, delete, and modify data, usually stored in databases or XML files on the web server. Source for this and the following slides: Susan Fowler and Victor Stanwick, Web Application Design Handbook, 2004
- 137. Conceptual Model: Lists versus Objects 137 Data-entry pages generally have two views for data: Lists (also called tables) Objects (also called records or data entry forms). j ( y )
- 138. Data Entry Data-Entry Forms 138 Contain: Users enter information using a set of fields (also called text boxes) and controls such as checkboxes, radio buttons, and dropdown boxes for selecting items from lists. Users act on the information using buttons.
- 139. Guidelines for fields 139 Use standard unprotected fields to accept d d d fi ld unpredictable text entry (names, street addresses, and so on) on). Use protected fields (fields into which users cannot type) to show system values values saved elsewhere in values, the system, or calculated values. Use required fields when you have to be sure that the form contains all necessary information. Don't have too many required fields y q Use validated fields when business rules must be ensured.
- 140. Guidelines for fields 140 Make entry areas the right size <input type="text" name="cpt" maxlength="6" size="6"> Don't k D ' make users format the text f h Provide keyboard and mouse navigation <label for="fix">Fi<u>x</u>:</label> <input type="text" name="fix" accesskey="x">
- 141. Guidelines for labelling forms 141 Fields should be organized in columns and groups, not in one long scrollable list down the screen. Ifthere are too many fields to fit on one screen, then provide multiple screens and a method, such as tabs or pop-up windows, to move between them. Labels should be close to their data fields and controls. Align labels consistently, either left or right consistently
- 142. Guidelines for labelling forms 142 If you expect to internationalize your application, put the field labels above the fields, not at the left. Other languages may require more space for labels Right-to-left languages won't make sense if labels are g g g to the left of the fields.
- 143. Using defaults 143 Use a default whenever there is a likely one. f In fields, show the default entry in the field. In a set of checkboxes or radio buttons, set the most likely choice I a d In dropdown list, pick the mostly lik l entry. d li i k h l likely If most of your customers are from North America, then why not y , y put Canada or United States as the default value (rather than just list them alphabetically)
- 144. Using Defaults 144 Set defaults so that they benefit your site's visitors, not your organization. Source: Jeff Johnson, Web Bloopers, 2003
- 145. Indicating a required field 145 Approaches: changing the background color of the required fields making the labels bold, putting a symbol (asterisk, arrow) in front of the field. p g y ( , ) However: B ld Boldor coloured labels won't help th l dl b l t h l those who use screen h readers.
- 146. Providing feedback for required fields 146 Approaches: show an error message on a separate error page and ask people to go back to the earlier page. return to the page, show the error message, and list the missing fields. return to the page, show the error message, and highlight the missing fields. Indicate errors as user enters data.
- 147. Validated Fields 147 If a field must follow a specific format (e.g., date, postal code, credit card, etc), then: Tell the user what is the expected format Enter Date: Enter Date (yyyy/mm/dd): Be as forgiving as possible Why do so many sites reject credit card numbers, etc. if they contain spaces? Change the form so that it avoids user formatting mistakes Source: Jeff Johnson, Web Bloopers, 2003
- 148. Other Controls 148 Use check boxes for entering binary (yes/no) data. Use radio buttons for choosing an option from a g p small list of choices.
- 149. Using Tabs 149 If form has too many fields, split them into several related tab pages. Eachtab page will need a way to move to the next tab page
- 150. Using Tabs 150 Tab pages provide an alternate way to navigate a linear series (also called a pipeline or Wizard).
- 151. Using Popups 151 Popup windows can also be used for: Collecting secondary information and settings for an object or record Holding tools such as calendars, toolbars, and palettes. Delivering messages, providing feedback, or showing background (non-essential) information. Asking questions, confirming actions, and warning of p problems
- 152. Lists 152 In many sites, users generally start from lists, selecting and opening individual objects they wish to examine or change. When they’re done with the objects, they close them y j , y and return to the list view.
- 153. How to Select and Open Objects from Lists S Op O j 153 Approaches Turning field data in list into links Action buttons/links within each list "row" Images within each list "row" g
- 154. How to Select and Open Objects from Lists S Op O j 154 Field data in list is made into a link Action buttons/links within each row Action buttons/links within each row Images within each list "row"
- 155. Concluding Caveats on Usability 155 In traditional software testing, usability scores (success at finding information) and user preferences (how much did the user like the site) are very strongly linked. i.e., users almost always prefer software they find easiest to use In web testing, however, usability and user preferences are not nearly as strongly linked. When asked, users like the sites the provide interesting and relevant content. "…these results may mean that good content is so important to users that other factors are secondary." Source: Jared Spool et al, Web Site Usability: A Designer's Guide, 1999