Watch out for these four key recurring issues to prevent a bad user experience when you’re testing single page applications.
First, you need some sort of loading indicator for your pages.
You cannot let your users stare at an unchanging page for several seconds without any indication that clicking a link did something. In addition, if a process within a page is going to take more than a second to complete, it should have a loading indicator as well. If, for example, you are sorting or filtering a large list of items, you need an indication to the user that something is happening and that the application hasn’t frozen.
Second, watch out for pages loading on top of each other.
For instance, if you click a link to one page while another page is already loading, by default, they’ll both continue to load. This means that once one page finishes loading and displays to the user, the other page will continue loading and override it once it finishes. When this happens, you can easily end up viewing the wrong page. This can occur with elements within a page as well. You can see an example of this behavior if you use Microsoft’s Team Foundation Server work item queries; if you click two saved queries in a row, the first one to finish loading will show its work items in the results area, but once the second finishes loading, the results section will, without warning, switch to showing the second query’s results instead.
Third, pay attention to dynamic areas within otherwise static portions of a page, such as a header.
For example, if you have a shopping cart with an item count, you have to make sure that every user action that changes the contents of the shopping cart properly updates the item count in the header as well. Because the site isn’t refreshing every time you navigate to a new page, you can’t just save something in a database and expect the client to automatically update to match it. Additionally, you have to consider the desired behavior if these actions fail; in this example, if you try to add an item to your cart that is no longer available, in addition to giving the user an error, the shopping cart total should remain unchanged.
Fourth, as a tester, make sure that you are clearing your browser cache between builds, or that you are always using private windows to test.
Due to the nature of single page applications, caching can be particularly aggressive. This can lead to all sorts of problems, particularly when confirming that bugs were fixed. Of course, you also need to ensure that caching issues do not cause problems for users in production; you cannot expect your users to remember to clear their caches every time you give them an update!
With these four aspects of single page applications in mind, you will be well on your way to delivering a quality user experience.