design caffeine for search and browse ui iasummit2010
DESCRIPTION
Design Caffeine for Search and Browse UI presented at IA Summit 2010TRANSCRIPT
Greg Nudelman
Email: [email protected]: @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
SystemCapabilit
ies
Customer
Goals
Resourceful UI
Start From Zero: No Search Results
1. Don’t Be Afraid to Say: I Did Not Understand
2. Focus on Providing a Way Out
3. Design from Zero
Don’t Be Afraid to Say I Did Not Understand
Focus on Providing a Way Out
Why do most Zero Search Results Pages
SUCK?
Effort and ingenuity invested in the Zero Search Results Page = overall dedication to customer
success
Starting from Zero: focuses your team on the needs of the customer = deeper
connection + tremendous competitive advantage
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
1. Stick to your filter value-selection paradigm
2. Provide an obvious and consistent way to undo filter selection
3. Always make all filters easily available
4. Provide filter values that encompass all items, or the complete inventory
Drill-DownI want to narrow my search results to Department = Books
Parallel SelectionI 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
Alice's Adventures in Wonderland
1. A red-hot poker will burn you if you hold it too long;
2. If you cut your finger very deeply with a knife, it usually bleeds;
3. If you drink much from a bottle marked "poison", it is almost certain to disagree with you, sooner or later."
What’s Next for Finding?
“Browse and Search work best in tandem… the best finding interfaces achieve a balance, letting users move fluidly between browsing and searching” –Peter Morville
Sou
rce: h
ttp://w
ww
.sola
rnavig
ato
r.net/m
ytholo
gy/fra
nken
stein
.htm
Integrated Faceted Breadcrumb
http://www.pactralink.com/global-search-icon.jpg
Integrated Faceted Breadcrumb
1. Hierarchical Location-Attribute breadcrumbs
2. Change instead of Set-Remove-Set3. Labels breadcrumb aspects4. Intuitive new search5. Direct keyword manipulation.
Why Breadcrumbs? “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
Breadcrumbs are Resourceful.
Location, Path & Attribute- Keith Instone
“This feels like having to turn off the radio every time I want to change the station”
MAYA: Most Advanced Yet Acceptable
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
Faceted Search on Mobile
1. Limited Screen Real Estate2. Lack of Filtering Options3. Broken Flow
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.jpeghttp://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.jpghttp://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.nuwww.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
SystemCapabilities
CustomerGoals
Resourceful UI
http://static.arstechnica.com/ipad/apple_ipad_3g.jpghttp://www.amazon.com/gp/product/1933988495