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.

DESIGN THE PRIORITY, PERFORMANCE 
AND UX

15,069 views

Published on

Page speed is increasingly important for websites. Performance is User Experience and not only a Development Issue. Performance is a process and starts in conception and design.

Published in: Design, Technology, Internet
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

DESIGN THE PRIORITY, PERFORMANCE 
AND UX

  1. 1. @webinterface DESIGN THE PRIORITY PERFORMANCE 
 AND UX U-Conference Usability Insights 2016 @webinterface
  2. 2. PETER ROZEK @webinterface
  3. 3. @webinterface @webinterface
  4. 4. WORK @ ecx.io (DIGITAL AGENCY) @webinterface
  5. 5. UX, USABILITY, ACCESSIBILITY, FRONTEND @webinterface
  6. 6. @webinterface WHY BUILD AN FAST EXPERIENCE ?
  7. 7. @webinterface RESPONSIVE AND FAST IS USER EXPERIENCE.
  8. 8. @webinterface FAST PAGE LOAD TIME BUILDS TRUST IN YOUR SITE.
  9. 9. @webinterface BETTER CONVERSION RATE.
  10. 10. @webinterface WE HAVE SLOW CONNECTION SPEEDS !
  11. 11. @webinterface DO YOU KNOW YOUR WHY ? DOES YOUR CLIENT KNOW ITS WHY ?
  12. 12. @webinterface FACTS FROM THE USER ! @webinterface
  13. 13. @webinterface Website was too slow to load. 73%
  14. 14. @webinterface Website that crashed, froze, or received an error. 51%
  15. 15. @webinterface Website wasn’t available. 38%
  16. 16. @webinterface Consumers expect a web page to load in 2 seconds or less. 47%
  17. 17. @webinterface People abandon a website that takes more than 3 seconds to load. 40%
  18. 18. @webinterface 1 SECOND DELAY in page response can result in a 7% REDUCTION IN CONVERSION. Source: Mobilism: High Performance Mobile
  19. 19. @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
  20. 20. @webinterface Source: why_web_performance_matters.pdf
  21. 21. @webinterface SPEED IS A KILLER ! Source: http://www.shmee.me
  22. 22. @webinterface WHAT IS AN FAST EXPERIENCE ?
  23. 23. @webinterface OBJECTIVE TIME OR CLOCK TIME Source: http://www.fon.hum.uva.nl
  24. 24. @webinterface PSYCHOLOGICAL TIME OR BRAIN TIME
  25. 25. @webinterface TIME TO INTERACT
 AND
 LOAD TIME USER´ S PERCEPTION 
 OF TIME vs.
  26. 26. @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
  27. 27. @webinterface LOADTIME FINGER DOWN ANIMATION FINGER UP Source: https://docs.google.com/presentation/ max 100ms max 6ms 
 chunks do idle/ cleanup in 50ms chunks in case finger down happens again
  28. 28. @webinterface PERFORMANCE IS ABOUT PERCEPTION.
  29. 29. @webinterface
  30. 30. @webinterface ABOVE THE FOLD CRITERION
  31. 31. Source: Radware_SOTU_Report_Spring_2015.pdf@webinterface
  32. 32. @webinterface HOW TO BUILD AN FLEXIBLE, LIGHTNING- FAST EXPERIENCE ?
  33. 33. @webinterface CLARITY FOCUS
  34. 34. @webinterface BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY PERFORMANCE PROJECT TIMELINE
  35. 35. @webinterface PERFORMANCE IS A ESSENTIAL DESIGN FEATURE.
  36. 36. @webinterface PERFORMANCE BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY
  37. 37. @webinterface Client understands the benefits. BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY
  38. 38. @webinterface Advocate performance as a priority. BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY
  39. 39. @webinterface Concept and Design is committed within a performance budget. BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY
  40. 40. @webinterface Development is prepared to successfully integrate performance as a priority. BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY
  41. 41. @webinterface SETTING A PERFORMANCE BUDGET Source: https://timkadlec.com/2013/01/setting-a-performance-budget/
  42. 42. @webinterface 1007 KB 86 Resources 1354 KB 108 Resources 2013 grown by 
 26% Source: Radware_SOTU_Report_Spring_2015.pdf 2015
  43. 43. @webinterface Source: https://developers.google.com/speed/docs/insights....
  44. 44. @webinterface
  45. 45. @webinterface EGDE 150 KB 220 KB SOMEWHERE BETWEEN AND 2 SECONDS 
 ON EDGE
  46. 46. @webinterface 3G SECONDS 
 ON 3G 2 350 KB 400 KB SOMEWHERE BETWEEN AND
  47. 47. @webinterface PERFORMANCE BUDGET 400 
 KB 100 kb fonts 50 kb css 200 kb images 50 kb javascript
  48. 48. @webinterface SOLUTION FOR IMAGES: <PICTURE> ELEMENT
  49. 49. @webinterface
  50. 50. @webinterface RESPONSIVE WILL CONTENT THAT FITS, NOT DESKTOP HAND-ME- DOWNS.
  51. 51. @webinterface MOBILE FIRST AND
 CONTENT FIRST: BUILD AN EXPERIENCE MAP.
  52. 52. @webinterface CARRING OUT THE RESEARCH.
  53. 53. @webinterface GROUPING THE CORE AND ADDITIONAL EXPERIENCE.
  54. 54. @webinterface ADDITIONAL CONTENT: PROGRESSIVELY LOAD THE EXTRAS.
  55. 55. @webinterface CONDITIONAL LOADING Source: Conditional Loading for RWD , Client-Side Solution
  56. 56. @webinterface PRIORITIZING THE CORE EXPERIENCE.
  57. 57. Image Source: Build an experience map@webinterface
  58. 58. @webinterface ORDERING OBJECTIVES
  59. 59. @webinterface
  60. 60. @webinterface MAPPING THE BUSINESS
  61. 61. @webinterface
  62. 62. @webinterface MAPPING THE COMPETITION
  63. 63. @webinterface
  64. 64. @webinterface IDENTIFYING OPPORTUNITIES
  65. 65. @webinterface
  66. 66. @webinterface CREATING A READMAP OF WORK.
  67. 67. @webinterface LAST WORDS
  68. 68. @webinterface COMMUNICATION SET A GOAL COMMUNICATE REPEAT
  69. 69. @webinterface PROCESS MESUARE OPTIMISE REPEAT
  70. 70. @webinterface PERFORMANCE IS ABOUT PERCEPTION MANAGEMENT.
  71. 71. @webinterface TIME TO INTERACT VS. LOAD TIME
  72. 72. @webinterface DELIVER CORE EXPERIENCE FIRST, 
 THEN PROGRESSIVELY ENHANCE THE EXTRAS.
  73. 73. Brad Frost https://www.youtube.com/watch?v=nE0CRMm59BY@webinterface „Great minds discus principles. Average minds discus technologies. Small minds discus tools.“
  74. 74. THANKS …dear Ellen @webinterface
  75. 75. @webinterface peter.rozek@ecx.io

×