9
votes
Which way should arrows point in a collapsible accordion? Left/down … down/up?
Lance Gutin at Vidget did some user research on this. My only take-away from it is that it is a bad idea to use no icon, and putting the icon on the right increases task time. I think the problem is ...
- 111
6
votes
Alternative to checkbox matrix
You're correct about the matrix of checkboxes becoming ugly :) It's also not scalable to smaller screens (if that's a concern).
Several solutions come to mind:
MultiSelect
This seems like a great ...
- 274
5
votes
Accepted
Difference between caret and chevron
I don't think there is a functional difference between the two. The difference lies in the aesthetics and visual impact. So based on that I can think of the following considerations before you make a ...
- 3,095
5
votes
Accepted
When an accordion or collapsible panel is open, are there any concerns with having the header BELOW the panel?
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 ...
- 191
4
votes
Minimalistic expandable / accordion menu button style
An alternative is doing as Material design deals with expansion panels:
As you can see when a panel is expanded, it separates from the others to deal with this problem.
- 16.8k
4
votes
Accepted
Minimalistic expandable / accordion menu button style
You can give a color to the background of content inside the accordion panel, such as #f4f4f4 or light grey which will improve the depth and more noticeable.
- 1,779
4
votes
Accepted
Alternative to checkbox matrix
Checkbox Grid/Matrix
I believe you were on the right track by using a checkbox grid. It's just your design of it that needs improving. I would go with the objects as headers for a table and the ...
- 6,143
4
votes
Accepted
Should an open accordion section be hidden when the user clicks on another section?
The best practice is to HIDE the currently open level once you click on another accordion tab. The reasoning is quite simple:
Reduce cognitive load: suppose you have catA-->item1,item2,item3,item(...
- 37.3k
4
votes
Difference between caret and chevron
In modern web I don't see any big distinguishable difference in between the two. But, thinking about users' mental model Chevron works best for dropdowns and caret for accordions.
Why someone will ...
- 16.2k
4
votes
4
votes
Is this an accordion or not?
An accordion by conventional definition is a self-contained panel made up of a 'stack of drawers'. Each 'drawer' can be expanded individually - an action that customarily closes any other drawer open ...
- 989
3
votes
Accepted
Pagination with Accordions
This is the expected affordance, and in all my testing it represents no issues for users, they expect the navigation to be at the end of the element. If the element grows in size, the navigation will ...
- 37.3k
3
votes
How many levels should an accordion have?
Only one. Nested accordions have an incredible amount of friction and are very difficult to use for people, specially when they're not aware that there are other levels inside the tabs. But even then, ...
- 37.3k
3
votes
Accepted
Most intuitive accordion action icon
There are other questions with this same theme, you can take a look at: here and here
These posts can help you :)
In my opinion, I prefer the icons of more and less
The plus icon is the clearer ...
- 554
3
votes
Alternatives to accordion menu's in mobile UX?
An accordion on mobile can be confusing. If the length of the open accordion is longer then the viewport it is not clear if the accordion is open or closed since the accordion header is out of view. ...
- 3,415
3
votes
Design with an accordion inside an accordion
What you describe is called nested accordions and there are many examples on the internet. The problem is not nesting accordions, all depends on the type of design and its functionality.
Example demo ...
- 18.3k
2
votes
Pagination with Accordions
It depends on the length of the table; if we're talking about the four rows from your example then I don't think you really need to worry at all: The pagination may move but it doesn't move very far.
...
- 14.2k
2
votes
Accordion anchor click vs header click
Having a bigger clickable area is definitely the BEST UX, and since bootstrap already has this functionality, simply make the link fill the entire div space by making the a tag a block element;
#...
- 196
2
votes
How should you show that an accordion is expanded?
From the article: Where to Place Icons Your Accordion Menu Icons
"There are two common icons used for collapsing: the minus and X icon. Users can misinterpret the minus icon because it often ...
- 21
2
votes
Substitute for tabs in mobile website
For a Mobile Website, putting all navigation links on on top will make users need to scroll before they can see some real content (unless user is on a large screen phone or number of links are just 2-...
- 31
2
votes
Accordion with radio buttons
There are a number of UI issues in this approach
The use of radio buttons in titles of accordions : A radio button or radio button group is often used when you are selecting a single value among two ...
- 43.8k
2
votes
If a design uses two columns of accordion menus, should the expansion of one column affect the other?
If a design uses two columns of accordions it isn't an accordion. See the definition below for the accordion tag.
An accordion is a stacked list of item references (e.g. labels or thumbnails), ...
- 2,816
2
votes
Accepted
Mobile menus does it matter which pattern you use
There are no hard and fast rules. You may pick and choose however you feel best fits your application style and needs.
However, there are general guidelines that each mobile platform proposes to ...
- 176
2
votes
Accepted
Alternative to many tabs besides accordion/expander
Since, choosing the menu and then food, and then food item is a sequential process, why not design it that way.
Not to forget, number of menus is not limited and might exceed 3
Remove all tabs, have ...
- 332
2
votes
Accepted
collapsible panel and delete button in a web application
The expand button looks good to me where it is in your first option (the three dots icon is used for menus). Some ideas:
You could place additional actions inside the expanded panel.
Depending on ...
- 16.8k
2
votes
Should accordions have previous and next buttons?
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 / ...
- 266
2
votes
Should accordions have previous and next buttons?
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....
- 154
2
votes
How to group a long list of items on 1 mobile app page?
Design Constraints
The group names are long therefore they won't fit on one line.
If you use tabs you won't be able to view more than one grouping at a time.
You have two choices
Display the group ...
- 6,641
2
votes
Use tabs or just present all the content out in an accordion?
Honest answer is - It depends on the amount of information, how you want your users to see the information and width-height of the interface
I was writing in details, but I'd rather choose this ...
- 285
Only top scored, non community-wiki answers of a minimum length are eligible