Skip to main content
Share Your Experience: Take the 2024 Developer Survey
6 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 ...
Harshal's user avatar
  • 3,115
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 ...
Brett DeWoody's user avatar
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 ...
Arthur Boni's user avatar
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(...
Devin's user avatar
  • 38k
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.
Alvaro's user avatar
  • 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.
Rob H. Yamin's user avatar
  • 1,789
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 ...
Dipak's user avatar
  • 16.2k
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 ...
Dave Haigh's user avatar
  • 6,151
4 votes

Is this an accordion or not?

It might be a collapsible panel then.
Omkar Chogale's user avatar
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 ...
Andreas Mehne's user avatar
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, ...
Devin's user avatar
  • 38k
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 ...
Maisa Barros's user avatar
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. ...
BrunoH's user avatar
  • 3,435
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 ...
Danielillo's user avatar
  • 19.2k
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 ...
Mervin's user avatar
  • 44k
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), ...
Andre Dickson's user avatar
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 ...
ryancdotnet's user avatar
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; #...
William's user avatar
  • 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 ...
Trebles57's user avatar
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 ...
JustAnotherPM's user avatar
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 ...
Alvaro's user avatar
  • 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 / ...
Prasad Shiva's user avatar
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....
Srija Nair's user avatar
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 ...
Mayo's user avatar
  • 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 ...
A.R. Nirjhor's user avatar
2 votes
Accepted

How can you show additional information in a pop up

As shown in your wireframe, you have a single entry field and a single interaction on that screen. Without having more details than that, I probably wouldn't hide that "extra information" at ...
JochenW's user avatar
  • 849
2 votes
Accepted

Design with an accordion inside an accordion

If you dont have more than 5 - 6 input fields inside sub-accordion (if its height doesnt takes most of the screen) I would say this is OK. It would make more sense though to place Icon on the left ...
xul's user avatar
  • 2,676
2 votes

Expand details of a table in accordion or a new tab?

Both ways work, so that is not an issue. Take a closer look at how your users work with the table: Do they only open the details to glance at them and then go on to other entries? - Then the ...
Gerda's user avatar
  • 479
2 votes

What should be the order of icons in an accordion?

I believe you're mixing elements and affordances in your current UI design. The "info" icon is correctly placed next to the title, because the info is related to that title. However, the ...
Devin's user avatar
  • 38k

Only top scored, non community-wiki answers of a minimum length are eligible