Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Can Single Page Applications Deliver a World-Class Web UX?

752 views

Published on

By reducing the number of round trips to the server, Single Page Applications (SPA) promise a better user experience through improved performance and shorter load times. We discuss the benefits and limitations single page applications from a UX-focus perspective: How fast is fast enough? What are the tradeoffs and are they worth it? Besides a faster site, what other positives outweigh the tradeoffs? We look to two Citrix products, GoToMeeting and GoToWebinar, that have transitioned to SPA and resolve whether the new framework presents a clear advantage for the end user experience. These case studies also illuminate broader implications for the UX practitioner. For those not focused specifically on web development, we also reflect on strategies for providing UX leadership when transitioning to new architecture while maintaining a world-class user experience.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Can Single Page Applications Deliver a World-Class Web UX?

  1. 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. 2. Agenda ● Quick introduction ● Transition to a SPA ● Beyond the transition ● Recap
  3. 3. SPA? Sounds pleasant. What’s that?
  4. 4. http://www.clipartbest.com/clipart-dc7yyAqc9
  5. 5. home.html Chef Chad’s multi-page website about.html location.html contact.html menu.html
  6. 6. Chef Chad’s single page app home.html location contact aboutmenu
  7. 7. They’re all around you
  8. 8. hey! Take this HTML file More! I want more! OK. Here’s more HTML & CSS Client Traditional format Server
  9. 9. hey! Take this HTML file More! I want more! Here’s some data Client SPA format JS Server
  10. 10. AJAX Asynchronous Javascript and XML XMLHTTP JSON HTML CSS
  11. 11. Angular Durandal Ember React* etc.
  12. 12. Views Routes
  13. 13. Why SPA? performance maintainability modular code cost savings
  14. 14. Not SPA SPA
  15. 15. What’s so different about SPA?
  16. 16. No page loads. Now what?
  17. 17. 1 Navigation & State
  18. 18. 2 Measuring Speed
  19. 19. 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
  20. 20. Not SPA SPA
  21. 21. 3 Availability Search Engine Indexing Browser/JS support Accessibility
  22. 22. But maybe, you want to make the experience better?
  23. 23. GoToMeeting Web App
  24. 24. 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.
  25. 25. The server can drive interactions as well - “asynchronously”
  26. 26. “Traditional” analytics doesn’t work Page views Visitor Counts http://www.slideshare.net/KaDawg/measuring-the- mobile-experience-the-analytics-of-handheld-ux
  27. 27. Page count = 1 Ok... http://www.slideshare.net/KaDawg/measuring-the- mobile-experience-the-analytics-of-handheld-ux
  28. 28. SPAs force you to consider what your users are actually doing so that you can track events
  29. 29. A personalized, adaptive, dynamic web experience benefits from a SPA
  30. 30. ...we don’t need pages. Where we are going...
  31. 31. UX role in architecture decisions?
  32. 32. Articulate the trade-offs Get measurements in place Visualize new IA paradigms
  33. 33. 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
  34. 34. THANK YOU Mat, Andres, Lucas, Nathan, John, Bharath, Kangsan, Sarim, Thomas, Mayank, Ole, Dhruba & the Citrix design team
  35. 35. 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/
  36. 36. Questions & Comments ? http://www.uxpa2016.org/sessionsurvey?sessionid=269

×