Search refinement, refined

Nick Vincent neoworks

•  Search refinement is taking a set of results and narrowing it down

•  You can do this by entering search terms, or by being prompted with options

•  There are lots of ways to improve a basic search refinement experience •  Faceting •  UX •  Suggestions/Autocomplete

•  We’ll talk about improving search by: •  Greying •  Multi-selecting

What is refinement?

•  Basic faceting is a representation of how many records within your current results match a refinement

•  Venn diagrams are a useful way of showing this

What is faceting

Things that look like a moon (10)

Space stations (1)

•  Very familiar to most consumers •  In terms of e-commerce shopping for a t-shirt this might

look like:

A basic facet

5 RESULTS TYPE ☑︀︁︂︃︄︅︆︇︈︉︊︋︌︍︎️  TROUSERS COLOUR ☑︀︁︂︃︄︅︆︇︈︉︊︋︌︍︎️ RED  

Red items (10)

All trousers (10)

Red trousers (5)

Everything

•  ClothesCo are a large, fictitious retailer of garments •  ClothesCo want to improve their search experience

•  Ajax/no reloads •  Clearer user experience •  Consistent, predictable facet/refinement behaviour

•  Their CEO, Darren Trousers, demands the best

Improving the search experience

“I demand the best”!Darren Trousers !CEO, ClothesCo!

•  Customers often start off with a wide array of facet options •  They can quickly lose sight of previously valid options as

they refine their search •  Interface jumps around as items are hidden and shown

The ClothesCo experience

COLOUR ☑︀︁︂︃︄︅︆︇︈︉︊︋︌︍︎️ RED SIZE ☐ LARGE  

COLOUR ☐ RED ☐ GREEN SIZE ☐ MEDIUM ☐ LARGE  

☞�

“Some of my options have suddenly

vanished, the screen has moved around!and I have become

confused”!

•  Options completely disappearing can be confusing the the user

•  Avoid the interface jumping around •  Is there a better way of showing when options become

invalid?

What ClothesCo want

COLOUR ☐ RED ☐ GREEN SIZE ☐ MEDIUM ☐ LARGE  

☞�COLOUR ☑ RED ☐ GREEN SIZE ☐ MEDIUM ☐ LARGE  

•  We have to find a way to generate the “greyed out” results •  For example we search for red trousers, but we’d like to show a count for

Tops as well. •  Results contain no tops, but we’d like to show how many there would be if

it were selected. •  Solr gives us “tagging” to be able to generate some facets with results

outside the main result set.

How do we achieve this?

TYPE ☑︀︁︂︃︄︅︆︇︈︉︊︋︌︍︎️  TROUSERS (5) ☐ TOPS (7) COLOUR ☑︀︁︂︃︄︅︆︇︈︉︊︋︌︍︎️ RED (5)   Red items (30) All trousers (10)

All tops (10)

Red tops (7)

Red trousers (5)

Solr tagging

q=*:* fq=type:trousers

fq=colour:red

facet=true

facet.field=type

facet.field=colour

•  Solr queries aren’t very readable (LOL! Use ElasticSearch!) •  This query doesn’t show the tops field because the results of

the query has no tops in it. •  We need to exclude the fq for “type”, but only for that facet

TYPE ☑︀︁︂︃︄︅︆︇︈︉︊︋︌︍︎️  TROUSERS (5) ☐ TOPS (0) COLOUR ☑︀︁︂︃︄︅︆︇︈︉︊︋︌︍︎️ RED (5)  

More solr tagging

q=*:* fq={!tag=myfilter}type:trousers

fq=colour:red

facet=true

facet.field={!ex=myfilter}type

facet.field=colour

•  The type facet is now counted ignoring the the filter on type •  We have the extra values and counts that we want

TYPE ☑︀︁︂︃︄︅︆︇︈︉︊︋︌︍︎️  TROUSERS (5) ☐ TOPS (7) COLOUR ☑︀︁︂︃︄︅︆︇︈︉︊︋︌︍︎️ RED (5)  

Beware indescriminate de-tagging

•  ClothesCo decide they want to grey out all the colour options your search is currently excluding.

•  The simple solution is surely just tagging, as we saw?

