Designing Displays and Navigations - PowerPoint PPT Presentation

1 / 87
About This Presentation
Title:

Designing Displays and Navigations

Description:

You have a mass of content that you want your users to be able to find ... Eddie Bauer site (next ) has. Horizontal alignment. Vertical alignment ... – PowerPoint PPT presentation

Number of Views:99
Avg rating:3.0/5.0
Slides: 88
Provided by: ians101
Category:

less

Transcript and Presenter's Notes

Title: Designing Displays and Navigations


1
Designing 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
Fact 18
Group C
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
    its 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
Manufacturing
Marketing
Distribution
Research
E
B
C
D
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
Dans Clothing the mindless version
37
What 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.

38
Dans 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 its 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
(No Transcript)
47
Dont be a slave to centered alignment . . .
48
. . . which is OK, but isnt 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
Heres 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
    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

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
  • Coolfor 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 cant 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
  • Dont 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
    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

85
Summary
  • 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

86
Summary
  • 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

87
Summary
  • 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
Write a Comment
User Comments (0)
About PowerShow.com