SlideShare a Scribd company logo
@webinterface
DESIGN THE PRIORITY
PERFORMANCE 

AND UX
U-Conference Usability Insights 2016
@webinterface
PETER ROZEK
@webinterface
@webinterface
@webinterface
WORK @ ecx.io (DIGITAL AGENCY)
@webinterface

Recommended for you

Landing Page SEO Best Practices & Tips For Success
Landing Page SEO Best Practices & Tips For Success Landing Page SEO Best Practices & Tips For Success
Landing Page SEO Best Practices & Tips For Success

Google is constantly updating their algorithm. There have been 12 major algorithm changes announced this year alone. That doesn’t include the hundreds to thousands of other minor updates Google has made to their search engine. Could these updates be impacting the performance of your landing pages? If so, how can you see better results from your landing page’s SEO? Discover what practices can help your landing pages rank better on Google SERPs in this webinar. You'll learn: The best content to use, not just sales content. How to convert without pushing conversion. Tips for connecting your landing pages to your site at all times. Join Mordy Oberstein, Head of Communications at Semrush, for insights into what the data tells us and how Google’s ongoing algorithm updates have changed the game when it comes to landing page optimization.

landingpageseosemrushsearchenginejournal
The battle for attention
The battle for attentionThe battle for attention
The battle for attention

This document summarizes the key findings of a study conducted by Newsworks and PwC on attention to different media types. The study found that traditional print and broadcast media receive more focused attention from consumers compared to digital media. Specifically, newspaper readers were more likely to regularly set time aside for newspapers, feel personally connected to them, and trust their content more than most other media. The sustained attention received made newspaper readers more likely to discuss issues they read about and be influenced regarding purchases. Overall, the study showed that traditional media with higher attention levels can have a more powerful impact on consumers than digital media with less focused attention.

newspaper advertisingtv on demandnewspapers
4 Biggest Challenges for Creative Teams
4 Biggest Challenges for Creative Teams4 Biggest Challenges for Creative Teams
4 Biggest Challenges for Creative Teams

https://www.wrike.com/blog - We surveyed creative teams to discover their biggest challenges and bottlenecks, from conception to completion. And what we discovered was: creative teams have to organize requests, listen to feedback, and seek approvals, all while trying to incorporate their own creative vision, making it difficult to prioritize and meet deadlines. Check out the details in our Slideshare.

challengescollaborationproductivity
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
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 Performance Mobile
@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
@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 - 0,2s 0,5 - 1s 2 - 5s 5 - 10s
Instant Immediate User Flow Keeping the 

user´ s attention
@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
@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-OUTSTRATEGY
@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
2015
@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 technologies.
Small minds discus tools.“
THANKS
…dear Ellen
@webinterface
@webinterface
peter.rozek@ecx.io

More Related Content

DESIGN THE PRIORITY, PERFORMANCE 
AND UX