SlideShare a Scribd company logo
1 of 102
Download to read offline
Greg Nudelman Email:  Greg@DesignCaffeine.com Twitter:  @DesignCaffeine Design Caffeine  for Search and Browse UI (a.k.a.  Resourceful   Finding UI )
Huh?  Resourceful  UI?
Resourceful:  Able, capable, clever, creative, adventurous, enterprising, ingenious, intelligent, inventive, original, quick-witted, sharp, talented, etc. http://thesaurus.com/browse/resourceful
Resourceful UI System Capabilities Customer Goals
Start From Zero:  No Search Results ,[object Object],[object Object],[object Object]
 
 
Don’t Be Afraid to Say  I Did Not Understand
 
Focus on Providing a  Way Out
[object Object],[object Object]
[object Object]
[object Object]
http:// http://beetlebabee.files.wordpress.com/2008/11/painting-the-roses-red-3.jpg
http://blogs.nyu.edu/blogs/val239/digiprodval/10_AliceInWonderlandLabyrinth.jpg
 
http://img.thesun.co.uk/multimedia/archive/00853/SNN2537A-682_853019a.jpg
 
Office Depot Faceted Search Redesign   ,[object Object],[object Object],[object Object],[object Object]
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
http://www.OfficeDepot.com
¾ 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
[ ] All:  Obvious Way to Undo Deselect-to-undo:  ensure consistency in the filter value options http://www.Kayak.com  http://www.Yelp.com
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
Always Make  All  Filters Easily Available
http://www.OfficeDepot.com
http://www.Kayak.com
http://www.OfficeDepot.com
[object Object],[object Object],[object Object],Alice's Adventures in Wonderland
 
What’s  Next  for Finding?
[object Object]
 
Source: http://www.solarnavigator.net/mythology/frankenstein.htm
Integrated  Faceted   Breadcrumb
http://www.pactralink.com/global-search-icon.jpg
 
 
Integrated  Faceted   Breadcrumb ,[object Object],[object Object],[object Object],[object Object],[object Object]
Why  Breadcrumbs? ,[object Object]
Breadcrumbs are  Resourceful.
Location, Path &  Attribute - Keith Instone
 
 
 
 
 
[object Object]
 
 
 
 
 
 
 
 
MA YA : Most Advanced  Yet Acceptable   ,[object Object]
 
[object Object],[object Object],[object Object],[object Object]
 
http://www.youtube.com/watch?v=T85PfDfQc9Q
 
 
 
 
 
 
 
http://findability.org/
http://www.srcf.ucam.org/cush/wp-content/uploads/2009/06/politburo.png
http://www.wikinomics.com/blog/uploads/if-you-cant-open-it.jpg
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
 
http://findability.org/
Educational  Tech
http://mocoloco.com/art/upload/2007/10/the_moleskine_p/moleskine_whitejacket.jpg http://www.moleskinerie.com/images/moleskine-2004-06-22.jpg
http://www.ozoux.com/eclectic/archive/2007/02/20/images/2007/moleskine-reloaded.jpg/image_mini
http://findability.org/
http://solarsystem.nasa.gov/multimedia/downloads/sse_wp1_1280x1024.jpg
http://www.interactions.org/sgtw/2006/0712/images/hiv_tg_800.jpg
http://www.youtube.com/user/techsavvyagent
 
http://www.youtube.com/user/techsavvyagent
http://www.youtube.com/user/techsavvyagent
http://www.youtube.com/user/techsavvyagent
http://jimstips.com/wp-content/uploads/images/stories/iPodTouch/ipt_googlemaps_02.jpg
http://www.youtube.com/user/techsavvyagent
http://www.youtube.com/user/techsavvyagent
http://www.youtube.com/user/techsavvyagent
http://www.youtube.com/user/techsavvyagent
http://www.youtube.com/user/techsavvyagent
www.prisjakt.nu www.staples.com www.tripadvisor.com
 
http://www.youtube.com/user/Apple?feature=pyv&ad=4586558836&kw=steve%20jobs%20keynote#p/u/6/Z03PR_4Ln90
http://www.youtube.com/user/Apple?feature=pyv&ad=4586558836&kw=steve%20jobs%20keynote#p/u/6/Z03PR_4Ln90
http://www.youtube.com/user/Apple?feature=pyv&ad=4586558836&kw=steve%20jobs%20keynote#p/u/6/Z03PR_4Ln90
 
