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.
@webinterface
DESIGN THE PRIORITY
PERFORMANCE 

AND UX
U-Conference Usability Insights 2016
@webinterface
PETER ROZEK
@webinterface
@webinterface
@webinterface
WORK @ ecx.io (DIGITAL AGENCY)
@webinterface
UX, USABILITY, ACCESSIBILITY,
FRONTEND
@webinterface
@webinterface
WHY BUILD AN FAST
EXPERIENCE ?
@webinterface
RESPONSIVE AND FAST IS
USER EXPERIENCE.
@webinterface
FAST PAGE LOAD TIME
BUILDS TRUST IN YOUR
SITE.
@webinterface
BETTER CONVERSION
RATE.
@webinterface
WE HAVE SLOW
CONNECTION SPEEDS !
@webinterface
DO YOU KNOW YOUR
WHY ?
DOES YOUR CLIENT
KNOW ITS WHY ?
@webinterface
FACTS FROM THE USER !
@webinterface
@webinterface
Website was too slow to load.
73%
@webinterface
Website that crashed, froze, or received an error.
51%
@webinterface
Website wasn’t available.
38%
@webinterface
Consumers expect a web page to load in 2
seconds or less.
47%
@webinterface
People abandon a website that takes more than
3 seconds to load.
40%
@webinterface
1 SECOND DELAY
in page response can result in a
7% REDUCTION IN
CONVERSION.
Source: Mobilism: High Performan...
@webinterface
An e-commerce site is making

$100,000 PER DAY
1 SECOND DELAY

could potentially cost you
$2.5 million 

in ...
@webinterface Source: why_web_performance_matters.pdf
@webinterface
SPEED IS A KILLER !
Source: http://www.shmee.me
@webinterface
WHAT IS AN FAST
EXPERIENCE ?
@webinterface
OBJECTIVE TIME OR
CLOCK TIME
Source: http://www.fon.hum.uva.nl
@webinterface
PSYCHOLOGICAL TIME OR
BRAIN TIME
@webinterface
TIME TO INTERACT

AND

LOAD TIME
USER´ S PERCEPTION 

OF TIME
vs.
@webinterface
JACOB NIELSEN:
WEBSITE RESPONSE TIMES
Source: https://www.nngroup.com/articles/website-response-times/
0,1 -...
@webinterface
LOADTIME FINGER DOWN ANIMATION FINGER UP
Source: https://docs.google.com/presentation/
max 100ms max 6ms 

c...
@webinterface
PERFORMANCE IS ABOUT
PERCEPTION.
@webinterface
@webinterface
ABOVE THE FOLD
CRITERION
Source: Radware_SOTU_Report_Spring_2015.pdf@webinterface
@webinterface
HOW TO BUILD AN
FLEXIBLE, LIGHTNING-
FAST EXPERIENCE ?
@webinterface
CLARITY FOCUS
@webinterface
BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY
PERFORMANCE
PROJECT TIMELINE
@webinterface
PERFORMANCE IS A
ESSENTIAL DESIGN
FEATURE.
@webinterface
PERFORMANCE
BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY
@webinterface
Client understands the benefits.
BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY
@webinterface
Advocate performance as a priority.
BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY
@webinterface
Concept and Design is committed within a
performance budget.
BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY
@webinterface
Development is prepared to successfully integrate
performance as a priority.
BUILDSALES CONCEPT/DESIGN ROLL-...
@webinterface
SETTING A
PERFORMANCE BUDGET
Source: https://timkadlec.com/2013/01/setting-a-performance-budget/
@webinterface
1007 KB
86 Resources
1354 KB
108 Resources
2013
grown by 

26%
Source: Radware_SOTU_Report_Spring_2015.pdf
2...
@webinterface Source: https://developers.google.com/speed/docs/insights....
@webinterface
@webinterface
EGDE
150 KB
220 KB
SOMEWHERE BETWEEN
AND
2
SECONDS 

ON EDGE
@webinterface
3G
SECONDS 

ON 3G
2 350 KB
400 KB
SOMEWHERE BETWEEN
AND
@webinterface
PERFORMANCE BUDGET
400 

KB
100 kb fonts
50 kb css
200 kb images
50 kb javascript
@webinterface
SOLUTION FOR IMAGES:
<PICTURE> ELEMENT
@webinterface
@webinterface
RESPONSIVE WILL
CONTENT THAT FITS, NOT
DESKTOP HAND-ME-
DOWNS.
@webinterface
MOBILE FIRST AND

CONTENT FIRST:
BUILD AN EXPERIENCE
MAP.
@webinterface
CARRING OUT THE
RESEARCH.
@webinterface
GROUPING THE CORE
AND ADDITIONAL
EXPERIENCE.
@webinterface
ADDITIONAL CONTENT:
PROGRESSIVELY LOAD
THE EXTRAS.
@webinterface
CONDITIONAL
LOADING
Source: Conditional Loading for RWD , Client-Side Solution
@webinterface
PRIORITIZING THE CORE
EXPERIENCE.
Image Source: Build an experience map@webinterface
@webinterface
ORDERING OBJECTIVES
@webinterface
@webinterface
MAPPING THE BUSINESS
@webinterface
@webinterface
MAPPING THE
COMPETITION
@webinterface
@webinterface
IDENTIFYING
OPPORTUNITIES
@webinterface
@webinterface
CREATING A READMAP OF
WORK.
@webinterface
LAST WORDS
@webinterface
COMMUNICATION
SET A GOAL
COMMUNICATE
REPEAT
@webinterface
PROCESS
MESUARE
OPTIMISE
REPEAT
@webinterface
PERFORMANCE IS ABOUT
PERCEPTION
MANAGEMENT.
@webinterface
TIME TO INTERACT
VS.
LOAD TIME
@webinterface
DELIVER CORE
EXPERIENCE FIRST, 

THEN PROGRESSIVELY
ENHANCE THE EXTRAS.
Brad Frost
https://www.youtube.com/watch?v=nE0CRMm59BY@webinterface
„Great minds discus principles.
Average minds discus t...
THANKS
…dear Ellen
@webinterface
@webinterface
peter.rozek@ecx.io
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
Upcoming SlideShare
Loading in …5
×

DESIGN THE PRIORITY, PERFORMANCE 
AND UX

14,624 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

×