What  is  Usability?  Making  something  USEFUL  and  EASY  TO  USE  

How  is  Usability  Determined?  1.   Learnability  –  how  easy  to  use?    Need  instruc@ons?  2.   Efficiency  –  how  many  steps  to  accomplish  the  task?  3.   Memorability  –  how  easy  to  remember  how  to  use?  4.   Errors  –  how  many  mistakes  are  made?    How  oEen  

happen?    How  serious?  Can  the  user  recover?  5.   SaBsfacBon  –  how  do  people  feel  aEer  using  the  

product?    Greatly  influenced  by  1-­‐4.    People  like  things  they  are  good  at.  

         If  something  needs  instruc1ons,  there  is  a  problem.    

Why  Focus  on  Usability?  When  on  the  web,  users  are  TASK  ORIENTED.  They  want  to:  •  Find  the  answer  to  their  ques@on  •  Buy  something  

Does  your  website  help  them  achieve  their  goals?  

Your  “perfect  client”  may  miss  something  on  your  website  in  plain  site  because  they  are  focused  on  their  TASK.  

InaGenBonal  blindness  

Are  you  uninten1onally  hiding  important  informa1on  on  your  website?  

1.  Sensory  memory  –  lasts  1  second  2.  Short  term  memory  –  lasts  1  sec  to  1  min  3.  long  term  memory  –  longer  than  1  min  (need  

to  rehearse  to  remember)  

Do  NOT  Rely  on  Web  Visitor’s  Memories!  

Deliver  informa1on  in  chunks,  so  when  visitors  get  distracted  they  can  easily  re-­‐engage  when  they  return!  

Users  should  never  have  to  ask  these  ques@ons:  

•  Where  do  I  start?      •  Why  did  they  call  it  that?    •  Can  I  click  on  that?    •  Where  is  the  naviga@on?    

 BE  DIRECT!        Don’t  force  people  to  infer  what  they  want.          Users  get  frustrated  by  was9ng  9me!  

Embrace  the  Obvious  

Shorter  forms  can  increase    conversion  by  160%    

Usability  Can  Improve  CONVERSION  

Forms:  Power  of  Persuasion  

Consider  Reward  vs.  Reciprocity  

•  Reward  condiBon:  users  asked  to  complete  form  before  receiving  informa@on  

•  Reciprocity  condiBon:  users  see  guidelines  first  and  then  asked  to  provide  contact  informa@on  

Result:  Users  are  two  9mes  as  likely  to  complete  process  with  reciprocity  

Second  Chance  Forms  •  Request  the  MINIMUM  amount  of  informa@on  

first  (name,  email  address)  •  Provide  the  informa@on  promised  –  then  make  

a  more  compelling  offer  to  get  addi@onal  informa@on  from  the  user  (mailing  address,  phone  number)  

 Give  the  User  Value  to      Get  More  Informa1on  

1.  Show  visited  links  as  a  different  color    

2.  To  compare  different  items  without  memorizing  –  use  tables  

3.  Horizontal  lines  discourage  scrolling  4.  Open  PDFs  in  new  browser  window    5.  Don’t  break  the  “back”  budon:  

•  Power  users  know  to  open  new  tabs  on  their  own.      

•  Open  in  the  same  tab  /  window  even  for  external  sites  

Follow  Website  Standards  

You  are  trying  to  win  your  web  visitor’s  trust.  Don’t  throw  it  away  with  radically  different  designs  for  different  sec@ons  of  your  website!  

Branding:  Consistency  MaGers  

What  is  fun  for  you  (“ohh  I  am  sooo  crea1ve!”)  may  be  frustraBng  for  your  users  (“is  this  the  same  

website???”)  

The  Elusive  Website  FOLD  Forget  “Above  the  Fold!”  •  Different  size  monitors;  

have  the  “fold”  in  different  places  

•  With  phablets,  laplet,  tabtop,  giant  screens,  @ny  screens,  mobile  –  there  is  no  universal  fold  placement.  

 Don’t  Forget!  Important  items  s9ll  go  near  the  top.  

                 has  popularized  “infinite  scrolling”:    •  Allows  for  con@nuous  absorp@on  of  content  •  Doesn’t  interrupt  user  flow;  eliminates  the  

need  to  click  “next  page”  

Usability  and  Infinite  Scrolling  

•  Works  best  with  images  •  Con:  no  permanent  links  

to  appended  pages  •  Con:  some  users  like  

footers  for  naviga@on  

Usability,  Scrolling  and  Footers  •  Infinite  scrolling  misses  out  on  footers  •  Footers  give  a  visual  clue  that  the  page  is  fully  

loaded  •  Footers  provide  helpful  naviga@on  

 Infinite  Scrolling  /  Footer  Compromise:  Allow  users  to  choose  to  load  more  content.    Enables  them  to  access  the  footer,  where  they  might  look  for  important  informa9on.  

Test  Your  Site  Good  usability  is  a  compe@@ve  advantage:  •  User  saBsfacBon  –  their  ques@ons  are  

answered  •  Increased  trust  –  you  understand  them  •  Increased  traffic  –  tell  others;  Google  rewards  

your  site  with  higher  placement  on  search  results  

 Test  compe1tor’s  sites  –  learn  from  their  mistakes!  

