Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Caffeine For Search and Browse UI IASummit2010

14,063 views

Published on

Design Caffeine for Search and Browse UI presented at IA Summit 2010

Published in: Design
  • Be the first to comment

Design Caffeine For Search and Browse UI IASummit2010

  1. Greg Nudelman Email: Greg@DesignCaffeine.com Twitter: @DesignCaffeine Design Caffeine for Search and Browse UI (a.k.a. Resourceful Finding UI )
  2. Huh? Resourceful UI?
  3. Resourceful: Able, capable, clever, creative, adventurous, enterprising, ingenious, intelligent, inventive, original, quick-witted, sharp, talented, etc. http://thesaurus.com/browse/resourceful
  4. Resourceful UI System Capabilities Customer Goals
  5. Start From Zero: No Search Results <ul><li>Don’t Be Afraid to Say: I Did Not Understand </li></ul><ul><li>Focus on Providing a Way Out </li></ul><ul><li>Design from Zero </li></ul>
  6.  
  7.  
  8. Don’t Be Afraid to Say I Did Not Understand
  9.  
  10. Focus on Providing a Way Out
  11. <ul><li>Why do most Zero Search Results Pages </li></ul><ul><li>SUCK? </li></ul>
  12. <ul><li>Effort and ingenuity invested in the Zero Search Results Page = overall dedication to customer success </li></ul>
  13. <ul><li>Starting from Zero: focuses your team on the needs of the customer = deeper connection + tremendous competitive advantage </li></ul>
  14. http:// http://beetlebabee.files.wordpress.com/2008/11/painting-the-roses-red-3.jpg
  15. http://blogs.nyu.edu/blogs/val239/digiprodval/10_AliceInWonderlandLabyrinth.jpg
  16.  
  17. http://img.thesun.co.uk/multimedia/archive/00853/SNN2537A-682_853019a.jpg
  18.  
  19. Office Depot Faceted Search Redesign <ul><li>Stick to your filter value-selection paradigm </li></ul><ul><li>Provide an obvious and consistent way to undo filter selection </li></ul><ul><li>Always make all filters easily available </li></ul><ul><li>Provide filter values that encompass all items, or the complete inventory </li></ul>
  20. Drill-Down I want to narrow my search results to Department = Books Parallel Selection I want to narrow the search results to: Airline = American OR Delta OR … http://www.Amazon.com http://www.Kayak.com
  21. http://www.OfficeDepot.com
  22. ¾ oz. Bailey's Irish Cream ¾ oz. Lime Juice “… it's not so much the taste, but the consistency with this one. The lime juice makes the Bailey's curdle, turning into a booger-like consistency.” http://www.campussqueeze.com/post/The-Worst-Shots-Ever-Created.aspx Drill-Down Parallel Selection
  23. [ ] All: Obvious Way to Undo Deselect-to-undo: ensure consistency in the filter value options http://www.Kayak.com http://www.Yelp.com
  24. Office Depot UI is sensitive to the order in which a user deselects the check boxes for a single filter… Price filter option $50-$100 simply disappears if a user deselects it before the $50-$60 filter option (still only 2 items) http://www.OfficeDepot.com
  25. Always Make All Filters Easily Available
  26. http://www.OfficeDepot.com
  27. http://www.Kayak.com
  28. http://www.OfficeDepot.com
  29. <ul><li>A red-hot poker will burn you if you hold it too long ; </li></ul><ul><li>If you cut your finger very deeply with a knife, it usually bleeds; </li></ul><ul><li>If you drink much from a bottle marked &quot;poison&quot;, it is almost certain to disagree with you, sooner or later .&quot; </li></ul>Alice's Adventures in Wonderland
  30.  
  31. What’s Next for Finding?
  32. <ul><li>“ Browse and Search work best in tandem … the best finding interfaces achieve a balance , letting users move fluidly between browsing and searching” –Peter Morville </li></ul>
  33.  
  34. Source: http://www.solarnavigator.net/mythology/frankenstein.htm
  35. Integrated Faceted Breadcrumb
  36. http://www.pactralink.com/global-search-icon.jpg
  37.  
  38.  
  39. Integrated Faceted Breadcrumb <ul><li>Hierarchical Location-Attribute breadcrumbs </li></ul><ul><li>Change instead of Set-Remove-Set </li></ul><ul><li>Labels breadcrumb aspects </li></ul><ul><li>Intuitive new search </li></ul><ul><li>Direct keyword manipulation. </li></ul>
  40. Why Breadcrumbs? <ul><li>“ Breadcrumbs show people their current location relative to higher-level concepts , helping them understand where they are in relation to the rest of the site. Breadcrumbs afford one-click access to higher site levels and thus rescue users who parachute into very specific but inappropriate destinations through search or deep links. Breadcrumbs never cause problems in user testing… people… never misinterpret breadcrumb trails or have trouble operating them.” – Jared Spool </li></ul>
  41. Breadcrumbs are Resourceful.
  42. Location, Path & Attribute - Keith Instone
  43.  
  44.  
  45.  
  46.  
  47.  
  48. <ul><li>“ This feels like having to turn off the radio every time I want to change the station” </li></ul>
  49.  
  50.  
  51.  
  52.  
  53.  
  54.  
  55.  
  56.  
  57. MA YA : Most Advanced Yet Acceptable <ul><li>Faceted breadcrumb holds the promise to become the key component in the next generation of intuitive finding interfaces that fully integrate the best of faceted search and browse capabilities </li></ul>
  58.  
  59. <ul><li>Faceted Search on Mobile </li></ul><ul><li>Limited Screen Real Estate </li></ul><ul><li>Lack of Filtering Options </li></ul><ul><li>Broken Flow </li></ul>
  60.  
  61. http://www.youtube.com/watch?v=T85PfDfQc9Q
  62.  
  63.  
  64.  
  65.  
  66.  
  67.  
  68.  
  69. http://findability.org/
  70. http://www.srcf.ucam.org/cush/wp-content/uploads/2009/06/politburo.png
  71. http://www.wikinomics.com/blog/uploads/if-you-cant-open-it.jpg
  72. vs. http://www.amicofragile.org/wp-content/uploads/2008/11/linux_vs_apple_v2.jpeg http://i.zdnet.com/blogs/apple-ipad-official-02.jpg
  73.  
  74. http://findability.org/
  75. Educational Tech
  76. http://mocoloco.com/art/upload/2007/10/the_moleskine_p/moleskine_whitejacket.jpg http://www.moleskinerie.com/images/moleskine-2004-06-22.jpg
  77. http://www.ozoux.com/eclectic/archive/2007/02/20/images/2007/moleskine-reloaded.jpg/image_mini
  78. http://findability.org/
  79. http://solarsystem.nasa.gov/multimedia/downloads/sse_wp1_1280x1024.jpg
  80. http://www.interactions.org/sgtw/2006/0712/images/hiv_tg_800.jpg
  81. http://www.youtube.com/user/techsavvyagent
  82.  
  83. http://www.youtube.com/user/techsavvyagent
  84. http://www.youtube.com/user/techsavvyagent
  85. http://www.youtube.com/user/techsavvyagent
  86. http://jimstips.com/wp-content/uploads/images/stories/iPodTouch/ipt_googlemaps_02.jpg
  87. http://www.youtube.com/user/techsavvyagent
  88. http://www.youtube.com/user/techsavvyagent
  89. http://www.youtube.com/user/techsavvyagent
  90. http://www.youtube.com/user/techsavvyagent
  91. http://www.youtube.com/user/techsavvyagent
  92. www.prisjakt.nu www.staples.com www.tripadvisor.com
  93.  
  94. http://www.youtube.com/user/Apple?feature=pyv&ad=4586558836&kw=steve%20jobs%20keynote#p/u/6/Z03PR_4Ln90
  95. http://www.youtube.com/user/Apple?feature=pyv&ad=4586558836&kw=steve%20jobs%20keynote#p/u/6/Z03PR_4Ln90
  96. http://www.youtube.com/user/Apple?feature=pyv&ad=4586558836&kw=steve%20jobs%20keynote#p/u/6/Z03PR_4Ln90
  97.  
  98. http://www.amazon.com/gp/product/1933988495
  99. Resourceful UI System Capabilities Customer Goals
  100. http://static.arstechnica.com/ipad/apple_ipad_3g.jpg http://www.amazon.com/gp/product/1933988495
  101. Thank You! Greg Nudelman Email: [email_address] Twitter: @DesignCaffeine On the web: DesignCaffeine.com
  102.  

×