1. 1 Lecture 6 Designing Displays and Navigations

2. 2 Web Design Pyramid

3. 3 Content Organization l Organizational schemes: classification systems for organizing content into groups l Organizational structures: defining the relationships among the groups

4. 4 l You have a mass of content that you want your users to be able to find Graphic overview: scheme and structure Fact 1 Fact 13 Fact 12 Fact 11 Fact 10 Fact 9 Fact 8 Fact 5 Fact 7 Fact 6 Fact 3 Fact 4 Fact 2 Fact 14 Fact 15 Fact 16 Fact 17 Fact 18 Fact 19 Fact 20

5. 5 How to Organize so Users Can Find Things? l First, group related things, forming the groups in terms of the way users think. Fact 13 Fact 8 Fact 14 Fact 15 Fact 19 Fact 10 Fact 2 Fact 17 Fact 12 Fact 5 Fact 3 Fact 4 Fact 1 Fact 11 Fact 9 Fact 7 Fact 6 Fact 16 Fact 18 Fact 20

6. 6 This is an organizational scheme l Now give names to the groups, or have the users do that Fact 13 Fact 8 Fact 14 Fact 15 Fact 19 Fact 10 Fact 2 Fact 17 Fact 12 Fact 5 Fact 3 Fact 4 Fact 1 Fact 11 Fact 9 Fact 7 Fact 6 Fact 16 Fact 18 Fact 20 Group D Group C Group A Group B Group E

7. 7 Next: how do the groups relate to each other? l Perhaps in a hierarchy:

8. 8 How do the groups relate to each other, continued l Perhaps with hyperlinks:

9. 9 Those are two organizational structures l Remember: l A scheme groups similar things together l A structure shows how those groups are related l And how we discover how users think: how they see the groupings

10. 10 Organizational Schemes l Familiar in everyday life: Phone book Appointment book Shopping mall diagram with store locations

11. 11 These are exact organizational schemes l Alphabetical: phone book, for example l Chronological: appointment book, for example l Geographical: shopping mall diagram, for example

12. 12 Not always possible l Where can I find sardines packed in water, with no salt added? In the canned fish section? In the dietetic foods section?

13. 13 Supermarket is an example of an ambiguous organizational scheme l “Ambiguous” often has a negative connotation. We use it to describe organizational situations where there is more than one reasonable way to group things. l We identify four types of ambiguous organizational schemes: Topical Task-oriented Audience-specific Metaphor-driven

14. 14 Topical organizational scheme l Organizes content by subject l Examples: Library subject index Encyclopedia Chapter titles in textbooks Website home pages (usually combined with other schemes as well)

15. 15 Task-Oriented Organizational Scheme l Organizes content by what user wants to do.

16. 16 Task-oriented organizational scheme l Example: Autobytel.com

17. 17 Audience-specific organizational scheme l Useful when there are two or more distinct user groups l User may navigate to appropriate page and bookmark it

18. 18 Audience-specific organizational scheme l Example: Bank of Montreal Specific audiences

19. 19 Metaphor-driven organizational scheme l Shows group by a visual metaphor. l Not many examples, because it is difficult to find metaphors that will work with all users. l Possible example: pet supply store:

20. 20 See the problem? l This is a hamster, but what if your user thinks it’s a rat, and hates rats?

21. 21 Hybrid organizational scheme l Combines multiple organizational schemes l Quite common, but must be done with care to avoid confusion l Example: Nordstrom

22. 22 Hybrid organizational scheme example

23. 23 Organizational Structures l Review: Organizational schemes create groups Organizational structures define the relations between groups

24. 24 Types of organizational structures l Hierarchy l Hypertext l Database

25. 25 Hierarchical organizational structure l Structuring by rank or level l A tree, in computer science terms

26. 26 An organization chart is a hierarchy ManufacturingMarketingDistribution Research President E A BCD Etc.

27. 27 Definitions l Breadth of a hierarchy: the number of links available at each level l Depth of a hierarchy: the number of levels l Broad shallow hierarchies offer many choices at each level l Narrow deep hierarchies require many clicks to get to the bottom level l Users prefer broad shallow hierarchies

28. 28 Hypertext organizational structures l Almost always combined with other structures l Consists of adding links to a page l Hard to find a commercial website that does not use hypertext

29. 29 Database organizational structures l Database organizational structure provides a bottom-up view, whereas a hierarchy provides a top-down l Both have their place l In a database structure the user fills in data, and is then taken directly to the right page. One click, when it works ideally.

30. 30 Database example: selecting a car model

31. 31 Visual Organization In this part you will learn about: l Four principles of visual organization and how to apply them Proximity Alignment Consistency Contrast

32. 32 Four organizing principles l Four principles of visual organization and how to apply them Proximity Alignment Consistency Contrast

33. 33 Proximity

34. 34 By using proximity to group related things

35. 35 Four organizing principles: proximity l See next slide for a tongue-in-cheek example: mindless application of alphabetic organization l Preview: the result is a hodge-podge as seen by the user

36. 36 Dan’s Clothing: the mindless version

37. 37 What groups would make sense? l Women’s clothes, Men’s clothes, Kid’s clothes, Special sizes l July Specials, Sales on rainwear, Closeout on pink socks l Store locations, Store hours l Open an account, Your account status l Check out l Email us.

