Questions tagged [collapsible-panels]

A user interface element, where content can be shown or hidden.

Filter by
Sorted by
Tagged with
1 vote
3 answers
118 views

What should be the main content behavior when side panel displayed?

I'm working a desktop app and I need to display a list of task to the user needs to complete. When clicking on a task (row), a side panel appears from the right to the left to display additional ...
user avatar
  • 11
15 votes
3 answers
4k views

Is it okay to use a dropdown chevron in a checkbox?

We have a feature where the user can select some checkboxes. They are all selected by default. We are planning some UI/UX changes that will allow the user to cherry-pick, between these selections, a ...
user avatar
0 votes
3 answers
85 views

How to handle map section navigation in mobile

Given a section which takes full height of the device's viewport and have the following controls at disposal of the user: Can pan through the map within a certain boundary (a country); Can select an ...
user avatar
3 votes
3 answers
596 views

Where should you allocate the edit and delete buttons in collapsible panels?

I am a webdeveloper and am looking for a better solution in a private project of mine, which is a wiki-like webpage for a Dungeon's and Dragons campaign. I have a list collapsible panels, each ...
user avatar
2 votes
1 answer
212 views

Are collapsed filters an antipattern? or does it depend on the intended user?

So we are building a monitoring page intended for a specialized group of users who would like to keep an eye on their logs. We are implementing a filtering solution to help users find the type of ...
user avatar
  • 121
4 votes
1 answer
87 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 ...
user avatar
  • 175
2 votes
2 answers
335 views

Expand/Collapse clue on a chart

I am currently working on an org chart with collapse/expand capability. In case it matters, the original code is from d3/visx. To improve user experience, I want to include a clue that a node can be ...
user avatar
2 votes
2 answers
982 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 ...
user avatar
1 vote
2 answers
85 views

Should we include a 'collapse' on this page?

We're developing a page, where the user can unsubscribe at the top of the page, and 'email preferences' at the bottom. The question is, once the user has 'expanded' to see the preferences, does he ...
user avatar
1 vote
1 answer
106 views

Mobile UX for a list of questions with editable answers?

As part of a larger app, I am designing a mobile UX for a fixed list of 30 questions that the app user can answer. The user can answer from 0 to 30 questions, averaging around 3 answers. They can edit/...
user avatar
  • 113
0 votes
1 answer
97 views

What is the best way to combine a dismissible card with a collapsible panel?

I'm working on a checkout flow where a cart summary panel appears on the right hand side of the checkout form. We want the user to be able to remove a product, but due to legal and compliance reasons ...
user avatar
  • 31
1 vote
1 answer
201 views

Interface examples for handling "page notes" and highlighted text comments?

