1. @webinterface
DESIGN THE PRIORITY
PERFORMANCE
AND UX
U-Conference Usability Insights 2016
@webinterface

2. PETER ROZEK
@webinterface

3. @webinterface
@webinterface

4. WORK @ ecx.io (DIGITAL AGENCY)
@webinterface

6. UX, USABILITY, ACCESSIBILITY,
FRONTEND
@webinterface

7. @webinterface
WHY BUILD AN FAST
EXPERIENCE ?

8. @webinterface
RESPONSIVE AND FAST IS
USER EXPERIENCE.

9. @webinterface
FAST PAGE LOAD TIME
BUILDS TRUST IN YOUR
SITE.

10. @webinterface
BETTER CONVERSION
RATE.

11. @webinterface
WE HAVE SLOW
CONNECTION SPEEDS !

12. @webinterface
DO YOU KNOW YOUR
WHY ?
DOES YOUR CLIENT
KNOW ITS WHY ?

13. @webinterface
FACTS FROM THE USER !
@webinterface

14. @webinterface
Website was too slow to load.
73%

15. @webinterface
Website that crashed, froze, or received an error.
51%

16. @webinterface
Website wasn’t available.
38%

17. @webinterface
Consumers expect a web page to load in 2
seconds or less.
47%

18. @webinterface
People abandon a website that takes more than
3 seconds to load.
40%

19. @webinterface
1 SECOND DELAY
in page response can result in a
7% REDUCTION IN
CONVERSION.
Source: Mobilism: High Performance Mobile

20. @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

21. @webinterface Source: why_web_performance_matters.pdf

22. @webinterface
SPEED IS A KILLER !
Source: http://www.shmee.me

23. @webinterface
WHAT IS AN FAST
EXPERIENCE ?

24. @webinterface
OBJECTIVE TIME OR
CLOCK TIME
Source: http://www.fon.hum.uva.nl

25. @webinterface
PSYCHOLOGICAL TIME OR
BRAIN TIME

26. @webinterface
TIME TO INTERACT
AND
LOAD TIME
USER´ S PERCEPTION
OF TIME
vs.

27. @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

28. @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

29. @webinterface
PERFORMANCE IS ABOUT
PERCEPTION.

30. @webinterface

31. @webinterface
ABOVE THE FOLD
CRITERION

32. Source: Radware_SOTU_Report_Spring_2015.pdf@webinterface

33. @webinterface
HOW TO BUILD AN
FLEXIBLE, LIGHTNING-
FAST EXPERIENCE ?

34. @webinterface
CLARITY FOCUS

35. @webinterface
BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY
PERFORMANCE
PROJECT TIMELINE

36. @webinterface
PERFORMANCE IS A
ESSENTIAL DESIGN
FEATURE.

37. @webinterface
PERFORMANCE
BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY

38. @webinterface
Client understands the benefits.
BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY

39. @webinterface
Advocate performance as a priority.
BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY

40. @webinterface
Concept and Design is committed within a
performance budget.
BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY

41. @webinterface
Development is prepared to successfully integrate
performance as a priority.
BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY

42. @webinterface
SETTING A
PERFORMANCE BUDGET
Source: https://timkadlec.com/2013/01/setting-a-performance-budget/

43. @webinterface
1007 KB
86 Resources
1354 KB
108 Resources
2013
grown by
26%
Source: Radware_SOTU_Report_Spring_2015.pdf
2015

44. @webinterface Source: https://developers.google.com/speed/docs/insights....

45. @webinterface

46. @webinterface
EGDE
150 KB
220 KB
SOMEWHERE BETWEEN
AND
2
SECONDS
ON EDGE

47. @webinterface
3G
SECONDS
ON 3G
2 350 KB
400 KB
SOMEWHERE BETWEEN
AND

48. @webinterface
PERFORMANCE BUDGET
400
KB
100 kb fonts
50 kb css
200 kb images
50 kb javascript

49. @webinterface
SOLUTION FOR IMAGES:
<PICTURE> ELEMENT

50. @webinterface

51. @webinterface
RESPONSIVE WILL
CONTENT THAT FITS, NOT
DESKTOP HAND-ME-
DOWNS.

52. @webinterface
MOBILE FIRST AND
CONTENT FIRST:
BUILD AN EXPERIENCE
MAP.

53. @webinterface
CARRING OUT THE
RESEARCH.

54. @webinterface
GROUPING THE CORE
AND ADDITIONAL
EXPERIENCE.

55. @webinterface
ADDITIONAL CONTENT:
PROGRESSIVELY LOAD
THE EXTRAS.

56. @webinterface
CONDITIONAL
LOADING
Source: Conditional Loading for RWD , Client-Side Solution

57. @webinterface
PRIORITIZING THE CORE
EXPERIENCE.

58. Image Source: Build an experience map@webinterface

59. @webinterface
ORDERING OBJECTIVES

60. @webinterface

61. @webinterface
MAPPING THE BUSINESS

62. @webinterface

63. @webinterface
MAPPING THE
COMPETITION

64. @webinterface

65. @webinterface
IDENTIFYING
OPPORTUNITIES

66. @webinterface

67. @webinterface
CREATING A READMAP OF
WORK.

68. @webinterface
LAST WORDS

69. @webinterface
COMMUNICATION
SET A GOAL
COMMUNICATE
REPEAT

70. @webinterface
PROCESS
MESUARE
OPTIMISE
REPEAT

71. @webinterface
PERFORMANCE IS ABOUT
PERCEPTION
MANAGEMENT.

72. @webinterface
TIME TO INTERACT
VS.
LOAD TIME

73. @webinterface
DELIVER CORE
EXPERIENCE FIRST,
THEN PROGRESSIVELY
ENHANCE THE EXTRAS.

74. Brad Frost
https://www.youtube.com/watch?v=nE0CRMm59BY@webinterface
„Great minds discus principles.
Average minds discus technologies.
Small minds discus tools.“

75. THANKS
…dear Ellen
@webinterface

76. @webinterface
peter.rozek@ecx.io