38. 38 Dan’s Clothing: with sensible groups

39. 39 Continuity: flow, or alignment We see curves AB and CD, not AC and DB, and not AD and BC We see two rows of circles, not two L-shaped groups

40. 40 Can you use alignment (one form of continuity) to improve this page?

41. 41 But why stop? Left-align both columns to get vertical alignment also

42. 42 Avoid centered alignment for lines that are of nearly equal length

43. 43 Lines are now greatly different in length: reader knows it’s intentional

44. 44 Orpheus Chamber Orchestra: nice use of proximity and alignment

45. 45 The principles are seen in combination l Eddie Bauer site (next slide) has Horizontal alignment Vertical alignment Proximity, to group like items Consistency, in type size and font for links Contrast, between SALE and most else

46. 46

47. 47 Don’t be a slave to centered alignment...

48. 48... which is OK, but isn’t this better?

49. 49 Note the consistent layout in the next few slides

50. 50 One of the pages reachable from the previous slide

51. 51 One of the pages reachable from the previous slide

52. 52 Example: can you use consistency to improve this page?

53. 53 Sure: make the buttons the same size:

54. 54 Sure: use the same font everywhere

55. 55 How can we make this more interesting?

56. 56 Use more contrast

57. 57 Talk about boring!

58. 58 This is a quiz! (Not really) l Look again at the previous slide. How many ways can you improve it? Can you put all four principles to work? Next slide shows one possible way You can find lots of others

59. 59 Here’s one way, but there are many other possibilities

60. 60 Navigation Design In this part you will learn about: l Site-level navigation: making it easy for the user to get around the site l Page-level navigation: making it easy for the user to find things on a page

61. 61 Navigation: connections l Good navigation builds on good content organization Choose a navigation system that reflects the content’s organizational structure l Visual design and navigation design are interrelated Choose visual navigation elements that build context for a user l A navigational system is a visual representation of an organizational structure

62. 62 Three types of navigation systems l Hierarchical Derived from hierarchical organizational structure l Ad hoc Hyperlinks l Database Search engines l The most common is hierarchical, with many ad hoc links added

63. 63 Rare to use only one l Most websites build on a judicious combination of these three, with one dominant theme l Hierarchical plus hyperlinks very common

64. 64 A pure hierarchy is rare We add links to facilitate moving around the hierarchy without going all the way to the top; note extra links at bottom level

65. 65 Global navigation l For a small site, it may be possible to show the major links on every page Global navigation

66. 66 Global navigation bar can be vertical Global navigation

67. 67 Showing more levels in the hierarchy l Drop-downs or pull-outs can show the next level

68. 68 Breadcrumbs show user “This is where you are how you got here” Breadcrumbs

69. 69 Many sites have subsites Subsites

70. 70 Ad hoc links are very common

71. 71 The most familiar example of database navigation: Google

72. 72 Graphical navigation bar

73. 73 Building context for the user with navigation bars

74. 74 Be careful with metaphors: what do these mean?

75. 75 Intended meanings. Moral: add words, too!

76. 76 So add words!

77. 77 Some standard meanings Label and meaning l Home: the main entry point of a Web site, generally containing the top-level links to the site l Search: find related pages by supplying a word or a phrase l About Us: information about the company that created the site l Shop: browse for merchandise l Check Out: supply shipping and billing information, complete transaction

78. 78 Menus pack in a lot of information; note the dropdown from Software

79. 79 Site maps l Textual Takes work For a big site, must be selective l Graphical Cool—for a small site. l A site map is no substitute for good navigation

80. 80 Graphical site map example

81. 81 Frames l A frame is an area of the browser window that stays visible as the user moves from page to page l A simple way to provide global navigation l But hogs screen real estate: you can’t do anything else with that space l May not print l Hard (impossible?) to bookmark l Used much less often than formerly

82. 82 Built-in browser services l History of pages visited l Back button l Forward button l Color coding of links Unvisited Visited Active l Don’t mess with the convention that blue is an unvisited link.

83. 83 Page-level navigation aids l Remember proximity, alignment, consistency: make the layout obvious l Make size of text box appropriate to the amount of data l Show which fields are required, with * or Required l Make button placement consistent: before or after its associated text

84. 84 Make error reports clear l Say explicitly what the problem was l Perhaps change the color of the offending box l Show as many errors as possible on one page; don’t make user correct one error per attempt to send the data l Don’t make user re-enter correct data l Sounds obvious, huh? Then why are so many forms terrible? l Sales are lost at this point, in big bad quantities

85. 85 In this lecture you learned about: l Organizational schemes: classification systems for organizing content into groups: Exact: Alphabetical, Chronological, Geographical Ambiguous: Topical, Task-oriented, Audience-specific, metaphor-driven l Organizational structures: defining the relationships among the groups: Hierarchy, Hypertext, Database Summary

86. 86 Summary In this lecture you learned: l Four principles of visual organization Proximity Alignment Consistency Contrast l Some ways they can be applied l The message : There are principles; you can learn them and use them

87. 87 Summary In this lecture you have learned that: l Effective navigation is a combination of good content organization and good visual organization l The main navigational system is hierarchical, with a lot of hyperlinks added l You can learn from all the bad sites you’ve suffered with

88. 88 End of Lecture 6