CS  4720  

Usability  and  Accessibility  

CS  4720  –  Web  &  Mobile  Systems    

CS  4720  

What  makes  a  good  interface?  •  Don't  say  “anything  but  SIS.”  • What  are  it's  characterisAcs?  •  How  do  you  just  KNOW  that  you're  using  something  that  has  been  thought  out  properly?  

2

CS  4720  

Not  Just  the  UI  •  The  experience  begins  with  the  first  Ame  you  launch  an  app  or  go  to  a  web  site  

•  There  are  several  components  here  –  IniAal  impression  – User  interface  –  80/20  rule  (someAmes  the  90/10  rule)  – Graphic  design  –  InformaAon  presentaAon  

•  All  of  this  adds  up  to  the  user  experience  (UX)  

3

CS  4720  

10  Rules…  •  10  Rules  to  Mobile  HCI  

4

CS  4720  

EvaluaAng  an  Interface  •  Rule  1:  Visibility  of  system  status  •  The  system  should  always  keep  users  informed  about  what  is  going  on  through  appropriate  feedback  within  reasonable  Ame.  

5

CS  4720  

EvaluaAng  an  Interface  •  Rule  2:  Match  the  system  to  the  real  world  •  The  system  should  follow  real-­‐world  convenAons,  making  informaAon  appear  in  natural  and  logical  order.  

6

CS  4720  

EvaluaAng  an  Interface  •  Rule  3:  The  “uh-­‐oh”  bueon  •  Users  ofen  choose  system  funcAons  by  mistake  (parAcularly  on  mobile)  and  will  need  a  clearly  marked  “emergency  exit”  to  leave  the  unwanted  state  without  having  to  go  through  extended  steps.  

•  Systems  should  support  undo  and  redo.  

7

CS  4720  

EvaluaAng  an  Interface  •  Rule  4:  Consistency  and  standards  •  User  should  not  have  to  wonder  whether  different  words,  situaAons,  or  acAons  mean  the  same  thing.  

•  The  system  should  follow  plahorm  convenAons.  

8

CS  4720  

EvaluaAng  an  Interface  •  Rule  5:  Error  prevenAon  •  Add  input  checks  

– How  many  digits  in  that  phone  number?  – How  many  digits  in  that  credit  card  number?  – Are  there  really  39  days  in  July?  

9

CS  4720  

EvaluaAng  an  Interface  •  Rule  6:  RecogniAon  rather  than  recall  •  An  icon  should  represent  the  acAon  and  should  immediately  recognizable  as  to  what  it  does  

•  Part  of  this  is  following  plahorm  standards,  part  is  being  consistent  in  your  own  applicaAon  

•  An  acAon/swipe/etc  should  be  consistent  across  screens    

10

CS  4720  

EvaluaAng  an  Interface  •  Rule  7:  Flexibility  •  Accelerators,  shortcuts,  etc  (which  are  unseen  by  the  novice  user)  can  speed  up  interacAons  for  the  expert  user  to  such  an  extent  that  the  system  can  cater  to  both  inexperienced  and  experienced  users.  

11

CS  4720  

EvaluaAng  an  Interface  •  Rule  8:  AestheAc  and  minimalist  design  •  Every  extra  unit  of  informaAon  in  a  dialog  competes  with  the  relevant  units  of  informaAon  and  diminishes  their  relaAve  visibility.  

12

CS  4720  

EvaluaAng  an  Interface  •  Rule  9:  Error  explanaAons  •  Error  messages  should  be  expressed  in  plain  language  (NO  CODES),  precisely  indicate  the  problem,  and  construcAvely  suggest  a  soluAon.  

13

CS  4720  

EvaluaAng  an  Interface  •  Rule  10:  Help!  •  Have  reasonable  help  informaAon  available  in  the  app  if  possible.  

14

CS  4720  

The  Ten  Rules  •  1.  Visibility  of  Status  •  2.  System  =  Real  World  •  3.  The  “uh-­‐oh”  bueon  •  4.  Consistency  and  Standards  •  5.  Error  PrevenAon  •  6.  RecogniAon  rather  than  Recall  •  7.  Flexibility  •  8.  Minimalist  Design  •  9.  Error  ExplanaAon  •  10.  Help!  

15

CS  4720  

Phone-­‐Specific  Interface  

16

• We  need  to  separate  two  concerns  here  –  The  Hardware  Interface  –  The  Sofware  Interface  

• What  are  some  specific  hardware  innovaAons  that  we  use  with  cell  phones?  

•  How  do  these  address  the  10  rules?  

CS  4720  

Hardware  Interface  •  Consider  the  following  hardware  innovaAons:  

–  The  click  wheel  –  The  rocker  –  The  track  ball  –  The  home  bueon  

17

CS  4720  

Sofware  Interface  

18

•  Let's  look  at  a  few  interfaces  

CS  4720  

Image  Galleries  

19

CS  4720  

Empty  Lists  

20

CS  4720  

Describing  Places  

21

CS  4720  

Concepts  

22

•  UI's  that  grow  and  shrink  –  Flexible  design  

•  Sofkeys  and  icon  bueons  for  common  tasks  •  PredicAve  text  •  Others?  

CS  4720  

One  Hand  or  Two  Hands?  •  Large,  obvious  bueons  •  Controls  toward  the  center  of  the  screen  so  you  don't  have  to  stretch  

•  Controls  have  space  between  them  if  possible  •  Put  only  needed  items  on  the  screen  •  Eliminate  unnecessary  words  • Make  transiAons  between  states  obvious  •  Apps:  Phone,  Contacts,  Urbanspoon  

23

CS  4720  

One  Hand  or  Two  Hands?  

24

•  TheoreAcally,  the  user  is  not  moving,  so  controls  can  be  more  complex  

•  Stylus  control  •  Keyboard  in  landscape  mode  (sof  or  hard)  • More  informaAon  to  proces  •  Apps:  Amazon,  AllRecipes  

CS  4720  

Rules  of  Thumb  

25

•  Easy  traversals  between  states  •  Audio  sparingly  (remember  –  audio  may  be  turned  off!)  

•  Build  for  the  input  device  (click  wheel,  touch  screen,  stylus)  

•  Provide  shortcuts  when  possible  •  Try  to  use  direct-­‐manipulaAon  widgets  for  input  with  immediate  feedback  

• Menus  must  be  tailored  to  the  device  input  

CS  4720  

Rules  of  Thumb  •  Typing  isn't  easy  –  provide  ways  to  remember  text  

•  Use  contextual  informaAon  whenever  possible  (use  GPS  coords  automaAcally  in  a  Google  search,  have  the  last  contact  up  for  making  a  phone  call,  etc)  

26

CS  4720  

My  UI  works  great  now!  •  But  it  sAll  doesn't  look  “slick!”  •  Simple  is  beauAful  •  Get  a  friend  to  pick  out  the  color  scheme  for  you.    Seriously.  

•  ImitaAon  is  the  greatest  form  of  flaeery  •  If  all  else  fails…  ask  a  graphic  design  student  •  Or  check  the  paeerns:  

–  hep://sixrevisions.com/user-­‐interface/mobile-­‐ui-­‐design-­‐paeerns-­‐inspiraAon/  

27