Navigation Systems - PowerPoint PPT Presentation

Loading...

PPT – Navigation Systems PowerPoint presentation | free to download - id: 1406c9-MTllN



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Navigation Systems

Description:

Martijn van Welie has a page of UI patterns, including a long list of navigational patterns. ... Web Design patterns Navigation by Martijn van Welie ... – PowerPoint PPT presentation

Number of Views:64
Avg rating:3.0/5.0
Slides: 25
Provided by: sjf
Learn more at: http://ils.unc.edu
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Navigation Systems


1
Navigation Systems
  • a.k.a. Organizational Structures

2
Review Information Architecture
  • Organization systems
  • What it is and where it goes
  • Navigation systems
  • Moving through the site
  • Search systems
  • Seeking a specific item
  • Labeling systems
  • Agreeing on what its called

3
Ways to Organize
  • Exact - well-defined and mutually exclusive
    groups
  • Alphabetical
  • Chronological
  • Geographical
  • Ambiguous - categories that are not exactly
    defined or necessarily mutually exclusive
  • Topic
  • Task
  • Audience specific
  • Metaphor
  • Hybrid

4
Problems
  • Ambiguities of language
  • Ambiguities of sorting
  • personal perspective

5
Organization
  • Identify Content
  • Sort it into categories (exact, ambiguous or
    hybrid)
  • Structure the relationships within and between
    the categories
  • Select Descriptors (words and phrases)

6
Navigation
  • Identify the content
  • Select the organizational pattern(s)
  • Structure content into a coherent path which
    compliments the content and the organizational
    pattern
  • Select Descriptors (words and phrases)

7
Navigation System Types
  • Linear navigation (Sequential)
  • Hypertext (Web)
  • Hierarchical navigation (Top Down)
  • Database (Bottom up)

8
Understanding navigation
http//www.youtube.com/watch?vpQHX-SjgQvQ
9
Linear Navigation
  • Book

10
Linear Navigation
  • The linear structure is sequential.
  • The audience is limited to going forward or
    backward one page at a time.

http//www.adobe.com/education/webtech/CS2/unit_pl
anning2/sd_linear_id.htm
11
Linear Navigation
12
Hierarchical Navigation (Top Down)
  • Based on content designed using categories and
    subcategories.

http//www.adobe.com/education/webtech/CS2/unit_pl
anning2/sd_hierarchical_id.htm
13
3 Level Hierarchy
14
5 Level Hierarchy expressed as directories
http//www.ivanpeters.com/
15
Web Navigation
  • The random access structure allows users to move
    from wherever they are to any other place on the
    Web site.
  • Potentially very complex and confusing for users.
  • Unwieldy if the site has too many pages.
  • Powerful used as clustering or tagging, but
    incomplete

16
http//www.flickr.com/photos/tags/
17
Database (Bottom up) Navigation
  • Uses a database to gather, display, or manipulate
    information
  • Everything is based on the data in the database.

18
Static vs. Database driven web site
19
Databased sites can be browsable or searchable
  • Many architectures involve repeating the same
    basic structure as it is applied to a number of
    functionally identical information elements.
  • Jesse James Garrett

20
Supplementary navigation
  • Breadcrumb navigation
  • linear path through a (usually) hierarchical
    site structure.
  • Sitemap
  • a completely expanded hierarchical navigational
    system.
  • Text navigation
  • hyperlinks within the text of a page.

21
Other Navigation Variations
  • Martijn van Welie has a page of UI patterns,
    including a long list of navigational patterns.
  • Patterns are optimal solutions to common
    problems.
  • Each pattern has four primary components
  • a title
  • a problem
  • a context
  • a solution

22
Location, location, location
  • Where the navigation appears on the page.
  • Area of the site where the user can access the
    navigation.
  • Places on the site to which the navigation
    affords movement.
  • Ability to define precisely how a particular
    navigation element works

23
http//harpers.org/archive
24
Resources
  • Adobe Web Tech Curriculum - Site Design
  • A visual vocabulary for describing information
    architecture and interaction design by Jesse
    James Garrett
  • Designing Patterns by Jennifer Tidwell
  • Web Design patterns Navigation by Martijn van
    Welie
  • Yahoo Design Pattern Library and Yahoo! User
    Interface Library
About PowerShow.com