User Experience Design: grouped and collapsible panels

Web page Production WEBJX article introduction: explore the grouped and collapsible web pages panel.

Accordion (or accordion menu) is a grouped and collapsible panel set that provides a wide range of links or other optional content for access in a limited space.

Each inline panel may be expanded individually (when other panels are often closed), and a set of sub options is expanded when the mouse passes or clicks on the title of a particular panel (or the expand/collapse element on the panel).

What's the problem?

If you want to cram a lot of content into a limited space, or when the content is all displayed at once, causing the user to be at a loss, the problem comes, how to easily understand the user to access a large number of content, without the need to scroll the page. Scrolling the page lets users leave their preferred context or page position.

When do I use this mode?

When the options are large, the space is limited, and the content list can logically be grouped into smaller, larger-size chunks.

What is the solution?

Provides a level two option set

Y first level is categorized or grouped

Y The second level is the list of options within each group

Accordion is often designed as a collapsible panel (not a hierarchical tree structure), and the first level classification is usually used as a label. Category labels are often used as full length handles, or they provide the appropriate extension/collapse icons. Accordion usually displays an initial panel by default.

Suggestions

You open the most important panel by default, both to show the most important choices, and also to reveal the fact that each folded list is open.

Y highlight the currently open panel so that the user can distinguish between the open panel title and the closed panel title.

Y do not place accordion in accordion, if you really need to, consider the tree structure, or other more appropriate multi-level structure of the elements more appropriate.

Choose

Accordion can be configured to require at least one panel to be opened, or to allow other more flexible modes, such as allowing all panels to be turned off, allowing multiple panels to be opened, and so on. Some in the industry believe that it is best practice to allow only one panel to be opened at the same time, but there is no such view.

Ÿaccordion can be configured to open only one panel at a time, but in many cases it supports opening multiple panels at the same time.

y unless the layout or other immutable design restrictions require accordion to remain the same size, it should be possible to resize to accommodate panels of different sizes.

Y in many cases, only click to open the Panel in the accordion, but in some contexts, such as the "Happy"/fun/"Hey, see" elements, the mouse over the display panel is also possible.

Why use this mode?

The primary reason is that using the accordion element can cram a lot of content into a limited space.

Special Use Cases

Most accordion are arranged vertically, but some are arranged horizontally.

Accessibility

For keyboard users, accordion last either as a tree view or as a label view. It is possible to add keyboard navigation on the accordion, such as tab Control tab switch, up/down direction arrows in different panels switch between.

If JavaScript is disabled, then accordion should go back and make some useful changes, such as displaying all the panels at the same time.

It is not advisable to display no panels at all, because it is possible that screen readers cannot find content. So you might consider setting a height of 0.

Statement: This article is translated by pmcaff.com

Original link: http://developer.yahoo.com/ypatterns/navigation/accordion.html