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
Agenda● Quick introduction● Transition to a SPA● Beyond the transition● Recap
SPA? Sounds pleasant. What’s that?
http://www.clipartbest.com/clipart-dc7yyAqc9
home.html
Chef Chad’s multi-page website
about.html
location.html
contact.html
menu.html
Chef Chad’s single page app
home.html
location contact
aboutmenu
They’re all around you
hey!
Take this HTML file
More! I want more!
OK. Here’s more HTML & CSS
Client
Traditional format
Server
hey!
Take this HTML file
More! I want more!
Here’s some data
Client
SPA format
JS Server
AJAXAsynchronous Javascript and XML
XMLHTTPJSONHTMLCSS
AngularDurandal
EmberReact*
etc.
ViewsRoutes
Why SPA?
performancemaintainabilitymodular codecost savings
Not SPA SPA
What’s so different about SPA?
No page loads. Now what?
1Navigation & State
2Measuring Speed
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
Not SPA SPA
3AvailabilitySearch Engine Indexing
Browser/JS supportAccessibility
But maybe, you want to make the experience better?
GoToMeeting Web App
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.
The server can drive interactions as well - “asynchronously”
“Traditional” analytics doesn’t workPage views
Visitor Counts
http://www.slideshare.net/KaDawg/measuring-the-mobile-experience-the-analytics-of-handheld-ux
Page count = 1Ok...
http://www.slideshare.net/KaDawg/measuring-the-mobile-experience-the-analytics-of-handheld-ux
SPAs force you to consider what your users are actually doing so that you can track events
A personalized, adaptive, dynamic web experience benefits from a SPA
...we don’t need pages.
Where we are going...
UX role in architecture decisions?
Articulate the trade-offs
Get measurements in place
Visualize new IA paradigms
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
THANK YOUMat, Andres, Lucas, Nathan, John, Bharath, Kangsan, Sarim,
Thomas, Mayank, Ole, Dhruba & the Citrix design team
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/
Questions & Comments
?
http://www.uxpa2016.org/sessionsurvey?sessionid=269