1.
CREATING A USER-
FRIENDLY SEARCH UI WITH
DRUPAL
Suzanne Dergacheva
@suzanne_kennedy

2.
Drupal Consulting, Development, andTraining
evolvingweb.ca
Suzanne Dergacheva, Co-founder
@suzanne_kennedy

3.
TRAINING PROGRAM
evolvingweb.ca/training

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.
SEARCH UI EXAMPLES

6.
LINKEDIN

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.
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.
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.
SETTING UPYOUR SEARCH
INDEX

11.
ADDING FIELDS

12.
FIELDS
• Fulltext fields:
• Choose a ‘weight’
• Searchable using the fulltext search
• String / integer fields:
• Available as facets
• Can be used as sorts

13.
ADD MORE FIELDS
Create a property
for the info you
want to index
Add a callback
function to return
the value

14.
CHOOSING FILTERS

15.
HIGHLIGHTING

16.
MORE FILTER OPTIONS
• Make search case insensitive
• Exclude unpublished content
• Enable ‘Complete entity view’ - for full text search

17.
FACET API

18.
FACET BLOCKS

19.
MULTI-SELECT
Show the # of results for each facet item

20.
OTHER WIDGETS
Show the # of results for each facet item

21.
COMBINING FACET +
RESULTS

22.
CHOOSING FACETS

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.
CONFIGURING FACET
BLOCKS
• Type of widget
• Number of facet items
• Show or hide empty
facets
• Sorting
• AND vs. OR

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.
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.
“OR” EXAMPLE

28.
“OR” EXAMPLE

29.
“OR” EXAMPLE

30.
“AND” EXAMPLE
nymag.com

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.
ORDERING FACET ITEMS
• Example:‘Filter by Instructor’
• Sorted by # of courses the
instructor is teaching
• Alternative: sort by alphabetical
order

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.
CHANGING FACETS

35.
SEARCH APIVIEWS

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.
ADVANTAGES
• Use views handlers for displaying data
• Use display plugins
• Pagination and contextual filters
• Site builders can do it

38.
LINKEDIN

39.
EXTRAS

40.
CURRENT SEARCH BLOCK
• See what filters are selected
• Reset link

41.
CUSTOM SEARCH FORM

42.
SEARCH APITABS

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.
Drupal Consulting, Development, andTraining
evolvingweb.ca
Suzanne Kennedy, Co-founder
@suzanne_kennedy