Design Caffeine For Search and Browse UI IASummit2010

Greg Nudelman

Email: Greg@DesignCaffeine.comTwitter: @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

Thank You!

Greg Nudelman

Email: Greg@DesignCaffeine.comTwitter: @DesignCaffeineOn the web: DesignCaffeine.com