Accordions
What Problem Does This Solve?
When there are too many items to fit into a limited space or when the number of items, if displayed all at once, would overwhelm the user, then the question is how to give the user access to all of the items in digestible chunks and without requiring scrolling, which can remove the user from the context or page position they may prefer.
When to Use This Pattern
Use when the number of options is large, the space is constrained, and the list of items can be logically grouped into smaller, roughly equal sized chunks.
What's the Solution?
Present a two-tiered set of options.
- The top level is categories or groupings.
- The secondary level is the list of options that fall into each group.
Accordions are typically styled as a stack of collapsible panels (and not with the look of hierarchical trees) with the top-level category items used as labels. The category labels may function as full-width handles or may be provided with a consistent expand/collapse icon.
An accordion may have one panel open by default on initial display.
Why Use This Pattern?
The primary reason to use an accordion element is to compress a large amount of options into a limited space.
Navigation Tabs
What Problem Does This Solve?
The user needs to navigate through a site to locate content and features and have clear indication of their current location in the site.
When to Use This Pattern
- There are 3 - 10 category titles.
- The category titles are relatively short and predictable.
- The number of categories is not likely to change often.
- The entire width of the page is needed for content. An alternative approach is to use a left bar navigation
- The categories belong to a single site.
- You need to represent the highest level navigation options on a site.
- You need to indicate the user's current location in the set of available options.
8.You need to change the entire page and not a sub-section of content within the page.
- You need a way to control the highest level of navigation.
Why Use This Pattern?
Tabs provide context. They offer the ability to give visual indication of a user's location within a body of information.
Tabs build on a real world metaphor. The selected state is reinforced with the file folder tab metaphor of a folder physically in front of the others in the set.
Tabs provide navigation. They provide the ability to navigate the site.
All the information is taken from https://developer.yahoo.com/ypatterns/. I'd advice you to study proven UI pattern libraries in case you want to explore or understand more. But they are not dogma.