Measuring User Experience
-
Upload
alois-reitbauer -
Category
Self Improvement
-
view
698 -
download
2
Transcript of Measuring User Experience
![Page 1: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/1.jpg)
Measuring User ExperienceAlois Reitbauer
![Page 2: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/2.jpg)
Disclaimer
![Page 3: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/3.jpg)
We used to measure here
![Page 4: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/4.jpg)
We miss about 80%
Your visibility ends here
![Page 5: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/5.jpg)
… let’s look at an example
![Page 6: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/6.jpg)
Web Application Delivery Chain
Browser
3rd Party
Server
Internet<html> <head>
Content
Processing
![Page 7: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/7.jpg)
Robots forMonitoring
![Page 8: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/8.jpg)
Monitor from Everywhere
![Page 9: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/9.jpg)
Robots are not humans(even if they come close)
![Page 10: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/10.jpg)
Lack of standards
In Browser Measurement Complex
Most tools for development/troubleshooting
Challenges Today
![Page 11: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/11.jpg)
We need this …
![Page 12: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/12.jpg)
My
![Page 13: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/13.jpg)
Request Start Time
Time-to-First-Byte
OnLoad Time
Business Event Time
Resource Download TimeRendering Time
DNS/Network Time
JS Execution Time
Rendering TimeBandwidth
Latency (Geo)Location
Browser Info
![Page 14: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/14.jpg)
… we want to get all this information non intrusively
(aka hacking)
![Page 15: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/15.jpg)
<html> <head> <script type="text/javascript"> var start = new Date().getTime(); function onLoad() { var now = new Date().getTime(); var latency = now - start; alert("page loading time: " + latency); } </script> </head> <body onload="onLoad()"> ……
OnLoad Time Measurement
![Page 16: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/16.jpg)
……<script type="text/javascript"> downloadStart(“myimg”);</script><img src=“./myimg.jpg” onload=“downloadEnd(‘myimg’)” />…..
Resource Time Measurement
![Page 17: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/17.jpg)
… browsers have all this information, so why not
expose it
![Page 18: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/18.jpg)
W3C Performance Working Group
![Page 19: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/19.jpg)
Navigation TimingBasic page navigation information
Resource TimingInformation about page resources (own & third party)
User TimingCustom actions and high-res timer
TimelineUnified Access to Performance Data
Web Performance Specs
![Page 20: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/20.jpg)
Understand Page Loading
![Page 21: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/21.jpg)
window.performance.timing.
Navigation Timing
![Page 22: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/22.jpg)
Navigation Timing in Chrome
![Page 23: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/23.jpg)
Navigation Timing on Windows Mobile
![Page 24: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/24.jpg)
Let’s try this ourselves ...
![Page 25: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/25.jpg)
The page is not enough
![Page 26: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/26.jpg)
window.performance.getEntriesByType(window.performance.PERF_RESOURCE)[].
Resource Timing
![Page 27: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/27.jpg)
Custom Time Measurements
![Page 28: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/28.jpg)
mark (markName)add a new mark with the current timestamp
getMarks (markName)Retrieve all marks with the specified name. If none is specified all marks will be returnedResult Structure:
{ <markName> : [<val1>, <val2>, …] …..}
Marks
![Page 29: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/29.jpg)
measure () fetchStart -> now
measure (startTime) startTime -> now
measure(startTime, endTime) startTime -> endTime
Measures
![Page 30: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/30.jpg)
Performance Timeline
![Page 31: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/31.jpg)
Real world exampleswhat’s possible today
![Page 32: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/32.jpg)
![Page 33: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/33.jpg)
![Page 34: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/34.jpg)
![Page 35: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/35.jpg)
BrowserSupport
![Page 36: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/36.jpg)
How to send the data back to the server
Rendering and JS Execution
Implementing the backend services
Full browser support
More efficient bandwidth measurement
Open Issues
![Page 37: Measuring User Experience](https://reader036.fdocuments.net/reader036/viewer/2022062418/5552ee31b4c90587048b488b/html5/thumbnails/37.jpg)
LegacyBrowsers