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.
A simple visualization might help:
...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.
Also check out
- Button symbol with centered text and icon in Sketch. Create a button symbol with overrides that keeps the text and icon centered within the button at any width.
- Calculate pixel-perfect columns and gutters. A quick and simple tool to calculate pixel-perfect grid systems.
- Instant FAQ in a single page app. A concept to serve quick answers to common questions in a single page experience.
- Keyboard touch input. Can your keyboard serve as tactile input?