Lecture 6 Designing Display s an d Navigation s

1. Lecture 6Designing Displays and Navigations

2. Web Design Pyramid

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

22. Hybrid organizational scheme example

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

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

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

26. An organization chart is a hierarchy President Marketing Manufacturing Distribution Research B C D E A Etc.

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

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

29. Database organizational structures • Database organizational structure provides a bottom-up view, whereas a hierarchy provides a top-down • Both have their place • 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. Database example: selecting a car model

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

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

33. Proximity

34. By using proximity to group related things

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

36. Dan’s Clothing: the mindless version

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

38. Dan’s Clothing: with sensible groups

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. Can you use alignment (one form of continuity) to improve this page?

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

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

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

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

45. The principles are seen in combination • 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

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

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

49. Note the consistent layout in the next few slides

50. One of the pages reachable from the previous slide