Look  at  your  analy@cs  to  decide  what  to  test  first:  •  Pages  with  a  high  exit  rate  •  High  bounce  rate  pages  •  High-­‐traffic  pages  with  low  conversion?  

If  you  solve  the  wrong  problem,  it  doesn’t  maGer  how  you  solve  it.  

 Remember:  you  are  not  the  user!    Don’t  assume  you  know  what  your  users  want.  

How  Do  You  Know  What  to  Test?  

Who  Are  Your  Users?  •  New  or  returning  •  Novice  or  advanced  •  Age  •  Gender  •  Specializa@ons/jobs  •  Online  habits  and  experience  •  Interests  or  ac@vi@es    Define  your  “Perfect  Client”  to  target  the  right  

users  for  your  website.  

How  Many  Users  to  Test?  •  4-­‐5  users  can  find  most  of  the  problems  (85%  

of  the  issues)  •  They’ll  find  the  biggest,  most  common  issues    •  You  can  use  more  than  5,  however  more  users  

means  diminishing  returns  •  Best  to  test  with  5,  fix  the  issues  and  re-­‐test  

How  To  Conduct  User  TesBng  Prepare  users  that  you  want  to  know  their  thoughts  –  “I  want  to  make  this  interface  beJer.    You  won’t  offend  me.    If  you  have  sugges9ons  please  let  me  know.    It’s  beJer  if  you  tell  me  the  nega9ve  and  the  posi9ve.”  

 REMEMBER:  people  try  harder  in  a  tes9ng  experience  because  they  don’t  want  to  disappoint  you.    Ask  them  when  they  would  have  stopped  if  you  weren’t  there.  

Test  one  user  at  a  @me  and  sit  with  them:    •  Observe  only!  Don’t  influence  the  user  •  Don’t  interrupt  and  sit  out  of  line  of  site  •  Make  recordings  to  review  later  •  Ask  user  to  think  out  loud  as  they  test:  •  What  are  you  thinking?  •  Does  it  seem  easy  or  difficult?  •  Speak  up  if  you  have  ques@ons!  

•  If  users  ask  ques@ons,  turn  it  around  and  ask  “what  do  you  think  is  the  right  way?”  

How  To  Conduct  User  TesBng  (cont’d)  

Content  Usability  –  Understand  Users  •  There  are  three  types  of  readers:  •  Normal  •  Speed  •  Skimmers  

•  At  least  79%  of  users  scan  text  •  People  read  25%  slower  onscreen  than  paper    •  Only  28%  of  the  words  are  read  •  Users  skip  text  they  think  is  less  interes@ng  or  

not  relevant  

Make  Content  Easy  to  Read  •  Users  look  for  signposts  to  “interes@ng”  content:  

  Headings    Links    Bolded  words    Lists  

•  Headers:  22-­‐23-­‐28  pt  font  to  break  up  content      •  ALL  CAPS  IS  HARD  TO  READ  DON’T  YELL!  •  Front-­‐load  sentences  &  paragraphs  for  skimmers  

 Good  typography  makes  content  easier  to  consume!  

Audit  Your  Content  1.  What  content  do  you  have  now?  2.  How  is  the  content  organized?  3.  Who  creates  the  content?  4.  Is  the  content  effec@ve?  5.  Can  the  content  be  found?  (SEO  principles)  6.  Is  the  content  structured  with  metadata?  

   Be  courageous  with  content!  Ruthlessly  cut  informa9on  from  your  pages  and  include  only  the  MOST  important  items!  

Use  Content  to  Build  Trust  •  Add  detailed  Case  Studies  to  show  users  

you  have  handled  cases  like  theirs  •  Add  TesBmonials  to  show  that  other  

people  trust  you  •  Online  Reviews  confirm  a  budding  feeling  

of  trust  –  invest  in  a    review  strategy  

 Build  trust  with  content  that  resonates  with  your  users  and  shows  you  understand  their  pain  

•  Only  design  and  build  one  website  that  can  flex  for  various  types  of  devices  (desktop,  tablet,  mobile)  

•  Responsive  sites  priori@ze  how  content  and  site  elements  display  on  different  size  screens  

•  Our  sites  have  20-­‐50%  traffic  from  mobile  •  Tablet  traffic  accounts  for  2-­‐10%  of  visits  •  Mobile  traffic  spikes  on  weekends  when  

people  are  away  from  their  desks  

NEW:  Responsive  Designs  

NEW:  Carousels  •  Carousels  showcase  a  set  of  content  when  

there  is  a  limited  amount  of  space.  •  Examples:  

  Book  /  offer  carousels    Video  carousels    Badge  carousels    Tes@monial  carousels  

•  Avoid  carousel  overload!  

NEW:  Toast  •  Toast  is  a  way  to  display  related  content  when  

you  scroll  to  a  specified  XY  site  coordinate  on  •  Allows  you  to  show  relevant  content  to  a  user  

based  on  where  on  your  site  they  pause  to  engage.  

Further  Reading  

•  “Don't  Make  Me  Think:  A  Common  Sense  Approach  to  Web  Usability”  by  Steve  Krug    

•  www.Useit.com    •  www.boxesandarrows.com  for  usability  topics  •  www.whatmakesthemclick.net  for  100  things  

you  should  know  about  people  

QuesBons?