Upload
mabel-welch
View
217
Download
0
Tags:
Embed Size (px)
Citation preview
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