Embed Size (px)
Citation preview
@webinterface
DESIGNING THE PRIORITYPERFORMANCE IST USER EXPERIENCE
code.talks commerce special 2016
@webinterface
PETER ROZEK
@webinterface
@webinterface
@webinterface
WORK @ ecx.io (DIGITAL AGENCY)
@webinterface
ECX.IO AN IBM COMPANY
UX, USABILITY, ACCESSIBILITY, FRONTEND
@webinterface
@webinterface Video: Bugatti Veyron Top Speed Test - Top Gear - BBC
@webinterface
MOBILE WE HAVE SLOW CONNECTION SPEEDS !
@webinterface
@webinterface
DO YOU KNOW YOUR WHY ? DOES YOUR CLIENT KNOW ITS WHY ?
@webinterface Source: https://developers.google.com/speed/docs/insights....
@webinterface Video: Helping VIPs Care About Performance
@webinterface
GOOD PERFORMANCE IS ABOUT ACCESS.PEOPLE CAN GET THE RIGHT THINK, SOONER, WITH LESS STRESS.
@webinterface
WHY BUILD AN FAST EXPERIENCE ?
@webinterface
49% USE THERE MOBILEPHONE EVERYDAY AND EVERYTIME.
@webinterface
„The device we choose to use is often driven by our context: where we are, what we want to accomplish and the amount of time needed.“GOOGLE 2012
@webinterface
CUSTOMER ARE SOUVEREIGN.
@webinterface
FAST PAGE LOAD TIME BUILDS TRUST IN YOUR SITE.
@webinterface
BETTER CONVERSION RATE.
@webinterface
@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
WHAT IS AN FAST EXPERIENCE ?
@webinterface Video: Bugatti Veyron Top Speed Test - Top Gear - BBC
@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 - 10sINSTANT IMMEDIATE USER FLOW KEEPING THE
USER´S ATTENTION
@webinterface
PERFORMANCE IS ABOUT PERCEPTION.
@webinterface
ABOVE THE FOLD CRITERION
@webinterface
TIME TO INTERACT (INCREASE PERCEPTION)
LOAD TIME
Source: Radware_SOTU_Report_Spring_2015.pdf@webinterface
CHUCK NORRIS DOESN´T WEAR A WATCH. HE DECIDES WHAT TIME IS IT.
Image: http://www.mrctv.org/@webinterface
@webinterface
TURNING THE SHIPHOW TO BUILD AN FLEXIBLE, LIGHTNING-FAST EXPERIENCE ?
@webinterface
@webinterface
BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY
PERFORMANCE
PROJECT TIMELINE
Bild: http://jasonrenshaw.typepad.com/
„HOUSTON WE HAVE A PROBLEM.“@webinterface
@webinterface
PERFORMANCE ARE NOT SIMPLY A DEVELOPMENT ISSUE.
@webinterface
PERFORMANCE IS DESIGN´S BEST FRIEND NOT ITS ENEMY.
@webinterface
PERFORMANCE IS A ESSENTIAL DESIGN FEATURE.
@webinterface
PERFORMANCE IS EVERYONE´S PROBLEM.
WORK AS A TEAM.@webinterface
@webinterface
T-Shape Skills
@webinterface
CLARITY FOCUS
@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
150 KB
220 KB
EDGESOMEWHERE BETWEEN
AND
1SECONDS ON EDGE
@webinterface
350 KB
400 KB
3GSOMEWHERE BETWEEN
AND
1SECONDS
ON 3G
@webinterface
400 KB
100 kb fonts 50 kb css 200 kb images 50 kb javascript
PERFORMANCE BUDGET
@webinterface
CORE EXPERIENCE HAS THE PRIORITY:CORE CONTENT SHOULD BE DELIVERED FIRST CORE CONTENT SHOULD RENDER WITH 1000ms EVERY FEATURE MUST FAIL GRACEFULLY
@webinterface
PROTOTYPE EARLY:MOCKUP DESIGNS IN CODE RUN PERFORMANCE TESTS EARLY
QUICK ITERATIONS ENHANCE WORK AS A TEAM
@webinterface
PERFORMANCE DESIGN REVIEW
@webinterface
GROUPING THE CORE AND ADDITIONAL EXPERIENCE.
@webinterface
RED FLAGS
CAROUSEL
VIDEO VIDEO
WHAT HASPRIORITY
ALTERNATESOLUTIONS
@webinterface
20/8080 PERCENT OF THE FEATURES ARE NOT USED.
@webinterface
RESPONSIVE WILL CONTENT THAT FITS, NOT DESKTOP HAND-ME-DOWNS.
@webinterface
CONTENT FIRST AND MOBILE FIRST: BUILD AN EXPERIENCE MAP.
@webinterface
CARRING OUT THE RESEARCH.
@webinterface
PRIORITIZING THE CORE EXPERIENCE.
@webinterface
OBJECTIVE BEHAVIOURS POSITIVE FEELINGS NEGATIVE FEELINGS
@webinterface
MAPPING THE BUSINESS
@webinterface
STAGE OBJECTIVE BEHAVIOURS POSITIVE FEELINGS NEGATIVE FEELINGS BUSINNESS VIEW (GOOD AND BAD ATTRIBUTES)
@webinterface
IDENTIFYING OPPORTUNITIES
@webinterface
ADDITIONAL CONTENT: PROGRESSIVELY LOAD THE EXTRAS.
@webinterface
CONCLUSION
@webinterface
COMMUNICATIONSET A GOAL
COMMUNICATE REPEAT
@webinterface
PROCESSMESUARE OPTIMISE REPEAT
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
