This document discusses whether single page applications (SPAs) can deliver a world-class web user experience (UX). It begins with an introduction to SPAs, noting how they differ from traditional multi-page websites by loading entire experiences onto a single HTML page using JavaScript. The document then covers some of the key differences of SPAs, including how to address navigation and state changes without page loads, measuring performance, and ensuring search engine indexing, accessibility, and browser support work properly. It concludes that while SPAs require a different approach to design and development, they can enable a more personalized, adaptive experience when their capabilities, like smooth transitions between views, are leveraged effectively.

1. 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

2. Agenda
● Quick introduction
● Transition to a SPA
● Beyond the transition
● Recap

3. SPA? Sounds pleasant.
What’s that?

4. http://www.clipartbest.com/clipart-dc7yyAqc9

5. home.html
Chef Chad’s multi-page website
about.html
location.html
contact.html
menu.html

6. Chef Chad’s single page app
home.html
location contact
aboutmenu

8. They’re all around you

13. hey!
Take this HTML file
More! I want more!
OK. Here’s more
HTML & CSS
Client
Traditional format
Server

14. hey!
Take this HTML file
More! I want more!
Here’s some data
Client
SPA format
JS
Server

15. AJAX
Asynchronous Javascript and XML
XMLHTTP
JSON
HTML
CSS

16. Angular
Durandal
Ember
React*
etc.

17. Views
Routes

18. Why SPA?
performance
maintainability
modular code
cost savings

19. Not SPA SPA

20. What’s so different about SPA?

22. No page loads. Now what?

23. 1
Navigation & State

25. 2
Measuring Speed

26. 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

28. Not SPA SPA

30. 3
Availability
Search Engine Indexing
Browser/JS support
Accessibility

31. But maybe, you want to make
the experience better?

34. GoToMeeting Web App

36. 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.

37. The server can drive interactions as well -
“asynchronously”

41. “Traditional” analytics doesn’t work
Page views
Visitor Counts
http://www.slideshare.net/KaDawg/measuring-the-
mobile-experience-the-analytics-of-handheld-ux

42. Page count = 1
Ok...
http://www.slideshare.net/KaDawg/measuring-the-
mobile-experience-the-analytics-of-handheld-ux

43. SPAs force you to consider what your users are
actually doing so that you can track events

45. A personalized, adaptive, dynamic
web experience benefits from a SPA

46. ...we don’t
need pages.
Where we are
going...

47. UX role
in architecture decisions?

48. Articulate the trade-offs
Get measurements in place
Visualize new IA paradigms

53. 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

54. THANK YOU
Mat, Andres, Lucas, Nathan, John, Bharath, Kangsan, Sarim,
Thomas, Mayank, Ole, Dhruba & the Citrix design team

55. 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/

56. Questions & Comments
?
http://www.uxpa2016.org/sessionsurvey?sessionid=269