User Experience: What Is It & Why Is It Important?

A basic overview of elements of user experience developed for a company lunch and learn given not long after I joined the profession in 2010.

Transcript

2. User Experience! What  is  it  and  why  is  it  important?  
3. A  Defini(on   “User  experience"  encompasses  all  aspects  of  the   end-­‐user's  interac<on  with  the  company,  its   services,  and  its  products...  True  user  experience   goes  far  beyond  giving  customers  what  they  say   they  want…  to  achieve  high-­‐quality  user  experience   in  a  company's  offerings  there  must  be  a  seamless   merging  of  the  services  of  mul<ple  disciplines,   including  engineering,  marke<ng,  graphical  and   industrial  design,  and  interface  design.       Nielson  Norman  Group  
4. A  Defini(on   "User  experience"  simply  refers  to  the  way  a   product  behaves  and  is  used  in  the  real  world.  A   posi<ve  user  experience  is  one  in  which  the  goals   of  both  the  user  and  the  organiza<on  that   created  the  product  are  met.   Jesse  James  Garre4  
5. A  Defini(on   We're  in  the  experience  business.   User  experience.  We  create  things   that  people  use.     Jesse  James  Garre4   IA  Summit  2009  
6. A  Defini(on   UX  is  about  ending  suffering  in   regards  to  technology.     Zachary  Spencer  
7. The Elements of User Experience A basic duality: The Web was originally conceived as a hypertextual information space; but the development of increasingly sophisticated front- and back-end technologies has fostered its use as a remote software interface. This dual nature has led to much confusion, as user experience practitioners have attempted to adapt their terminology to cases beyond the scope of its original application. The goal of this document is to define some of these terms within their appropriate contexts, and to clarify the underlying relationships among these various elements. Jesse James Garrett jjg@jjg.net Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel") Information Architecture: structural design of the information space to facilitate intuitive access to content Interaction Design: development of application flows to facilitate user tasks, defining how the user interacts with site functionality Navigation Design: design of interface elements to facilitate the user's movement through the information architecture Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Functional Specifications: "feature set": detailed descriptions of functionality the site must include in order to meet user needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site Content Requirements: definition of content elements required in the site in order to meet user needs Interface Design: as in traditional HCI: design of interface elements to facilitate user interaction with functionality Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Web as software interface Web as hypertext system Visual Design: visual treatment of text, graphic page elements and navigational components Concrete Abstract time Conception Completion Functional Specifications Content Requirements Interaction Design Information Architecture Visual Design Information Design Interface Design Navigation Design Site Objectives User Needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development) that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today. task-oriented information-oriented 30 March 2000 © 2000 Jesse James Garrett http://www.jjg.net/ia/
8. Breaking  It  Down   Interac(on  Design:  defining  how  the  system   behaves  in  response  to  the  user  
9. Breaking  It  Down   Informa<on  Architecture   The  arrangement  of  content  elements  within  the   informa(on  space  
10. The Elements of User Experience A basic duality: The Web was originally conceived as a hypertextual information space; but the development of increasingly sophisticated front- and back-end technologies has fostered its use as a remote software interface. This dual nature has led to much confusion, as user experience practitioners have attempted to adapt their terminology to cases beyond the scope of its original application. The goal of this document is to define some of these terms within their appropriate contexts, and to clarify the underlying relationships among these various elements. Jesse James Garrett jjg@jjg.net Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel") Information Architecture: structural design of the information space to facilitate intuitive access to content Interaction Design: development of application flows to facilitate user tasks, defining how the user interacts with site functionality Navigation Design: design of interface elements to facilitate the user's movement through the information architecture Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Functional Specifications: "feature set": detailed descriptions of functionality the site must include in order to meet user needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site Content Requirements: definition of content elements required in the site in order to meet user needs Interface Design: as in traditional HCI: design of interface elements to facilitate user interaction with functionality Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Web as software interface Web as hypertext system Visual Design: visual treatment of text, graphic page elements and navigational components Concrete Abstract time Conception Completion Functional Specifications Content Requirements Interaction Design Information Architecture Visual Design Information Design Interface Design Navigation Design Site Objectives User Needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development) that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today. task-oriented information-oriented 30 March 2000 © 2000 Jesse James Garrett http://www.jjg.net/ia/
11. Breaking  It  Down   Informa<on  Design   The  presenta(on  of  the  informa(on  in  a  way  that   facilitates  understanding  
12. Breaking  It  Down   Interface  Design   Arranging  the  interface  elements  to  enable  users  to   interact  with  the  func(onality  of  the  system  
13. Breaking  It  Down   Naviga<on  Design   The  set  of  screen  elements  that  allow  the  user  to  move   through  the  informa(on  architecture   Reports Manage Users My Account Filter Settings Partners My Reports Manage Users My Account Filter Settings Partners Partners Partners Partners Reports Manage Users My Account Filter Settings Reports Manage Users My Account Filter Settings Reports Manage Users My Account Filter Settings Reports Manage Users Filter Settings Partners My Account My Account My Account My Account Contact Preferences | Billing Information | Uninstall Password Report Settings | View Reports | Score Change Add User | Remove User | Edit Users Settings & Overrides | Programs & Protocols | Time Controls My Partners | Add a Partner
14. The Elements of User Experience A basic duality: The Web was originally conceived as a hypertextual information space; but the development of increasingly sophisticated front- and back-end technologies has fostered its use as a remote software interface. This dual nature has led to much confusion, as user experience practitioners have attempted to adapt their terminology to cases beyond the scope of its original application. The goal of this document is to define some of these terms within their appropriate contexts, and to clarify the underlying relationships among these various elements. Jesse James Garrett jjg@jjg.net Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel") Information Architecture: structural design of the information space to facilitate intuitive access to content Interaction Design: development of application flows to facilitate user tasks, defining how the user interacts with site functionality Navigation Design: design of interface elements to facilitate the user's movement through the information architecture Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Functional Specifications: "feature set": detailed descriptions of functionality the site must include in order to meet user needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site Content Requirements: definition of content elements required in the site in order to meet user needs Interface Design: as in traditional HCI: design of interface elements to facilitate user interaction with functionality Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Web as software interface Web as hypertext system Visual Design: visual treatment of text, graphic page elements and navigational components Concrete Abstract time Conception Completion Functional Specifications Content Requirements Interaction Design Information Architecture Visual Design Information Design Interface Design Navigation Design Site Objectives User Needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development) that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today. task-oriented information-oriented 30 March 2000 © 2000 Jesse James Garrett http://www.jjg.net/ia/
15. Breaking  It  Down   Visual  Design   The  look  of  the  finished  product  
16. Beyond  the  Graphs   Whether  we  realize  it  or  not  our  past   experiences  influence  our  expecta(ons  and   reac(ons  as  we  interact  with  our  environments.   Some(mes  this  is  to  our  benefit,  but  others…   h4p://www.youtube.com/watch?v=wzRziK-­‐kZtQ  
17. User  Research  &  Personas   Understanding  who  our  users  are  is  essen(al  to   understanding  what  their  needs  will  be.  One   way  of  doing  this  is  by  gathering  informa(on  on   our  users  and  crea(ng  personas.     Personas  are  fic(onal  representa(ons  of  our   users  based  upon  user  research  to  make  our   actual  users  and  their  needs  more  tangible.  
18. Demographics   The  age,  gender,  educa(on   level,  marital  status,  income,   etc.  of  our  users.   Psychographic  Profiles   The  a\tudes  and  percep(ons   that  users  have  about  the   world  including  technology  .   Market  Research   Gathering  informa(on  from   surveys,  interviews  and  focus   groups.   Contextual  Inquiry   Studying  how  users  interact  in   their  everyday  lives.   Task  Analysis   Studying  the  precise  steps  that   customers  go  through  in  order   to  complete  tasks  on  the  web.  
19. Eileen  Murray   Age:  28   Occupa@on:  Adver(sing   Family:  Single   Tech  Savvy:  moderate  to  high   Internet  Use:  e-­‐mail,  news,  shopping,  social   media,  regular  media  (radio/tv)   CE  Use:  Accountability   As  a  youth  leader  at  her  church  Eileen  wants  to   provide  a  good  example  for  the  teens  she  works   with  so  she  signed  up  for  Covenant  Eyes  with  her   best  friend  to  show  them  how  important  internet   integrity  is.    
20. Usability  Tes(ng   The  goal  of  usability  tes(ng  is  to  get  actual  user  feedback  while  our  product  is  s(ll  in   the  development  process  and  we  can  fix  the  problems  that  arise.  It  is  also  a  way  of   iden(fying  current  issues  so  they  can  be  fixed.  
21. User  Story  Cards   User  story  cards  are  a  part  of  Agile  Socware  Development.    They  lay  out  the  changes,   tasks  and  features  to  be  worked  on  for  the  web  page.     As  an  accountability  user  I  would  like  to  get  feedback  when  I   request  a  partner  so  that  I  know  the  informa(on  has  been   processed  and  I  don’t  duplicate  my  request.   These  cards  can  come  out  of  any  of  the  forms  of  user  research  as  well  as  personal   interac(ons  with  the  website,  bug  no(fica(ons,  customer  service  calls,  etc.  
22. Prototyping   Prototyping  is  a  visualiza(on  of  poten(al  changes  to  the  web  pages  or  new  web  pages   in  development.  There  are  several  formats  prototyping  can  be  done  in.     Sketching  
23. Prototyping   Prototyping  is  a  visualiza(on  of  poten(al  changes  to  the  web  pages  or  new  web  pages   in  development.  There  are  several  formats  prototyping  can  be  done  in.     Sketching   Wireframes   My Partner's Name My Partner's Email Full Name Email Username At least 4 alphanumeric characters Password At least 6 alphanumeric characters with at least 1 letter and number Covenant Eyes Header Sign-up with Super Fantastic Organization Covenant Eyes Account Learn more about Covenant Eyes First Name I'd like to receive the Covenant Eyes e-newsletter User Agreement Finish Last Name I'll add another partner later First Name Last Name My Information My Accountability Partner's Information An Accountability Partner should be someone... ... you talk to regularly in real (offline) life ... you can trust to be confidential ... who won't jump to conclusions more Covenant Eyes Header Congratulations! Welcome to Covenant Eyes, <first name>. You have been added to the Super Fantastic Organization Covenant Eyes account. You will receive an email shortly with more information on using our software. Accountability Partners • Dr. Jacob Hood (assigned) • John Smith has been emailed an invitation to be your Accountability Partner Getting Started with Covenant Eyes Download and Install Covenant Eyes software Dr. Jacob Hood has been assigned as your Accountability Partner. Covenant Eyes is a tool to encourage accountability and trust in the fight against internet temptation.
24. Prototyping   Prototyping  is  a  visualiza(on  of  poten(al  changes  to  the  web  pages  or  new  web  pages   in  development.  There  are  several  formats  prototyping  can  be  done  in.     Sketching   Wireframes   High  Def  
25. Card  Sor(ng   Card  sor(ng  is  an  explora(on  in  categoriza(on  during   which  a  user  takes  a  pile  of  index  cards  with   informa(on  wri4en  on  them  and  sorts  them  into  the   groups  or  categories  that  seem  most  natural  to  them.   Comparing  the  results  of  card  sorts  from  several   different  users  gives  insight  into  the  best  way  to   intui(vely  arrange  site  informa(on.  
26. An  Issue  of  Usability   User  experience  is  about  feeling.      How  do  I  feel  as  I  go  from  Point  A  to  Point  B?   Usable  happiness  is  a  product  that  is  simple  to  use,  and  makes  you  smile  every   <me  you  use  it.     Thomas  Baekdal   Usability  is  about  func(onality.     Can  I  get  from  Point  A  to  Point  B  easily?  
27. What  does  it  have  to  do  with  me?   Building  Bridges   The  Big  Picture   Problem  Iden(fica(on   Consistency  Guardians  
28. The  Benefits   •   Builds  customer  loyalty   •   Saves  (me  and  money   •   A4racts  new  customers   •   Reduces  customer  service  calls   •   Keeps  products  viable  
29. User  Experience  Honeycomb  
30. Ques(ons?