Grid accordion

Grid accordion

Aka: “Super maxi tabs”, “Expandable grid”

image2

A tab that opens a full width content pane. It opens and closes on a click from a block element. It pushes the content below down. The content is embedded in the page which means it loads quickly, is available for SEO and keeps the user on the page.

Status tags

In-use, situational

Implementation

Snapcraft language selector

When or why to use this pattern

When you are presenting a set of choices to the user, but where it is likely to want to see one.

The user needs to be able to make a simple choice from the tab content - e.g., strong, recognisable icons, logos or simple text headings. The content of the tab needs to be fairly simple (short) and consistent with the other tabs – not requiring it’s own webpage, not requiring scrolling.

Categories at a glance.

When not to use this pattern

  • Avoid using as a core UI pattern, best for browsing/discovery experiences
  • Doesn’t pair well with a dense UI.
  • If the content is dense or long or uneven between the tabs. The content shouldn’t require scrolling.
  • If the amount of content in the tabs shouldn’t slow the loading or performance of the page.

Possible design enhancements

  • make the interaction more visible, perhaps a darker arrow and the icon/word more like buttons
  • add animation on tab open and close as well as the page scroll
  • possibly add a close button inside the tab pane
  • try to rebuild without javascript

How it works

Steps or sequence of actions numbered

  1. User is presented a set of choices as icons, text or a combination of the two
    image5
  2. The user clicks on an icon or word
    image3
  3. The page moves the row of icons/words to the top of the browser and pushes the content below the icon down and displays a page of content related to the icon or word
  4. To dismiss, the user needs to click on another icon/word to open another tab, or click on the same one to dismiss the tab
  5. Error reporting state
  • the pattern currently requires javascript, so a non-js action is required (likely another html page with the tab content)

Notes:

  • Because of the non-js version, you will need to maintain the content of the page in two locations, unless the framework it is used on can support content includes.

Principles

Actionable

Only use this pattern when the user will likely only want to select one of the pieces of content.

Flexible

Should work or an unknown number of icon/word elements, but the content for each should be consistent in size and density.

Discoverable

It should be obvious that clicking on an icon/word in the grid will open a tab or lead to additional content. It should also be obvious how to close the tab.

Key Components in vanilla this pattern uses

It’s mostly bespoke but actually shares more in common with the matrix pattern than the tab pattern

Recommendations

  • Use something visual as the clickable item in the grid (if text is used then it should be short, bold or accompanied with an illustrative image)
  • Use for small amount of content

Do:

Only use when:

  • the user will only ever want to read one or two pieces of content
  • it is highly advantageous from a marketing perspective to lead the user deeper into the content

Don’t

  • use to show large amounts of content in the content pane
  • have inconsistent amounts of content in each content pane
  • use it shorten the page visually, hiding detailed, important content
  • use it when users might click on two or more tabs in a session

This pattern in use - real product examples

Snapcraft.io

Non-Canonincal examples

Expandable grid plugin
https://www.weavium.com/stacks/expandable-grid

image4

image6

CSS-only version
https://medium.com/@jahvi/css-only-accordion-grid-496137f6fc5a

image1

Known issues

  • JS only (in current implementation)
  • Current design doesn’t make much distinction

Wishlist