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

http://www.youtube.com/watch?v=jF0mKsEtbQ8

http://www.youtube.com/watch?v=MCxUb7ABx-o

http://www.youtube.com/watch?v=XUJHReGSXf0

http://www.youtube.com/watch?v=jWoEGl5rdLE

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?

http://www.youtube.com/watch?v=KJNRoIRZ3zw

No page loads. Now what?

1Navigation & State

http://www.youtube.com/watch?v=aSiekEK3xl8

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

http://www.youtube.com/watch?v=er8cNrqLXP4

Not SPA SPA

3AvailabilitySearch Engine Indexing

Browser/JS supportAccessibility

But maybe, you want to make the experience better?

GoToMeeting Web App

http://www.youtube.com/watch?v=ByBRGtwW_U0

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”

http://www.youtube.com/watch?v=JE7z_liybXo

http://www.youtube.com/watch?v=kRIfk_f-GFk

“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