Get answers quicker when every answer is on one single page

Even with 400 questions and a ginormously long page.

This really goes against any traditional or expected structure of how one would think of a large FAQ section of a website, particularly when there are over 400 questions and answers. The mind immediately goes to housing that content in a database and using queries and dyanmically-served content to deliver a simple and straightforward FAQ experience to a user.

This challenges that idea with the premise that if you simply served a page that had every single question and every single answer, then you could simply anchor, or scroll down the page, to that answer quicker than the latency of a page load, database query, and rendering of content.

A quick preview on tablet

It's more front-loaded for sure, but you would be surprised by how little. Even at 400 questions and answers, the entire page is a mere 230k. You probably serve single images larger than that on many of your pages. So for a single 230k payload, every single piece of content is loaded on the page and immediately accessible with a simple anchor.

But it goes just a bit beyond that, because we also want the ability to query it, and that's simply done with a quick scrape with JavaScript to build a data object as soon as the page loads. So in mere seconds, this small bit of front-loaded payload, we now have everything we need to serve the user lightning quick.

A simple visualization might help:

Traditional experience

...vs a single page app

In the traditional setup, every single action the user does involves either a page load or database query. The more actions the user takes, the more latency the user will experience. With the single page concept, the user experiences one single period of latency on page load. The rest is simply pure butter.

Head-to-head rough comparison

Take a look at the following side-by-side comparisons using PayPal as an example. On the left is my single page build. On the right is PayPal's live experience.

In this first example, the task is simply finding one single question and clicking it to find the answer. With even one query, the single page app wins by a hair.

This comparison is certainly not intended as a true usability test, and I would never claim this as such, but take a look at a second example in a scenario where I search for a followup question. Here, the time savings are further compounded, and any successive followup or additional question would certainly prove this win in time-to-answer.

You may also have noticed that these tests were done on a mobile device. So even at a whopping 400 Q+A ginormous page, does this experience scale well on mobile? Yes! Well, for iOS at least. On a Samsung device, lag and chug were very noticeable. Though reduced by half to 200 questions, this lag disappeared.

Go ahead and give it a test drive. Then compare it to PayPal's online experience, and you tell me which one feels quicker and more responsive. Works on both desktop and mobile.

More posts