http://www.amazon.com/gp/product/1933988495
Resourceful UI System Capabilities Customer Goals
http://static.arstechnica.com/ipad/apple_ipad_3g.jpg http://www.amazon.com/gp/product/1933988495
Thank You! Greg Nudelman Email:  [email_address] Twitter:  @DesignCaffeine On the web:  DesignCaffeine.com
 

More Related Content

Viewers also liked

Smart World Stories Are The New Design Stories
Smart World Stories Are The New Design StoriesSmart World Stories Are The New Design Stories
Smart World Stories Are The New Design StoriesLuis Daniel Rodriguez
 
Momunjanova - Plan of the Government of the Kyrgyz Republic on Export Develop...
Momunjanova - Plan of the Government of the Kyrgyz Republic on Export Develop...Momunjanova - Plan of the Government of the Kyrgyz Republic on Export Develop...
Momunjanova - Plan of the Government of the Kyrgyz Republic on Export Develop...ExternalEvents
 
CATALOGUE CVL STEEL CONDUIT - FLEXIBLE CONDUIT - ONG LUON DAY DIEN GI - ONG R...
CATALOGUE CVL STEEL CONDUIT - FLEXIBLE CONDUIT - ONG LUON DAY DIEN GI - ONG R...CATALOGUE CVL STEEL CONDUIT - FLEXIBLE CONDUIT - ONG LUON DAY DIEN GI - ONG R...
CATALOGUE CVL STEEL CONDUIT - FLEXIBLE CONDUIT - ONG LUON DAY DIEN GI - ONG R...Ống Luồn Dây Điện
 
The Mobile Question: Lessons in Design and Strategy for Your Mobile Experience
The Mobile Question: Lessons in Design and Strategy for Your Mobile ExperienceThe Mobile Question: Lessons in Design and Strategy for Your Mobile Experience
The Mobile Question: Lessons in Design and Strategy for Your Mobile ExperienceJeremy Johnson
 
Government policy in field of agricultural export promotion in Ukraine
Government policy in field of agricultural export promotion in UkraineGovernment policy in field of agricultural export promotion in Ukraine
Government policy in field of agricultural export promotion in UkraineExternalEvents
 
Energy saving audit project( mgtc)
Energy saving audit project( mgtc)Energy saving audit project( mgtc)
Energy saving audit project( mgtc)moffaz
 
Estonian experience in the formation of export strategy for dairy products
Estonian experience in the formation of export strategy for dairy productsEstonian experience in the formation of export strategy for dairy products
Estonian experience in the formation of export strategy for dairy productsExternalEvents
 
Design Stories Are The New User Stories
Design Stories Are The New User StoriesDesign Stories Are The New User Stories
Design Stories Are The New User StoriesLuis Daniel Rodriguez
 
Xiamen Winlink Cable Factory Coaxial cable catalogue
Xiamen Winlink Cable Factory Coaxial cable catalogueXiamen Winlink Cable Factory Coaxial cable catalogue
Xiamen Winlink Cable Factory Coaxial cable catalogueXiamen Winlink Cable Factory
 
Export Development Plan for 2015-17 in Kyrgyzstan
Export Development Plan for 2015-17 in KyrgyzstanExport Development Plan for 2015-17 in Kyrgyzstan
Export Development Plan for 2015-17 in KyrgyzstanExternalEvents
 
Fast Prototyping Strategies for UI design
Fast Prototyping Strategies for UI designFast Prototyping Strategies for UI design
Fast Prototyping Strategies for UI designLuis Daniel Rodriguez
 

Viewers also liked (17)

Smart World Stories Are The New Design Stories
Smart World Stories Are The New Design StoriesSmart World Stories Are The New Design Stories
Smart World Stories Are The New Design Stories
 
AGILE/UX LINEOUT!
AGILE/UX LINEOUT!AGILE/UX LINEOUT!
AGILE/UX LINEOUT!
 
