In user experience consulting, there is no one-size-fits-all solution when it comes to interface design or technology. Every web application has unique characteristics, objectives, and business goals – and our role is to help find the right blend, while always keeping the big picture and the user in focus.
Typically, technology topics are best left to the developers – but occasionally, something comes along that warrants a basic understanding by the entire team because it has such an impact on the user experience. In this article, I’ll provide a brief overview of some recent trends that are fundamentally changing the way websites work.
The Rise of Single-Page Applications
Over the past few years, a great percentage of websites have undergone a transformation in the technology that is “under the hood.”
The main difference for the user is that the site interacts in nearly real-time without actually having to load a new page from the server. This is a big difference, and it’s what enables us to create a more immersive user experience.
How It Works
To understand how SPAs work differently, consider your connection to the internet as a wire. As a web page loads, there is a back and forth conversation over that wire between your browser (e.g., Chrome, Internet Explorer, etc.) and the web server. The browser makes requests and the web server receives those requests – and sends back whatever was requested.
On traditional websites, every page you see in your browser must get compiled on the server and then every part of it must get requested over the wire from a web server somewhere – and then, get sent back to you.
That means every database, style, image, script, button, form field… everything! Even more importantly, all of this need to be requested each time you view a new page. This is the reason you will momentarily see a blank page and then you must wait for the new page to load. The slower your internet connection, the longer you will have to wait for all of those requests to get answered.
On single-page applications, you still must wait for the browser to request the website from a server, but the difference is that it sends everything you need for the entire site the first time, except the database results (typically).
So, the first page may take a bit longer to load, but after that every page has already been compiled. You may need to wait to get data, but the pages themselves are already available and ready.
A simple example is a hotel search. The page is showing with your search options, filtering options, etc. But the results of the search need to be still need to be sent over the internet. When you click search, it may take a few seconds to retrieve the matching hotel names, rates, and photos – but the site itself does not need to reload.
You may have heard of the most popular frameworks that are used to create SPAs – they have become buzzwords in some cases. That list includes Angular (created by Google), React (created by Facebook), Vue, Ember, Meteor, and several others.
To see how a SPA looks and feels, check out Pandora’s recently launched SPA website. Try clicking around and notice how the page doesn’t reload, but the screen you’re viewing does. Think about how this compares with your experience using traditional websites.
The UX Impact
There are both big and small ways this trend can have an impact on the user experience.
The biggest way is in the speed of your site. While the first page may take a while to load, there are ways make users feel like that’s okay – by displaying loading indicators, showing a skeleton screen (the areas of the page are immediately shown without any content), or simple messaging.
Once the site is loaded, the performance difference is impossible not to notice. In fact, we often must add in an artificial half-second delay or animation because the screen changes too fast!
You cannot overstate the importance of speed when it comes to getting strong results from your site. Of course, you need exceptional UX and desirable content as a foundation. But countless studies have proven that users will abandon your site if they have to wait even a few seconds for each page to load. And, furthermore, conversions will go up as page speed increases.
Immersive and Realistic Interactions
The other way SPAs can impact user experience is by making interactions with the site more realistic. When a user clicks a link, you no longer have to make them wait for a new page to load. Instead, you can provide the user with an instantaneous response.
This can be anything from content sliding around on the page to various animations or messaging. Perhaps it’s an opportunity to suggest additional content dynamically. The possibilities are vast.
By thoughtfully including these kinds of immediate interactions throughout the entire experience, the user will know what is happening, be pleased at the quick response and probably feel better – or even feel delighted – with how immersive the experience felt.
Not Right For Every Site
There are some drawbacks and limitations to SPAs that you must consider. That said, there are also some myths about them. As a relatively new technology, there were some growing pains a handful of years ago that have improved greatly. SPAs can be accessible (we’ve created 100% accessible sites using Vue); the SEO drawbacks of the past have been largely resolved; and direct URLs are supported.
However, SPAs can be more complicated than a traditional site, especially if you are dealing with a small, customized site without much need for a database. In some cases, migrating to a SPA can be more complicated if you already have a complex enterprise web property, or if you have a large system that relies on content management.
At Crux Collaborative, we consider the requirements of every project carefully. We have used SPAs in some cases. In other cases, we’ve determined it was not the right solution. Surely, the development ecosystem will continue to evolve in the coming years and our approach will adjust with the technologies and with users’ expectations.
By Tony Johnson
Senior Front-end Developer
Tony has spent well over a decade building interactive applications. He collaborates in the full life cycle of projects – bringing a unique blend of technical savvy, creativity and strategic thinking to our user experience consulting services.View Tony's Bio