How to do Expand/Collapse in your Native iOS iPhone/iPAD App
7 Aug 2018

How to do Expand/Collapse in your Native iOS iPhone/iPAD App

Post by Mobile Design Guy

I wanted to write this blog post because without studying Apple’s HIG very closely and digging into the Apple apps to see a pattern form, it is hard to find much written on this simple yet powerful element that is used on Web and even Native Android. It’s the ability to give your user information and a way to expound on that information by expanding to see more and collapsing to see less.

So the question is, how do you do this in truly native iOS app? What does the user expect from their mental models and learned behavior? This is what I’m going to answer here and why.

A lot of designers out there, especially new to native mobile app design, will just assume that expand/collapse is a common old as the web approach that just works and that it’s the right way to do this because what else are you going to do, right? This is why I created this blog and why I write blog posts and do the youtube channel. It’s because Native Mobile App Design is a completely new thing by and large to designers and a lot of them don’t even know this simple fact. They think it’s like tackling any other design project. I want to you to retain your User Center Design hat and deserve it haha.

So if Android and the Web have Expand and Collapse, surely iOS does as well, right? I mean it’s just a standard thing, right? Actually, there is no component, and it is not a design element used in the standard sense of the word in iOS Native Apps. There is a very solid establish pattern, an expected behavior by the user that is pretty foundational to iOS Apps. So what is it, it’s the almighty Apple chevron. Let me break it down like this and I’ll show you a video of it in action.

In iOS Native apps, the way you show a user more information such as an FAQ Answer is to allow them to click on the item they want to know more about and take them (slide them) over to a new page with a back chevron for them to “expand” and read/see more. They can then return and repeat the process for any items they want to dig down into. I know I know your first gut reaction is opinion or maybe in possibly a little frustration at extra work… but remember this blog, this posting, is for how to do native mobile app design the right way. This is the expected behavior for the user. To them it is the least amount of friction and effortless almost without thought, they will perform this action, get what they need and move on either in the app or in the flow. If you are an iOS user you do this a ton throughout the day but it’s such a strong learned behavior and expected behavior in your mental model that you do this without even conscious thought. This is why it is VITAL to design your apps to the users’ native experience and environment. Otherwise, you are designing something that you ‘feel’ is right but is actually causing the user friction and frustration and breaking this rule cost you, the business and ultimately the user.

I know this is a short article but I hope that it helps you, as you are designing and wanting to design with excellence for your users, to design this the right way for your iOS app customers. The details really do matter even small ones like this.

Tags: , , , , , , , , ,


Leave a Comment