Hidden Content
Hiding content comes in many forms, but generally we're referring to collapses. Collapses, along with hiding content in other ways, is not inherently bad, however it does come with several usability issues to consider.
The primary issue deals with interaction cost. Most of the time a collapse is implemented is because in some fashion, the web publisher is trying to make the content easier to use for the reader. However as a result the reader now must interact with the page each time they want to view more content, even when that content is minimal. This is often very detrimental when the user may want to view many sections of content. This can be cumbersome, cause resentment when the user feels the clicks are a wasted effort, and diminish reader's awareness of content, among other things.
When not to hide content
If you are adding a collapse because you are afraid people won't scroll, or won't read stuff lower on the page, or will be turned off by pages with a lot of content, rest assured that usability studies show these assumptions are simply untrue. While pages with a lot of content can be more difficult to get right, it can be done, and it can often be done better without hiding content behind a click. Consider the type of questions and amount of content found in the questions below taken from a real FAQ.
We are open Monday - Friday 8am - 8pm.
You must be enrolled in order to attend. Enrollment packets are available at the the campus. We are located in the building, Room 156. All forms must be complete, with all required signatures, before you can attend the center. Additionally, all immunizations must be current.
It's objectively easier for the reader if the content simply exists on the page with proper text sizing and spacing than if it's hidden behind tedious clicks. The user can quickly scroll and scan the content to determine what to read and read it quickly. It's frustrating to click only to reveal a few words of content.
When are you open?
We are open Monday - Friday 8am - 8pm.
How to I enroll?
You must be enrolled in order to attend. Enrollment packets are available at the the campus. We are located in the building, Room 156. All forms must be complete, with all required signatures, before you can attend the center. Additionally, all immunizations must be current.
When to hide content
The best criteria for hiding content from a user is when you think the user will not want to read most of the content that is hidden. If you have several sections of content and the user will most likely only want to read one or two, hiding the content behind a click can be useful to make the core page more scannable, and also not require much interaction to get the content the user wants.
If you have a page that you think is "too long" and you are tempted to hide the content behind an accordion, that could be a sign that maybe you should rethink putting all the content on a single page at all. Sometimes breaking the content onto several pages can be better.
Accordions are more suitable when people need only a few key pieces of content on a single page. By hiding most of the content, users can spend their time more efficiently focused on the few topics that matter.
How to hide content
So you think you want to hide content behind a click. You have a few options, namely: BS4 collapse, custom inline overlay, or a dialog modal. All three come with considerations. If you think the users may want to access more than one of the items you are hiding, it's typically best to use a collapse. If you are pretty sure users will only want to access one, or you are hiding content using a link in a more complex layout like a card, table or something else, consider the inline overlay. Modal dialogs can have a role, but you should read up on modal dialog usability best practices before choosing this method.
Collapse
Collapses are heavily documented on Bootstraps website and the web team has the tools to help you implement them on your website. They generally come in two flavors, default and accordion. The default uses either a card markup or even a simple button to toggle the content. The accordion style will automatically close other items in the group when a new one opens, but otherwise the function exactly the same.
Basic Collapse
TargetCard Panel Style
We are open Monday - Friday 8am - 8pm.
You must be enrolled in order to attend. Enrollment packets are available at the the campus. We are located in the building, Room 156. All forms must be complete, with all required signatures, before you can attend the center. Additionally, all immunizations must be current.
Accodion Panels Style
We are open Monday - Friday 8am - 8pm.
You must be enrolled in order to attend. Enrollment packets are available at the the campus. We are located in the building, Room 156. All forms must be complete, with all required signatures, before you can attend the center. Additionally, all immunizations must be current.
Inline Overlay
The inline overaly is a cross between a collapse and a modal. Like a collapse, content is shown inline on the page, or in otherwise with the other content, not on top of it like a modal. However like a modal, it captures keyboard focus for accessibility reasons and allow the user to navigate within the fixed content area. With a collapse, the content drops down below the target typically. With inline overlays, entire blocks of content can be replaced when activating the target. The markup is slightly complex, but is similar in structure to an accordion where you have a parent container, a wrapper over the content you want to hide on click and then hidden blocks all connected with IDs to their links.
Other Options
There are other ways to clean up your page besides hiding content behind a click. These vary based on the common UX standards for different page types.
Frequently Asked Questions
By far the most common use of collapses is for frequently asked question pages. For shorter FAQs, less than 10 questions or so, just putting the content on the page with proper spacing around each question is generally enough. Once a FAQ gets a little longer, we recommend providing an in-page navigation that will "jump" or scroll the user to the question they want. If a FAQ has over 20 questions or so, it starts to make sense to break the FAQ into sections itself or possible link to pages where the answers reside, thus making the FAQ more easily searched using a search tool like Google.
Web users are almost always task focused, so a long list, even if it's just a list of questions, can be tedious to read through and users can still miss items. This is why if your FAQ really needs to have 20+ questions, we recommend you look at splitting it into logical categories to help people drill down to what they need. The Norman Nielsen group has a very comprehensive write up on FAQs you may want to review as well as the UI patterns website.
Lists of Content
Similar to a FAQ, if you are providing a list of things, job openings, services, etc. it's often best to just list them but not collapsed. It just makes the content easier to scan for the user. You can still consider using jump links to the content. If you have very long lists, much like FAQs, consider breaking the lists into sections or categories, or otherwise provide the user the ability to filter the list without having to click everytime they want to see more.