I am working on a mobile website, and was just wondering is it better UI to keep accordions opened or closed.
So when users switch from one accordion to the other, should the first one close immediately or is it OK to stay open?
Add a comment
|
3 Answers
That depends on the content you're displaying. If there's any value in comparing the content in multiple cells (eg. product specifications) then allow for many to be expanded at one time. However if content of the cells exclude one another (eg. payment method) then collapse earlier cells to improve scanability.
answered Sep 10, 2014 at 13:57
-
Content is important but also the user experience should be considered. I find it a little annoying when one section closes before another opens producing a "jumping" effect... has anybody found out a way to minimize this? Nov 10, 2020 at 21:32
If content is king, then the scarcity of viewing space on mobile devices makes it even more important to make your decision not based on general principles but based on user requirements.
Keep in mind that if you make something open it will take up a lot of the real estate on the screen, so if it is not one of the most important things that the user needs to see, you may consider erring on the safe side and leave it closed.
This means that when designing for mobile and using the accordion pattern/component, you should not try to create a situation where the user might need multiple accordions open at the same time, because it means possibly having to scroll up and down to make comparisons.
answered Sep 10, 2014 at 22:59
I agree with Michael in terms of "content is king" whereas the determining factor for the accordions should depend on how necessary certain information is.
Does the user need that specific information for reference? Perhaps do not include that part in an accordion. And you can still use accordions to condense the rest of the page.
And then regarding whether or not to leave an accordion closed or not, one key principle to keep in mind is do not automatically hide or remove information from the user without the user intentionally doing it. That may create confusion. Ideally, all interactions are intentional and informed. From that perspective, one would argue no accordions should auto-close...
However, going back to content, if you are going to push some important elements up the page by keeping all accordions open on the way down-- does that create problems? In other words, if someone decides to open all accordions will the page become unbearably long?
And of course, if you are only allowing one accordion to be open at a time, you may need to consider auto-scrolling the active accordion header to top. Demo here: http://jsfiddle.net/ilyasnone/aqw613em/
Here's a great NNGroup article with highlights for quick scanning: http://tinyurl.com/ou4nhhu
