SlideShare a Scribd company logo
System	
  performance	
  as	
  user	
  
experience	
  catastrophe	
  

best	
  and	
  worst	
  prac.ces	
  for	
  interac.on	
  designers	
  and	
  
programmers	
  

Michael	
  Klein	
  
Interac.on	
  designer,	
  developer	
  and	
  UI	
  connoisseur	
  
	
  
h<p://gplus.to/michaelklein27,	
  h<p://www.linkedin.com/in/michaelklein3,	
  @mischkl	
  
System	
  performance	
  as	
  user	
  
experience	
  catastrophe	
  

best	
  and	
  worst	
  prac.ces	
  for	
  interac.on	
  designers	
  and	
  
programmers	
  

What	
  am	
  I	
  talking	
  about?	
  
What	
  am	
  I	
  talking	
  about?	
  

Let’s	
  take	
  a	
  look	
  at	
  some	
  examples	
  

h<p://www.youtube.com/watch?v=HyA6UXi0v6g	
  
What	
  am	
  I	
  talking	
  about?	
  
	
  

h<p://xkcd.com/612/	
  
What	
  am	
  I	
  talking	
  about?	
  
	
  

h<p://www.youtube.com/watch?v=sxtYxIObjWg	
  
What	
  am	
  I	
  talking	
  about?	
  
	
  

h<p://www.youtube.com/watch?v=nfnM_8JBmmA	
  
What	
  am	
  I	
  talking	
  about?	
  
	
  

h<p://www.youtube.com/watch?v=apN0_NQrC0s	
  
What	
  do	
  all	
  these	
  examples	
  have	
  in	
  common?	
  
	
  
What	
  do	
  all	
  these	
  examples	
  have	
  in	
  common?	
  
	
  
TIME	
  

(aka	
  a	
  temporal	
  sequence	
  of	
  events)	
  
	
  

What’s	
  so	
  special	
  about	
  it?	
  

	
  

(from	
  a	
  user’s	
  perspec>ve)

•  “HCI	
  impedance	
  mismatch”	
  (my	
  phrase)	
  –	
  user’s	
  ac.ons	
  are	
  too	
  
	
  
fast	
  for	
  the	
  system,	
  system’s	
  responses	
  are	
  too	
  slow	
  for	
  the	
  user	
  
•  Without	
  immediate	
  feedback,	
  user	
  error	
  is	
  introduced—they	
  click	
  
bu<ons	
  mul.ple	
  .mes,	
  try	
  to	
  swipe	
  mul.ple	
  .mes,	
  try	
  to	
  close	
  
unresponsive	
  apps	
  even	
  if	
  they	
  are	
  not	
  actually	
  frozen,	
  poten.ally	
  
leading	
  to	
  data	
  loss,	
  etc.	
  
•  When	
  things	
  don’t	
  work	
  smoothly,	
  users	
  are	
  reminded	
  that	
  they	
  
are	
  “using	
  a	
  computer”,	
  sense	
  of	
  magic/fun	
  decreases,	
  sense	
  of	
  
control	
  decreases,	
  frustra.on	
  increases	
  
•  Unresponsive	
  apps	
  violate	
  4	
  of	
  Nielsen’s	
  10	
  usability	
  heuris>cs	
  
(Visibility	
  of	
  system	
  status,	
  match	
  with	
  real	
  world	
  (real	
  objects	
  
don’t	
  stu<er/freeze),	
  user	
  control/freedom,	
  error	
  preven.on.)	
  
TIME	
  

(aka	
  a	
  temporal	
  sequence	
  of	
  events)	
  
	
  

What’s	
  so	
  special	
  about	
  it?	
  

	
  

(from	
  an	
  interac>on	
  designer’s	
  perspec>ve)

	
  
•  Difficult	
  to	
  portray	
  .me-­‐sensi.ve	
  interac.ons	
  in	
  sta>c	
  mockups,	
  
or	
  even	
  in	
  higher-­‐level	
  prototypes	
  
•  Time-­‐based	
  performance	
  characteris.cs	
  are	
  invisible	
  and	
  
unpredictable,	
  which	
  makes	
  it	
  hard	
  to	
  iden.fy	
  them	
  as	
  “features”	
  
or	
  “defects”	
  
•  UI	
  performance	
  considera.ons	
  are	
  largely	
  qualita>ve	
  in	
  nature	
  –	
  
the	
  answer	
  to	
  the	
  ques.on	
  of	
  “what’s	
  good	
  enough?”	
  varies	
  
widely	
  
•  Because	
  of	
  their	
  invisible	
  and	
  qualita.ve	
  nature,	
  UI	
  performance	
  
