Designing Web Navigation

Designing Web Navigation

by James Kalbach
Released August 2007
Publisher(s): O'Reilly Media, Inc.
ISBN: 9780596553784

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Thoroughly rewritten for today's web environment, this bestselling book offers a fresh look at a fundamental topic of web site development: navigation design. Amid all the changes to the Web in the past decade, and all the hype about Web 2.0 and various "rich" interactive technologies, the basic problems of creating a good web navigation system remain. Designing Web Navigation demonstrates that good navigation is not about technology-it's about the ways people find information, and how you guide them.

Ideal for beginning to intermediate web designers, managers, other non-designers, and web development pros looking for another perspective, Designing Web Navigation offers basic design principles, development techniques and practical advice, with real-world examples and essential concepts seamlessly folded in. How does your web site serve your business objectives? How does it meet a user's needs? You'll learn that navigation design touches most other aspects of web site development. This book:

  • Provides the foundations of web navigation and offers a framework for navigation design
  • Paints a broad picture of web navigation and basic human information behavior
  • Demonstrates how navigation reflects brand and affects site credibility
  • Helps you understand the problem you're trying to solve before you set out to design
  • Thoroughly reviews the mechanisms and different types of navigation
  • Explores "information scent" and "information shape"
  • Explains "persuasive" architecture and other design concepts
  • Covers special contexts, such as navigation design for web applications
  • Includes an entire chapter on tagging
While Designing Web Navigation focuses on creating navigation systems for large, information-rich sites serving a business purpose, the principles and techniques in the book also apply to small sites. Well researched and cited, this book serves as an excellent reference on the topic, as well as a superb teaching guide. Each chapter ends with suggested reading and a set of questions that offer exercises for experiencing the concepts in action.

Publisher resources

View/Submit Errata

