Creating a User-Friendly Search UI with Drupal - Presentation at DrupalCamp Toronto 2014

4,987 views
4,685 views

Published on

Drupal's Search API and Facet API modules give you lots of tools for creating useful search interfaces with Drupal. In this session, we'll look at some examples of search UI, and talk about how to design a search interface in Drupal that looks good and works well. We'll cover some of the configuration and additional modules you can use in Drupal to make this happen.

Topics covered:

Best practices for designing a search UI
Using Search API with Views to create flexible results
Customizing filters using Facet API
Modules that extend Facet API

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,987
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Creating a User-Friendly Search UI with Drupal - Presentation at DrupalCamp Toronto 2014

  1. 1. CREATING A USER- FRIENDLY SEARCH UI WITH DRUPAL Suzanne Dergacheva @suzanne_kennedy
  2. 2. Drupal Consulting, Development, andTraining evolvingweb.ca Suzanne Dergacheva, Co-founder @suzanne_kennedy
  3. 3. TRAINING PROGRAM evolvingweb.ca/training
  4. 4. UPCOMINGTRAININGS • Intro to Drupal inToronto - May 5 • Panels inToronto - May 6 • Intro to Drupal in Ottawa - May 21 • Drupal Site Building in Ottawa - May 22-23 • Views in Austin - June 2 • WxT-Drupal Site Building - June 12-13 • Drupal Module Development - June 19-20 http://evolvingweb.ca/training
  5. 5. SEARCH UI EXAMPLES
  6. 6. LINKEDIN
  7. 7. WHAT MAKES SEARCH USER-FRIENDLY? • Consistency of filtering options • Results that reflect your content • Search integrated into the website experience • Complexity matches the task • The search engine actually works
  8. 8. WHY USE SOLR? • Flexibility about what you search • Create multiple search indexes and interfaces • Provides search faceting • Hides search options that don’t give you results • Better performance
  9. 9. SETTING UP SEARCH API 1. Set up your search index 2. Add fields to the index & choose filter options 3. Select and configure the facets (this is the fun part!) 4. MakeViews for your search results
  10. 10. SETTING UPYOUR SEARCH INDEX
  11. 11. ADDING FIELDS
  12. 12. FIELDS • Fulltext fields: • Choose a ‘weight’ • Searchable using the fulltext search • String / integer fields: • Available as facets • Can be used as sorts
  13. 13. ADD MORE FIELDS Create a property for the info you want to index Add a callback function to return the value
  14. 14. CHOOSING FILTERS
  15. 15. HIGHLIGHTING
  16. 16. MORE FILTER OPTIONS • Make search case insensitive • Exclude unpublished content • Enable ‘Complete entity view’ - for full text search
  17. 17. FACET API
  18. 18. FACET BLOCKS
  19. 19. MULTI-SELECT Show the # of results for each facet item
  20. 20. OTHER WIDGETS Show the # of results for each facet item
  21. 21. COMBINING FACET + RESULTS
  22. 22. CHOOSING FACETS
  23. 23. CHOOSING FACETS • Facets come from ‘fields’ • If you’re not indexing it, you can’t facet by it • You can’t facet by fulltext fields
  24. 24. CONFIGURING FACET BLOCKS • Type of widget • Number of facet items • Show or hide empty facets • Sorting • AND vs. OR
  25. 25. FACET INTERACTIONS ANDVS. OR • OR: adding a facet item expands the search, results can match any facet item • AND: adding a facet limits the search results. Results must match all selected facet items
  26. 26. FACET INTERACTIONS • Example 1: Topics for courses. • Courses can be assigned many topics. If I choose. • Choosing a topic should reduce the results (AND) • Example 2: Instructors for a course: • Courses can have many instructors, but it’s unlikely to search based on the fact that two instructors are teaching the same course. • Choosing an instructor should expand the results (OR)
  27. 27. “OR” EXAMPLE
  28. 28. “OR” EXAMPLE
  29. 29. “OR” EXAMPLE
  30. 30. “AND” EXAMPLE nymag.com
  31. 31. HOW MANY FACETS? • You can choose to limit the number of facets or show a fixed number and include ‘show more’ links • If you don’t show all the facets, how do you choose which to show? • Sort by ‘facet name’ or by ‘number of results’
  32. 32. ORDERING FACET ITEMS • Example:‘Filter by Instructor’ • Sorted by # of courses the instructor is teaching • Alternative: sort by alphabetical order
  33. 33. ORDERING FACET BLOCKS • Most used at the top (e.g. Faculty,Terms) • Smaller # of choices at the top (e.g. undergrad vs. grad)
  34. 34. CHANGING FACETS
  35. 35. SEARCH APIVIEWS
  36. 36. CREATEVIEWS • Create aView on the search index (e.g. Coursecal Content) • Add exposed sorts and filter (for fulltext search) • Contextual filters for ‘search within a section’
  37. 37. ADVANTAGES • Use views handlers for displaying data • Use display plugins • Pagination and contextual filters • Site builders can do it
  38. 38. LINKEDIN
  39. 39. EXTRAS
  40. 40. CURRENT SEARCH BLOCK • See what filters are selected • Reset link
  41. 41. CUSTOM SEARCH FORM
  42. 42. SEARCH APITABS
  43. 43. MODULES • Search API / Search facets / Search views / Solr search • Facet API / Facet API bonus • Current search blocks • Optional widgets: Facet API tabs / Date facets
  44. 44. Drupal Consulting, Development, andTraining evolvingweb.ca Suzanne Kennedy, Co-founder @suzanne_kennedy

×