For years clients have been asking me about collapsible sections (also known as accordions) in SharePoint Online as this was previously possible with some code in the classic experience. Microsoft announced the general availability of collapsible sections and I have had the opportunity to play around with them in my dev tenant. There are a few information architecture and user experience topics you should keep in mind before adding these collapsible sections to your intranet pages:
Benefits:
- Collapsible sections can serve as a mini information architecture to your page if you are using strong headings. Remember to be:
- Specific: Be as precise with your heading as possible. No “Learn More” or “Click Here” as this can cause confusion for people with spatial challenges or using a screen reader as they cannot see the physical relationship to the previous text. Also avoid jargon or cute puns as this introduces a learning curve to understand the content. We need to make sure your users can get to the content first and common, familiar language is critical in supporting that.
- Sincere: As Nielsen Norman Group says, “a link is a promise.” Make sure the promise you make with your heading is supported by the content in the paragraph below. For example, if your heading is “Sign Up for Health Benefits” it should be followed by the steps to complete benefit election, not a flowery paragraph about the benefits offered by your company.
- Succinct: I know I just asked a lot of you by saying you need to be specific and sincere but you also need to be succinct. Sentence long headers can be difficult to scan. Focus on front-loading the information in your header as most people are really only focusing on the first 11 characters in a header as their eyes travel down the page. For example, instead of “Health Benefits Sign Up Steps” you may use the title “Sign Up for Health Benefits” as the user is already on the Health Benefits page so they know the context for signing up.
2. Reducing the length of the page can be less intimidating to the user. Continuing with your benefits election example, choosing your benefits at a new job or during a life event can be overwhelming and most companies offer a wealth of information to support this choice. Landing on the health benefits page and seeing all the details for HMO, PPO, Dental, and Vision can cause a visual overload and increase stress. Providing smaller overviews with a collapsible section below for more detailed rate information can make the page more consumable and scannable for the user.
3. Collapsible sections may better support the mental model of your content. Before collapsible sections were released many people used anchor links to help users navigate the content on a page. While this can be helpful in some use cases, it can also be disorienting for the user and removes the opportunity for them to form a mental model of the content on the page. These mental models help us return to the content and find the same information at a later date. Please note, as of November 2021 the anchor links on the collapsible section headers is currently broken.
While these benefits might have you running to your intranet to make updates, consider these challenges before converting all your pages as collapsible sections truly support a limited number of use cases.
Challenges:
- Collapsible sections increase the interaction cost. Interaction cost is “is the sum of efforts — mental and physical — that the users must deploy in interacting with a site in order to reach their goals” (source). Each click is mental currency, to decide to open the section, and physical currency, to perform the click. If the content in the collapsible section supports what the user is looking for this is currency well spent. If the user does not find the answers they need, this begins to fuel frustration which can quickly increase through a few failed attempts at expanding sections. Following the recommendations to keep headings specific, sincere, and succinct can help reduce this frustration.
- Reduced awareness of hidden content. As people are scanning pages, they may not be aware of the content hidden in collapsible sections leading them to search other pages. As of November 2021, there is a bug where using Cntrl+F to search for words will not show the results on the page when the section is collapsed. This means users are unable to land on a page then search for content that might be hidden in these collapsible sections leading them to miss it entirely. This reason alone gives me great pause in using collapsible sections as of today.
- Unable to print all content unless physically expanding all sections first. I consider this only a minor flaw as most people have continual WIFI access and will be accessing your content live. I strongly recommend organizations train their users out of printing content and instead bookmark as this ensures they will always be accessing the most up-to-date information as these pages evolve over time.
Collapsible sections can be a very powerful tool in designing your intranet pages though you want to be thoughtful about your information architecture to support scannability and ensure a good user experience through consideration of where collapsible sections best support the presentation of your content.
Resources
Accordions Are Not Always the Answer for Complex Content on Desktops: https://www.nngroup.com/articles/accordions-complex-content/
Emily Mancini 
One thought