The biggest challenge in single page app usability is that you’re trying to rebuild functionality that web browsers typically handle automatically. You want to make it so, if users click the back or reload button, it does what they expect. Some single page apps are awesome at this: two of the best are Gmail and Google Calendar. But other apps have issues.
Getting good single page app usability can be quite a challenge, so I want to point out examples of common issues in hopes that we can keep them in mind to create more usable apps. Besides, I’m a power user of most of these apps so I’d be happier if these worked as I’d expect!1Single page apps also have challenges or require special considerations for SEO, visitor analytics and page load time that are beyond the scope of this post.
1. Passport JS: The back button doesn’t work at all
Fortunately, this is a pretty uncommon single page app usability issue, but it still crops up in some places. Here’s an example from PassportJS. From a technical perspective, I wouldn’t think of PassportJS’s homepage as a single page app, but from a user perspective, I think it actually is. Clicking into search causes a new screen to appear over the old one, which is technically very similar to a lightbox. The reason I consider this a single page app from a user experience, though, is that it doesn’t look like any lightbox users are accustomed to. It looks like a new page. And, say you don’t see the “X” that appears when you go to search.2I didn’t until writing this article. What happens when you try to click back?
2. Mint: The back button does not remember your scroll position
Normally, a browser’s back button takes you to the same scroll position you were at when you navigated off the original page. That’s another single page app usability issue we have to consider. Here’s an example from Mint, where I’m browsing through my Starbucks transactions. I scroll down, then go to page 2. When I click back, I’m taken to the top of page 1, not the bottom.
In this case, we’re dealing with a short list so it isn’t too big of a deal. But, this can be problematic when you have long lists of data, especially when you are going to another page by clicking on one of the list items in the middle of the list.
3. FreshBooks: Reloading the page takes you to a different page state
I often work in multiple tabs in my browsers, and that presents more single page app usability issues. For instance, I use FreshBooks for my time tracking and invoicing. Often, I’ll open a time tracking report in one tab while I edit time entries in another tab. However, when I reload the time tracking report, it doesn’t remember my filters. If this was a traditional site, with an HTML form that posts to a results page, my filters would still be there. Here is me setting a filter to show my time for “This Week”, then clicking reload, and having the filters reset to “This Month”:
4. Google Analytics: You can’t open links in a new tab
As I mentioned, I often work in separate tabs and there are different single page app usability issues that come with that. Sometimes, in Google Analytics, I want to be able to easily copy and paste data between different views. But this doesn’t always work. Below I show the default behavior of clicking a link in Google Analytics and what happens when I try to open that same link in a new tab by holding Control as I click the link:
When you have to copy a lot of data from one View to another,3The video is a fairly simple example since the option just includes one IP address filter, but imagine copying a Goal from one View to another. That has three steps’ worth of options. it would be really useful to open up those options in a new tab so I could compare as I’m copying the data.
Bonus: Facebook: The back button takes you to different content than you saw before
Okay, so Facebook isn’t actually a single page app. Still, this is an issue that could certainly affect single page app usability. On Facebook, if you navigate off your news feed, then click the back button, you get back to the same scroll position but not the same content. Here’s me clicking through to see where my friend filmed his drone footage. Then, I click back, and I don’t see the same post: instead, I see an ad telling me to tag people I played Mario Kart 64 with:
Single page apps can definitely create great experiences for your users, but it’s important to be aware of what browser functionality you’ll have to rebuild (or intentionally give up) in the process.
