Findability:  Designing

the  Search  Experience

Tyler  Tate,  TwigKit
Wednesday,  August  18,  2010
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

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

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

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

 How  do  people  search?

©  2010 Lucid  Imagina,on,  Inc. 6

Experts  vs.  Amateurs

People  vary  be  their...

Search  exper=se  (familiarity  with  common  design  pa\erns)
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

©  2010 Lucid  Imagina,on,  Inc. 8
©  2010 Lucid  Imagina,on,  Inc. 9
Experts  vs.  Amateurs

looking  up  a  fact reading  a  scien=fic  journal

Exper,se

©  2010 Lucid  Imagina,on,  Inc. 10

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

©  2010 Lucid  Imagina,on,  Inc. 12
©  2010 Lucid  Imagina,on,  Inc. 13
©  2010 Lucid  Imagina,on,  Inc. 14
Specific  vs.  Open-­‐ended  Tasks

looking  up  a  fact booking  a  flight

Task  Specificity

©  2010 Lucid  Imagina,on,  Inc. 15

Exper,se  &  Task  Specificity
Exper,se

Task  Specificity
©  2010 Lucid  Imagina,on,  Inc. 16
©  2010 Lucid  Imagina,on,  Inc. •Concept  screen  by  IDEO 17
 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

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

©  2010 Lucid  Imagina,on,  Inc. 20
©  2010 Lucid  Imagina,on,  Inc. 21
©  2010 Lucid  Imagina,on,  Inc. 22
©  2010 Lucid  Imagina,on,  Inc. 23
©  2010 Lucid  Imagina,on,  Inc. 24
©  2010 Lucid  Imagina,on,  Inc. 25
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

©  2010 Lucid  Imagina,on,  Inc. 27
©  2010 Lucid  Imagina,on,  Inc. 28
Immediate  vs.  Itera,ve

Illustra,on  by  Marcia  Bates

©  2010 Lucid  Imagina,on,  Inc. 29

How  can  we  design  for  findability?

©  2010 Lucid  Imagina,on,  Inc. 30

 The  Searchbox

©  2010 Lucid  Imagina,on,  Inc. 31

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

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

2.  Provide  as-­‐you-­‐type  sugges,ons

Reduces  spelling  errors

Boosts  users’  confidence

Globrix,  eBay,  Last.fm

©  2010 Lucid  Imagina,on,  Inc. 34

 Search  Results

©  2010 Lucid  Imagina,on,  Inc. 35

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

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

©  2010 Lucid  Imagina,on,  Inc. 38
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

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

 Faceted  Naviga,on

©  2010 Lucid  Imagina,on,  Inc. 41

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

8.  Make  metadata  clickable

Clickable  metadata  enables  organic  filtering  of  the  results

©  2010 Lucid  Imagina,on,  Inc. 43

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

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

10.  Use  meaningful  facet  visualisations

A  meaningful  visualisation  makes  complex  information  tangible

©  2010 Lucid  Imagina,on,  Inc. 46

10.  Use  meaningful  facet  visualisations

A  meaningful  visualisation  makes  complex  information  tangible

TED

©  2010 Lucid  Imagina,on,  Inc. 47

10.  Use  meaningful  facet  visualisations

A  meaningful  visualisation  makes  complex  information  tangible

Starbucks

©  2010 Lucid  Imagina,on,  Inc. 48

10.  Use  meaningful  facet  visualisations

A  meaningful  visualisation  makes  complex  information  tangible

New  York  Times

©  2010 Lucid  Imagina,on,  Inc. 49

10.  Use  meaningful  facet  visualisations

A  meaningful  visualisation  makes  complex  information  tangible

©  2010 Lucid  Imagina,on,  Inc. 50

©  2010 Lucid  Imagina,on,  Inc. 51
•IBM
 Learn  More
Read  Peter  Morville’s  book  “Search  Patterns”
h\p://searchpa\erns.org/
Read  my  article  “The  Scent  of  Search”
h\p://johnnyholland.org/2010/07/05/the-­‐scent-­‐of-­‐search/

Read  Marti  Hearst’s  book  “Search  User  Interfaces”

h\p://johnnyholland.org/2010/07/05/the-­‐scent-­‐of-­‐search/

Check  out  Endeca’s  design  pattern  library

h\p://searchuserinterfaces.com/

Follow  TwigKit’s  blog,  “The  Dao  of  Search”

h\p://blog.twigkit.com/

©  2010 Lucid  Imagina,on,  Inc. 52

 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