1

Back in the day, Accordions for web apps were quite common. We built a Silverlight app, and it has a very Accordion-centric workflow. The content is mainly divided up in to Accordion panels because a) there's too much information on the screen to put it on one panel, and b) most content is irrelevant to most users. Different teams that use the software focus on different panels. If there are 10 panels on the screen, one team will probably only use one or two panels, so it doesn't make sense for them to get all the controls on screen.

There are obvious upsides and downsides to Accordions. I feel like there are about three or four different ways to deal with dividing up content.

  1. Tabs - These are clear, but you can't have more than one tab on a screen at once. This good for simplicity, but it can mean more clicking.
  2. Accordion - Very similar to tabs, but the difference being that you can potentially have more than one panel on screen at once (assuming you are using a larger device like an iPad).
  3. Button driven navigation - There could be a submenu that allows the user to launch in to a scroll-able page which is tailored for his/her team. The downside is that we'd probably have to design panels for each team which leads to duplication of design.
  4. Flat scroll-able page which has everything for everyone. This isn't very nice for the user because they will usually see a lot of stuff they are not interested in.

Here is an article that talks about Accordions and is generally unfavorable toward Accordions: https://www.nngroup.com/articles/accordions-complex-content/.

We handed over some design work to a UI/UX designer and he came back recommending Accordions for data entry on phones. I was taken aback about this. This is mostly because there's no really well supported controls that work on iOS/Android and are compatible with each other. So, I have a bunch of questions. Are Accordions ever considered to be a valid UI choice on phones and desktop these days? What really is the major reason for the industry steering away from Accordions? If we built our own Accordion control, would this be too jarring for users that are not used to using Accordions on devices? Or, is it possible that the design community has arbitrarily moved away from Accordions when in fact, they are a good way of dividing up content? Are there any good Accordion controls for Android/iOS that are well supported?

PS: The thing to keep in mind is that this is a native app. This is not a Cordova app (HTML/CSS wrapped up in a Native App frame). We have to stick to controls which exist on the platform.

Improve this question

1 Answer 1

Reset to default
1

I'm grappling with a similar decision about whether to use an accordion or not in iOS, so I started paying attention to big-name apps. I can show you a couple of apps with accordions that I'm pretty certain are using standard UITableViews (ie, native controls).

Here's the Amazon app's filter screen:

enter image description here enter image description here

Here's the Twitter app:

enter image description here enter image description here

Here's an example I just noticed on Google's results screen. This one isn't a mobile app example, but it did make me realize that accordions are still apparently a useful UX control:

enter image description here

Improve this answer
4
  • Thanks for your post! I think your feeling echoes mine. I've always been an app developer and not a web developer. But, I've used accordions on different platforms in the past. Then, suddenly, when smart phones became a thing, there were no accordion controls - only in web pages and web apps. So, I scoured the web for good reasoning on why we shouldn't use accordions, and the only response I got back from a professional UI/UX designer was "it's not a native action". But, that is completely question begging. If a control works well, why not use it? What argument is there for not using them?
    – Christian Findlay
    Jan 11, 2018 at 21:41
  • One of the arguments was that users are used to scrolling through content. They don't like to have things hidden. Opening up panels also creates more mouse clicks. But, I don't see why that's an issue. If you have say 10 panels, some stuff is important, and some isn't. So, why make a user scroll through all the junk? The user should be presented with what is important to THEM, not blanketed to inputs. I think it's fair to close down say 5 panels that we don't think are important (but may be necessary in some cases).
    – Christian Findlay
    Jan 11, 2018 at 21:43
  • I agree for sure. The "right way" (supposedly) I've read is that you should always open a new screen for making selections or expanding to see an item's details, but I have an app that does use this design, and I noticed that I really like the feel of the accordions (like Amazon's filter) better than the design of always jumping to a whole new screen. I guess as long as you know the rules (like you do), then it's okay to break them. It's bad to break a rule out of naivete, but if you know the rule and intentionally break it for a good reason, then it's cool. It works for trendsetters! :)
    – James Toomey
    Jan 12, 2018 at 1:04
  • Another point that needs to be noted is that as far as the user is concerned, there is no distinction between a "native action" and a "web action". Most users DO NOT discern between native apps and Cordova style apps. Most users consider them the same thing. If the average user opens an app from an icon on their phone, it's an "app" as far as they are concerned. So, this distinction between native and web is completely false.
    – Christian Findlay
    Jan 12, 2018 at 2:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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