A concept to serve quick answers to common questions in a single page experience
The idea for this was borne from an earlier prototype I made of a single page app that served quick answers for chat support personnel. The premise was to load all chat questions and answers onto a single page with quick filtering and searching to pull up the relevant answer in real-time with a customer.
Instead of spreading each question/answer across separate pages to search and click through, they're all made available on one single page to access all content with immediacy and fluidity.
Single page app
...vs a traditional experience
The prototype had roughly 40 questions and answers weighing in at a 23 kilobyte page. Even at 400 questions and answers, the page would still come in at a very light 230k. That's a single 230k payload resulting in immediate availability to every single question and answer, given the right search and filter, and completely without the need to query databases and the continous overhead of page load after page load.
As a customer-facing support page
It wasn't a huge leap to see how this could also serve as a customer-facing page to answer frquently asked questions. To test this out, I set forth with the basic requirements:
- Mobile first. Can the experience feel fast and intuitive on small screens.
- Large data set. Can the performance of the page stand up to a large amount of data.
I did a quick assessment of support sections of a few major brands to use as test data, and PayPal's fit the bill with roughly 450 question and answer content. I did a quick scrape of the content and scrubbed through it to remove all mention of PayPal and their product names.
I should also note that PayPal's support experience is very simple, intuitive and robust, so this isn't a proposing a better solution, particularly without knowledge of their business, technology, or search requirements. I just wanted a data set to quickly play with.
So with this data, I spiffed up the design and inserted the content. Firing up the page for the first time on my phone was a moment of hesitation. To my surprise, the experience held up. At just over 800k, the page still felt quick to load. And scrolling performance on my iPhone SE didn't miss a beat.
Measuring speed to answer
Out of curiosity, I performed an anecdotal, non-authoritve, not-meant-as-real-proof, test. As a direct comparison, I wanted to see how quickly one might perform the simple use case of searching for a question, clicking it and reading the answer.
Basically, could the speed to answer on a single page experience overcome the larger and longer page load? In my purely anecdotal series of tests, my belief would be simply yes. In the video below, while the page loads takes a little longer, it's already compensated by not needing to ping a database while typing in the search query. The live results while typing are immediate because the data exists right there on the page. The time savings is compounded with the immediacy of scrolling to the answer, versus a page load that also comes with the overhead of displaying the site header and search box, further requiring the user to scroll past those to the answer.
In a second use case, what if the answer did not sufficently satisfy the user's question, and the user needed to go back to the results of their query to try another question? With a page load, those results are destroyed, and the user must re-enter their search query. In the single page experience, the state of the results are retained simply because there's no action to be inferred to revert that state. A shortcut button allows the user to jump back up to the results to immediately choose again. And the savings in time compound even greater.
The prototype is far from perfect, meant as a proof of concept without a deep exploration of every single user or business need. The recommendation is simply to challenge the often traditional database solution with a more fluid and fast single-page experience, which could also be to the benefit of both user and business.
- Calculate pixel-perfect 12 column grids. A quick and simple tool to calculate pixel-perfect grid systems.
- Instant FAQ. A concept to serve quick answers to common questions in a single page experience.
- Keyboard touch. Make your keyboard a tactile touch input device.
- Food query. Quick query of 3,000+ food items with a simple array.