can single page applications deliver a world-class web ux?
TRANSCRIPT
![Page 1: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/1.jpg)
Can Single Page Applications deliver a world-class web UX?
Meg Cramer & Krishna Vadrevu
Designers at Citrix GetGo
http://www.uxpa2016.org/sessionsurvey?sessionid=269
@megsalltogether @KVadrevu
![Page 2: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/2.jpg)
Agenda● Quick introduction● Transition to a SPA● Beyond the transition● Recap
![Page 3: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/3.jpg)
SPA? Sounds pleasant. What’s that?
![Page 4: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/4.jpg)
http://www.clipartbest.com/clipart-dc7yyAqc9
![Page 5: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/5.jpg)
home.html
Chef Chad’s multi-page website
about.html
location.html
contact.html
menu.html
![Page 6: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/6.jpg)
Chef Chad’s single page app
home.html
location contact
aboutmenu
![Page 7: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/7.jpg)
![Page 8: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/8.jpg)
They’re all around you
![Page 13: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/13.jpg)
hey!
Take this HTML file
More! I want more!
OK. Here’s more HTML & CSS
Client
Traditional format
Server
![Page 14: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/14.jpg)
hey!
Take this HTML file
More! I want more!
Here’s some data
Client
SPA format
JS Server
![Page 15: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/15.jpg)
AJAXAsynchronous Javascript and XML
XMLHTTPJSONHTMLCSS
![Page 16: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/16.jpg)
AngularDurandal
EmberReact*
etc.
![Page 17: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/17.jpg)
ViewsRoutes
![Page 18: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/18.jpg)
Why SPA?
performancemaintainabilitymodular codecost savings
![Page 19: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/19.jpg)
Not SPA SPA
![Page 20: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/20.jpg)
What’s so different about SPA?
![Page 22: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/22.jpg)
No page loads. Now what?
![Page 23: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/23.jpg)
1Navigation & State
![Page 25: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/25.jpg)
2Measuring Speed
![Page 26: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/26.jpg)
Delay User perception
0–100 ms Instant
100–300 ms Small perceptible delay
300–1000 ms Machine is working
1,000+ ms Likely mental context switch
10,000+ ms Task is abandoned
How fast is faster?
High Performance Browser Networking. Ilya Grigorik, 2013
![Page 28: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/28.jpg)
Not SPA SPA
![Page 29: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/29.jpg)
![Page 30: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/30.jpg)
3AvailabilitySearch Engine Indexing
Browser/JS supportAccessibility
![Page 31: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/31.jpg)
But maybe, you want to make the experience better?
![Page 32: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/32.jpg)
![Page 33: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/33.jpg)
![Page 34: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/34.jpg)
GoToMeeting Web App
![Page 36: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/36.jpg)
HTTP led us down the path of hyperlinking as primary navigation for the web experience - page to page, resulting in the space between pages being out of reach.
With SPAs, fill in those gaps with meaningful transitions.
![Page 37: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/37.jpg)
The server can drive interactions as well - “asynchronously”
![Page 40: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/40.jpg)
![Page 41: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/41.jpg)
“Traditional” analytics doesn’t workPage views
Visitor Counts
http://www.slideshare.net/KaDawg/measuring-the-mobile-experience-the-analytics-of-handheld-ux
![Page 42: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/42.jpg)
Page count = 1Ok...
http://www.slideshare.net/KaDawg/measuring-the-mobile-experience-the-analytics-of-handheld-ux
![Page 43: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/43.jpg)
SPAs force you to consider what your users are actually doing so that you can track events
![Page 44: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/44.jpg)
![Page 45: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/45.jpg)
A personalized, adaptive, dynamic web experience benefits from a SPA
![Page 46: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/46.jpg)
...we don’t need pages.
Where we are going...
![Page 47: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/47.jpg)
UX role in architecture decisions?
![Page 48: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/48.jpg)
Articulate the trade-offs
Get measurements in place
Visualize new IA paradigms
![Page 49: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/49.jpg)
![Page 50: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/50.jpg)
![Page 51: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/51.jpg)
![Page 52: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/52.jpg)
![Page 53: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/53.jpg)
Recap! SPA =
● One HTML for the whole site● Views are rendered, but aren't full pages● It’s better!*
*for some things
Where to focus UX resources:
Then, design for SPA capabilities:
● Smooth out transitions● Track your events● Build dynamic, reactive features
First, deal with no page loads:
● Address navigation & states of views● Maintain your telemetry● Support SEO, accessibility, etc
![Page 54: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/54.jpg)
THANK YOUMat, Andres, Lucas, Nathan, John, Bharath, Kangsan, Sarim,
Thomas, Mayank, Ole, Dhruba & the Citrix design team
![Page 55: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/55.jpg)
Resources list:● Book: Designing for performance: Weighing asthetics and speed http:
//designingforperformance.com/● SEO: ● https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html;
http://www.analog-ni.co/precomposing-a-spa-may-become-the-holy-grail-to-seo ● Javascript and progressive enhancement: https://www.smashingmagazine.
com/2015/12/reimagining-single-page-applications-progressive-enhancement/● Accessibility: http://simplyaccessible.com/article/spangular-accessibility/ ● Older but useful SPA info: http://singlepageappbook.com/index.html, http://www.
bacancytechnology.com/blog/what-compelled-single-page-applications-to-jump-into-trends/
● AJAX tutorial: http://www.w3schools.com/ajax/
![Page 56: Can Single Page Applications Deliver a World-Class Web UX?](https://reader031.vdocument.in/reader031/viewer/2022030305/58729f331a28ab07208b55fb/html5/thumbnails/56.jpg)
Questions & Comments
?
http://www.uxpa2016.org/sessionsurvey?sessionid=269