Skip to main content

Accordions: The Secret to Effective Content Navigation

In highly regulated industries, process and procedures are key learning objectives.

Everyone involved in a product or a service life-cycle must receive timely and effective learning content in order to ensure quality and reduce compliance risks.

Standard Operating Procedures (SOP) constitute the fundamental documentation used to train end users rises.

When converting an SOP into a training content, the main challenge is finding the right to the best way to explain a complex process without neglecting the ergonomic of the navigation and the quality of the graphic user experience.
To achieve this goal, close collaboration between the Knowledge Design team and the Content Design team is necessary.

The Knowledge Design team thoroughly analyzes the SOP and its supporting documentation, identifies the key concepts, and schematizes them to make the processes clear. The Content Design team creates the right reading key: reorganize the concepts in a visual layout, design the content hierarchy, and define clear and effective navigation

The final goal of the design is to address these main needs:

  • Visualize text-rich documents, diagrams, and workflows on a single page
  • Facilitate the understanding of the processes 
  • Keep the user’s attention high 

In our experience, the best solution is the “accordion” Tool.

What is an Accordion?

An accordion is an interactive component for dynamically showing and hiding different content bits, while maintaining a clear and organized visual order.

An accordion is composed of three elements:

  • Title: the title of the individual panels must be clear and descriptive of the topic inside
  • Tab: in the panel, there is information related to the step, which will be hidden when the accordion is closed.
  • Icon: a graphic symbol that clearly indicates to users the possibility of expanding or contracting the elements.

What are the advantages?

➜ It reduces clutter: information is organized coherently with the steps of the process, reducing clutter on the page and decreasing the cognitive load on users.
➜ It creates a mental model: the organization of information in tabs works as a concise index, providing users with an overview of the process.
➜ It increases information retention: the shape, the colors and the graphic layout of the accordion help to create a visual memory that the user can recall afterwards more easily than a plain text page.
➜ It provides a perfect navigation to move from step to step reducing the number of clicks.
➜ A tool to convey your coordinated image: through the use of colors and icons, it is possible to use an accordion as an additional tool to highlight your corporate identity.

Do you need to improve the navigation of your training content?

Contact us, we will create together a custom accordion that sounds perfect for you!