Title: Designing Displays and Navigations
1Designing Displays and Navigations
2Web Design Pyramid
3Content Organization
- Organizational schemes classification systems
for organizing content into groups - Organizational structures defining the
relationships among the groups
4Graphic 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
5How 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
6This 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
Fact 18
Group C
Fact 17
Fact 10
Fact 1
Fact 2
Fact 11
7Next how do the groups relate to each other?
8How do the groups relate to each other, continued
9Those 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
10Organizational Schemes
- Familiar in everyday life
- Phone book
- Appointment book
- Shopping mall diagram with store locations
11These are exact organizational schemes
- Alphabetical phone book, for example
- Chronological appointment book, for example
- Geographical shopping mall diagram, for example
12Not always possible
- Where can I find sardines packed in water, with
no salt added? - In the canned fish section?
- In the dietetic foods section?
13Supermarket 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
14Topical 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)
15Task-Oriented Organizational Scheme
- Organizes content by what user wants to do.
16Task-oriented organizational scheme
17Audience-specific organizational scheme
- Useful when there are two or more distinct user
groups - User may navigate to appropriate page and
bookmark it
18Audience-specific organizational scheme
Specific audiences
19Metaphor-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
20See the problem?
- This is a hamster, but what if your user thinks
its a rat, and hates rats?
21Hybrid organizational scheme
- Combines multiple organizational schemes
- Quite common, but must be done with care to avoid
confusion - Example Nordstrom
22Hybrid organizational scheme example
23Organizational Structures
- Review
- Organizational schemes create groups
- Organizational structures define the relations
between groups
24Types of organizational structures
- Hierarchy
- Hypertext
- Database
25Hierarchical organizational structure
- Structuring by rank or level
- A tree, in computer science terms
26An organization chart is a hierarchy
President
Manufacturing
Marketing
Distribution
Research
E
B
C
D
A
Etc.
27Definitions
- 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
28Hypertext 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
29Database 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.
30Database example selecting a car model
31Visual Organization
- In this part you will learn about
- Four principles of visual organization and how to
apply them - Proximity
- Alignment
- Consistency
- Contrast
32Four organizing principles
- Four principles of visual organization and how to
apply them - Proximity
- Alignment
- Consistency
- Contrast
33Proximity
34By using proximity to group related things
35Four 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
36Dans Clothing the mindless version
37What groups would make sense?
- Womens clothes, Mens clothes, Kids 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.
38Dans Clothing with sensible groups
39Continuity 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
40Can you use alignment (one form of continuity) to
improve this page?
41But why stop? Left-align both columns to get
vertical alignment also
42Avoid centered alignment for lines that are of
nearly equal length
43Lines are now greatly different in length reader
knows its intentional
44Orpheus Chamber Orchestra nice use of proximity
and alignment
45The 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(No Transcript)
47Dont be a slave to centered alignment . . .
48. . . which is OK, but isnt this better?
49Note the consistent layout in the next few slides
50One of the pages reachable from the previous slide
51One of the pages reachable from the previous slide
52Example can you use consistency to improve this
page?
53Sure make the buttons the same size
54Sure use the same font everywhere
55How can we make this more interesting?
56Use more contrast
57Talk about boring!
58This 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
59Heres one way, but there are many other
possibilities
60Navigation 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
61Navigation connections
- Good navigation builds on good content
organization - Choose a navigation system that reflects the
contents 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
62Three 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
63Rare to use only one
- Most websites build on a judicious combination of
these three, with one dominant theme - Hierarchical plus hyperlinks very common
64A 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
65Global navigation
- For a small site, it may be possible to show the
major links on every page
Global navigation
66Global navigation bar can be vertical
Global navigation
67Showing more levels in the hierarchy
- Drop-downs or pull-outs can show the next level
68Breadcrumbs show user This is where you are how
you got here
Breadcrumbs
69Many sites have subsites
Subsites
70Ad hoc links are very common
71The most familiar example of database navigation
Google
72Graphical navigation bar
73Building context for the user with navigation bars
74Be careful with metaphors what do these mean?
75Intended meanings. Moral add words, too!
76So add words!
77Some 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
78Menus pack in a lot of information note the
dropdown from Software
79Site maps
- Textual
- Takes work
- For a big site, must be selective
- Graphical
- Coolfor a small site.
- A site map is no substitute for good navigation
80Graphical site map example
81Frames
- 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 cant do
anything else with that space - May not print
- Hard (impossible?) to bookmark
- Used much less often than formerly
82Built-in browser services
- History of pages visited
- Back button
- Forward button
- Color coding of links
- Unvisited
- Visited
- Active
- Dont mess with the convention that blue is an
unvisited link.
83Page-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
84Make 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
dont make user correct one error per attempt to
send the data - Dont 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
85Summary
- In this chapter 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
86Summary
- In this chapter 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
87Summary
- In this chapter 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 youve
suffered with