I am working on checkout flow for our iOS app. In one of the screen i need to use the expand / collapse behaviour to show cascading information. I am looking for a suitable UI component that provides good affordance. Suggestions?

1 Answer 1


My response probably isn't going to answer "THE common UI component" but I thought I might share how we will solve a similar problem in my project. We are designing a responsive search interface that has regular filters on the left hand side on large screens. On mobile all these filters will collapse into a bar below the search box. Please see my animated gif below (sorry about quality and ratio).

Regarding the affordance: An "arrow" will indicate that there is something to be showed, the text "Filter" in combination with the icon will give a clue to what is hiding here. When the user presses the hitbox (maybe the entire bar, or just the icon) the list will expand and the content is revealed. What also is happening is that the "arrow" is rotating 180degrees. When the list is expanded and the icon is reversed pressing again will do the opposite (collapse the filters). a user presses the bar, it will then expand. This is indicated by the arrow rotating 180degrees. When the list is expanded and the icon is revered, pressing again will collapse the filters.

All of this is based on my personal belief. This has not yet been validated in user testing.

Your Answer

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

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