Questions tagged [accordion]
An accordion is a stacked list of item references (e.g. labels or thumbnails), where each item can be "expanded" or "stretched" to reveal more content associated with that item. Typically only one item can be expanded at a time, and expanding a second item causes the last opened item to be closed.
111
questions
1
vote
2
answers
297
views
Dropdown with - progressive disclosure with accordions vs chevrons
What is the best UX for the user? Expanding the field in the same dropdown or opening a new dropdown?
The first image presents an accordion option when the user is able to preview the content in the ...
CommunityBot
- 1
1
vote
2
answers
1k
views
Most intuitive accordion action icon
There's a lot of buzz and fuzz about the icon usage for an accordion header (state changing button).
After a short research, I came to the conclusion to use up and down arrows and I was wondering if ...
- 8,686
13
votes
4
answers
2k
views
Which accordion Identifiers work best?
which accordion identifiers make more sense?
plus and minus
OR
up & down arrow chevrons
I'd be very interested to see if anyone has any analytics or proofs on these concepts. As always, ...
- 347
2
votes
1
answer
2k
views
Wizard pattern vs. Accordion pattern in a long form
Wizard pattern (multi-step) vs. Accordion pattern in a single long form?
Q1. What is the best pattern to chose for the following scenario
Scenario
In an Admin console, Admin have to create an ...
0
votes
1
answer
412
views
Accordion vs collapsable section
Is there any difference in accordions vs collapsable sections? Can we say that accordions have data, and collapsable sections have a layout? But, how do we visually differentiate between them? The ...
- 25.9k
0
votes
2
answers
465
views
What are some alternatives to accordions?
I need to add "next steps" at the end of a form but there are ~11 steps that I need to add. I want to use an element like an accordion where I can list all the steps but not overwhelm the ...
- 25.9k
1
vote
0
answers
52
views
What is a good way to display a list and editable list item on a detail page? [closed]
I have detail pages that are kind of like the attached image. An "entity" might have 1-15 children. Each child can be edited. You can also create a new child.
I can think of two ways of ...
- 13
1
vote
3
answers
119
views
Expand details of a table in accordion or a new tab?
I have a table with a list of companies (only the most important properties):
There is more data for each company, including another list of Licenses.
To expand that company details, should I use:
...
CommunityBot
- 1
0
votes
2
answers
63
views
Combining a variable size scrollable list, a fixed size scrollable form and a small fixed size non-scrollable form
I'm trying to design a desktop app and I have an Entity that has three "sections" for its settings/parameters:
a short section of 5 fields (text fields, checkboxes...) - probably doesn't ...
0
votes
2
answers
62
views
On an accordion or tab interface with animations, if a user rapidly clicks multiple items, which should open - first click or last click?
I recently encountered a bug in tab and accordion interfaces on our website. These tabs have a bit of animation so there is a slight lag between clicking an item, and it being fully open. The bug ...
- 161
0
votes
2
answers
1k
views
Design with an accordion inside an accordion [duplicate]
Is it a silly idea to have a UI where you open an accordion and another accordion appears inside, and when you tap it, multiple forms appear?
The goal is to hide as much as possible the fields where ...
- 2,656
4
votes
1
answer
110
views
When an accordion or collapsible panel is open, are there any concerns with having the header BELOW the panel?
According to this article, an accordion is composed of headers and panels as follows:
I will refer to a single one of these elements, with a header and panel, as a “collapsible panel”.
Below is part ...
- 175
2
votes
2
answers
805
views
Should an open accordion section be hidden when the user clicks on another section?
I'm designing for an enterprise-level software. The software is a repository for different departments to store their files. The content types are Dashboard and Reports but inherently both of them are ...
- 175
1
vote
3
answers
404
views
How can you show additional information in a pop up
I'm designing this popup for a mobile website where a single input needs to be added. the user might need some additional information to help them with this input (e.g. the serial number is visible at ...
CommunityBot
- 1
11
votes
4
answers
31k
views
Difference between caret and chevron
Is there any functional difference between a caret and a chevron? Our discussion is about what should we use for dropdowns and accordions and whether they should be different.
- 121
2
votes
2
answers
2k
views
Good place to put delete button for accordion?
I want to incorporate a delete button/option on an accordion (I don't want the delete button to be hidden to users since it's important for the function of my design.)
Currently, I'm not sure of a ...
3
votes
0
answers
41
views
How to deal with the interaction from a collapsed summarized list to a expand full-list? [closed]
Hopefully I can explain it well, but we provide products on our website, which have a lot of product details available. But for most of the people, it's mainly about the key features. And as we have a ...
- 560
5
votes
2
answers
808
views
Using accordion lists with radio buttons
I am designing a UI for a popup that would allow the user to share a post with one class at a time and select which class. They should also be able to drill into each class and select all or certain ...
CommunityBot
- 1
41
votes
6
answers
38k
views
Which way should arrows point in a collapsible accordion? Left/down … down/up?
What is the best way to indicate that it's possible to open and close an element accordion-style?
Arrow pointing left/arrow pointing down
Arrow pointing down/arrow pointing up
Plus sign/minus sign
… ...
- 1
0
votes
2
answers
996
views
Is this an accordion or not?
If you have scenario where you have a card component that can be expanded and collapsed independent of other cards
eg. when expanding this card, other cards do not collapse.
Is this still an ...
- 974
19
votes
2
answers
1k
views
Senior Usability and Navigation
Does anyone have any current resources for senior usability? I'm specifically researching navigation: tabs and accordions. The Jacob Nielsen site has a report that's over a decade old. I'm looking for ...
- 103
0
votes
1
answer
149
views
Which is the best way to deal with table, when we have more than 500 expandable list in a view page?
I have a view page in my application wherein I am listing the number of devices along with the device configuration details like protocol, Broker Ip, Payloads etc. I have designed this list in such a ...
CommunityBot
- 1
1
vote
2
answers
291
views
Use tabs or just present all the content out in an accordion?
For a design project, we are deciding whether using a tab within the accordion or just lay out the data with subtitles within the accordion will best help categorize the content for the user.
What do ...
- 1,625
0
votes
3
answers
520
views
Appropriate UI pattern for Expandable List Item in Data table?
I'm currently looking to find a solution for expanding a list item in a data table to display more information. One of the best solutions I've found thus far is done on reddit (see screenshot).
Any ...
2
votes
3
answers
600
views
Radio buttons within Accordion
Newbie here.
At item creation, the user needs to select one of the available descriptions.
They are grouped by Category. Categories are self exclusive and users are trained so choosing category is ...
CommunityBot
- 1
0
votes
2
answers
326
views
Accordion with multiple target
We all know how accordion work, as set by the web. You have a list of items, each containing sub content.
We also know that the standard for accordion is to have a single interaction on the top items:...
- 1,809
1
vote
2
answers
725
views
Multiple Steps WITHIN a Multi-Step Accordion Form
I'm designing a multi-step accordion form flow for a package shipping process. The users fill out their "to" and "from" information easily in separate accordion sections, but the third section ...
- 1,894
2
votes
2
answers
529
views
Nested accordion shouldn't close parent when working in child
Our accordion currently works as follows:
If you click on an item inside the accordion it opens the accordion if there is content under it and it opens a screen next to it. If you click on an open ...
- 1,539
77
votes
9
answers
25k
views
How should you show that an accordion is expanded?
When you have an accordion, you need some way of showing the current state is expanded.
There are a number of different ways of handling this, and each is used by a number of respected websites and ...
CommunityBot
- 1
0
votes
3
answers
2k
views
Should I use the accordion with long text?
We design the help centre for our product.
We have an idea to put each long articles, instructions and the form to leave feedback to accordions.
Will be it convenient for users? I think that if there ...
- 4,582
0
votes
1
answer
527
views
Tabs in Accordion
I have a card with an accordion with 2 related but separate functions.
I'm cautious about a design pattern that puts Tabs in Accordion to seperate this functionality.
Firstly its not something you see ...
CommunityBot
- 1
0
votes
2
answers
761
views
How to group a long list of items on 1 mobile app page?
One of the applications I work on is required to display a long list of items. The list page must display a list of line item labels and their corresponding values. The user can select some of the ...
- 6,611
1
vote
3
answers
408
views
Would it be a good or poor user experience if I guide users through a wizard and not let them see it again?
I'm currently designing the UX for an event travel site. It starts off with the organizer registering and then it goes right into the "wizard" where it functions like an accordion -- broken up into a ...
CommunityBot
- 1
1
vote
3
answers
433
views
Having a separate accessible page for screen reader users
I have been working in the accessibility of an accordion that is used to take user input from checkboxes and return a list of criteria based on the user input. We are using Outsystems and have not ...
- 1
0
votes
2
answers
486
views
Multiple preferences 3 layers deep
I'm trying to come up with a solution for the problem that is the ability to select multiple preferences with upto 3 layers deep.
The primary layer would affect the options shown for layer2, and ...
CommunityBot
- 1
1
vote
1
answer
2k
views
Accordions on iOS, and Android
Back in the day, Accordions for web apps were quite common. We built a Silverlight app, and it has a very Accordion-centric workflow. The content is mainly divided up in to Accordion panels because a) ...
- 111
2
votes
4
answers
1k
views
Best way to make user complete each accordion of content
I have a page with a number of accordions on the page that are used to group certain items together and take up less screen space.
I want the user to know to have to go through each accordion to ...
- 192
2
votes
4
answers
5k
views
Alternatives to accordion menu's in mobile UX?
Please see below. I currently have these accordion menus. Is this ideal for mobile or is there a better way?
thanks!
Sam
- 13
1
vote
3
answers
803
views
Complex form: Accordion + vertical navigation menu + back/next
I have seen some wireframes from some colleagues asking the user to fill out some very complex forms.
They have seperated the forms in "sections" (which is a good idea). Further they introduced a ...
CommunityBot
- 1
1
vote
3
answers
435
views
Should accordions have previous and next buttons?
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 ...
CommunityBot
- 1
1
vote
2
answers
176
views
Accordion menu, ok to have duplicate names under different category?
In an accordion menu, is it confusing to use the same name in two separate category? Especially in one where the menus will be expanded by default.
Just to demonstrate I have a vertical navigation ...
- 24.4k
1
vote
1
answer
1k
views
Is accordion for huge list recommended or not?
I am working on an interview dashboard (admin side) and I need to know your feedback on accordions with a long list.
The list of candidates can reach up to 100 items.
Do you suggest that I use an ...
- 706
1
vote
3
answers
800
views
Expandable grid interaction
I am designing a grid and need to accomplish two actions when clicking on a row:
1) navigate to a detail page for that row information
2) open an accordion "drawer" with more information.
I am a ...
CommunityBot
- 1
8
votes
3
answers
24k
views
Accordion anchor click vs header click
jQueryUI Accordion opens and collapses when the header is clicked: http://jqueryui.com/accordion/
Twitter Bootstrap accordion opens and collapses when the anchor tag inside the header is clicked: ...
2
votes
2
answers
3k
views
collapsible panel and delete button in a web application
I'm developing a web application and I need some advice on where to place the delete button
Users can create, modify or delete items arranged as a list of vertically aligned elements. Each element ...
- 16.7k
2
votes
1
answer
1k
views
How many levels should an accordion have?
As a guidance how many levels should an accordion have ?
I have an issue of working on a site that currently does as deep as four levels. resulting in inconsistent interaction styles with each ...
- 33.9k
3
votes
2
answers
1k
views
Minimalistic expandable / accordion menu button style
I'm trying to make a sidebar/panel to filter products and overall I use minimalist/flat design. Here is the layout, collapsed and expanded.
My problem is, as you can see, the accordion button (filter ...
- 16.7k
1
vote
2
answers
352
views
Accordion boxes add to click total
Hello I have a form that consists of 7 accordion boxes. Inside each accordion are a set of select boxes pertaining to that accordions question.The user has to click to open the accordion and then ...
CommunityBot
- 1
2
votes
2
answers
2k
views
Alternative to many tabs besides accordion/expander
I have 2 levels of data. Menu and Food. My current design looks like this which is taken from ui-cloud.com
The problems I had with this design are:
It assumes the number of menus are fixed when it ...
CommunityBot
- 1
2
votes
3
answers
670
views
What is the best initial state for an accordion menu?
The options are as follows:
The user encounters all buckets “closed”
The user encounters the menu with the first two buckets “open”.
My client insists that option 2 increases affordance, but I’m ...
- 4,941