8/9/2019 Discover the new techniques about search application
1/53
Findability : Designingthe Search ExperienceTyler Tate , TwigKitWednesday, August 18, 2010
8/9/2019 Discover the new techniques about search application
2/53
Lucid Imagina,on Inc. 2010
About Todays Presenter
Tyler Tate [email protected] is the co-founder of UK-based TwigKit Ltd.,where he is focused on designing truly usable searchinterfaces. Tyler has led user experience design forenterprise applica=ons from CMS to CRM, is the
creator of the popular 1KB CSS Grid, and organizes amonthly enterprise search meetup in London.
2
mailto:[email protected]:[email protected]8/9/2019 Discover the new techniques about search application
3/53
Lucid Imagina,on Inc. 2010
Agenda
How do people search?Experts vs. Amateurs
Specic vs. Open-ended Tasks
Recall vs. Explora=on
Immediate vs. Itera=ve
How can we design for ndability?
3
8/9/2019 Discover the new techniques about search application
4/53
Lucid Imagina,on Inc. 2010
Agenda
How can we design for ndability?1. Make the searchbox obvious
2. Provide as-you-type sugges=ons
3. Show number of results found
4. Use descrip=ve =tles, hit highligh=ng, and visited links5. Use 'top hits' to show more info on key results
6. Never let "0 results" happen
7. Use breadcrumbs
8. Make metadata clickable9. Show count of matches per lter
10. Use meaningful facet visualisa=ons
4
8/9/2019 Discover the new techniques about search application
5/53
Lucid Imagina,on Inc. 2010 5
Why should I care about design ?
In order to know what to build, we rst need to know abit about the people we're building for.
8/9/2019 Discover the new techniques about search application
6/53
Lucid Imagina,on Inc. 2010 6
How do people search?
8/9/2019 Discover the new techniques about search application
7/53Lucid Imagina,on Inc. 2010
Experts vs. Amateurs
People vary be their...Search exper=se (familiarity with common design pa\erns)
Domain exper=se (knowledge in a certain area)
Experts prefer...More complex interfaces that give them increased control
Amateurs prefer...A simpler interface that minimises confusion
7
8/9/2019 Discover the new techniques about search application
8/53Lucid Imagina,on Inc. 2010 8
8/9/2019 Discover the new techniques about search application
9/53Lucid Imagina,on Inc. 2010 9
8/9/2019 Discover the new techniques about search application
10/53Lucid Imagina,on Inc. 2010
Experts vs. Amateurs
10
Exper,se
looking up a fact reading a scien=c journal
8/9/2019 Discover the new techniques about search application
11/53Lucid Imagina,on Inc. 2010
Specic vs. Open-ended Tasks
Tasks vary by their specicityDuring open-ended tasks, users desire greater simplicity
For highly specic tasks, users appreciate greater complexity
11
8/9/2019 Discover the new techniques about search application
12/53Lucid Imagina,on Inc. 2010 12
8/9/2019 Discover the new techniques about search application
13/53Lucid Imagina,on Inc. 2010 13
8/9/2019 Discover the new techniques about search application
14/53Lucid Imagina,on Inc. 2010 14
8/9/2019 Discover the new techniques about search application
15/53Lucid Imagina,on Inc. 2010
Specic vs. Open-ended Tasks
15
Task Specicity
looking up a fact booking a ight
8/9/2019 Discover the new techniques about search application
16/53Lucid Imagina,on Inc. 2010
Exper,se & Task Specicity
16
Task Specicity
E x p e r
, s e
8/9/2019 Discover the new techniques about search application
17/53Lucid Imagina,on Inc. 2010 17 Concept screen by IDEO
8/9/2019 Discover the new techniques about search application
18/53Lucid Imagina,on Inc. 2010
Exper,se & Task Specicity
18
Task Specicity
E x p e r
, s e
l o w c o m p l e x i t y
h i g h
c o m p l e x i t y
moderate
complexity
moderatecomplexity
web search
Bloomberg
booking a ight
scien=c research
8/9/2019 Discover the new techniques about search application
19/53Lucid Imagina,on Inc. 2010
Recall vs. Explora,on
Users goals vary between...Recall (straigh orward lookup of facts)
Explora=on (more about the journey than the des=na=on)
Recall...Solved by matching a query to the right result
Explora9on...There is o en no correct answer, but the goal is the insightgained along the way
19
8/9/2019 Discover the new techniques about search application
20/53Lucid Imagina,on Inc. 2010 20
8/9/2019 Discover the new techniques about search application
21/53Lucid Imagina,on Inc. 2010 21
8/9/2019 Discover the new techniques about search application
22/53
Lucid Imagina,on Inc. 2010 22
8/9/2019 Discover the new techniques about search application
23/53
Lucid Imagina,on Inc. 2010 23
8/9/2019 Discover the new techniques about search application
24/53
Lucid Imagina,on Inc. 2010 24
8/9/2019 Discover the new techniques about search application
25/53
Lucid Imagina,on Inc. 2010 25
8/9/2019 Discover the new techniques about search application
26/53
Lucid Imagina,on Inc. 2010
Immediate vs. Itera,ve
Users sometimes find what theyre looking for after one queryWhen the goal is recall and the task is specic
But not usuallyWhen the goal is explora=on or the task is open-ended
26
8/9/2019 Discover the new techniques about search application
27/53
Lucid Imagina,on Inc. 2010 27
8/9/2019 Discover the new techniques about search application
28/53
Lucid Imagina,on Inc. 2010 28
8/9/2019 Discover the new techniques about search application
29/53
Lucid Imagina,on Inc. 2010
Immediate vs. Itera,ve
29Illustra,on by Marcia Bates
8/9/2019 Discover the new techniques about search application
30/53
Lucid Imagina,on Inc. 2010 30
How can we design for ndability?
8/9/2019 Discover the new techniques about search application
31/53
Lucid Imagina,on Inc. 2010 31
The Searchbox
8/9/2019 Discover the new techniques about search application
32/53
Lucid Imagina,on Inc. 2010
1. Make the searchbox obvious
It should look like a searchbox, feel like a searchbox,and act like a searchbox
32
8/9/2019 Discover the new techniques about search application
33/53
Lucid Imagina,on Inc. 2010
1. Make the searchbox obvious
It should look like a searchbox, feel like a searchbox,and act like a searchbox
33
8/9/2019 Discover the new techniques about search application
34/53
Lucid Imagina,on Inc. 2010
2. Provide as-you-type sugges,ons
Reduces spelling errorsBoosts users confidence
34
Globrix eBay Last.fm
8/9/2019 Discover the new techniques about search application
35/53
Lucid Imagina,on Inc. 2010 35
Search Results
8/9/2019 Discover the new techniques about search application
36/53
Lucid Imagina,on Inc. 2010
3. Indicate the number of results found
Few results can be a potential red flagNumerous results can boost users confidence
36
8/9/2019 Discover the new techniques about search application
37/53
Lucid Imagina,on Inc. 2010
4. Use descriptive titles hit highlighting visited links
Use descriptive, 7-12 word titles (dont use filenames!)Hit highlighting helps users quickly parse the results
Visited link color helps users remember where theyve been
37
The Guardian
8/9/2019 Discover the new techniques about search application
38/53
Lucid Imagina,on Inc. 2010 38
8/9/2019 Discover the new techniques about search application
39/53
Lucid Imagina,on Inc. 2010
5. Use 'top hits' to show more info on key results
When there is a high probability that the first 1-3 results arewhat the user is looking for, top hits provide additionalinformation to help users make their decision
39
8/9/2019 Discover the new techniques about search application
40/53
Lucid Imagina,on Inc. 2010
6. Never let 0 results happen
No result screens are a roadblock to usersUse or instead of and
Use automatic spelling corrections and related searches
40
8/9/2019 Discover the new techniques about search application
41/53
Lucid Imagina,on Inc. 2010 41
Faceted Naviga,on
8/9/2019 Discover the new techniques about search application
42/53
Lucid Imagina,on Inc. 2010
7. Use breadcrumbs
Breadcrumbs describe what the user is looking at, how he gotthere, and in case of mistakes how to get back
Always allow users to easily remove filters
42
Wireframe by Greg Nudleman
8/9/2019 Discover the new techniques about search application
43/53
Lucid Imagina,on Inc. 2010
8. Make metadata clickable
Clickable metadata enables organic filtering of the results
43
8/9/2019 Discover the new techniques about search application
44/53
Lucid Imagina,on Inc. 2010
9. Indicate the number of matches for each filter
Filter counts give users a more complete picture of the result set
44
8/9/2019 Discover the new techniques about search application
45/53
Lucid Imagina,on Inc. 2010
9. Indicate the number of matches for each filter
Filter counts give users a more complete picture of the result setVisual indicators can help quicken comprehension
45
8/9/2019 Discover the new techniques about search application
46/53
Lucid Imagina,on Inc. 2010
10. Use meaningful facet visualisations
A meaningful visualisation makes complex information tangible
46
8/9/2019 Discover the new techniques about search application
47/53
8/9/2019 Discover the new techniques about search application
48/53
Lucid Imagina,on Inc. 2010
10. Use meaningful facet visualisations
A meaningful visualisation makes complex information tangible
48
Starbucks
8/9/2019 Discover the new techniques about search application
49/53
Lucid Imagina,on Inc. 2010
10. Use meaningful facet visualisations
A meaningful visualisation makes complex information tangible
49
New York Times
8/9/2019 Discover the new techniques about search application
50/53
Lucid Imagina,on Inc. 2010
10. Use meaningful facet visualisations
A meaningful visualisation makes complex information tangible
50
8/9/2019 Discover the new techniques about search application
51/53
8/9/2019 Discover the new techniques about search application
52/53
Lucid Imagina,on Inc. 2010 52
Learn MoreRead Peter Morvilles book Search Patternsh\p ://searchpa\erns.org /
Read my article The Scent of Searchh\p ://johnnyholland.org/2010/07/0 5/the-scent-of-search/
Read Marti Hearsts book Search User Interfacesh\p ://johnnyholland.org/2010/07/05/the-scent-of-search/
Check out Endecas design pattern libraryh\p ://searchuserinterfaces.com /
Follow TwigKits blog, The Dao of Searchh\p ://blog.twigkit.com/
http://johnnyholland.org/2010/07/05/the-scent-of-search/http://johnnyholland.org/2010/07/05/the-scent-of-search/http://johnnyholland.org/2010/07/05/the-scent-of-search/http://searchuserinterfaces.com/http://johnnyholland.org/2010/07/05/the-scent-of-search/http://johnnyholland.org/2010/07/05/the-scent-of-search/http://johnnyholland.org/2010/07/05/the-scent-of-search/http://searchpatterns.org/http://johnnyholland.org/2010/07/05/the-scent-of-search/http://johnnyholland.org/2010/07/05/the-scent-of-search/http://searchuserinterfaces.com/http://searchuserinterfaces.com/http://johnnyholland.org/2010/07/05/the-scent-of-search/http://johnnyholland.org/2010/07/05/the-scent-of-search/http://johnnyholland.org/2010/07/05/the-scent-of-search/http://johnnyholland.org/2010/07/05/the-scent-of-search/http://searchpatterns.org/http://searchpatterns.org/8/9/2019 Discover the new techniques about search application
53/53
Top Related