Design Patterns For Navigating

800
-1

Published on

Presented by Loren Baxter at ESDC

Published in: Technology, Design
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
800
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Design Patterns For Navigating

  1. 1. Design Patterns For Navigating Complex Taxonomies Presented by Loren Baxter
  2. 2. TAXONOMY the science or technique of classification. - dictionary.com
  3. 3. COMPLEX TAXONOMY A rich dataset that has many objects with various attributes. Something people will need to navigate. Examples: ‣ Product Catalogs ‣ User Directories ‣ Article Archives
  4. 4. WHY WE CARE "Most companies are so confused, the last thing they need is more data." - @tamaraadlin The same is true of people. They need the right data.
  5. 5. KEY POINTS 1. Navigation + search = foundation 2. Progressive disclosure: consider when data is presented 3. Categorization can be dynamic and powerful 4. Discovery engines add value
  6. 6. NAVIGATION AND SEARCH are always best together. Think peanut butter and jelly. ‣ Top levels should remain constant ‣ Show where the user is ‣ Simple and advanced search ‣ Faceted navigation
  7. 7. CASCADING MENU GUIDELINES • Avoid 3+ levels of cascades • Poor Contrast • Allow adequate vertical margins to support selection www.msn.com (2007)
  8. 8. CASCADING MENU GUIDELINES
  9. 9. SEARCH (+) Google One Box search High efficiency, minimalist design Extend public strategy to the enterprise
  10. 10. GOAL BASED SEARCH I’ve got chicken, peas, broccoli. What can I make for dinner?
  11. 11. GOAL BASED SEARCH I’ve had a long day… What’s in my refrigerator?
  12. 12. GOAL BASED SEARCH Provide appropriate content for selection (image, rating, etc)
  13. 13. KEY POINTS 1. Navigation + search = foundation 2. Progressive disclosure: consider when data is presented 3. Categorization can be dynamic and powerful 4. Discovery engines add value
  14. 14. PROGRESSIVE DISCLOSURE Not all data is created equal. It should be presented in layers.
  15. 15. INFORMATION HIERARCHY Help users see the most important information. Then, show more details upon request. But make it efficient. an efficient interface (for programmers)
  16. 16. LAYERED DATA www.shopping.com
  17. 17. HIERARCHICAL DATA www.amazon.com
  18. 18. KEY POINTS 1. Navigation + search = foundation 2. Progressive disclosure: consider when data is presented 3. Categorization can be dynamic and powerful 4. Discovery engines add value
  19. 19. CATEGORIZATION is where we need to flex our design muscle. We can let people slice through data in interesting ways.
  20. 20. CATEGORIZATION Static, curated list Dynamic, faceted list Dynamic, social list (“folksonomies”)
  21. 21. CATEGORIZATION Categories can be: ‣ Object oriented ‣ Goal oriented ‣ What else?
  22. 22. DYNAMIC FACETS www.shopping.com
  23. 23. SOCIAL FACETS
  24. 24. GOAL-BASED TAXONOMY
  25. 25. KEY POINTS 1. Navigation + search = foundation 2. Progressive disclosure: consider when data is presented 3. Categorization can be dynamic and powerful 4. Discovery engines add value
  26. 26. DISCOVERY ENGINES Augment standard search + browse. Provide value to advanced users. Generally more advanced technologies.
  27. 27. GOAL BASED SEARCH I want a cute What if your search had ... name! As-you-type feedback With data visualization And drilldown results?
  28. 28. GOAL BASED SEARCH http://www.babynamewizard.com/namevoyager
  29. 29. DISCOVERY ENGINES Allow non-standard, non-linear ways to browse the data.
  30. 30. CASE STUDY Tyco Electronics Global Provider of Electronics Over 500,000 Products Typical User: Design Engineer Worldwide Audience Over 50 recent corporate acquisitions Product Catalogs Stacked 1 Meter High User Centered Design Approach To Redesign
  31. 31. BEFORE: SIMPLE PICTURE CATALOG
  32. 32. BEFORE: COMPLEX “STEP SEARCH” 32 Dynamic Facets were confusing
  33. 33. NEW DESIGN GOALS Visual and textual browse Tabs for search strategies Good information ‘Scent’ Nearby Search with part # default ‣ Strong keyboard focus
  34. 34. HOME PAGE: SEARCH / BROWSE
  35. 35. INTEGRATED “DIRECTED SEARCH”
  36. 36. DIRECTED SEARCH - FILTER APPLIED
  37. 37. PICTURE SEARCH - EXCELLENT FOR GLOBAL USE
  38. 38. TRANSITION FROM PICTURE SEARCH TO BROWSE
  39. 39. REMEMBER Taxonomies are getting more complex Adapt your navigation strategies to meet the new information challenges Shield users from the complexity Lower the efficiency cost of navigation Leverage design patterns to repeat success
  40. 40. THANK YOU! Please leave your card on the front or back table for a FREE “Taxonomy Checklist” Loren Baxter twitter: @lorenbaxter Visit our Web sites at www.classicsys.com www.guiguide.com Email: jimh@classicsys.com Phone: 925-237-2581
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×