More Related Content Similar to Discover the new techniques about search application (20) More from Lucidworks (Archived) (20) Discover the new techniques about search application2. About Today’s Presenter
Tyler Tate tyler@twigkit.com
Tyler is the co-‐founder of UK-‐based TwigKit Ltd.,
where he is focused on designing truly usable search
interfaces. Tyler has led user experience design for
enterprise applica=ons from CMS to CRM, is the
creator of the popular 1KB CSS Grid, and organizes a
monthly enterprise search meetup in London.
© 2010 Lucid Imagina,on, Inc. 2
3. Agenda
How do people search? Slides are posted for
Experts vs. Amateurs download at the end of this
Specific vs. Open-‐ended Tasks presenta9on; full replay
available within
Recall vs. Explora=on
~48 hours of live webcast
Immediate vs. Itera=ve
How can we design for findability?
© 2010 Lucid Imagina,on, Inc. 3
4. Agenda
How can we design for findability?
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 links
5. Use 'top hits' to show more info on key results
6. Never let "0 results" happen
7. Use breadcrumbs
8. Make metadata clickable
9. Show count of matches per filter
10. Use meaningful facet visualisa=ons
© 2010 Lucid Imagina,on, Inc. 4
5. Why should I care about design?
In order to know what to build, we first need to know a
bit about the people we're building for.
© 2010 Lucid Imagina,on, Inc. 5
7. Experts vs. Amateurs
People vary be their...
Search exper=se (familiarity with common design paerns)
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
© 2010 Lucid Imagina,on, Inc. 7
8. © 2010 Lucid Imagina,on, Inc. 8
9. © 2010 Lucid Imagina,on, Inc. 9
10. Experts vs. Amateurs
looking up a fact reading a scien=fic journal
Exper,se
© 2010 Lucid Imagina,on, Inc. 10
11. Specific vs. Open-‐ended Tasks
Tasks vary by their specificity
During open-‐ended tasks, users desire greater simplicity
For highly specific tasks, users appreciate greater complexity
© 2010 Lucid Imagina,on, Inc. 11
12. © 2010 Lucid Imagina,on, Inc. 12
13. © 2010 Lucid Imagina,on, Inc. 13
14. © 2010 Lucid Imagina,on, Inc. 14
16. Exper,se & Task Specificity
Exper,se
Task Specificity
© 2010 Lucid Imagina,on, Inc. 16
17. © 2010 Lucid Imagina,on, Inc. •Concept screen by IDEO 17
18. Exper,se & Task Specificity
moderate
co
hi ple
complexity
m
gh xit
y
Bloomberg
scien=fic research
Exper,se
moderate
complexity
booking a flight
web search
lo
w
co
Task Specificity
m
pl
ex
it
y
© 2010 Lucid Imagina,on, Inc. 18
19. Recall vs. Explora,on
User’s goals vary between...
Recall (straighborward 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 oden no correct answer, but the goal is the insight
gained along the way
© 2010 Lucid Imagina,on, Inc. 19
20. © 2010 Lucid Imagina,on, Inc. 20
21. © 2010 Lucid Imagina,on, Inc. 21
22. © 2010 Lucid Imagina,on, Inc. 22
23. © 2010 Lucid Imagina,on, Inc. 23
24. © 2010 Lucid Imagina,on, Inc. 24
25. © 2010 Lucid Imagina,on, Inc. 25
26. Immediate vs. Itera,ve
Users sometimes find what they’re looking for after one query
When the goal is recall and the task is specific
But not usually
When the goal is explora=on or the task is open-‐ended
© 2010 Lucid Imagina,on, Inc. 26
27. © 2010 Lucid Imagina,on, Inc. 27
28. © 2010 Lucid Imagina,on, Inc. 28
30. How can we design for findability?
© 2010 Lucid Imagina,on, Inc. 30
32. 1. Make the searchbox obvious
It should look like a searchbox, feel like a searchbox,
and act like a searchbox
© 2010 Lucid Imagina,on, Inc. 32
33. 1. Make the searchbox obvious
It should look like a searchbox, feel like a searchbox,
and act like a searchbox
© 2010 Lucid Imagina,on, Inc. 33
34. 2. Provide as-‐you-‐type sugges,ons
Reduces spelling errors
Boosts users’ confidence
Globrix, eBay, Last.fm
© 2010 Lucid Imagina,on, Inc. 34
36. 3. Indicate the number of results found
Few results can be a potential red flag
Numerous results can boost users’ confidence
© 2010 Lucid Imagina,on, Inc. 36
37. 4. Use descriptive titles, hit highlighting, visited links
Use descriptive, 7-‐12 word titles (don’t use filenames!)
Hit highlighting helps users quickly parse the results
Visited link color helps users remember where they’ve been
The Guardian
© 2010 Lucid Imagina,on, Inc. 37
38. © 2010 Lucid Imagina,on, Inc. 38
39. 5. Use 'top hits' to show more info on key results
When there is a high probability that the first 1-‐3 results are
what the user is looking for, top hits provide additional
information to help users make their decision
© 2010 Lucid Imagina,on, Inc. 39
40. 6. Never let “0 results” happen
“No result” screens are a roadblock to users
Use “or” instead of “and”
Use automatic spelling corrections and related searches
© 2010 Lucid Imagina,on, Inc. 40
42. 7. Use breadcrumbs
Breadcrumbs describe what the user is looking at, how he got
there, and – in case of mistakes – how to get back
Always allow users to easily remove filters
Wireframe by Greg Nudleman
© 2010 Lucid Imagina,on, Inc. 42
43. 8. Make metadata clickable
Clickable metadata enables organic filtering of the results
© 2010 Lucid Imagina,on, Inc. 43
44. 9. Indicate the number of matches for each filter
Filter counts give users a more complete picture of the result set
© 2010 Lucid Imagina,on, Inc. 44
45. 9. Indicate the number of matches for each filter
Filter counts give users a more complete picture of the result set
Visual indicators can help quicken comprehension
© 2010 Lucid Imagina,on, Inc. 45
46. 10. Use meaningful facet visualisations
A meaningful visualisation makes complex information tangible
© 2010 Lucid Imagina,on, Inc. 46
47. 10. Use meaningful facet visualisations
A meaningful visualisation makes complex information tangible
TED
© 2010 Lucid Imagina,on, Inc. 47
48. 10. Use meaningful facet visualisations
A meaningful visualisation makes complex information tangible
Starbucks
© 2010 Lucid Imagina,on, Inc. 48
49. 10. Use meaningful facet visualisations
A meaningful visualisation makes complex information tangible
New York Times
© 2010 Lucid Imagina,on, Inc. 49
50. 10. Use meaningful facet visualisations
A meaningful visualisation makes complex information tangible
© 2010 Lucid Imagina,on, Inc. 50
51. © 2010 Lucid Imagina,on, Inc. 51
•IBM
52. Learn More
Read Peter Morville’s book “Search Patterns”
hp://searchpaerns.org/
Read my article “The Scent of Search”
hp://johnnyholland.org/2010/07/05/the-‐scent-‐of-‐search/
Read Marti Hearst’s book “Search User Interfaces”
hp://johnnyholland.org/2010/07/05/the-‐scent-‐of-‐search/
Check out Endeca’s design pattern library
hp://searchuserinterfaces.com/
Follow TwigKit’s blog, “The Dao of Search”
hp://blog.twigkit.com/
© 2010 Lucid Imagina,on, Inc. 52
53. Q&A
Slides are available for download
at h4p://bit.ly/design4search
Full replay available within
~48 hours of live webcast
Thanks for listening!
Your thoughts are welcome! Ping me at
tyler@twigkit.com, @tylertate, or @twigkit
© 2010 Lucid Imagina,on, Inc. 53