characteris.cs	
  tend	
  to	
  rate	
  low	
  on	
  the	
  list	
  of	
  managers’	
  and	
  
programmers’	
  priori.es	
  
TIME	
  

(aka	
  a	
  temporal	
  sequence	
  of	
  events)	
  
	
  

What’s	
  so	
  special	
  about	
  it?	
  

	
  

(from	
  a	
  soMware	
  developer’s	
  perspec>ve)

•  Notoriously	
  difficult	
  to	
  handle	
  	
   npredictable	
  .me	
  values	
  in	
  code	
  –
u
event/callback-­‐driven	
  asynchronous	
  programming	
  is	
  easy	
  to	
  screw	
  
up	
  (or	
  is	
  avoided	
  due	
  to	
  fear	
  of	
  complexity,	
  lack	
  of	
  understanding)	
  
•  Race	
  condi.ons	
  
•  Error	
  handling	
  issues	
  
•  “Feedback	
  loops”	
  
•  Execu.ng	
  on	
  UI	
  thread	
  
•  Asynchronous	
  APIs	
  are	
  harder	
  to	
  understand	
  and	
  debug	
  
•  Difficult	
  to	
  pin	
  down	
  sources	
  of	
  performance	
  issues	
  
•  UI	
  toolkit	
  weaknesses	
  (e.g.	
  Flash,	
  HTML5)	
  
•  Difficult	
  to	
  judge	
  real-­‐world	
  performance	
  characteris.cs	
  because	
  
developers’	
  machines	
  tend	
  to	
  be	
  high-­‐spec’d	
  
So	
  what	
  can	
  we	
  do	
  about	
  it?	
  
1.  Acknowledge	
  that	
  UI	
  performance	
  characteris.cs	
  are	
  a	
  key	
  
component	
  of	
  user	
  experience.	
  Designers	
  can’t	
  be	
  sa.sfied	
  with	
  
sta.c	
  mockups	
  alone.	
  Developers	
  can’t	
  be	
  sa.sfied	
  with	
  simply	
  
“looking	
  like”	
  a	
  design.	
  
2.  No	
  “designing	
  it	
  and	
  then	
  dropping	
  it	
  off	
  at	
  the	
  programmers’	
  
feet”.	
  Designers	
  need	
  to	
  work	
  closely	
  with	
  developers	
  and	
  test	
  
itera>ons	
  in	
  >ght	
  cycles—that’s	
  what	
  UCD	
  is	
  all	
  about!	
  
3.  Enough	
  >me	
  needs	
  to	
  be	
  devoted	
  to	
  fine-­‐tuning	
  UI	
  performance.	
  
It	
  should	
  be	
  a	
  key	
  ongoing	
  task	
  for	
  developers	
  and	
  testers,	
  not	
  an	
  
aqerthought.	
  
4.  Programmers	
  need	
  to	
  wrap	
  their	
  heads	
  around	
  asynchronous	
  
APIs	
  and	
  event-­‐driven	
  programming,	
  if	
  they	
  haven’t	
  already.	
  
5.  In	
  cases	
  where	
  performance	
  can’t	
  be	
  directly	
  improved,	
  don’t	
  
keep	
  the	
  user	
  wai>ng	
  –	
  show	
  some	
  kind	
  of	
  progress	
  indica.on,	
  
use	
  cached	
  content	
  liberally,	
  and	
  don’t	
  block	
  the	
  UI	
  (thread)!	
  	
  
Thanks	
  for	
  listening!	
  

and	
  now	
  it’s	
  .me	
  for	
  some	
  Q&A	
  /	
  discussions!	
  

Michael	
  Klein	
  
michaelklein27@gmail.com	
  
h<p://gplus.to/michaelklein27	
  
h<p://www.linkedin.com/in/michaelklein3	
  
@mischkl	
  
Links	
  
Jakob	
  Nielsen,	
  Response	
  Times:	
  The	
  3	
  Important	
  Limits	
  
h<p://www.nngroup.com/ar.cles/response-­‐.mes-­‐3-­‐important-­‐limits/	
  
Jakob	
  Nielsen,	
  Website	
  Response	
  Times	
  
h<p://www.nngroup.com/ar.cles/website-­‐response-­‐.mes/	
  
Steven	
  Seow,	
  Designing	
  and	
  Engineering	
  Time	
  (Book)	
  
h<p://www.engineering.me.com	
  
Steven	
  Seow,	
  User	
  Interface	
  Timing	
  Cheatsheet	
  
h<p://www.stevenseow.com/papers/UI%20Timing%20Cheatsheet.pdf	
  