Momunjanova - Plan of the Government of the Kyrgyz Republic on Export Develop...
Momunjanova - Plan of the Government of the Kyrgyz Republic on Export Develop...Momunjanova - Plan of the Government of the Kyrgyz Republic on Export Develop...
Momunjanova - Plan of the Government of the Kyrgyz Republic on Export Develop...
 
CATALOGUE CVL STEEL CONDUIT - FLEXIBLE CONDUIT - ONG LUON DAY DIEN GI - ONG R...
CATALOGUE CVL STEEL CONDUIT - FLEXIBLE CONDUIT - ONG LUON DAY DIEN GI - ONG R...CATALOGUE CVL STEEL CONDUIT - FLEXIBLE CONDUIT - ONG LUON DAY DIEN GI - ONG R...
CATALOGUE CVL STEEL CONDUIT - FLEXIBLE CONDUIT - ONG LUON DAY DIEN GI - ONG R...
 
The Mobile Question: Lessons in Design and Strategy for Your Mobile Experience
The Mobile Question: Lessons in Design and Strategy for Your Mobile ExperienceThe Mobile Question: Lessons in Design and Strategy for Your Mobile Experience
The Mobile Question: Lessons in Design and Strategy for Your Mobile Experience
 
Government policy in field of agricultural export promotion in Ukraine
Government policy in field of agricultural export promotion in UkraineGovernment policy in field of agricultural export promotion in Ukraine
Government policy in field of agricultural export promotion in Ukraine
 
Energy saving audit project( mgtc)
Energy saving audit project( mgtc)Energy saving audit project( mgtc)
Energy saving audit project( mgtc)
 
Estonian experience in the formation of export strategy for dairy products
Estonian experience in the formation of export strategy for dairy productsEstonian experience in the formation of export strategy for dairy products
Estonian experience in the formation of export strategy for dairy products
 
Design Stories Are The New User Stories
Design Stories Are The New User StoriesDesign Stories Are The New User Stories
Design Stories Are The New User Stories
 
Xiamen Winlink Cable Factory Coaxial cable catalogue
Xiamen Winlink Cable Factory Coaxial cable catalogueXiamen Winlink Cable Factory Coaxial cable catalogue
Xiamen Winlink Cable Factory Coaxial cable catalogue
 
Export Development Plan for 2015-17 in Kyrgyzstan
Export Development Plan for 2015-17 in KyrgyzstanExport Development Plan for 2015-17 in Kyrgyzstan
Export Development Plan for 2015-17 in Kyrgyzstan
 
Fast Prototyping Strategies for UI design
Fast Prototyping Strategies for UI designFast Prototyping Strategies for UI design
Fast Prototyping Strategies for UI design
 
Il Giappone
Il GiapponeIl Giappone
Il Giappone
 
Il Giappone
Il GiapponeIl Giappone
Il Giappone
 
Giappone
GiapponeGiappone
Giappone
 
Giappone
GiapponeGiappone
Giappone
 
Giappone
GiapponeGiappone
Giappone
 

Similar to Design Caffeine For Search and Browse UI IASummit2010

Making your job website easier to use
Making your job website easier to useMaking your job website easier to use
Making your job website easier to useStuart Church
 
When the Developer Must Design
When the Developer Must DesignWhen the Developer Must Design
When the Developer Must DesignAndrew Malek
 
What the UX? – Confessions of a Designer
What the UX? – Confessions of a DesignerWhat the UX? – Confessions of a Designer
What the UX? – Confessions of a DesignerThomas Gläser
 
Lana Voynova - Crash course in UX design
Lana Voynova - Crash course in UX designLana Voynova - Crash course in UX design
Lana Voynova - Crash course in UX designStas Kremnev
 
Designing The Interface For Use
Designing The Interface For UseDesigning The Interface For Use
Designing The Interface For UseChristina Wodtke
 
Top Three Modern Product Trends
Top Three Modern Product TrendsTop Three Modern Product Trends
Top Three Modern Product TrendsJeremy Johnson
 
Usability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT FoundationUsability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT FoundationTonya Thomas
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screenFour Kitchens
 
Mobile SEO: Closing the Mobile Search Strategy Gap
Mobile SEO: Closing the Mobile Search Strategy GapMobile SEO: Closing the Mobile Search Strategy Gap
Mobile SEO: Closing the Mobile Search Strategy GapJustin Briggs
 