I'm working on a collections-based interface (think Pinterest or Dropbox), and we're implementing a feature that allows users to add Notes/Comments to various elements (folders/boards, files/pages, ...
user avatar
  • 317
0 votes
2 answers
789 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 ...
user avatar
1 vote
3 answers
2k views

Expand / collapse details

I want to ask you for suggestions about expanding and collapsing some details from a document. I have a link for the prototype, just press show details/ hide details. Do you have any better idea for ...
user avatar
  • 85
0 votes
1 answer
569 views

Problem with 3 or more level of tree-view UI on Mobile

I had come with a problem with review/summary screen on phone that requires the information to have 3-5 level of tree-view. Generally on mobile phone UI, nested information will be shown on another ...
user avatar
3 votes
2 answers
623 views

Should a collapse automatically scroll

Content from collapsing items can render 'below the fold' should the behaviour be to push them above the fold so users can see or is auto scrolling worse experience? Example of collapse Example of ...
user avatar
1 vote
1 answer
399 views

MOBILE VIEW: additional info in horizontal scroll vs. modal vs. accordion

I am working on the mobile view of a website with profiles on it. On those profiles there are a lot of categories/groups filled with tags and other information. In order to keep the page clean and the ...
user avatar
  • 204
0 votes
2 answers
747 views

Expanding and minimizing panels on a Dashboard

I'm looking for guidelines when it comes to web app dashboards. Specifically I'm designing a dashboard which has 3 main panels, these panels are expandable so the users can view each panel in more ...
user avatar
2 votes
2 answers
2k 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 ...
user avatar
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 ...
user avatar
  • 302
15 votes
3 answers
3k views

Need a better layout, so that blank space can be utilized

Here - I don't want to repeat the same ID, first name and last name to all the subjects so I used expand buttons. - This approach significantly reduces number of rows that are visible when all the ...
user avatar
2 votes
1 answer
930 views

What is the best icon to communicate the "Show Details" link? [closed]

What would you use as icon to expand a box including some details (i.e. regarding a product specification)? Would you use the same icon to expand details about a single datum in an array of data (such ...
user avatar
3 votes
0 answers
86 views

Should modals/lightboxes/panels/etc. remain open on reload? [closed]

I was just visiting a certain site where I clicked search and a full page overlay search box came up. I wasn't getting results and didn't feel like hitting backspace a bunch so hit refresh and the ...
user avatar
  • 15.2k
1 vote
3 answers
1k views

Is there a preferred location for Expand / Collapse?

I'm in the process of designing a form that contains both required and optional groups of information. We currently use group section headers throughout the application so I've leveraged them here ...
user avatar
  • 72
1 vote
1 answer
74 views

Restaurant daily menu - days to show

I'm currently working on a minor redesign for a restaurant/pub website. This restaurant serves a daily menu, which means that it changes for every day. On their current website, the menu is always ...
user avatar
  • 113
4 votes
2 answers
146 views

Is there a downfall to using collapsible panels for a contacts list, rather than linking to an additional profile page?

Right now our site has a Contacts page with a list of contact profile names which link to a separate profile page. My team suggested we design an accordion style (expand/ collapse) list for our ...
user avatar
0 votes
1 answer
448 views

Panel navigation back/expand/collapse

I'm having a hard time to find the most intuitive panel navigation. Here is what I'm working on: To expand/collapse the panels, the user has to click the white triangle on the top right. The panel ...
user avatar
  • 163
4 votes
1 answer
315 views

What is this sliding window element called?

I've been trying to figure out the name for this element but I've been having trouble finding it. It should snap in three locations: to the top of the screen, to the bottom of the screen, and a 5th of ...
user avatar
4 votes
1 answer
534 views

Pop ups VS Collapse blocks for adding new info

when i want to add a new field for an existing entity, to add a new field it is required to submit a 3 fields form. is it better to open the form in a pop up and disable the background or is it also ...
user avatar
  • 65
1 vote
1 answer
3k views

Expand/collapse all - Combined or separate button(s)?

Note: This isn't a question about which icons or labels to use. It's purely about usability. So, I have a page with expandable panels and I want to add a button to expand/collapse all panels. Now, I ...
user avatar
  • 927
2 votes
1 answer
1k views

Expand / collapse all buttons above accordion

I have a typical accordion with 7 items that can individually expand or collapse. I want to place a collapse all and expand all button above the accordion, but it seems kinda misplaced if it is just ...
user avatar
0 votes
2 answers
935 views

Responsive Shopping Cart

Below is the Wireframe for the Shopping Cart which automatically scrolls along the height of the content area in between the header and footer. Now in the smaller screen where the content will ...
user avatar
3 votes
3 answers
4k views

Best UX for creating or saving a "pre-set filter" or "favorite view" in a huge listing with filtering options (checkboxes)

Background A user is presented a panel with a big listing. There is a default view, but the user can also filter the listing to refresh the "panel". There are two sequential and almost dependent ...
user avatar
  • 251
1 vote
1 answer
150 views

Positioning the same confirm button for 3 different panel displaying situations

I have two panels that are hidden/showed depending on the value of the "State to assign" dropdown. I've been doubting about placing the Confirm button: In a fixed position, for example: the bottom ...
user avatar
4 votes
3 answers
1k views

What is a good design choice for two collapsible panels on the left?

Our company UI standards enforce the following overall design: Left hand side of the window contains a menu (what would have been navigational tabs otherwise) Right hand side is the app working area ...
user avatar
  • 141
0 votes
2 answers
200 views

What is a common term for the slide-able "info panel" on the bottom of certain smartphone apps?

I'm developing a smartphone application that displays a Google map. When a user taps a place on the map (for example, a restaurant), I want to display an "info panel" on the bottom of the app that ...
user avatar
  • 103
4 votes
3 answers
465 views

When you have a side panel open, and the user scrolls, is it better to leave it open or to auto close the panel?

Say you have a side menu that opens from one side after clicking on an icon in a website. This menu would take more than 40% of the view-port in the horizontal direction. If the user scrolls down, is ...
user avatar
0 votes
1 answer
186 views

Discoverable control vs labeling controls

I have a site that I'm designing that will use a collapsible property grid on the right of the screen to display additional information about certain items a user selects. It is not always visible, ...
user avatar
  • 103
1 vote
4 answers
2k views

Best approach to presenting collapsible/expandable panels with radio button headers

The user will be presented with multiple options (as radio buttons), and he/she must select one option before proceeding to the next step. The individual sections will be expandable/collapsible for ...
user avatar
  • 205
4 votes
5 answers
860 views

Should I use Collapsible Panels on Landing Page or something else?

I am looking to build a landing page for new users from advertising. On my site, there are several ways to get what you want -- all of them equal weight from my perspective -- but with different ways ...
user avatar
5 votes
5 answers
4k views

Which UI is more user-friendly and effective: Tabs or Collapsible Panels?

Not sure if the collapsible panels have a different name but I have seen them referred to as rollouts. I have used many applications that use one or the other or both, but I am wondering if there are ...
user avatar
11 votes
2 answers
5k views

Responsive Secondary Menu

I have a layout similar to the below screenshot. Where the top nav will get collapsed using hte Twitter Bootstrap Nav Collapsed. Also i have a secondary menu below the nav bar on the left hand side ...
user avatar
0 votes
2 answers
846 views

Expanding Panel placement

I'm designing a feature for a product, which is going to bring down a panel that contains a list of virtual machines. The user will use this panel frequently to - start, stop and deploy services into ...
user avatar
  • 3,080
5 votes
1 answer
349 views

Dynamic added Tabs vs Dynamic added collapsibles

We are creating dynamic multiple steps form where we have dynamically added form fields by the user and we'd like to group these fields under a common title in either tabs or collapsibles for example: ...
user avatar
2 votes
1 answer
840 views

Event notification & Activity notification - on the same page

My first ever question on UX. The problem is with a desktop web app, it currently plays host to an "activity" ticker (where activities of other users and self are displayed in a cubic spin animation ...
user avatar
  • 3,080
2 votes
1 answer
436 views

Better paradigm for a Blender-style interface; lots of control panels and property panels

I am designing an editing application in html/js. After a while, I end up with a lot of different "panels", and I am having trouble displaying them all to the user in an efficient way. Sometimes it ...
user avatar
2 votes
2 answers
554 views

Using icons as checkboxes?

How unusable is it to use icons as checkboxes? It's a cool concept when it is implemented, however I am worried that it is not obvious that the icon is clickable. What are people's opinions about a) ...
user avatar
  • 2,246
2 votes
4 answers
507 views

Resizing a Chart

A system that I'm working on has a pane with a chart displayed under a table. The user can choose to resize the pane to see more of the table. However, when this happens, the chart gets squeezed ...
user avatar
  • 5,918
3 votes
1 answer
3k views

Ways to collapse sidebar as much as possible

OK, so here are two screenshots of classic collapsible sidebar: As we can see, when collapsed, sidebar still holds some space. The question is - what design patterns can be used to overcome this ...
user avatar
  • 571
4 votes
2 answers
982 views

A special case of tree-view/collapsible panels

This might be considered a sort of special case of the issue described here: Which way should arrows point in a collapsible accordion? Left/down … down/up? I have this scenario: As can be seen in ...
user avatar
  • 2,203