So what we have is a page that shows a list of "Vehicles" and the Passengers inside them. Imagine that each "Header" is a Vehicle and when you click the accordion button, it will expand to show the Passenger details.

Now imagine the list of Vehicles can go up to 50+. If I use accordion, the load for this page would be very information-heavy.

So my question is, for this type of page, should I use a pop-up overlay instead? What other methods can I use so that I don't need to go to a separate page to show the Passenger info?

Edit: This scenario is different from the existing question because this is about overall page cognitive load and not just about scrolling.

enter image description here

closed as too broad by Shreyas Tripathy, Andrew Martin, locationunknown, Mayo, Devin Oct 4 '17 at 15:35

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • Could you present the vehicles in rows, say 4 vehicles per row. Then instead of accordion menus, clicking on a vehicle opens a popup with the passenger information? – sol Oct 4 '17 at 8:56
  • Possible duplicate of How to handle very long accordions? – Shreyas Tripathy Oct 4 '17 at 8:57
  • 2
    There are so many ways to present this sort of information and we would only be able to narrow it down with fairly extensive knowledge of your use-cases. – Andrew Martin Oct 4 '17 at 10:46
  • @catandmouse Accordions are good pattern for your problem, but if you want to reduce cognitive load just don't use the grey accordion backgrounds. This way the eye will have to process less shapes which means lower cognitive load and higher readability. – Kristiyan Lukanov Oct 4 '17 at 15:32
  • I don't think this is a duplicate, but it's indeed too broad. I mean... why accordions? mobile? desktop? have you considered other options like grids of elements? Why not a big long page with reduced interaction and cognitive load? – Devin Oct 4 '17 at 15:39

Can you provide us some more context? Is this a mobile application? Or a website?You're using an accordion to display a minimal amount of information (vehicle) and all details are indeed crammed into 1 place.

Perhaps it could be helpful to change your visual representation of the 50 items. Is there perhaps an overlaying class that can bundle these vehicles first (based on type of vehicle, based on amount of people inside them, based on location or route,...)? You might use filters to delve into those 50 items.

Then you can show perhaps a list that is less than 50 items, lowering the cognitive load of the entire page already. I think vehicle title alone might not differentiate the items enough. Perhaps you can show how full / empty a vehicle is.

On whether to use a modal or accordion, we need some more information on what the details are specifically and all its use cases.

If you are afraid that you're creating 'a seperate page' just for the passenger info, perhaps you should think of a way to quickly switch vehicles when you're on a detail page.

  • It's a website. Actually, this is already filtered by session. So these are the vehicles in say 9AM departure time. But there's still a lot of them. As per business rule, they want to see all the vehicles in that 'session' (but they are free to filter, there's a filter function). Basically, the information inside each vehicle may contain about 40 passengers + snapshot of their details / destinations). – catandmouse Oct 4 '17 at 8:54

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