I am not a big fan of accordion in mobile development, because I believe that this behaviour is a web style user experience. However, I don't have any resource to find an alternative solution for this type of control. Our navigation has a maximum number of 3 levels. In iOS, this can be solved using UINavigationController, but it comes with a price, because when the user wants to go back to the main menu, user has to trigger 2 actions, which I think is not a good interaction with the app.

Any ideas are welcome. Thanks in advance! Cheers

  • " this behaviour is a web style user experience" - maybe you meant "desktop style"? – drabsv Jan 11 '18 at 12:14

Hard to say without knowing what each element represent and what users are supposed to do once they have selected one. For instance, it might be possible that you would be able to place the elements in a grid.

My first thought would be to split the UI into two list views. The first would hold the headers, and clicking on one of them would display a second list view with the contents of that subset of data. enter image description here

If the list is not very long, you could get away with just annotating it.

enter image description here


Why don't you use a radial menu concept? The user can navigate with a single gesture to the element, through different levels. Radial menus are thought to be "radial" ie on a circle basis, but you can still use the same navigation concept using squared forms (it depends on the space available to your UI). The user "taps'n'holds", dinamically opens the categories and subcategories. The item selection can be accomplished through a time-selection (the user finger in on an element for 1,5s) or through a spatial-selection (in this case the user must move the finger to a specific location inside the element). Your call. Here a conceptual sketch. Hope it helps

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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