The situation is unprecedented and delicate for everyone. The lockdown, imposed to combat the Covid-19 pandemic, is fueling all kinds of anxiety. Our team, responsible for interfaces, had to respond to several requests from our clients to design FAQs. Here, we publish the results of our initial analyses and offer an overview of the different available FAQ models... Along with our recommendations. Wishing us all the best of luck!
1 - Twitter: the "classic" FAQ
The Twitter help center is set up like a FAQ with questions sorted by categories and subcategories. Our team found the side navigation interesting—particularly the color changes that show users where they are. We appreciated the "back to top" button that appears as we scroll through the page. We are more skeptical about the search engine without auto-completion and the choice of having one page per category/answer, which forces us to go back.
What we like most:
- Questions grouped by categories, making it easy to find what you’re looking for;
- The large categories at the side that follow the scroll—anchors in the FAQ;
- Shortcuts to frequent questions;
- The "back to top" button once the scroll goes past a certain point on the page;
- The color change to indicate the related category;
- The anchor system for easy navigation between categories.
What we like least:
- The number of questions/categories is a bit too much;
- One page per answer, which forces you to go back to find categories again;
- The search engine has no auto-completion, so it’s not very efficient.
2 - Youtube: the "minimalist" FAQ
support.google.com/youtube/?hl=en-GB#topic=9257498
The Google help center has a clear and accessible homepage, an effective search engine, and expandable categories and subcategories. Too bad the internal pages aren’t as successful and that it’s easy to get lost when navigating between categories and subcategories...
What we like most:
- The search engine and its auto-completion;
- The design of the homepage interface, simple and efficient;
- The number of categories on the homepage;
- The drop-down bars (anchors) to display subcategories and the blue background to ease information overload;
- The “community” section/forum dedicated to mutual help;
- The sub-menu with categories in the inner pages for navigating from one category to another.
What we like least:
- The design of internal pages, less effective and less structured;
- Too many categories/subcategories/questions, which makes it even easier to get lost.
3 - McDonalds: the "tile" FAQ
mcdonalds.com/gb/en-gb/help/faq.html
McDonalds innovated by presenting its FAQ in a tile format. The idea is original. We like seeing the answer displayed right away when selecting a question, as well as the filters to sort categories. On the other hand, it's quite different from the FAQ format we’re used to. The choice of tiles, which are a bit large, impacts the experience.
What we like most:
- The search engine with auto-completion;
- The original tile concept;
- The filter system by categories;
- Displaying answers directly on the tile—direct access to the answer.
What we like least:
- Paradoxically, the chosen format makes the page heavier and reduces the amount of information visible at a glance;
- The category filter system hides categories. When selecting multiple categories, questions get mixed together.
4 - Whatsapp: our favorite 
This is now the new benchmark for our team. We love the simple and effective design, the ease of use of this FAQ and its high-performing search, the questions sorted by category, and especially the limited number of categories as well as how frequent questions are featured on the homepage. In short, we liked almost everything! The only downside is that each question has its own page, so you can’t easily navigate between questions or categories directly.
What we like most:
- The highly effective search engine with auto-completion so you can quickly find your question;
- The simple and effective design;
- The organization of questions, sorted by categories and with a limited number (8 on the homepage);
- Highlighting common questions by category on the homepage to speed things up;
- The drop-down bars and background color to help with navigation and make the information more accessible.
What we like least:
- Answers are only available on separate pages, so you can't navigate between categories.
5 - UxBeginner: the "one page" FAQ
Finally a "one page" FAQ! This format lets you have all the information on a single page without needing to navigate between questions or go back, etc. The anchor system for categories and the collapsible boxes to show answers to questions mean this FAQ has all the answers "in one place." It's a shame there's no search engine and that the categories aren't "sticky" to follow navigation without having to scroll back up to find them.
What we like most:
- The categorization and reduced number of questions (only 4);
- All information is grouped onto a single page
- The collapsible box system to display answers without cluttering the page.
What we like least:
- No search engine;
- Categories do not follow the scroll, which means you have to go back to the top of the page or scroll to find them again.
6 - What are we doing for the climate: the "website" FAQ
We’re cheating a little with this one because it’s a site we really love at bluedrop.fr (especially Marion), and it’s built a bit "like a FAQ." Among its strengths are its search engine and its side navigation. However, why not put the categories on the sidebar?
What we like most:
- The site's beautiful design and the animations/interactions;
- The search engine with auto-completion;
- Highlighting frequent questions on the homepage;
- Questions organized by categories;
- Lateral navigation, which makes it easy to go from one question to another.
What we like least:
- You can’t go from one category to another without going back to the home.
In conclusion, our recommendations for a good FAQ
Thanks to this comparison, we were able to identify best practices for designing an effective FAQ that allows users to quickly and easily get answers to their questions. The experience must be quick. Our recommendations are based in particular on principles from psychology that you can find in our articles
"The Gestalt Laws Applied to Design" and "Psychology Applied to Design".
- Our first recommendation is to implement a search engine for your FAQ, preferably with an auto-complete feature (especially if your FAQ has a lot of content).
- Our second recommendation is to follow, if possible, Jakob’s Law, which encourages adapting tools to users' navigation habits (an issue with McDonald's FAQ). While innovation is interesting, the interface and functionality of your FAQ should still use familiar standards.
- Next, we advise grouping questions by category, especially if the FAQ has lots of questions (make sure to name categories well). The more choices a user has, the longer their response time (Hick’s Law). We also advise against multiplying the number of categories and answers per category (Miller’s Law, which points out our mind’s limited ability to retain more than 7 items).
- Following our research, we also liked the “One page” FAQs, which make it easy and quick to navigate between categories and questions. We therefore recommend putting the FAQ on a single page with a sticky menu/submenu (Fitts’ Law). Finally, a slight color change in the menu to show which category the user is in, and you’re starting to have an effective FAQ (Von Restorff Effect).
- Final recommendation, display frequent questions at the top of the FAQ. This can save a huge amount of time and keeps users from having to search through the FAQ for their question.
So, those are our recommendations—they’re obviously not universal and should be adapted to each project, depending on goals, user needs, etc.
Here’s an illustration of our demonstration:
And you, what makes a good FAQ for you? What are your references?
Feel free to leave us a comment to discuss! :)
Alexandre Pons - UX Designer