"Algo-Proof Content Strategy"
"Algo-Proof Content Strategy""Algo-Proof Content Strategy"
"Algo-Proof Content Strategy"mruud
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App ChallengesJason Grigsby
 
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)Elida Arrizza
 
UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015Katelyn Caillouet
 
NYU Web Intensive - Week 3 Class 2
NYU Web Intensive - Week 3 Class 2NYU Web Intensive - Week 3 Class 2
NYU Web Intensive - Week 3 Class 2studiokandm
 
13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an ExorcismCrystal Beasley
 

Similar to Design Caffeine For Search and Browse UI IASummit2010 (20)

Portfolio MMeyer 2014
Portfolio MMeyer 2014Portfolio MMeyer 2014
Portfolio MMeyer 2014
 
Making your job website easier to use
Making your job website easier to useMaking your job website easier to use
Making your job website easier to use
 
When the Developer Must Design
When the Developer Must DesignWhen the Developer Must Design
When the Developer Must Design
 
What the UX? – Confessions of a Designer
What the UX? – Confessions of a DesignerWhat the UX? – Confessions of a Designer
What the UX? – Confessions of a Designer
 
Lana Voynova - Crash course in UX design
Lana Voynova - Crash course in UX designLana Voynova - Crash course in UX design
Lana Voynova - Crash course in UX design
 
Designing The Interface For Use
Designing The Interface For UseDesigning The Interface For Use
Designing The Interface For Use
 
Top Three Modern Product Trends
Top Three Modern Product TrendsTop Three Modern Product Trends
Top Three Modern Product Trends
 
Webdesign
WebdesignWebdesign
Webdesign
 
Usability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT FoundationUsability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT Foundation
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
UX Workshop
UX WorkshopUX Workshop
UX Workshop
 
UX Work Shop
UX Work ShopUX Work Shop
UX Work Shop
 
Mobile SEO: Closing the Mobile Search Strategy Gap
Mobile SEO: Closing the Mobile Search Strategy GapMobile SEO: Closing the Mobile Search Strategy Gap
Mobile SEO: Closing the Mobile Search Strategy Gap
 
"Algo-Proof Content Strategy"
"Algo-Proof Content Strategy""Algo-Proof Content Strategy"
"Algo-Proof Content Strategy"
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App Challenges
 
Jai Djwa — User Experience FTW
Jai Djwa — User Experience FTWJai Djwa — User Experience FTW
Jai Djwa — User Experience FTW
 
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
 
UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015
 
NYU Web Intensive - Week 3 Class 2
NYU Web Intensive - Week 3 Class 2NYU Web Intensive - Week 3 Class 2
NYU Web Intensive - Week 3 Class 2
 
13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism
 

Recently uploaded

Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 

Recently uploaded (19)

Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 

Design Caffeine For Search and Browse UI IASummit2010

