1

I'm designing a page with an accordion list (not a sidebar menu) in a financial iOS app. I'm trying show that eacg primary list item is expandable/collapsible (indicated by up-down chevrons), and that secondary items within each primary list item will lead to a new page (indicated by right chevrons).

This is what the list looks like collapsed: List Collapsed

And expanded:

List Expanded

Is having a mix of so many chevrons confusing and cluttered? What's the clearest way to display this?

Improve this question

3 Answers 3

Reset to default
0

The question is framing the situation well, and I can come up with two different possible solutions. One of them is shown below as I'll explain and the other one is a bit different version of the same solution, so that you may alternatively develop a version of the solution provided here.

Item and subItems display for iOS

Basically, you should indent subItems in contrast to Items and it makes dissociation with the rest of the content. You may choose to use chevrons again with subItems (not in the same vertical line but with indentation, horizontally aligning to the center of the rest of the distance to the right) but using a different arrow-like glyphic or using same chevron with a lower font-size might be your alternatives.

Alternatively as a second solution to this is also having indentation with subItems, but just includes separation points between subItems. I removed them to make the degradation appealing but you may free to add it. But I'd add them a differentiation again to be more visible.

Improve this answer
2
  • 1
    Good idea, I'm going to use the indentation for the subItems (text and chevrons). Thanks.
    – jyhong
    Dec 5, 2019 at 0:41
  • You're welcome, glad it helped. You may show your thankfulness via accepting my solution as an answer with clicking the tick next to it and upvoting if it's so..
    – Erhan Yaşar
    Dec 5, 2019 at 7:30
0

I think the chevrons make it quite clear that each item is expandable and they do so without making the screen look too crowded, in my opinion. However, I do think that you should ditch the chevrons next to the items in the expanded menu, in favor of some smaller arrows or filled in triangles pointing to the right or something. Having very similar icons for two different functions in one small space could lead to some confusion.

Improve this answer
1
  • Since I used the chevrons pointing to the right are used in the rest off the app to indicate the next page, so I ended up changing the expand/collapse icons from up/down chevrons to plus and minus signs. Hopefully that clears up some of the confusion. Thanks for the feedback!
    – jyhong
    Dec 2, 2019 at 21:06
0

Another approach which you can take is your each item is section, layout in horizontal manner.

On selecting each section you can layout your list below it in vertical list.

enter image description here

Improve this answer
2
  • Unfortunately that wouldn't work for this particular screen because the Item names can be long, and there can more than 3 Items so there wouldn't be enough space.
    – jyhong
    Dec 5, 2019 at 0:39
  • Items can be horizontally scrollable so that won't be an issue. But yeah for long name this won't look too good
    – Niki Trivedi
    Dec 5, 2019 at 5:35

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.