1 lecture 6 designing displays and navigations. 2 web design pyramid

1

Lecture 6

Designing Displays and Navigations

2

Web Design Pyramid

Interface design

Aesthetic design

Content design

Navigation design

Architecture design

Component design

user

technology

3

Content Organization

Organizational schemes: classification systems for organizing content into groups

Organizational structures: defining the relationships among the groups

4

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 5Fact 7

Fact 6

Fact 3

Fact 4

Fact 2

Fact 14

Fact 15

Fact 16

Fact 17

Fact 18

Fact 19

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 13Fact 8Fact 14

Fact 15

Fact 19

Fact 10Fact 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

This is an organizational scheme

Now give names to the groups, or have the users do that

Fact 13Fact 8Fact 14

Fact 15

Fact 19

Fact 10Fact 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

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 audience

s

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

Manufacturing

Marketing DistributionResearch

President

EA B C D 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

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

51

One of the pages reachable from the previous slide

52

Example: can you use consistency to improve this page?

53

Sure: make the buttons the same size:

54

Sure: use the same font everywhere

55

How can we make this more interesting?

56

Use more contrast

57

Talk about boring!

58

This is a quiz! (Not really)

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

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

60

Navigation Design

In this part you will learn about: Site-level navigation: making it easy for the

user to get around the site Page-level navigation: making it easy for the

user to find things on a page

61

Navigation: connections

Good navigation builds on good content organization• Choose a navigation system that reflects the

content’s organizational structure Visual design and navigation design are

interrelated• Choose visual navigation elements that build

context for a user A navigational system is a visual

representation of an organizational structure

62

Three types of navigation systems

Hierarchical• Derived from hierarchical organizational

structure Ad hoc

• Hyperlinks Database

• Search engines The most common is hierarchical, with many

ad hoc links added

63

Rare to use only one

Most websites build on a judicious combination of these three, with one dominant theme

Hierarchical plus hyperlinks very common

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

Global navigation

For a small site, it may be possible to show the major links on every page

Global navigation

66

Global navigation bar can be vertical

Global navigation

67

Showing more levels in the hierarchy

Drop-downs or pull-outs can show the next level

68

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

Breadcrumbs

69

Many sites have subsites

Subsites

70

Ad hoc links are very common

71

The most familiar example of database navigation: Google

72

Graphical navigation bar

73

Building context for the user with navigation bars

74

Be careful with metaphors: what do these mean?

75

Intended meanings. Moral: add words, too!

76

So add words!

77

Some standard meanings

Label and meaning Home: the main entry point of a Web site, generally

containing the top-level links to the site Search: find related pages by supplying a word or

a phrase About Us: information about the company that

created the site Shop: browse for merchandise Check Out: supply shipping and billing information,

complete transaction

78

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

79

Site maps

Textual• Takes work • For a big site, must be selective

Graphical• Cool—for a small site.

A site map is no substitute for good navigation

80

Graphical site map example

81

Frames

A frame is an area of the browser window that stays visible as the user moves from page to page

A simple way to provide global navigation

But hogs screen real estate: you can’t do anything else with that space

May not print Hard (impossible?) to bookmark Used much less often than formerly

82

Built-in browser services

History of pages visited Back button Forward button Color coding of links

• Unvisited• Visited• Active

Don’t mess with the convention that blue is an unvisited link.

83

Page-level navigation aids

Remember proximity, alignment, consistency: make the layout obvious

Make size of text box appropriate to the amount of data

Show which fields are required, with * or Required

Make button placement consistent: before or after its associated text

84

Make error reports clear

Say explicitly what the problem was Perhaps change the color of the offending box Show as many errors as possible on one page;

don’t make user correct one error per attempt to send the data

Don’t make user re-enter correct data Sounds obvious, huh? Then why are so many forms

terrible? Sales are lost at this point, in big bad quantities

85

In this lecture you learned about: Organizational schemes: classification

systems for organizing content into groups:• Exact: Alphabetical, Chronological,

Geographical• Ambiguous: Topical, Task-oriented,

Audience-specific, metaphor-driven Organizational structures: defining the

relationships among the groups:• Hierarchy, Hypertext, Database

Summary

86

Summary

In this lecture you learned: Four principles of visual organization

• Proximity• Alignment• Consistency• Contrast

Some ways they can be applied The message:

• There are principles; you can learn them and use them

87

Summary

In this lecture you have learned that: Effective navigation is a combination of

good content organization and good visual organization

The main navigational system is hierarchical, with a lot of hyperlinks added

You can learn from all the bad sites you’ve suffered with

88

End of Lecture 6