GNOME	
  Human	
  Interface	
  Guidelines	
  2.2.2,	
  Characteris>cs	
  of	
  Responsive	
  Applica>ons	
  
h<p://developer.gnome.org/hig-­‐book/3.5/feedback-­‐responsiveness.html	
  

More Related Content

PDF
System performance as usability catastrophe
PDF
Designing and implementing responsive, fluid UIs to delight end users
PPTX
EIA2016Nice - User Testing Your Prototype
PPTX
EIA2016Nice - David Lamas. User Testing of Your Prototype
PPTX
EIA2016Nice - David Lamas. Paper prototyping: Why, when & how?
PPTX
Usability testing (1)
PDF
User Interface Prototyping Techniques - High Fidelity Prototyping
PPTX
Hi fi protoype
System performance as usability catastrophe
Designing and implementing responsive, fluid UIs to delight end users
EIA2016Nice - User Testing Your Prototype
EIA2016Nice - David Lamas. User Testing of Your Prototype
EIA2016Nice - David Lamas. Paper prototyping: Why, when & how?
Usability testing (1)
User Interface Prototyping Techniques - High Fidelity Prototyping
Hi fi protoype

What's hot (12)

PPTX
Advanced automated visual testing with Selenium
PDF
Progresywny WordPress
KEY
Tools that help and speed up RWD dev
PDF
Visual Studio Online, productive within 30 minutes
PDF
Preparing for the WebGeek DevCup
PPTX
4 most common mobile app development and design mistakes
PPTX
Question 6
PDF
Lean agileux unconf
PDF
Selenium conference, 2016
PDF
High Fidelity Prototyping
PPTX
Motion design exploring
PDF
The Psychology of User Testing
Advanced automated visual testing with Selenium
Progresywny WordPress
Tools that help and speed up RWD dev
Visual Studio Online, productive within 30 minutes
Preparing for the WebGeek DevCup
4 most common mobile app development and design mistakes
Question 6
Lean agileux unconf
Selenium conference, 2016
High Fidelity Prototyping
Motion design exploring
The Psychology of User Testing
Ad

Viewers also liked (6)

PDF
Resume - June 2015
PDF
e-motion digital creative solutions brief profile
PPTX
Keynote dsf consumerization of it-konstantin
PDF
Хранение файлов: защита, быстродействие, маштабирование
PDF
Виртуализация десктопов глазами Dell
PDF
Легкий переход от виртуализации к частному облаку. Готовые рецепты от Dell и ...
Resume - June 2015
e-motion digital creative solutions brief profile
Keynote dsf consumerization of it-konstantin
Хранение файлов: защита, быстродействие, маштабирование
Виртуализация десктопов глазами Dell
Легкий переход от виртуализации к частному облаку. Готовые рецепты от Dell и ...
Ad

Similar to System performance en-2 (20)

PPTX
User Experience: Why and How
PPTX
Product and UX - are the roles blurring?
PDF
Introduction to UX for Mesiniaga Academy
PDF
What the UX? – Confessions of a Designer
PDF
Generating biggest possible value to the business
PDF
10 Truths to Great Product Experiences
PPTX
The Agile Drupalist - Methodologies & Techniques for Running Effective Drupal...
PDF
UX Work Shop
PDF
UX Workshop
PPTX
You Don't Know C.R.A.P. about UX/UI
PDF
PDF
Failing Fast & Learning Along the Way - Big Design 2013
PDF
Prototyping invision vs axure
PDF
Usable Software Design
PPT
JAX 08 - Agile RCP
PPT
From Website To Webapp Shane Morris
PDF
Ui qa tools
PDF
Lean User Testing Intro
PPTX
Software Quality Assurance: A mind game between you and devil
PPTX
Software Quality Assurance: A mind game between you and devil
User Experience: Why and How
Product and UX - are the roles blurring?
Introduction to UX for Mesiniaga Academy
What the UX? – Confessions of a Designer
Generating biggest possible value to the business
10 Truths to Great Product Experiences
The Agile Drupalist - Methodologies & Techniques for Running Effective Drupal...
UX Work Shop
UX Workshop
You Don't Know C.R.A.P. about UX/UI
Failing Fast & Learning Along the Way - Big Design 2013
Prototyping invision vs axure
Usable Software Design
JAX 08 - Agile RCP
From Website To Webapp Shane Morris
Ui qa tools
Lean User Testing Intro
Software Quality Assurance: A mind game between you and devil
Software Quality Assurance: A mind game between you and devil

Recently uploaded (20)

