4

According to this article, an accordion is composed of headers and panels as follows:

Structure of an accordion

I will refer to a single one of these elements, with a header and panel, as a “collapsible panel”.

Below is part of an accordion example provided by W3, showing a collapsible panel developed with best practices:

W3 accordion example

But what about a collapsible panel design with the header at the bottom?

Accordion with header at the bottom

One issue I can think of is, if the content is quite long, like in the example here, the user might not be able to see the header easily. However, assuming the content is small (e.g., only 2 fields), are there any other UX concerns with this design?

More Details

The reasoning behind this design is that it feels more intuitive to me. I will try to illustrate with an animation:

Animation frame 1

Animation frame 1

Animation frame 2

Animation frame 2

Animation frame 3

Animation frame 3

Animation frame 4

Animation frame 4

I am considering this design for such content in general, not for a specific scenario.

2
  • what is your specific situation, and what is your reasoning behind putting a header below the content?
    – Mike M
    Oct 29, 2020 at 14:46
  • @MikeM I edited the question and added this info.
    – hb20007
    Oct 29, 2020 at 15:06

1 Answer 1

5

While I understand your read on why the header would go under the panel; the opposite visualisation can follow the same animation "principle" and make the same amount, if not more, visual sense.

Think of an actual accordion being held sideways by someone. The "header at the bottom" logic would have the bottom half of it being pulled down to show the "folded" part; while the "header at the top" logic would be the same accordion being "unclasped", which would make the bottom half just fall down to show the folds (panel). So, from the get-go, I'd argue that the "header at the top" relationship is connected in a more natural and effortless way to its physical world counterpart.

Putting that aside, having the text that titles something at the bottom of that something goes pretty head-on against a left-to-right, top-to-bottom reading and hierarchy pattern. A title, or a "header", goes at the top of a content to give it a name and context (hence the name). In short, having a "head" at the feet is a big no-no in my opinion.

What might be throwing you off is the arrow element being used to expand the panel. Consider other options:

Arrow on the left pointing to the header title

Arrow on the left pointing to the header title

Expands to an arrow pointing down. The selected header gets highlighted and the physical relationship between the header and the panel that shows up "under" it can be reinforced by indentation or a shadow

enter image description here

Another option is using the +/- signs

enter image description here

Regardless of the chosen element to indicate expansion, I'd strongly recommend not putting the header at the bottom. Besides what I just mentioned, if you have a lot of items in your panel, the header might go under the scroll line; so I would be looking at a list of items in a panel without knowing their title (context). You could use an internal scroll on the panel, but scrolling up and down a list that has its title on the bottom still feels very odd.

Well, those are my two cents, hope it helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.