How To Not Screw Up UX In A Single-Page Application

Single-page application architecture

Most websites are broken up into pages in order to make the information they contain easier to consume. The traditional architecture is to give each page a unique URL. To navigate to a page, the browser sends a GET request to the page’s URL. The server will send back the page and the browser will unload the existing page and load the new one.

Routers

A router library is the engine of the SPA architecture. It will mimic browser navigation through JavaScript and various web APIs so that the user gets an experience similar to that of a traditional multi-page app.

  • Match parts of the application to URLs
  • Manage the address bar
  • Manage the browser history
  • Manage scrollbar behaviour

Improving UX

The intention of the single-page application architecture is to improve UX, and it does so in the following ways:

  1. Once the SPA has loaded, navigation between pages is quicker because SPAs will reuse page elements and therefore won’t need to keep downloading the same repeated markup. However, a router library will need to be added to your JavaScript bundle, so keep this in mind when doing the accounting.

Pitfalls

Ironically, single-page applications can harm UX if certain pitfalls aren’t avoided:

  1. SPAs have a large initial download size. Since the router and multi-purpose page elements must be downloaded first for the app to work, SPAs require an upfront download before they run. Build tools like Webpack can help by lazy-loading any code not needed before the first render.
  2. SPAs will need custom loading states and errors messages. Browsers give visual cues that a page is being loaded, and a web server can return a 404 page. The result of an AJAX request, on the other hand, is hidden from the user by design. SPAs must find a way to let users know if the app has successfully responded to their actions or not.
  3. With a naive implementation of the SPA architecture, page content may not be included in the initial page download, which means a user may have to wait for JavaScript to run and AJAX calls to complete. Server-side rendering or prerendering is a solution to this but often requires a complex setup.

Conclusion

The purpose of the SPA architecture is to provide superior user experience, but unless proper care is taken, it can have the opposite effect!

  • Employ build tool features like code-splitting and lazy-loading to ensure the initial code bundle isn’t too big
  • Implement loading states and error messages so that the user knows the page is responding to their actions
  • Use prerendering or server-side rendering to ensure your SPA shows content as early as possible

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store