Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing the Priority, Performance ist User Experience

550 views

Published on

Talk @ code.talks commerce special

Published in: Design
  • Be the first to comment

  • Be the first to like this

Designing the Priority, Performance ist User Experience

  1. 1. @webinterface DESIGNING THE PRIORITY PERFORMANCE 
 IST USER EXPERIENCE code.talks commerce special 2016 @webinterface
  2. 2. PETER ROZEK @webinterface
  3. 3. @webinterface @webinterface
  4. 4. WORK @ ecx.io (DIGITAL AGENCY) @webinterface
  5. 5. ECX.IO AN IBM COMPANY
  6. 6. UX, USABILITY, ACCESSIBILITY, FRONTEND @webinterface
  7. 7. @webinterface Video: Bugatti Veyron Top Speed Test - Top Gear - BBC
  8. 8. @webinterface MOBILE WE HAVE SLOW CONNECTION SPEEDS !
  9. 9. @webinterface
  10. 10. @webinterface DO YOU KNOW YOUR WHY ? DOES YOUR CLIENT KNOW ITS WHY ?
  11. 11. @webinterface Source: https://developers.google.com/speed/docs/insights....
  12. 12. @webinterface Video: Helping VIPs Care About Performance
  13. 13. @webinterface GOOD PERFORMANCE IS ABOUT ACCESS. PEOPLE CAN GET THE RIGHT THINK, SOONER, WITH LESS STRESS.
  14. 14. @webinterface WHY BUILD AN FAST EXPERIENCE ?
  15. 15. @webinterface 49% USE THERE MOBILEPHONE EVERYDAY AND EVERYTIME.
  16. 16. @webinterface „The device we choose to use is often driven by our context: where we are, what we want to accomplish and the amount of time needed.“ GOOGLE 2012
  17. 17. @webinterface CUSTOMER ARE SOUVEREIGN.
  18. 18. @webinterface FAST PAGE LOAD TIME BUILDS TRUST IN YOUR SITE.
  19. 19. @webinterface BETTER CONVERSION RATE. @webinterface
  20. 20. @webinterface FACTS FROM THE USER ! @webinterface
  21. 21. @webinterface Website was too slow to load. 73%
  22. 22. @webinterface Website that crashed, froze, or received an error. 51%
  23. 23. @webinterface Website wasn’t available. 38%
  24. 24. @webinterface Consumers expect a web page to load in 2 seconds or less. 47%
  25. 25. @webinterface People abandon a website that takes more than 3 seconds to load. 40%
  26. 26. @webinterface 1 SECOND DELAY in page response can result in a 7% REDUCTION IN CONVERSION. Source: Mobilism: High Performance Mobile
  27. 27. @webinterface An e-commerce site is making
 $100,000 PER DAY 1 SECOND DELAY
 could potentially cost you $2.5 million 
 in lost sales every year. Source: Data Monday: E-commerce Performance
  28. 28. @webinterface Source: why_web_performance_matters.pdf
  29. 29. @webinterface SPEED IS A KILLER ! Source: http://www.shmee.me
  30. 30. WHAT IS AN FAST EXPERIENCE ? @webinterface Video: Bugatti Veyron Top Speed Test - Top Gear - BBC
  31. 31. @webinterface OBJECTIVE TIME OR CLOCK TIME Source: http://www.fon.hum.uva.nl
  32. 32. @webinterface PSYCHOLOGICAL TIME OR BRAIN TIME
  33. 33. @webinterface TIME TO INTERACT
 AND
 LOAD TIME USER´S PERCEPTION 
 OF TIME vs.
  34. 34. @webinterface JACOB NIELSEN: WEBSITE RESPONSE TIMES Source: https://www.nngroup.com/articles/website-response-times/ 0,1 - 0,2s 0,5 - 1s 2 - 5s 5 - 10s INSTANT IMMEDIATE USER FLOW KEEPING THE 
 USER´S ATTENTION
  35. 35. @webinterface PERFORMANCE IS ABOUT PERCEPTION.
  36. 36. @webinterface ABOVE THE FOLD CRITERION
  37. 37. @webinterface TIME TO INTERACT 
 (INCREASE PERCEPTION) LOAD TIME
  38. 38. Source: Radware_SOTU_Report_Spring_2015.pdf@webinterface
  39. 39. CHUCK NORRIS DOESN´T WEAR 
 A WATCH. 
 HE DECIDES WHAT TIME IS IT. Image: http://www.mrctv.org/@webinterface
  40. 40. @webinterface TURNING THE SHIP HOW TO BUILD AN FLEXIBLE, LIGHTNING-FAST EXPERIENCE ? @webinterface
  41. 41. @webinterface BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY PERFORMANCE PROJECT TIMELINE
  42. 42. Bild: http://jasonrenshaw.typepad.com/ „HOUSTON WE HAVE A PROBLEM.“ @webinterface
  43. 43. @webinterface PERFORMANCE ARE NOT SIMPLY A DEVELOPMENT ISSUE.
  44. 44. @webinterface PERFORMANCE IS DESIGN´S BEST FRIEND NOT ITS ENEMY.
  45. 45. @webinterface PERFORMANCE IS A ESSENTIAL DESIGN FEATURE.
  46. 46. @webinterface PERFORMANCE IS EVERYONE´S PROBLEM.
  47. 47. WORK AS A TEAM. @webinterface
  48. 48. @webinterface T-Shape Skills
  49. 49. @webinterface CLARITY FOCUS
  50. 50. @webinterface PERFORMANCE BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY
  51. 51. @webinterface Client understands the benefits. BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY
  52. 52. @webinterface Advocate performance as a priority. BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY
  53. 53. @webinterface Concept and Design is committed within a performance budget. BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY
  54. 54. @webinterface Development is prepared to successfully integrate performance as a priority. BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY
  55. 55. @webinterface SETTING A PERFORMANCE BUDGET. Source: https://timkadlec.com/2013/01/setting-a-performance-budget/
  56. 56. @webinterface 150 KB 220 KB EDGE
 SOMEWHERE BETWEEN AND 1 SECONDS 
 ON EDGE
  57. 57. @webinterface 350 KB 400 KB 3G
 SOMEWHERE BETWEEN AND 1 SECONDS 
 ON 3G
  58. 58. @webinterface 400 
 KB 100 kb fonts 50 kb css 200 kb images 50 kb javascript PERFORMANCE BUDGET
  59. 59. @webinterface CORE EXPERIENCE HAS THE PRIORITY: CORE CONTENT SHOULD BE DELIVERED FIRST CORE CONTENT SHOULD RENDER WITH 1000ms EVERY FEATURE MUST FAIL GRACEFULLY
  60. 60. @webinterface PROTOTYPE EARLY: MOCKUP DESIGNS IN CODE RUN PERFORMANCE TESTS EARLY QUICK ITERATIONS ENHANCE WORK AS A TEAM
  61. 61. @webinterface PERFORMANCE DESIGN REVIEW
  62. 62. @webinterface GROUPING THE CORE AND ADDITIONAL EXPERIENCE.
  63. 63. @webinterface RED FLAGS CAROUSEL VIDEO VIDEO WHAT HAS
 PRIORITY ALTERNATE
 SOLUTIONS
  64. 64. @webinterface 20/80 80 PERCENT OF THE FEATURES ARE NOT USED.
  65. 65. @webinterface RESPONSIVE WILL CONTENT THAT FITS, NOT DESKTOP HAND-ME- DOWNS.
  66. 66. @webinterface CONTENT FIRST AND
 MOBILE FIRST: BUILD AN EXPERIENCE MAP.
  67. 67. @webinterface CARRING OUT THE RESEARCH.
  68. 68. @webinterface PRIORITIZING THE CORE EXPERIENCE.
  69. 69. @webinterface OBJECTIVE BEHAVIOURS POSITIVE FEELINGS NEGATIVE FEELINGS
  70. 70. @webinterface MAPPING THE BUSINESS
  71. 71. @webinterface STAGE OBJECTIVE BEHAVIOURS POSITIVE FEELINGS NEGATIVE FEELINGS BUSINNESS VIEW (GOOD AND BAD ATTRIBUTES)
  72. 72. @webinterface IDENTIFYING OPPORTUNITIES
  73. 73. @webinterface ADDITIONAL CONTENT: PROGRESSIVELY LOAD THE EXTRAS.
  74. 74. @webinterface CONCLUSION
  75. 75. @webinterface COMMUNICATION SET A GOAL COMMUNICATE REPEAT
  76. 76. @webinterface PROCESS MESUARE OPTIMISE REPEAT
  77. 77. Brad Frost https://www.youtube.com/watch?v=nE0CRMm59BY@webinterface „Great minds discus principles. Average minds discus technologies. Small minds discus tools.“
  78. 78. THANKS …dear Ellen @webinterface
  79. 79. @webinterface peter.rozek@ecx.io

×