PPT
business model and some other things that
PPTX
Safety_Pharmacology_Tier2_Edibbbbbbbbbbbbbbbable.pptx
PDF
EVs U-5 ONE SHOT Notes_c49f9e68-5eac-4201-bf86-b314ef5930ba.pdf
PDF
MAGNET STORY- Coaster Sequence (Rough Version 2).pdf
DOCX
Lambutchi Calin Claudiu had a discussion with the Buddha about the restructur...
PDF
TAIPANQQ SITUS MUDAH MENANG DAN MUDAH MAXWIN SEGERA DAFTAR DI TAIPANQQ DAN RA...
DOC
NSCAD毕业证学历认证,温哥华岛大学毕业证国外证书制作申请
PPTX
genderandsexuality.pptxjjjjjjjjjjjjjjjjjjjj
PPTX
Hacking Movie – Best Films on Cybercrime & Digital Intrigue
PDF
Apresentação2 analise estrutual.hhjghjpdf
PPTX
the Honda_ASIMO_Presentation_Updated.pptx
PPTX
What Makes an Entertainment App Addictive?
PDF
High-Quality PDF Backlinking for Better Rankings
DOCX
Elisabeth de Pot, the Witch of Flanders .
PPTX
BULAN K3 NASIONAL PowerPt Templates.pptx
PPTX
SPARSH-SVNITs-Annual-Cultural-Fest presentation for orientation
PDF
Download FL Studio Crack Latest version 2025
PPTX
PRECISION AGRICULTURE- 1.pptx for agriculture
PDF
Gess1025.pdfdadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
PDF
oppenheimer and the story of the atomic bomb
business model and some other things that
Safety_Pharmacology_Tier2_Edibbbbbbbbbbbbbbbable.pptx
EVs U-5 ONE SHOT Notes_c49f9e68-5eac-4201-bf86-b314ef5930ba.pdf
MAGNET STORY- Coaster Sequence (Rough Version 2).pdf
Lambutchi Calin Claudiu had a discussion with the Buddha about the restructur...
TAIPANQQ SITUS MUDAH MENANG DAN MUDAH MAXWIN SEGERA DAFTAR DI TAIPANQQ DAN RA...
NSCAD毕业证学历认证,温哥华岛大学毕业证国外证书制作申请
genderandsexuality.pptxjjjjjjjjjjjjjjjjjjjj
Hacking Movie – Best Films on Cybercrime & Digital Intrigue
Apresentação2 analise estrutual.hhjghjpdf
the Honda_ASIMO_Presentation_Updated.pptx
What Makes an Entertainment App Addictive?
High-Quality PDF Backlinking for Better Rankings
Elisabeth de Pot, the Witch of Flanders .
BULAN K3 NASIONAL PowerPt Templates.pptx
SPARSH-SVNITs-Annual-Cultural-Fest presentation for orientation
Download FL Studio Crack Latest version 2025
PRECISION AGRICULTURE- 1.pptx for agriculture
Gess1025.pdfdadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
oppenheimer and the story of the atomic bomb