Editor's Notes

  1. The sub-title of this talk is --
  2. What’s wrong with this page? Anyone? Can you tell it’s a zero search results page? No? You’re not alone. The only thing that tells you that the app did not find any results for Opeenheimer Small & Mid Cap Value Fund is this little black 0 here. Compare this with…
  3. What’s wrong with this page? Anyone? Can you tell it’s a zero search results page? No? You’re not alone. The only thing that tells you that the app did not find any results for Opeenheimer Small & Mid Cap Value Fund is this little black 0 here. Compare this with…
  4. Google’s “did you mean” feature – not only does it tell you we did not find anything useful, it recommends something to take away the pain. The moral of the story? Don’t be afraid to say I did not understand. It’s OK – it’s not you. It’s me. *I* the system, did not get it. OK what’s the second issue I see a lot of?
  5. This – this is Endless.com. And the page is literally endless. I mean it – you can endlessly push all those little buttons sliders, controls, and it is never going to produce a single search result. links are actually filtering controls that serve only to further constrain the search that already has no results. Instead of providing a way out, these filter links instead suck the customer deeper into the quagmire of the no search results, now requiring multiple clicks of the Back button to get back to some useful content.
  6. What’s the moral of the story? Read and heed the following words of wisdom:
  7. What’s the moral of the story? Read and heed the following words of wisdom:
  8. Strart your design from zero search results, because after all the heated team discussions on whether the search button needs to be white or red…
  9. … and after your users will lose themselves compeltely in your faboulous IA….
  10. …… the thing that your custoemrs will remember most is the zero search results page, which will linger behind even AFTER the finding expereince is over …
  11. ... like the grin of the cheshire cat.
  12. Amazon uses links, which primarily correspond to Drill-down. In contrast, Kayak uses Parallel selection, usually done with checkboxes…
  13. Now folks at Office Depot, decided that while one paradigm is good, two must sure be better. Here is how it works: once a customer selects the $50-$100 check box, the UI drills down into the $50-$100 price range and removes the $50 and below check box, breaking the affordance of a group of check boxes that should let customers select multiple, parallel OR values for a single filter. Instead, the user interface now displays $50-$60 and $60-$70 ranges, while still displaying the range of $50-$100 the customer originally selected as one of the available OR values. This is a little like
  14. Cement Mixer, one of the worst shots ever created according to CampusSqueeze.com
  15. Provide an obvious and consistent way to undo filter selection.
  16. OK, Cement Mixer UI was fun, but how do I undo? The Office Depot user interface is particularly sensitive to the order in which a user deselects the check boxes for a single filter. For example, the price filter option $50-$100 simply disappears if a user deselects it before the $50-$60 filter option. Note the number of items is still 2! A customer would have to click the browser’s Back button twice to undo both selections, because there is no other way to return to the default state. Typically, all of the available filters and options, plus the data that appears on a page can change after each click. The key is to avoid completely removing options in the same filter where the click took place.
  17. Please don’t misunderstand me. I am not saying all filters should be visible at the same time. It is perfectly acceptable to collapse filters to just a label, providing a single link like View All Filters , or to display previously selected filtering options in a unique way. However, if at different steps in the search workflow, filters start randomly disappearing from the search user interface with no way to bring them back, bad things start to happen very quickly.
  18. Now I like Red things, as you can see – but not to the exclusion of all other filters. Once I select a color, all of the other filters disappear entirely. Does this system behavior make any sense? Let’s say I want to buy a red chair mat. Under Color , I can select the Red check box and view a great variety of red chair mats. Is there really a compelling reason for me to do anything else with the color filter? Will I, as a true connoisseur of all things red, perhaps drill down into shades of red for my chair mat, such as Burgundy, Farmhouse Red, or Ripe Tomato? Not very likely—at least not for chair mats. Instead, I am much more likely to say, okay, these are all of the red chair mats. Great! Now, can I select a mat from a known brand? Or perhaps I would like a budget-priced mat, so I need to further constrain my search by price. Or maybe I am a stupendous fan of the Ohio Buckeyes and want to find a chair mat with my team logo, leaving fans of the Michigan Wolverines green with envy. Using other filters to continue massaging my red chair mats query is a far more likely scenario. Alternatively, let’s consider a different use case: I just selected Red, and now I can see a bunch of red chair mats. Almost immediately, I realize that these red chair mats are almost, but not quite, entirely unlike the mat I actually want to buy. [Greg: this is a homage to one of my favorite Hitchhiker's Guide to the Galaxy quotes: " almost , but not quite , entirely unlike tea ".  I’m more in favor of economy of words, but okay. You’re changing tense in the next sentence, but shouldn’t.] So, I immediately attempt to seek out two things: a way to undo my most recent selection a way to review what other filtering options I might want to use Unfortunately for both these use cases, when I selected a color, the Office Depot search user interface unhelpfully removed all other filters.
  19. This action would be tantamount to Kayak’s removing all other filters like departure and arrival times, number of stops, price, and class whenever a customer selected a particular airline. How helpful do you think that would be to someone trying to find a flight? Removing any filters completely can be detrimental to customer success and is, therefore, not recommended.
  20. Last but not least, who can tell me what 2 things are missing from the Color Menu? (Clear Mats and Item Numbers) As you can see in Figure 7, the Office Depot search user interface does not display the most common chair mat color, which is clear . Thus, clicking options for this filter means the site displays only a fraction of the available inventory—in this case, only 16 of 23 available items. The seven chair mats that are clear have no color attribute, so customers can never choose to view those items using the Office Depot user interface. They can only remove clear mats from consideration by specifying a color value. This system behavior is clearly not beneficial to someone looking for a chair mat—especially if they are looking for the most common variety. I am not sure what Office Depot’s reason for omitting clear from their color options might be, but it is reasonable to assume that the clear chair mats have the color attribute of empty, or null. Therefore, it is not possible to group these items under a valid color filter attribute. Fortunately, one fairly straightforward way to resolve any missing or inconsistent data is to include Other or All Others as a filter option. The SQL condition corresponding to Other should specifically include any items for which the color field is empty, or null, enabling customers always to view the entire inventory by using some combination of the available filter selections.
  21. Cautionary Tale in the manner of Lewis Carol, goes something like this…
  22. Unfortunately, most sites today do not integrate faceted search and browse effectively. For example, Walmart.com approaches browse and search using two different interfaces creating a jumble of duplicate controls that overwhelm the customer, making the site more difficult to use. A veritable cornucopia of filters, links and options on Walmart.com make it unlikely that the customers will be able to duplicate the search successfully or efficiently discover related items and content. Duplicate finding methods also create a problem for natural search, because each finding page exists only within the context of the specific session.
  23. Here I’d like to propose the Integrated Faceted Breadcrumb (IFB) design that integrates the power of faceted refinement with the intuitive query expansion afforded by browse. Although other breadcrumb-based finding interfaces currently exist, they fall short of expectations by ignoring design best practices. At best, the breadcrumb is stuck in a role of a side-kick, forced to eke out meager screen real estate along-side more powerful finding controls.
  24. Turns out there are 3 types of breadcrumbs: Location, Path & Attribute breadcrumbs as cataloged by Keith Instone Some of types of breadcrumbs are more resoucerful than others.
  25. In faceted search interfaces, Attribute breadcrumbs commonly convey applied facet values such as price, category, style and brand. For exmaple, Attribute breadcrumbs are Path breadcrumbs, displaying facet values in the order they were applied by the customer to reach the current set of search results. Attribute-Path breadcrumb UI on the Ariba Discovery Network. Unfortunately, Attribute-Path breadcrumb is not resourceful from the standpoint of integrating search and browse and helping people find related content: Temporal breadcrumb cannot be used to effectively link and anchor categories, landing pages, brand catalogs and other browse pages, precisely because it is carrying all of the attribute history instead. Temporal breadcrumb cannot be used to effectively show the customer where they can go because instead it is busy showing them where they’ve been . Pages with Temporal breadcrumbs cannot be effectively linked by natural search, because people creating different URLs each time the content is accessed. When the query changes, attributes appear to “randomly” jump around on the breadcrumb.
  26. In faceted search interfaces, Attribute breadcrumbs commonly convey applied facet values such as price, category, style and brand. For exmaple, Attribute breadcrumbs are Path breadcrumbs, displaying facet values in the order they were applied by the customer to reach the current set of search results. Attribute-Path breadcrumb UI on the Ariba Discovery Network. Unfortunately, Attribute-Path breadcrumb is not resourceful from the standpoint of integrating search and browse and helping people find related content: Temporal breadcrumb cannot be used to effectively link and anchor categories, landing pages, brand catalogs and other browse pages, precisely because it is carrying all of the attribute history instead. Temporal breadcrumb cannot be used to effectively show the customer where they can go because instead it is busy showing them where they’ve been . Pages with Temporal breadcrumbs cannot be effectively linked by natural search, because people creating different URLs each time the content is accessed. When the query changes, attributes appear to “randomly” jump around on the breadcrumb.
  27. Applied aspects are removed from the breadcrumb by un-checking the checkbox next to the applied aspect in the breadcrumb. For most people, set-remove-set interaction conflicts with their mental model. As one of my evaluators stated: “This feels like having to turn off the radio every time I want to change the station”. Instead of removing Canon in order to select Nikon, most people think in terms of simply changing Canon to Nikon, which can be accomplished most readily with a drop-down control.  [GN-what do you think of the changes? cb - looks good.] The drop-down is more intuitive than a typical remove mechanism, as it allows the user to discover all of the navigation options available from the parent facet or category. This idea was first introduced by Luke Wroblewski in his excellent book Site Seeing : a Visual Approach to Web Usability . One of the sites that implement drop down in the breadcrumb is Edmunds.com
  28. Applied aspects are removed from the breadcrumb by un-checking the checkbox next to the applied aspect in the breadcrumb. For most people, set-remove-set interaction conflicts with their mental model. As one of my evaluators stated: “This feels like having to turn off the radio every time I want to change the station”. Instead of removing Canon in order to select Nikon, most people think in terms of simply changing Canon to Nikon, which can be accomplished most readily with a drop-down control.  [GN-what do you think of the changes? cb - looks good.] The drop-down is more intuitive than a typical remove mechanism, as it allows the user to discover all of the navigation options available from the parent facet or category. This idea was first introduced by Luke Wroblewski in his excellent book Site Seeing : a Visual Approach to Web Usability . One of the sites that implement drop down in the breadcrumb is Edmunds.com
  29. In my testing, vast majority of people preferred this design to a more common set-remove-set paradigm and found it very intuitive and effective. I found that people seldom want to start the query over completely from scratch, unless they specifically indicated this action. Instead, they wanted to retain as much of the query as possible with every change of the facet values, and expect the system to help them construct a query that “makes sense”, gracefully dropping facet selections that no longer apply to their new query.
  30. Unfortunately, few sites today implement this function well. For example, changing the model from Mustang to Fusion does not retain the year selection of 2005, as most people would expect. Instead, as shown in figure 7, Edmunds.com resets the model year to the current year, 2010, which simply disappears from the breadcrumb.
  31. I found that a more resourceful system behavior is to retain any relevant attribute values that apply to the new query, preferably in way that always produces some search results. Figure 8 shows how Integrated Faceted Breadcrumb design handles the change in the Product Type from Digital Cameras to Lenses, retaining the Brand and Keywords aspect, while dropping the Camera Resolution aspect (as it does not apply to Lenses). Retaining aspects that apply to the updated query allows the customer to concentrate on their finding goals, while the system takes care of the details. What if the person really wanted to browse just the Lenses Product Type? My testing showed that most people found it very intuitive to click the Lenses link in order to navigate to the Lenses Product Type landing page. The result of combining drop-down control functionality with the existing breadcrumb link interaction gives us a powerful, intuitive, flexible finding control.
  32. What if instead of browsing, someone wanted to remove a single applied aspect from a breadcrumb, leaving the rest of the query intact?  My research showed that most people found it easy and intuitive to navigate to the drop down and select “See All” option Integrated Faceted Breadcrumb design provides at the #1 position in the drop-down, as shown. In Design Cop-out #2: Breadcrumbs [http://www.uie.com/articles/breadcrumbs], Jared Spool mentions that the biggest problem with breadcrumbs is “the lack of scent” and that “the wording of the individual trail elements becomes very important”. While most applications simply display the applied aspects in the breadcrumb, my research shows that labeling each of the applied aspects with the aspects name adds a great deal of information scent. The resulting IFB “breadcrumb tiles” (shown in Figure 9) display relevant aspect labels which help customers make sense of their queries and orient themselves quickly if they find the page through natural search.
  33. Ariba interface in figure 3 has a single search box which retains the original keywords, in a manner similar to Google. Unfortunately, any keyword change drops all of the applied aspects and filters launching a new keyword-only search. This is obviously not very resourceful, as we are trying to retain as much of the query as possible for reasons explained above.
  34. In contrast, Integrated Faceted Breadcrumb (IFB) provides a dedicated “New Search” button on the Home breadcrumb tile. As shown in Figure 10, clicking the “New Search” button removes all aspects and keywords, resetting the breadcrumb to the full-screen text box, reminding many evaluators of the simplicity of the Google search. Resetting is accomplished via an HTML layer or similar device so that the rest of the content on the page does not change . This way, the search box can reset almost instantaneously, perhaps even with an elegant animated transition.
  35. Many faceted search interfaces like Overstock.com pictured in Figure 11, have two search boxes: one to “search within” the existing query, and one to start over with a new keyword-only search. Having two search boxes takes up precious screen real estate and increases the potential for confusion. Worse yet, the customer can not directly modify their keyword query after the search is executed, because the system converts all the keywords into an aspect which cannot be modified, only removed in its entirety.
  36. Ben Shneiderman describes direct manipulation is one of the key HCI design principles. Integrated Faceted Breadcrumb (IFB) provides direct keyword query manipulation with the dynamic editable Keywords Aspect shown in Figure 12. At the start of a finding session, the search box starts out fully expanded across the entire width of the page. When the customer types in some keywords, they are retained in the search box for easy editing or keyword addition, as shown in Figure 12-A. If the customer selects one or more facets, they are always added according to their respective hierarchy in front of the search box. As more aspects are added, the keyword box gets progressively smaller, until it reaches some reasonable minimum size as shown in Figure 12-B. If sill more facets are applied at this point, a scroll arrow appears immediately after the Home facet, allowing customers to scroll only the applied aspects in the manner of a carousel control, without ever hiding the Home facet or the search box, as shown in Figure 12-C. IFB dynamic editable Keywords Aspect design proved to be very successful with our evaluators who found it intuitive, resourceful and easy to use.
  37. Ben Shneiderman describes direct manipulation is one of the key HCI design principles. Integrated Faceted Breadcrumb (IFB) provides direct keyword query manipulation with the dynamic editable Keywords Aspect shown in Figure 12. At the start of a finding session, the search box starts out fully expanded across the entire width of the page. When the customer types in some keywords, they are retained in the search box for easy editing or keyword addition, as shown in Figure 12-A. If the customer selects one or more facets, they are always added according to their respective hierarchy in front of the search box. As more aspects are added, the keyword box gets progressively smaller, until it reaches some reasonable minimum size as shown in Figure 12-B. If sill more facets are applied at this point, a scroll arrow appears immediately after the Home facet, allowing customers to scroll only the applied aspects in the manner of a carousel control, without ever hiding the Home facet or the search box, as shown in Figure 12-C. IFB dynamic editable Keywords Aspect design proved to be very successful with our evaluators who found it intuitive, resourceful and easy to use.
  38. Ben Shneiderman describes direct manipulation is one of the key HCI design principles. Integrated Faceted Breadcrumb (IFB) provides direct keyword query manipulation with the dynamic editable Keywords Aspect shown in Figure 12. At the start of a finding session, the search box starts out fully expanded across the entire width of the page. When the customer types in some keywords, they are retained in the search box for easy editing or keyword addition, as shown in Figure 12-A. If the customer selects one or more facets, they are always added according to their respective hierarchy in front of the search box. As more aspects are added, the keyword box gets progressively smaller, until it reaches some reasonable minimum size as shown in Figure 12-B. If sill more facets are applied at this point, a scroll arrow appears immediately after the Home facet, allowing customers to scroll only the applied aspects in the manner of a carousel control, without ever hiding the Home facet or the search box, as shown in Figure 12-C. IFB dynamic editable Keywords Aspect design proved to be very successful with our evaluators who found it intuitive, resourceful and easy to use.
  39. Ben Shneiderman describes direct manipulation is one of the key HCI design principles. Integrated Faceted Breadcrumb (IFB) provides direct keyword query manipulation with the dynamic editable Keywords Aspect shown in Figure 12. At the start of a finding session, the search box starts out fully expanded across the entire width of the page. When the customer types in some keywords, they are retained in the search box for easy editing or keyword addition, as shown in Figure 12-A. If the customer selects one or more facets, they are always added according to their respective hierarchy in front of the search box. As more aspects are added, the keyword box gets progressively smaller, until it reaches some reasonable minimum size as shown in Figure 12-B. If sill more facets are applied at this point, a scroll arrow appears immediately after the Home facet, allowing customers to scroll only the applied aspects in the manner of a carousel control, without ever hiding the Home facet or the search box, as shown in Figure 12-C. IFB dynamic editable Keywords Aspect design proved to be very successful with our evaluators who found it intuitive, resourceful and easy to use.
  40. Four Corners
  41. Four Corners
  42. How do we determine the hierarchy of Attributes? My research led me to believe that most people find it intuitive when the Attribute-Location breadcrumb simply replicates the order in which un-selected facets are presented (most typically in the left nav bar). Replicating the order in which un-selected facets appear also provides an effective way to integrate search and browse by treating the Category as just another Attribute in the breadcrumb. In vast majority of finding interfaces, Category appears first in the left nav bar, which places any applied “browse” Category Attributes in front of the applied faceted search values.