Accordion - FAQ

Happy Friday!

Here's a simple study with accordions 😄

Accordions are similar to tabs, except for the fact that they're vertically aligned. In a lot of cases, I've seen accordions being used to convey small blocks of texts. One use case is an FAQ section.

Here are some of guidelines I follow for best practice using accordions:

🌸Indicate that the subjects are expandable using carats or add/subtract icons

🌸Clarify the expanded content by adding a slight indicator and have an active state for the expand/contract icon.

🌸Distinguishing the subject title from the content by changing weight

🌸Separate each subject using appropriate separator. I like to keep it subtle to preserve cleanliness :)

🌸Limit expanded content to a few sentences, clunky blocks of texts can take up a lot of space, thus, breaking the user's flow when they expand another subject

🌸Add a call to action in cases where users want to see more details