This document provides examples and best practices for search and filter interfaces. It discusses types of searches, considerations for search interface design, examples of different search interfaces, and guidelines for presenting search results and ensuring relevancy. The document is intended as a reference for designing effective search functions on websites and applications.

1. Prepared by:
Amy Cueva – Founder, Chief Experience Officer
October 19, 2009
Search & Filter Interface Round Up
EXAMPLES & BEST PRACTICES

2. Mad*Pow Fact Sheet
2
Experience Design Studio:
Product Design
Interaction Design
Contextual Inquiry
Ethnographic Research
Task Flow Analysis
Usability Testing
Information Architecture
Visual Design
Prototyping
Interactive Media
E-business Strategy
Market Research
Development
Founded:
2000 by Amy Cueva and Will Powley
Headquarters:
Historic Portsmouth, NH
Staff:
28 Employees
Officers
Directors
Designers
Creative Technologists
Strategists
Salespeople
Administrators

3. Mad*Pow Clients
3

4. 4

5. Search & Filter: Topics
5
Types of Searches
Key Considerations
Search Initiation and Navigation
Results Presentation
Relevancy, Personalization and Taking Action
Questions?

6. Types of Searches
6
How do people search?
Search Engines
Embedded Site Search
E-Commerce Search
Intranet/Local Search
Online, mobile, desktop
applications, kiosk, phone
interfaces, voice interfaces,
asking a live person
What are they looking for?
A phone number
A sweater
A plane ticket
A document
A song
A person
Any piece of information

7. Types of Searches
7
I want to…
Find a specific piece of information: There is one answer.
A zip/postal code, the temperature in a location, a specific person
Find and compare pieces of information: There is more than one
answer.
Movie times, a type of person, restaurants, books on a topic
Gain a level of understanding, do research and make a
decision:
The answer depends on the person doing the search.
Where should I go on vacation? What do these symptoms mean?
What is the best…

8. When designing a search interface, consider:
8
Who is visiting? What do they need?
What makes audience members different? Are there any
important characteristics about them to consider?
Have they been here before? What have they done? Do we know
anything about them? Can that be used to make the results more
relevant?
How did they get here? What lead up to this interaction? What is
driving them?
What are they looking for? How will they expect to find it? (Search
Terms)? Where will they want to look?
What do they want to see? What content or functionality would be
most useful relevant to them? Will they need any related information?

9. When designing a search interface, consider:
9
Who is visiting? What do they need?
How will they know when they’ve found what they are
looking for? How will they compare results? What are their decision
making attributes? What’s important/most relevant to them?
How will they want to interact? What would the ideal interaction
be? Will they sort, refine results, zoom in/out, navigate topically,
compare, “pogo-stick” (J Spool), save, favorite, rate, comment, share,
email, print?
How will they use this information? What will they need to do
with it?
What will they do after? How can that be supported?
Will they be back again? Will they need the information from this
search?
Would they want search results like this on a regular basis?

10. What can be done? What will YOU do?
10
What can be done to understand the visitor?
Search logs, site stats, analytics
Site survey/customer survey
User research: User interviews, contextual inquiry, observation
Usability testing: before, after, and during
How early can you do these things? How often? Can they be part of an
ongoing process?

11. What can be done? What will YOU do?
11
Making it happen…
What is it? What are the priorities? How do you determine priorities?
What should be done in the future?
What can be done right now?
What can be done with the technology? What can’t?
Who are you working with? How can you collaborate?
Is your search effective? How will you measure success?
How will search relevancy be monitored and improved on a regular
basis?

12. Interface & Interaction Design Checklist:
12
Home (pre-search):
What will be shown?
Most recent searches?
Most recently clicked through on?
Most popular?
Recommended searches?

13. Interface & Interaction Checklist:
13
Search Box:
Placement, priority, design, labeling
Focus, return, tabbing
Pre-population,
Type ahead, spell check, interactivity, related searches
“Codified” searches
Search Terms:
What terms should be anticipated?
Will there be a spell check/did you mean feature?

14. Interface & Interaction Checklist:
14
Display of Results:
What content/media will be displayed?
Will there be content available on hover?
Will the content be expandable/collapsible?
Will related content be shown?
Can a click through be avoided by showing the right information in
the results?
How will the results be organized?
How will the results be prioritized?
How will they be filtered and sorted?
Will topical navigation or faceted navigation be available?

15. Interface & Interaction Checklist:
15
Manipulation of Results/Interaction with Results:
Sort, filter, zoom in/out, navigate
Organize, Drag & drop,
Take action, save, share, email print
Rate, comment, contribute, suggest
Show similar/more like this, remove
Browse, hover, click through/view
How many results per page, pagination
How will the content load/flow in?

16. Familiar Search Interfaces
16

17. Newer Search Interfaces
17

18. Newer Search Interfaces
18

19. Newer Search Interfaces: Aggregators/Federated Search
19

20. Aggregators/Federated Search
20

21. Peek-a-boo Search
21

22. Type Ahead Search
22

23. Advanced Search
23

24. Faceted Navigation & Filters
24

25. Faceted Navigation & Filters
25

26. Faceted Navigation & Filters
26

27. Faceted Navigation & Filters
27

28. Pagination
28

29. “Zoom In” and “Zoom Out”
29

30. Information Visualization
30

31. Information Visualization
31

32. Information Visualization
32

33. Information Visualization
33

34. Information Visualization
34

35. Information Visualization
35

36. Results > Detail Browse
36

37. Results > Detail Browse
37

38. Results > Detail Browse
38

39. Results > Detail Browse
39

40. Results > Detail Browse
40

41. Results Presentation: Granularity Levels
41

42. Results Presentation: Federated Search Results
42

43. Results Presentation: Federated Search Results
43

44. Results Presentation: Federated Search Results
44

45. Results Presentation: Federated Search Results
45

46. Results Presentation: Rich Results Presentation
46

47. Results Presentation: Rich Results Presentation
47

48. Results Presentation: Presentation Options
48

49. Relevancy and Taking Action: Relationships & Nearness
49

50. Relevancy and Taking Action: Relationships & Nearness
50

51. Relevancy and Taking Action: Community Tagging, Rating, and Ranking
51

52. Relevancy and Taking Action: Implicit vs. Explicit Personalization
52

53. Relevancy and Taking Action: Implicit vs. Explicit Personalization
53

54. Relevancy and Taking Action: Individual Manipulation of Results
54

55. Relevancy and Taking Action: Individual Manipulation of Results
55

56. Relevancy and Taking Action: Individual Manipulation of Results
56

57. Relevancy and Taking Action: Saving and Sharing Results
57

58. Relevancy and Taking Action: Generating Results Feeds
58

59. Questions?
59