System performance en-2

  • 1. System  performance  as  user   experience  catastrophe   best  and  worst  prac.ces  for  interac.on  designers  and   programmers   Michael  Klein   Interac.on  designer,  developer  and  UI  connoisseur     h<p://gplus.to/michaelklein27,  h<p://www.linkedin.com/in/michaelklein3,  @mischkl  
  • 2. System  performance  as  user   experience  catastrophe   best  and  worst  prac.ces  for  interac.on  designers  and   programmers   What  am  I  talking  about?  
  • 3. What  am  I  talking  about?   Let’s  take  a  look  at  some  examples   h<p://www.youtube.com/watch?v=HyA6UXi0v6g  
  • 4. What  am  I  talking  about?     h<p://xkcd.com/612/  
  • 5. What  am  I  talking  about?     h<p://www.youtube.com/watch?v=sxtYxIObjWg  
  • 6. What  am  I  talking  about?     h<p://www.youtube.com/watch?v=nfnM_8JBmmA  
  • 7. What  am  I  talking  about?     h<p://www.youtube.com/watch?v=apN0_NQrC0s  
  • 8. What  do  all  these  examples  have  in  common?    
  • 9. What  do  all  these  examples  have  in  common?    
  • 10. TIME   (aka  a  temporal  sequence  of  events)     What’s  so  special  about  it?     (from  a  user’s  perspec>ve) •  “HCI  impedance  mismatch”  (my  phrase)  –  user’s  ac.ons  are  too     fast  for  the  system,  system’s  responses  are  too  slow  for  the  user   •  Without  immediate  feedback,  user  error  is  introduced—they  click   bu<ons  mul.ple  .mes,  try  to  swipe  mul.ple  .mes,  try  to  close   unresponsive  apps  even  if  they  are  not  actually  frozen,  poten.ally   leading  to  data  loss,  etc.   •  When  things  don’t  work  smoothly,  users  are  reminded  that  they   are  “using  a  computer”,  sense  of  magic/fun  decreases,  sense  of   control  decreases,  frustra.on  increases   •  Unresponsive  apps  violate  4  of  Nielsen’s  10  usability  heuris>cs   (Visibility  of  system  status,  match  with  real  world  (real  objects   don’t  stu<er/freeze),  user  control/freedom,  error  preven.on.)  
  • 11. TIME   (aka  a  temporal  sequence  of  events)     What’s  so  special  about  it?     (from  an  interac>on  designer’s  perspec>ve)   •  Difficult  to  portray  .me-­‐sensi.ve  interac.ons  in  sta>c  mockups,   or  even  in  higher-­‐level  prototypes   •  Time-­‐based  performance  characteris.cs  are  invisible  and   unpredictable,  which  makes  it  hard  to  iden.fy  them  as  “features”   or  “defects”   •  UI  performance  considera.ons  are  largely  qualita>ve  in  nature  –   the  answer  to  the  ques.on  of  “what’s  good  enough?”  varies   widely   •  Because  of  their  invisible  and  qualita.ve  nature,  UI  performance   characteris.cs  tend  to  rate  low  on  the  list  of  managers’  and   programmers’  priori.es  
  • 12. TIME   (aka  a  temporal  sequence  of  events)     What’s  so  special  about  it?     (from  a  soMware  developer’s  perspec>ve) •  Notoriously  difficult  to  handle     npredictable  .me  values  in  code  – u event/callback-­‐driven  asynchronous  programming  is  easy  to  screw   up  (or  is  avoided  due  to  fear  of  complexity,  lack  of  understanding)   •  Race  condi.ons   •  Error  handling  issues   •  “Feedback  loops”   •  Execu.ng  on  UI  thread   •  Asynchronous  APIs  are  harder  to  understand  and  debug   •  Difficult  to  pin  down  sources  of  performance  issues   •  UI  toolkit  weaknesses  (e.g.  Flash,  HTML5)   •  Difficult  to  judge  real-­‐world  performance  characteris.cs  because   developers’  machines  tend  to  be  high-­‐spec’d  
  • 13. So  what  can  we  do  about  it?   1.  Acknowledge  that  UI  performance  characteris.cs  are  a  key   component  of  user  experience.  Designers  can’t  be  sa.sfied  with   sta.c  mockups  alone.  Developers  can’t  be  sa.sfied  with  simply   “looking  like”  a  design.   2.  No  “designing  it  and  then  dropping  it  off  at  the  programmers’   feet”.  Designers  need  to  work  closely  with  developers  and  test   itera>ons  in  >ght  cycles—that’s  what  UCD  is  all  about!   3.  Enough  >me  needs  to  be  devoted  to  fine-­‐tuning  UI  performance.   It  should  be  a  key  ongoing  task  for  developers  and  testers,  not  an   aqerthought.   4.  Programmers  need  to  wrap  their  heads  around  asynchronous   APIs  and  event-­‐driven  programming,  if  they  haven’t  already.   5.  In  cases  where  performance  can’t  be  directly  improved,  don’t   keep  the  user  wai>ng  –  show  some  kind  of  progress  indica.on,   use  cached  content  liberally,  and  don’t  block  the  UI  (thread)!    
  • 14. Thanks  for  listening!   and  now  it’s  .me  for  some  Q&A  /  discussions!   Michael  Klein   michaelklein27@gmail.com   h<p://gplus.to/michaelklein27   h<p://www.linkedin.com/in/michaelklein3   @mischkl  
  • 15. Links   Jakob  Nielsen,  Response  Times:  The  3  Important  Limits   h<p://www.nngroup.com/ar.cles/response-­‐.mes-­‐3-­‐important-­‐limits/   Jakob  Nielsen,  Website  Response  Times   h<p://www.nngroup.com/ar.cles/website-­‐response-­‐.mes/   Steven  Seow,  Designing  and  Engineering  Time  (Book)   h<p://www.engineering.me.com   Steven  Seow,  User  Interface  Timing  Cheatsheet   h<p://www.stevenseow.com/papers/UI%20Timing%20Cheatsheet.pdf   GNOME  Human  Interface  Guidelines  2.2.2,  Characteris>cs  of  Responsive  Applica>ons   h<p://developer.gnome.org/hig-­‐book/3.5/feedback-­‐responsiveness.html