User-­‐centered  design  

CS/INFO  1300   Introductory  Design  and  Programming   for  the  Web  

Business  MaDers  
•  •  •  •  •  Have  you  registered  on  info130.cs.cornell.edu?     Do  you  know  how  to  submit  your  homework?   Lectures,  syllabus  and  readings  are  on  the  web  site   Weekly  structure:  interleave  design  and  technology   New  Head  Grading  TA:  Xiying  Wang  
–  Shion  Guha  is  transiSoning  out  

•  Make  use  of  Forums   •  My  office  hours  this  week:  by  appointment  only  

Where  we  are  so  far  
All  sites  have  good  and  bad  points.   How  can  you  maximize  the   goodness  of  your  design?  

User-­‐centered  design  
a.k.a.  how  to  make  a  page  people  really  love  

Design  your  page  with  your  user s  eyes.  
This  is  harder  than  it  sounds.  

Today:  Test  site   Stelarc.  Australian  performance  arSst   Pushing  limits  of  bodies  vs.  machines   Site  for  "Exoskeleton"   .

  2.  4.  Iden5fy  audience   Define  theme   Extend  theme  to  metaphors   Organize  site  informaSon   Construct  and  test  mock-­‐ ups   6.  IteraSvely  build  &  test  site   .Steps  to  user-­‐centered  design   1.  3.  Develop  site  navigaSon   7.  5.

IdenSfy  audience   Who  are  you  designing  for?   .

IdenSfy  audience   Who  are  you  designing  for?   –  Hint:  not  everyone   Why  would  they  come  to  the  site?   What  will  they  do  when  they  get  there?   .

 fleshed-­‐out  individual  you  are   designing  the  site  for   Define  what  the  person  is  like.  what  kind  of  personality   they  have.Persona   A  persona  is  a  concrete.  what  they  want  from  the  site.  how  they  use  it   2-­‐4  diverse  personas  guide  design  process   .

Persona  1:  Rod   .

Persona  2:  Teenage  gamer   .

Persona  3:  Janet   •  Who  is  she?   •  What  is  she  like?   •  Why  does  she  go  to  the  site?   •  When?   •  Does  she  spend  a  long  Sme  or  a  short  Sme?   •  Etc.   .

  Ask  them  about  content:   Why  are  you  interested  in  this  topic?   Who  do  you  talk  to  about  it?   Where  do  you  go  for  informaSon  now?   Ask  them  about  web-­‐related  experiences:   What  related  sites  do  you  go  to  now?   What  are  you  doing  when  you  go  to  the  sites?   What  informaSon  do  you  have  a  hard  Sme  finding?   "Is  there  anything  else  you  would  like  to  tell  me?"   .Talk  to  some  users!   Find  some  people  resembling  your  persona.

  Construct  and  test  mock-­‐ups   6.  Extend  theme  to  consistent  design   metaphors   4.  IdenSfy  audience   2.  Organize  site  informaSon   5.  IteraSvely  build  &  test  site   .  Define  theme   3.Steps  to  user-­‐centered  design   1.  Develop  site  navigaSon   7.

Clean  themes   Tell  me.   .  what  you  want  to   communicate     Users  won t  remember  much  more…   Keep  this  your  focus.  in  one  sentence.

THEME?   .

  Organize  site  informaSon   5.Steps  to  user-­‐centered  design   1.  Extend  theme  to  consistent  design   metaphors   4.  IteraSvely  build  &  test  site   .  Define  theme   3.  Construct  and  test  mock-­‐ups   6.  IdenSfy  audience   2.  Develop  site  navigaSon   7.

http://kids.uk/ .tate.org.

  3.  2.  6.Steps  to  user-­‐centered  design   1.  7.  4.  IdenSfy  audience   Define  theme   Extend  theme  to  metaphors   Organize  site  informa5on   Construct  and  test  mock-­‐ups   Develop  site  navigaSon   IteraSvely  build  &  test  site   .  5.

  Try  out  different  organizaSon  schemes   .  Organize  that  informaSon  into  categories.   2.  IdenSfy  informaSon  that  should  be  on  site.InformaSon  Architecture   Based  on  personas/scenarios:   1.

  Take  3  slips  of  paper.  write  one  kind  of  informaSon  that  one  of  the  personas  wants  on  the  site.    On  each.   .Let s  try  it…   1.

  Form  groups  of  3-­‐4.   2.Let s  try  it…   1.  Take  3  slips  of  paper.    Combine  your  slips  and  sort  them  into  an  organizaSon  scheme.  write  one  kind  of  informaSon  that  one  of  the  personas  wants  on  the  site.   .    On  each.

  IdenSfy  audience   Define  theme   Extend  theme  to  metaphors   Organize  site  informaSon   Construct  and  test  mock-­‐ups   Develop  site  navigaSon   IteraSvely  build  &  test  site   .  3.  6.  5.  7.  2.Steps  to  user-­‐centered  design   1.  4.

net/paper-­‐web/)   .Storyboards   (hDp://deeplinking.

Create  a  Simple  “Walk  through”  of  An  Early   Idea   IdenSfy  a  handful  of  users  in  your  target  audience.   Ask  them  quesSons  and  record  their  impressions  in   person  as  you  walk  them  through  annotated   sketches  of  a  UI   .

  Evaluate  which  are  central   to  your  new  design.   –  Ignore  the  extraneous  –   carefully.   .Organize  your  user  input   Collate  your  user s   responses.

  4.Steps  to  user-­‐centered  design   1.  IdenSfy  audience   Define  theme   Extend  theme  to  metaphors   Organize  site  informaSon   Construct  and  test  mock-­‐ups   Develop  site  naviga5on   IteraSvely  build  &  test  site   .  5.  6.  7.  3.  2.

  .Develop  navigaSon  structure   InformaSon  organized?   Figure  out  where  to  put  it  on  the  site  so  users  can   find  it.   We ll  talk  more  about  this  in  two  weeks.

  6.Steps  to  user-­‐centered  design   1.  2.  IdenSfy  audience   Define  theme   Extend  theme  to  metaphors   Construct  and  test  mock-­‐ups   Organize  site  informaSon   Develop  site  navigaSon   Itera5vely  build  &  test  site   .  7.  3.  4.  5.

Some  truths  about  site  design…   .

Your  site  never  works  the  way   you  think  it  does   .

Users  never  see  it  the  way  you  do   .

The  things  YOU  think  need  fixing   may  not  bother  users   .

The  things  you  think  are  fine  may  be   insurmountable  barriers   .

You  MUST  user  test   .

You  MUST  user  test   Users  don’t  share  your   mental  model   Your  common  sense  is  misleading   TesSng  can  reveal   –  That  that  hard-­‐to-­‐implement  feature  is   unnecessary  (whoopee!)   –  Simple  soluSons  that  substanSally  improve  your   site   .

 test  open   IteraSve  design   Tests  can  be  on  prototypes  /  draps   Including  paper  draps!   .Tips  for  tesSng   Test  early.

Review:   Steps  to  user-­‐centered  design   1.  IdenSfy  audience   Define  theme   Extend  theme  to  metaphors   Organize  site  informaSon   Construct  and  test  mock-­‐ups   Develop  site  navigaSon   IteraSvely  build  &  test  site   .  7.  5.  4.  2.  3.  6.

QuesSons?   .

 go  to  office  hours  to  find  out  how  to  submit   .Wrap-­‐up   •  Wednesday:  WriSng  XHTML  pages   •  Homework  0  (site  criSques)  due  tomorrow  at  5pm   •  If  you  missed  secSon.

Sign up to vote on this title
UsefulNot useful