COLOUR ☑︀︁︂︃︄︅︆︇︈︉︊︋︌︍︎️ RED (172) ☐ CRIMSON (24) ☐ BURNT UMBER (3) ☐ TAUPE (72) ☐ MAUVE (2) ☐ PUCE (120) ☐ CERISE (91) ☐ CORAL (12) ☐ PLUM (8) ☐ RUST (12) ☐ POLONIUM (1)  

“That is the last thing I expected. I never knew there

were so many colours!”

What do we really want? •  We don’t want to see all the colours in the entire system •  We do want to see the colours we started with when we visited the

product list page •  We only want to exclude filters the user added •  We want to keep the filters the user started with

q=*:* fq=type:trousers – The query we started with

fq={!tag=user}colour:red – The user chose this

fq={!tag=user}size:large – The user chose this too

facet=true

facet.field={!ex=user}type – All the original types

facet.field={!ex=user}colour – All the original colours

This gives us all of our “grey” values and our actual values

Efficiently getting that data •  We now have to somehow get 2 sets of facet data per facet

•  The values we had when we started (grey + active) •  The values that are valid now (active)

•  We can combine these to get the behaviour we want •  But, we don’t want to run two queries! Time for more solr tricks, this

time faceting on the same field twice by changing the facet’s key. q=*:* fq=type:trousers – The query we started with

fq={!tag=user}colour:red – The user chose this

fq={!tag=user}size:large – The user chose this too facet=true

facet.field={!ex=user key=oldtype}type – All the original types facet.field={!ex=user key=oldcolour}colour – All the original colours

facet.field=type – All current active types

facet.field=colour – All current active colours

An alternative problem

•  S u r e l y w e ’ v e n o w g o t everything ClothesCo wanted, right?

•  Bad news! Darren Trousers is going to a Superman themed party, and wants to see underwear and trousers in both red and blue. Is there a different way to improve their search experience?

TYPE ☑︀︁︂︃︄︅︆︇︈︉︊︋︌︍︎️  TROUSERS (50) ☐ TOPS (47) ☐ UNDERWEAR (22) COLOUR ☑︀︁︂︃︄︅︆︇︈︉︊︋︌︍︎️ RED (32) ☐ BLUE (40)  

“I require tight blue trousers and red

underpants to perfect my visual tribute to the

Man of Steel. I will be irresistable.”

Multi-selecting

•  Multi-select will allow us to select more than one value at once

•  Seems much simpler than greying out •  As a power user we can browse more efficiently

TYPE ☑︀︁︂︃︄︅︆︇︈︉︊︋︌︍︎️  TROUSERS ☐ TOPS ☑︀︁︂︃︄︅︆︇︈︉︊︋︌︍︎️ UNDERWEAR COLOUR ☑︀︁︂︃︄︅︆︇︈︉︊︋︌︍︎️ RED ☑︀︁︂︃︄︅︆︇︈︉︊︋︌︍︎️ BLUE ☐  GREEN  

•  Multi-select can really help when someone is exploring options and browsing rather than completing targeted shopping

•  Multi-select search performs an AND between facets, each facet performs an OR when multiple facet values are selected

•  The goal of any search experience is to prevent you from getting to zero results

•  But there are ways of getting zero results.

The hidden dangers of multi-select

1.  Select “trousers” (50) category=trousers

2.  Tick Large & Medium (20) category=trousers AND (size=L OR size=M)

3.  Then choose Red (3) category=trousers AND (size=L OR size=M) AND colour=red

4.  Now deselect Medium (0!) category=“trousers” AND size=L AND colour=red

Very hard to defend against �without running the query �for each option

How to get to zero results

LARGETROUSERS

(10)MEDIUM

TROUSERS (10)

REDTROUSERS

(5)ALL

TROUSERS(50)

LARGETROUSERS

(10)MEDIUM

TROUSERS (10)

REDTROUSERS

(5)ALL

TROUSERS(50)

LARGETROUSERS

(10)MEDIUM

TROUSERS (10)

REDTROUSERS

(5)ALL

TROUSERS(50)

LARGETROUSERS

(10)MEDIUM

TROUSERS (10)

REDTROUSERS

(5)ALL

TROUSERS(50)

•  Sometimes a very simple requirement can be surprisingly complex •  Both greying and multi-select have drawbacks

•  Even logical UX can have unexpected edge cases •  A successful search experience will always contain

compromise •  UX •  Relevance •  Speed

•  A successful search experience requires a consistent vision, and careful tuning

Wrapping up