1 / 88

Lecture 6 Designing Display s an d Navigation s

Lecture 6 Designing Display s an d Navigation s. Web Design Pyramid. Content Organization. Organizational schemes: classification systems for organizing content into groups Organizational structures: defining the relationships among the groups. Graphic overview: scheme and structure.

Download Presentation

Lecture 6 Designing Display s an d Navigation s

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

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

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

  48. Note the consistent layout in the next few slides

  49. One of the pages reachable from the previous slide

More Related