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  paerns)
          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”
hp://searchpaerns.org/
Read  my  article  “The  Scent  of  Search”
hp://johnnyholland.org/2010/07/05/the-­‐scent-­‐of-­‐search/

Read  Marti  Hearst’s  book  “Search  User  Interfaces”
hp://johnnyholland.org/2010/07/05/the-­‐scent-­‐of-­‐search/

Check  out  Endeca’s  design  pattern  library
hp://searchuserinterfaces.com/

Follow  TwigKit’s  blog,  “The  Dao  of  Search”
hp://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

Discover the new techniques about search application

  • 1.
    Findability:  Designing the  Search Experience Tyler  Tate,  TwigKit Wednesday,  August  18,  2010
  • 2.
    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
  • 3.
    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
  • 4.
    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
  • 5.
    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
  • 6.
    How  do  people search? ©  2010 Lucid  Imagina,on,  Inc. 6
  • 7.
    Experts  vs.  Amateurs People  vary  be  their... Search  exper=se  (familiarity  with  common  design  paerns) 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
  • 8.
    ©  2010 Lucid  Imagina,on,  Inc. 8
  • 9.
    ©  2010 Lucid  Imagina,on,  Inc. 9
  • 10.
    Experts  vs.  Amateurs looking  up  a  fact reading  a  scien=fic  journal Exper,se ©  2010 Lucid  Imagina,on,  Inc. 10
  • 11.
    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
  • 12.
    ©  2010 Lucid  Imagina,on,  Inc. 12
  • 13.
    ©  2010 Lucid  Imagina,on,  Inc. 13
  • 14.
    ©  2010 Lucid  Imagina,on,  Inc. 14
  • 15.
    Specific  vs.  Open-­‐ended Tasks looking  up  a  fact booking  a  flight Task  Specificity ©  2010 Lucid  Imagina,on,  Inc. 15
  • 16.
    Exper,se  &  Task Specificity Exper,se Task  Specificity ©  2010 Lucid  Imagina,on,  Inc. 16
  • 17.
    ©  2010 Lucid  Imagina,on,  Inc. •Concept  screen  by  IDEO 17
  • 18.
    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
  • 19.
    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
  • 20.
    ©  2010 Lucid  Imagina,on,  Inc. 20
  • 21.
    ©  2010 Lucid  Imagina,on,  Inc. 21
  • 22.
    ©  2010 Lucid  Imagina,on,  Inc. 22
  • 23.
    ©  2010 Lucid  Imagina,on,  Inc. 23
  • 24.
    ©  2010 Lucid  Imagina,on,  Inc. 24
  • 25.
    ©  2010 Lucid  Imagina,on,  Inc. 25
  • 26.
    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
  • 27.
    ©  2010 Lucid  Imagina,on,  Inc. 27
  • 28.
    ©  2010 Lucid  Imagina,on,  Inc. 28
  • 29.
    Immediate  vs.  Itera,ve Illustra,on  by  Marcia  Bates ©  2010 Lucid  Imagina,on,  Inc. 29
  • 30.
    How  can  we design  for  findability? ©  2010 Lucid  Imagina,on,  Inc. 30
  • 31.
    The  Searchbox ©  2010 Lucid  Imagina,on,  Inc. 31
  • 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. 32
  • 33.
    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
  • 34.
    2.  Provide  as-­‐you-­‐type sugges,ons Reduces  spelling  errors Boosts  users’  confidence Globrix,  eBay,  Last.fm ©  2010 Lucid  Imagina,on,  Inc. 34
  • 35.
    Search  Results ©  2010 Lucid  Imagina,on,  Inc. 35
  • 36.
    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
  • 37.
    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
  • 38.
    ©  2010 Lucid  Imagina,on,  Inc. 38
  • 39.
    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
  • 40.
    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
  • 41.
    Faceted  Naviga,on ©  2010 Lucid  Imagina,on,  Inc. 41
  • 42.
    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
  • 43.
    8.  Make  metadata clickable Clickable  metadata  enables  organic  filtering  of  the  results ©  2010 Lucid  Imagina,on,  Inc. 43
  • 44.
    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
  • 45.
    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
  • 46.
    10.  Use  meaningful facet  visualisations A  meaningful  visualisation  makes  complex  information  tangible ©  2010 Lucid  Imagina,on,  Inc. 46
  • 47.
    10.  Use  meaningful facet  visualisations A  meaningful  visualisation  makes  complex  information  tangible TED ©  2010 Lucid  Imagina,on,  Inc. 47
  • 48.
    10.  Use  meaningful facet  visualisations A  meaningful  visualisation  makes  complex  information  tangible Starbucks ©  2010 Lucid  Imagina,on,  Inc. 48
  • 49.
    10.  Use  meaningful facet  visualisations A  meaningful  visualisation  makes  complex  information  tangible New  York  Times ©  2010 Lucid  Imagina,on,  Inc. 49
  • 50.
    10.  Use  meaningful facet  visualisations A  meaningful  visualisation  makes  complex  information  tangible ©  2010 Lucid  Imagina,on,  Inc. 50
  • 51.
    ©  2010 Lucid  Imagina,on,  Inc. 51 •IBM
  • 52.
    Learn  More Read  Peter Morville’s  book  “Search  Patterns” hp://searchpaerns.org/ Read  my  article  “The  Scent  of  Search” hp://johnnyholland.org/2010/07/05/the-­‐scent-­‐of-­‐search/ Read  Marti  Hearst’s  book  “Search  User  Interfaces” hp://johnnyholland.org/2010/07/05/the-­‐scent-­‐of-­‐search/ Check  out  Endeca’s  design  pattern  library hp://searchuserinterfaces.com/ Follow  TwigKit’s  blog,  “The  Dao  of  Search” hp://blog.twigkit.com/ ©  2010 Lucid  Imagina,on,  Inc. 52
  • 53.
    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