Accordions are a very popular user interface component or element today. On mobile devices they are being used a lot since they collapse the content and make the height or length of the pages more manageable.
On desktop, too, they reduce visual complexity and allow users to focus on the most important or relevant content.
Main Usability and UX problems with accordions or Expand and Collapse
Accordions are not always the best solution for pages that have a lot of content. It is true that they shorten the pages and reduce scrolling, but they increase the number of interactions that users carry out in order to consume the content, having to click on the title to access it.
An accordion or Expand and Collapse menu is nothing more than a list of vertically aligned headers one below the other that you can click to show or hide their content.
Some advantages of accordions
Some main advantages of using Expand and Collapse on pages with a lot of content are:
- By collapsing the accordions the length of the page is minimized.
- The titles of the accordions serve as information architecture for the user to generate a mental model about the contents of the page.
- Hiding content or part of the content reduces the cognitive load on users.
- Accordions can be a great alternative to hide link nests. A technique widely used by people specialized in SEO.
Some usability disadvantages with accordions
Although accordions are usually quite good components for presenting very long and complex content, they also have some downsides or drawbacks:
- Forcing users to click on titles one at a time to display the full content can be cumbersome. In the hypothetical case that there are many interesting topics for a user, it is likely that they will have to open most of the accordions to be able to consume the content.
- Accordions increase the time and effort of interaction. Forcing users to make many clicks to consume content can be counterproductive.
- Not displaying the content may lead to misunderstanding of the accordion title. The headings or titles must be clear, descriptive and attractive enough to motivate people or users to click and expand the accordions.
Keys to use accordions or Expand and Collapse
Knowing the context and scenario of the users for whom an interface is being designed is very important. In the event that you want to include accordions on that page, it becomes more relevant.
Some aspects for which the use of accordions should be avoided are:
- When users need most or all of the visible content in order to perform a particular task.
Some key aspects of using accordions are:
- When users only need part of the content to be able to execute a specific task or resolve their doubts.
- When space is restricted. An example is on mobile devices.
Accordions or Expand and Collapse on mobile
As a definition, an accordion can be described as an element that when touched on a mobile expands to expose or show hidden information. As far as how it works when they expand they push the content of the page down instead of overlapping it.
While the use of accordions on desktop may be debatable, on mobile devices accordions are one of the most useful layout components. It often successfully solves the problem of displaying too much content in too little screen space.
Although they allow users to get the big picture before focusing on the details and mitigate the problem of pages that are too long, they also have disadvantages.
Accordions on mobile devices can present some Usability problems:
- Unrepresentative expand and collapse icons.
- Disorientation.
Accordions are a great tool for mobile layouts because they condense information into a limited space and allow users to see the big picture and focus on the essentials rather than the details. However, when the content below the accordion is too long, they can force users to scroll too far to collapse the accordion and navigate to other information on the page.
Facebook Comments
Disqus