1 lecture 6 designing displays and navigations. 2 web design pyramid
TRANSCRIPT
![Page 1: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/1.jpg)
1
Lecture 6
Designing Displays and Navigations
![Page 2: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/2.jpg)
2
Web Design Pyramid
Interface design
Aesthetic design
Content design
Navigation design
Architecture design
Component design
user
technology
![Page 3: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/3.jpg)
3
Content Organization
Organizational schemes: classification systems for organizing content into groups
Organizational structures: defining the relationships among the groups
![Page 4: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/4.jpg)
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
![Page 5: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/5.jpg)
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
![Page 6: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/6.jpg)
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
![Page 7: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/7.jpg)
7
Next: how do the groups relate to each other?
Perhaps in a hierarchy:
![Page 8: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/8.jpg)
8
How do the groups relate to each other, continued
Perhaps with hyperlinks:
![Page 9: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/9.jpg)
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
![Page 10: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/10.jpg)
10
Organizational Schemes
Familiar in everyday life:• Phone book• Appointment book• Shopping mall diagram with store locations
![Page 11: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/11.jpg)
11
These are exact organizational schemes
Alphabetical: phone book, for example Chronological: appointment book, for
example Geographical: shopping mall diagram, for
example
![Page 12: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/12.jpg)
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?
![Page 13: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/13.jpg)
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
![Page 14: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/14.jpg)
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)
![Page 15: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/15.jpg)
15
Task-Oriented Organizational Scheme
Organizes content by what user wants to do.
![Page 16: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/16.jpg)
16
Task-oriented organizational scheme
Example: Autobytel.com
![Page 17: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/17.jpg)
17
Audience-specific organizational scheme
Useful when there are two or more distinct user groups
User may navigate to appropriate page and bookmark it
![Page 18: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/18.jpg)
18
Audience-specific organizational scheme
Example: Bank of Montreal
Specific audience
s
![Page 19: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/19.jpg)
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:
![Page 20: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/20.jpg)
20
See the problem?
This is a hamster, but what if your user thinks it’s a rat, and hates rats?
![Page 21: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/21.jpg)
21
Hybrid organizational scheme
Combines multiple organizational schemes Quite common, but must be done with care
to avoid confusion Example: Nordstrom
![Page 22: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/22.jpg)
22
Hybrid organizational scheme example
![Page 23: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/23.jpg)
23
Organizational Structures
Review:• Organizational schemes create groups• Organizational structures define the relations
between groups
![Page 24: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/24.jpg)
24
Types of organizational structures
Hierarchy Hypertext Database
![Page 25: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/25.jpg)
25
Hierarchical organizational structure
Structuring by rank or level A tree, in computer science terms
![Page 26: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/26.jpg)
26
An organization chart is a hierarchy
Manufacturing
Marketing DistributionResearch
President
EA B C D Etc.
![Page 27: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/27.jpg)
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
![Page 28: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/28.jpg)
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
![Page 29: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/29.jpg)
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.
![Page 30: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/30.jpg)
30
Database example: selecting a car model
![Page 31: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/31.jpg)
31
Visual Organization
In this part you will learn about: Four principles of visual organization and
how to apply them• Proximity• Alignment• Consistency• Contrast
![Page 32: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/32.jpg)
32
Four organizing principles
Four principles of visual organization and how to apply them• Proximity• Alignment• Consistency• Contrast
![Page 33: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/33.jpg)
33
Proximity
![Page 34: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/34.jpg)
34
By using proximity to group related things
![Page 35: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/35.jpg)
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
![Page 36: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/36.jpg)
36
Dan’s Clothing: the mindless version
![Page 37: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/37.jpg)
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.
![Page 38: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/38.jpg)
38
Dan’s Clothing: with sensible groups
![Page 39: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/39.jpg)
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
![Page 40: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/40.jpg)
40
Can you use alignment (one form of continuity) to improve this page?
![Page 41: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/41.jpg)
41
But why stop? Left-align both columns to get vertical alignment also
![Page 42: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/42.jpg)
42
Avoid centered alignment for lines that are of nearly equal length
![Page 43: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/43.jpg)
43
Lines are now greatly different in length: reader knows it’s intentional
![Page 44: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/44.jpg)
44
Orpheus Chamber Orchestra: nice use of proximity and alignment
![Page 45: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/45.jpg)
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
![Page 46: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/46.jpg)
46
![Page 47: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/47.jpg)
47
Don’t be a slave to centered alignment . . .
![Page 48: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/48.jpg)
48
. . . which is OK, but isn’t this better?
![Page 49: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/49.jpg)
49
Note the consistent layout in the next few slides
![Page 50: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/50.jpg)
50
One of the pages reachable from the previous slide
![Page 51: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/51.jpg)
51
One of the pages reachable from the previous slide
![Page 52: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/52.jpg)
52
Example: can you use consistency to improve this page?
![Page 53: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/53.jpg)
53
Sure: make the buttons the same size:
![Page 54: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/54.jpg)
54
Sure: use the same font everywhere
![Page 55: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/55.jpg)
55
How can we make this more interesting?
![Page 56: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/56.jpg)
56
Use more contrast
![Page 57: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/57.jpg)
57
Talk about boring!
![Page 58: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/58.jpg)
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
![Page 59: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/59.jpg)
59
Here’s one way, but there are many other possibilities
![Page 60: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/60.jpg)
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
![Page 61: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/61.jpg)
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
![Page 62: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/62.jpg)
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
![Page 63: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/63.jpg)
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
![Page 64: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/64.jpg)
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
![Page 65: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/65.jpg)
65
Global navigation
For a small site, it may be possible to show the major links on every page
Global navigation
![Page 66: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/66.jpg)
66
Global navigation bar can be vertical
Global navigation
![Page 67: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/67.jpg)
67
Showing more levels in the hierarchy
Drop-downs or pull-outs can show the next level
![Page 68: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/68.jpg)
68
Breadcrumbs show user “This is where you are how you got here”
Breadcrumbs
![Page 69: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/69.jpg)
69
Many sites have subsites
Subsites
![Page 70: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/70.jpg)
70
Ad hoc links are very common
![Page 71: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/71.jpg)
71
The most familiar example of database navigation: Google
![Page 72: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/72.jpg)
72
Graphical navigation bar
![Page 73: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/73.jpg)
73
Building context for the user with navigation bars
![Page 74: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/74.jpg)
74
Be careful with metaphors: what do these mean?
![Page 75: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/75.jpg)
75
Intended meanings. Moral: add words, too!
![Page 76: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/76.jpg)
76
So add words!
![Page 77: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/77.jpg)
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
![Page 78: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/78.jpg)
78
Menus pack in a lot of information; note the dropdown from Software
![Page 79: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/79.jpg)
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
![Page 80: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/80.jpg)
80
Graphical site map example
![Page 81: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/81.jpg)
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
![Page 82: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/82.jpg)
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.
![Page 83: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/83.jpg)
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
![Page 84: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/84.jpg)
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
![Page 85: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/85.jpg)
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
![Page 86: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/86.jpg)
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
![Page 87: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/87.jpg)
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
![Page 88: 1 Lecture 6 Designing Displays and Navigations. 2 Web Design Pyramid](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649e2e5503460f94b1e3b7/html5/thumbnails/88.jpg)
88
End of Lecture 6