Table of contents

  1. Designing Web Navigation
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. Preface
      1. SCOPE OF THIS BOOK
      2. AUDIENCE FOR THIS BOOK
      3. ORGANIZATION OF THIS BOOK
        1. ACCESSIBILITY AND INTERNATIONALIZATION
          1. ACCESSIBILITY
          2. INTERNATIONALIZATION
      4. ACKNOWLEDGMENTS
      5. HOW TO CONTACT US
      6. SAFARI® ENABLED
      7. ABOUT THE AUTHOR
      8. ABOUT THE TECHNICAL REVIEWERS
    3. I. Foundations of Web Navigation
      1. 1. Introducing Web Navigation
        1. 1.1. CONSIDERING NAVIGATION
          1. 1.1.1. DEFINING WEB NAVIGATION
        2. 1.2. THE NEED FOR NAVIGATION
          1. 1.2.1. NAVIGATION PROVIDES ACCESS TO INFORMATION
            1. 1.2.1.1. BALANCED NAVIGATION
          2. 1.2.2. NAVIGATION SHOWS LOCATION
          3. 1.2.3. NAVIGATION SHOWS "ABOUTNESS" OF A SITE
          4. 1.2.4. NAVIGATION REFLECTS BRAND
          5. 1.2.5. NAVIGATION AFFECTS SITE CREDIBILITY
          6. 1.2.6. THE BOTTOM LINE
        3. 1.3. WEB NAVIGATION DESIGN
          1. 1.3.1. DESIGN PHILOSOPHIES
        4. 1.4. SUMMARY
        5. 1.5. QUESTIONS
        6. 1.6. FURTHER READING
      2. 2. Understanding Navigation
        1. 2.1. INFORMATION SEEKING
          1. 2.1.1. MODES OF INFORMATION SEEKING
        2. 2.2. SEEKING INFORMATION ONLINE
          1. 2.2.1. LOST IN HYPERSPACE
        3. 2.3. WEB BROWSING BEHAVIOR
          1. 2.3.1. NAVIGATING WEB SITES
          2. 2.3.2. NAVIGATIONAL CHOICES
            1. 2.3.2.1. SCANNING AND THE SCENT OF INFORMATION
            2. 2.3.2.2. BANNER BLINDNESS
            3. 2.3.2.3. SATISFICING
        4. 2.4. INFORMATION SHAPE
          1. 2.4.1. DOCUMENT GENRE
            1. 2.4.1.1. STUDIES IN DOCUMENT GENRE
          2. 2.4.2. DESIGNING FOR INFORMATION SHAPE
        5. 2.5. EXPERIENCING INFORMATION
          1. 2.5.1. DESIGNING FOR EMOTIONS
            1. 2.5.1.1. QUALITIES OF EMOTIONS
          2. 2.5.2. EMOTIONS IN INFORMATION SEEKING
            1. 2.5.2.1. INFORMATION SEARCH PROCESS
            2. 2.5.2.2. TAILORING THE ISP
          3. 2.5.3. INFORMATION EXPERIENCE
        6. 2.6. SUMMARY
        7. 2.7. QUESTIONS
        8. 2.8. FURTHER READING
      3. 3. Mechanisms of Navigation
        1. 3.1. STEP NAVIGATION
        2. 3.2. PAGING NAVIGATION
          1. 3.2.1. REWIND AND FAST-FORWARD
          2. 3.2.2. DIRECT ACCESS PAGING
        3. 3.3. BREADCRUMB TRAIL
          1. 3.3.1.
            1. 3.3.1.1. LOCATION BREADCRUMB TRAILS
            2. 3.3.1.2. PATH BREADCRUMB TRAILS
            3. 3.3.1.3. ATTRIBUTE BREADCRUMB TRAILS
        4. 3.4. TREE NAVIGATION
        5. 3.5. SITE MAPS
        6. 3.6. DIRECTORIES
        7. 3.7. TAG CLOUDS
        8. 3.8. A–Z INDEXES
        9. 3.9. NAVIGATION BARS AND TABS
          1. 3.9.1. TABS
        10. 3.10. VERTICAL MENU
        11. 3.11. DYNAMIC MENUS
        12. 3.12. DROP-DOWN MENUS
        13. 3.13. VISUALIZING NAVIGATION
          1. 3.13.1. STAR TREES
          2. 3.13.2. VISUAL THESAURI
          3. 3.13.3. VISUAL CLUSTERS
        14. 3.14. BROWSER MECHANISMS
        15. 3.15. SUMMARY
        16. 3.16. QUESTIONS
        17. 3.17. FURTHER READING
      4. 4. Types of Navigation
        1. 4.1. CATEGORIES OF NAVIGATION
          1. 4.1.1. STRUCTURAL NAVIGATION
            1. 4.1.1.1. MAIN NAVIGATION
            2. 4.1.1.2. LOCAL NAVIGATION
          2. 4.1.2. ASSOCIATIVE NAVIGATION
            1. 4.1.2.1. CONTEXTUAL NAVIGATION
            2. 4.1.2.2. ADAPTIVE NAVIGATION
            3. 4.1.2.3. QUICK LINKS
            4. 4.1.2.4. FOOTER NAVIGATION
          3. 4.1.3. UTILITY NAVIGATION
            1. 4.1.3.1. EXTRA-SITE NAVIGATION
            2. 4.1.3.2. TOOLBOXES
            3. 4.1.3.3. LINKED LOGO
            4. 4.1.3.4. LANGUAGE SELECTORS
            5. 4.1.3.5. COUNTRY OR REGION SELECTORS
          4. 4.1.4. INTERNAL PAGE NAVIGATION
        2. 4.2. PAGE TYPES
          1. 4.2.1. NAVIGATIONAL PAGES
            1. 4.2.1.1. HOME PAGE
            2. 4.2.1.2. LANDING PAGES
            3. 4.2.1.3. GALLERY PAGES
            4. 4.2.1.4. SEARCH RESULT PAGES
          2. 4.2.2. CONTENT PAGES
            1. 4.2.2.1. PRODUCT PAGES
          3. 4.2.3. FUNCTIONAL PAGES
            1. 4.2.3.1. Search Forms
            2. 4.2.3.2. SUBMISSION FORMS
            3. 4.2.3.3. WEB APPLICATIONS
          4. 4.2.4. PAGE LENGTH
        3. 4.3. SUMMARY
        4. 4.4. QUESTIONS
        5. 4.5. FURTHER READING
      5. 5. Labeling Navigation
        1. 5.1. THE VOCABULARY PROBLEM
        2. 5.2. ASPECTS OF GOOD LABELS
          1. 5.2.1. SPEAK THE LANGUAGE OF THE USER
            1. 5.2.1.1. AVOID COMPANY LINGO
            2. 5.2.1.2. AVOID TECHNICAL TERMINOLOGY
            3. 5.2.1.3. AVOID CLEVER LABELS
            4. 5.2.1.4. AVOID ABBREVIATIONS
            5. 5.2.1.5. USE APPROPRIATE TONE OF VOICE
          2. 5.2.2. DESCRIPTIVE LABELS
          3. 5.2.3. MUTUALLY EXCLUSIVE LABELS
          4. 5.2.4. FOCUSED LABELS
          5. 5.2.5. CONSISTENT LABELS
          6. 5.2.6. LABEL LENGTH
        3. 5.3. LABELING SYSTEMS
          1. 5.3.1. BROWSER TITLES
          2. 5.3.2. URLS
          3. 5.3.3. PAGE TITLES
          4. 5.3.4. CREATING A FLEXIBLE SCHEME
            1. 5.3.4.1. REDUNDANT SCHEMES
            2. 5.3.4.2. ADDRESSING REDUNDANCY
        4. 5.4. PERSUASIVE LABELS
        5. 5.5. TRANSLATING LABELS
        6. 5.6. SOURCES OF LABELS
        7. 5.7. SUMMARY
        8. 5.8. QUESTIONS
        9. 5.9. FURTHER READING
    4. II. A Framework for Navigation Design
      1. 6. Evaluation
        1. 6.1. QUALITIES OF SUCCESSFUL NAVIGATION
          1. 6.1.1. BALANCE
          2. 6.1.2. EASE OF LEARNING
          3. 6.1.3. CONSISTENCY AND INCONSISTENCY
          4. 6.1.4. FEEDBACK
          5. 6.1.5. EFFICIENCY
          6. 6.1.6. CLEAR LABELS
          7. 6.1.7. VISUAL CLARITY
          8. 6.1.8. APPROPRIATENESS FOR TYPE OF SITE
          9. 6.1.9. ALIGNING WITH USER NEEDS
        2. 6.2. EVALUATION METHODS
          1. 6.2.1. HEURISTIC EVALUATION
            1. 6.2.1.1. SUGGESTED HEURISTICS
          2. 6.2.2. CHECKLIST REVIEW
          3. 6.2.3. NAVIGATION STRESS TEST
          4. 6.2.4. USABILITY TESTING
          5. 6.2.5. METRIC ANALYSIS
        3. 6.3. SUMMARY
        4. 6.4. QUESTIONS
        5. 6.5. FURTHER READING
      2. 7. Analysis
        1. 7.1. BUSINESS GOALS
          1. 7.1.1. COMPETITORS
          2. 7.1.2. SITE GOALS
        2. 7.2. UNDERSTANDING CONTENT
          1. 7.2.1. CONSIDERING THE DOMAIN
        3. 7.3. UNDERSTANDING TECHNOLOGY
          1. 7.3.1. PLATFORM
          2. 7.3.2. BACK-END TECHNOLOGIES
          3. 7.3.3. FRONT-END TECHNOLOGIES
        4. 7.4. USER INTELLIGENCE
          1. 7.4.1. REVIEWING SECONDARY LITERATURE
          2. 7.4.2. ANALYZING EXISTING USER DATA
        5. 7.5. PERFORMING PRIMARY USER RESEARCH
          1. 7.5.1. PLANNING RESEARCH
          2. 7.5.2. CONTEXTUAL INQUIRY
            1. 7.5.2.1. ANALYSIS
          3. 7.5.3. CARD SORTING
            1. 7.5.3.1. ANALYSIS
          4. 7.5.4. PARTICIPATORY DESIGN
            1. 7.5.4.1. ANALYSIS
          5. 7.5.5. RAPID PROTOTYPING
            1. 7.5.5.1. ANALYSIS
        6. 7.6. CONSOLIDATING RESEARCH FINDINGS
          1. 7.6.1. RECORD DETAILED FINDINGS
          2. 7.6.2. GROUP IMPLICATIONS
          3. 7.6.3. MAKE RECOMMENDATIONS
          4. 7.6.4. PERSONAS
          5. 7.6.5. CREATING PERSONAS
        7. 7.7. SCENARIOS
          1. 7.7.1.
            1. 7.7.1.1. TASK ANALYSIS
        8. 7.8. SUMMARY
        9. 7.9. QUESTIONS
        10. 7.10. FURTHER READING
      3. 8. Architecture
        1. 8.1. PERSUASIVE ARCHITECTURE
        2. 8.2. NAVIGATION CONCEPT
          1. 8.2.1. GENRE AS CONCEPT
          2. 8.2.2. METAPHORS AS CONCEPT
          3. 8.2.3. CONCEPT DIAGRAM
          4. 8.2.4. CREATING A NAVIGATION CONCEPT
        3. 8.3. INFORMATION STRUCTURES
          1. 8.3.1. LINEAR STRUCTURES
          2. 8.3.2. WEBS
          3. 8.3.3. HIERARCHICAL STRUCTURES
          4. 8.3.4. FACETS
          5. 8.3.5. EMERGENT STRUCTURES
        4. 8.4. ORGANIZATIONAL SCHEMES
          1. 8.4.1. OBJECTIVE AND SUBJECTIVE SCHEMES
          2. 8.4.2. MISCELLANEOUS SCHEMES
        5. 8.5. SITE MAPS
          1. 8.5.1. ELEMENTS OF A SITE MAP
          2. 8.5.2. HIGH-LEVEL SITE MAP
          3. 8.5.3. DETAILED SITE MAP
            1. 8.5.3.1. CONSOLIDATE THE ARCHITECTURE
            2. 8.5.3.2. ARRANGE PAGES ON THE SITE MAP
            3. 8.5.3.3. ADD DETAILS
            4. 8.5.3.4. PRESENT YOUR SITE MAP
        6. 8.6. SUMMARY
        7. 8.7. QUESTIONS
        8. 8.8. FURTHER READING
      4. 9. Layout
        1. 9.1. DETERMINING NAVIGATION PATHS
          1. 9.1.1. START WITH THE END GOAL
          2. 9.1.2. DETERMINE NAVIGATION NEEDS
          3. 9.1.3. CHOOSE APPROPRIATE MECHANISMS
          4. 9.1.4. REPEAT THE PROCESS
        2. 9.2. VISUAL LOGIC
          1. 9.2.1. STUDIES IN WEB PAGE LAYOUT
          2. 9.2.2. GESTALT EFFECT
            1. 9.2.2.1. ALIGNMENT
          3. 9.2.3. BALANCE
        3. 9.3. PAGE TEMPLATES
          1. 9.3.1. NAVIGATION RULES
          2. 9.3.2. VARYING NAVIGATION
            1. 9.3.2.1. SHOWING PROGRESSION
        4. 9.4. WIREFRAMES
          1. 9.4.1. CREATING WIREFRAMES
            1. 9.4.1.1. START WITH THE GOAL
            2. 9.4.1.2. EXPLORE ALTERNATIVES
            3. 9.4.1.3. PRESENT WIREFRAMES
            4. 9.4.1.4. REFINE AND UPDATE
        5. 9.5. SUMMARY
        6. 9.6. QUESTIONS
        7. 9.7. FURTHER READING
      5. 10. Presentation
        1. 10.1. INFORMATION DESIGN
          1. 10.1.1. TYPOGRAPHY AND TEXT DESIGN
            1. 10.1.1.1. VISUAL HIERARCHY
            2. 10.1.1.2. TEXT AS INTERFACE
        2. 10.2. INTERACTING WITH NAVIGATION
          1. 10.2.1. UNDERLINING LINKS
          2. 10.2.2. TARGET SIZE
          3. 10.2.3. ROLLOVERS
        3. 10.3. GRAPHIC DESIGN
          1. 10.3.1. COLOR
          2. 10.3.2. ICONS
            1. 10.3.2.1. CREATING ICONS
            2. 10.3.2.2. TESTING ICONS
        4. 10.4. SPECIFYING NAVIGATION
          1. 10.4.1. SCREEN DESIGNS AND PROTOTYPES
          2. 10.4.2. USER INTERFACE SPECIFICATIONS
        5. 10.5. SUMMARY
        6. 10.6. QUESTIONS
        7. 10.7. FURTHER READING
    5. III. Navigation in Special Contexts
      1. 11. Navigation and Search
        1. 11.1. NAVIGATION PRIOR TO SEARCH
          1. 11.1.1. SCOPING SEARCH
          2. 11.1.2. WORD WHEEL
          3. 11.1.3. CANNED SEARCHES
        2. 11.2. NAVIGATION AFTER SEARCH
          1. 11.2.1. TOPIC LINKS
          2. 11.2.2. CLUSTERING AND GROUPING
          3. 11.2.3. SUGGESTIONS
            1. 11.2.3.1. BEST BETS
          4. 11.2.4. NO RESULTS
        3. 11.3. FACETED BROWSE
          1. 11.3.1. FACETS
          2. 11.3.2. THE FLAMENCO PROJECT
            1. 11.3.2.1. START PAGE
            2. 11.3.2.2. RESULTS
            3. 11.3.2.3. ITEM PAGE
          3. 11.3.3. EXAMPLES OF FACETED BROWSE
            1. 11.3.3.1. NCSU LIBRARY CATALOG
            2. 11.3.3.2. EPINIONS.COM
        4. 11.4. SUMMARY
        5. 11.5. QUESTIONS
        6. 11.6. FURTHER READING
      2. 12. Navigation and Social Tagging Systems
        1. 12.1. TAGGING
          1. 12.1.1. TAGGING SYSTEMS
          2. 12.1.2. SOCIAL CLASSIFICATION
        2. 12.2. NAVIGATING SOCIAL CLASSIFICATIONS
          1. 12.2.1. CREATING TAGS
            1. 12.2.1.1. ENCOURAGING TAGGING
            2. 12.2.1.2. ACCESSING TAGGING SERVICES
            3. 12.2.1.3. TAG PROMPTING
            4. 12.2.1.4. TAG FORM
          2. 12.2.2. NAVIGATING YOUR OWN TAGS
            1. 12.2.2.1. VIEWING TAGS
            2. 12.2.2.2. COMBINING TAGS
            3. 12.2.2.3. NAVIGATING RESOURCES
          3. 12.2.3. NAVIGATING OTHER PEOPLE'S TAGS
            1. 12.2.3.1. ADAPTIVE NAVIGATION
            2. 12.2.3.2. NAVIGATING TAGS FOR A GIVEN RESOURCE
            3. 12.2.3.3. LINKING TO OTHER PEOPLE
            4. 12.2.3.4. SUBSCRIBING TO A TAG VIA RSS
          4. 12.2.4. INTEGRATING APPROACHES: TOP-DOWN AND BOTTOM-UP
        3. 12.3. SUMMARY
        4. 12.4. QUESTIONS
        5. 12.5. FURTHER READING
      3. 13. Navigation and Rich Web Applicatios
        1. 13.1. RICH WEB APPLICATIONS
        2. 13.2. NAVIGATING RICH WEB APPLICATIONS
          1. 13.2.1. PAGE TRANSITIONS AND RELOADS
          2. 13.2.2. BROWSER CONTROLS AND THE BACK BUTTON
          3. 13.2.3. POP-UP WINDOWS AND EXTERNAL LINKS
          4. 13.2.4. TYPES OF INTERACTION
            1. 13.2.4.1. REAL-TIME FILTERING
            2. 13.2.4.2. DRAG-AND-DROP CUSTOMIZATION
            3. 13.2.4.3. PANNING AND ZOOMING
          5. 13.2.5. PAGE SCROLLING
          6. 13.2.6. CAPTURING AND RE-FINDING INFORMATION
        3. 13.3. DESIGNING RICH WEB APPLICATIONS
          1. 13.3.1. DESIGNING FOR INTERACTION
          2. 13.3.2. INDUCTIVE USER INTERFACES
        4. 13.4. SUMMARY
        5. 13.5. QUESTIONS
        6. 13.6. FURTHER READING
      4. I. References
    6. Index
    7. About the Author
    8. Colophon
    9. SPECIAL OFFER: Upgrade this ebook with O’Reilly

Product information

  • Title: Designing Web Navigation
  • Author(s): James Kalbach
  • Release date: August 2007
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9780596553784