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
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Wärtsilä Zero Emmisions Ferry Concept
Next
Upcoming SlideShare
Wärtsilä Zero Emmisions Ferry Concept
Next
Download to read offline and view in fullscreen.

465

Share

DESIGN THE PRIORITY, PERFORMANCE 
AND UX

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • chikawonah

    Sep. 16, 2021
  • ksqagency

    Aug. 15, 2021
  • ssuser0d56b9

    Jul. 31, 2021
  • LauraVVanLaningham

    Jul. 3, 2021
  • MdMahbuburRahman109

    May. 17, 2021
  • EversonJunior1

    Apr. 23, 2021
  • seyah25

    Apr. 15, 2021
  • MariaSalviaGuillen

    Mar. 24, 2021
  • cbshivers

    Mar. 10, 2021
  • JamieWyatt8

    Mar. 5, 2021
  • KulsoomIdrisi

    Feb. 20, 2021
  • GolahaMidnimadaJijeele

    Feb. 20, 2021
  • Abdhlruhman

    Feb. 19, 2021
  • viplocksmithsydney

    Feb. 15, 2021
  • ReshwanRAhmed

    Feb. 8, 2021
  • kolamounika1

    Jan. 30, 2021
  • SiannRorke

    Jan. 30, 2021
  • JunZhou76

    Jan. 16, 2021
  • RajeshKanjoor

    Jan. 3, 2021
  • ChaceFraser

    Dec. 22, 2020

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.

Views

Total views

23,741

On Slideshare

0

From embeds

0

Number of embeds

156

Actions

Downloads

528

Shares

0

Comments

0

Likes

465

×