1

I personally think that accordions should not have next or previous buttons, which is different to a wizard, where there is a specific order in which data must be entered.

Moreover, this might end up cluttering the form with unnecessary buttons on each panel.

And with the modern forms, I think that users know what an accordion is and clicking it expands and collapses it.

Is there any use of these 2 buttons in an accordion and what is the general norm around this?

Improve this question
5
  • I think user interface elements tend to be mixed together these days because a 'flat' design style has reduced the affordance to visual or interaction related cues. The question you should probably ask is why you might want to put a next or previous buttons in an accordion in the first place.
    – Michael Lai ♦
    Commented Jun 5, 2017 at 3:43
  • @Divi I would love to know what inspired this question. Personally, I have never seen an accordion with previous/next buttons and would really like to know more background for your question. Can you offer an example that you have seen? Or, if this has grown out of a discussion, maybe you could tell us more about the argument for the buttons?
    – Roux Martin
    Commented Jun 6, 2017 at 7:35
  • @AndrewMartin: There is an application form with lots of sections. Each section is inside an accordion. One of the devs asked me to add next and prev buttons inside the accordions, meaning duplication of the buttons in each accordion and cluttering the already busy form. I do not believe that these buttons are required in the accordions and just like you said, I have never seen one with these buttons. I still might have to implement as he asked me as I am new to this place, but sure am not happy about it. Maybe if I had some really good argument, I could go back to him and convince otherwise.
    – Divi
    Commented Jun 6, 2017 at 21:52
  • @Divi In that case, are you sure an accordion is the right way to present the form? It sounds like your Dev has picked up on something in the nature of the form that requires the user to follow a sequence (that's why they're suggesting previous/next buttons). Accordions allow a user to select anything from a range of data regardless of sequence. You might want to take your Dev's request for buttons as a sign that something is wrong with the form.
    – Roux Martin
    Commented Jun 7, 2017 at 5:30
  • @AndrewMartin: Thanks, but this form does not follow a sequence, it's not a wizard, it's a huge form that has been sectioned into accordions. But the dev believes that all accordions should have next and prev buttons, regardless this form or another.
    – Divi
    Commented Jun 7, 2017 at 21:56

3 Answers 3

Reset to default
2

You should not have next or a back button in an accordion.

This would absolutely wont make any sense. Accordion itself is a pattern / design element which stores the group of items / list / description.

You would want to load lots of information in to it where these groups of content need to be shown in intervals. To address this requirement you may need next or a back button in to it.

For this kind of requirement the best way to handle would be layering the content.

I mean group the content with labels and these labels should be shown in accordion. On click of the list item leads to details. More info / add on info (Secondary content) can he hidden in an link / button.

Improve this answer
2

I don't think its necessary to place prev/next button in accordion. If you want to add prev/next buttons you should prefer pagination. Accordion itself is element which are commonly used in list item. It is very easy and nice element to use. Adding prev/next button will unnecessarily make it more complex.

Improve this answer
1

I don't think this should be a question about accordions per se. If you find that an "accordion with next/back buttons" works the best for a problem you are trying to solve during your testing, then go for it.

But I don't remember seeing this combination in any application, so perhaps people always found a better solution...

Improve this answer

Your Answer

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

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