iOS UI design: going for clean and engaging
Apple’s iOS is clean, minimalist — and massively profitable. But, how can you achieve an iOS interface that engages users? Let us tell you all about it.
The iOS system is something most people are familiar with, even if they don’t use an iPhone. It’s become so massively successful thanks to its mother company, legendary Apple. This system sets itself apart from the competition, not just due to the brand behind it, but also because of its unique style of design.
Design beautiful and effective iOS interfaces with Justinmind. Download free.
So what makes a great iOS UI design? How do we reflect that in our wireframe?
The fact that iOS enjoys a certain look and feel is both an advantage and a challenge. It’s positive side involves the fact that users will already be familiar with the icons and control buttons in the product — sparing you the task of teaching them. On the other hand, you’ll find yourself restricted to iOS UI kits and strict guidelines — which may impact your creativity.
All in all, this system represents a key part of the smartphone market and as such deserves special attention when it comes to wireframing. iOS UI design is a skill all UX designers out there ought to enjoy — and we are very happy to help you fully understand this amazing operating system.
About the iOS system: the market traits
When it comes to the number of smartphones out there, Android is a much larger platform when compared to Apple’s counterpart. In fact, phones that use the Android system make up a little over 80% of the market share. In comparison, iOS phones correspond to less than 20% of the market share. You can see a more complete picture of the market on Statista.
The money factor in iOS UI design
Here comes the twist: even with such a gigantic opponent, iOS apps have a remarkable history of profitability. While Android enjoys far more downloads in the Google Play store, it has some real trouble in making as much money as Apple off those downloads. Sensortower found in its 2018 report that while Apple’s platform had about half as many downloads when compared to Android, it enjoys twice as much profit.
iOS users invest more money into their smartphones. While a new iPhone can set you back anywhere from several hundred to a thousand bucks, Android smartphones are available for a fraction of the price.
It is true that people who purchase Samsung’s more expensive phones are quite similar to those who buy iPhones — but the majority of Android users invest far less. Budget-friendly options dominate the Android market, and those represent a group that isn’t so willing to spend cash on apps.
A good point of reference for UI designers to bear in mind is that iPhone users actually spend way more than Android ones. While researching for a market report, folks at Wolfgang Digital found that while Android users spend an average of $11.54 per transaction — iPhone users spend $32.94! That’s about 3x as much money spent on app products.
Another possible reason for the difference may lie in the fact that Apple’s App Store is the only option for its users to download apps. Android phones, on the contrary, have alternatives to the Play Store — such as Amazon’s Appstore.
The geographics matter
We now know that iOS apps tend to deliver more profitability in comparison to Android apps. But that fact alone may be misleading. Apple, in all its stylish and minimalist design, is a major success in some markets — but not all of them.
In fact, Apple enjoys a high market share in very limited countries such as the United States of America or Australia. But run further to the East or South, and the story changes entirely. For much of the world, Android phones are the rule. Making your system an open-source resource available to all mobile device makers does come with its advantages, eh?
“Keep in mind that targeting iOS users in regions where Android rules may be a great way to burn money, not make it.”
Liftoff — Mobile Engagement (Report 2018)
Here is the important takeaway from this fact. When deciding on making your product for iOS, there are many factors you need to consider. Mainly, you want to take a long look at your target users — who they are, where they are and anything else you can know about them.
Creating an iOS UI isn’t like creating a reusable rocket, but it does represent a considerable amount of work — and therefore, shouldn’t be taken lightly.
iOS UI design: key points
The market in which iOS works can be a bit difficult to grasp — especially the dynamics between the amount of iOS phones and profitability per download in the App Store. But now that we’ve seen some interesting facts about the iOS market, let’s dive into the actual design traits for you iOS wireframe.
The basic principles of iOS interface design
For Apple, a few key principles guide the style and characteristics of all iOS products. You can find the entire list and guidelines on the Human Interface Guidelines. For now, try to imagine that Apple wants products that don’t make people try too hard to achieve anything, that tell the user where he is and what is happening — while keeping a light and airy atmosphere on every screen.
Unlike Android, iOS products are only displayed on iPhones — which makes life a little easier when creating a brand new app wireframe. You need to worry only about iPhone screen sizes, along with the resolution for each new version of the device.
Another huge positive is that Apple’s push notifications get people to update their systems in an efficient way. The result is that a whopping 87% of all iPhones use the latest iOS. This means fragmentation isn’t an issue, and that you’re free to invest your efforts into other aspects of the iOS wireframe knowing it will look and feel the same for all users.
Here are some of the key things Apple asks of all iOS UIs:
Consistency and aesthetic integrity. The product needs to use standards and components that are well-known to users as is, respecting the icon-style, font and other interface elements from Apple’s UI kit. It also means you want to align an app’s function and its appearance, so that serious apps deliver a sober experience (with brief and discrete interactions). Lighter-tone apps such as games can use colorful interactions to add to the entertaining experience.
Direct manipulation and feedback. Direct manipulation refers to using movements we make with the phone or around it, such as shaking the device or rotating it. Apple encourages the use of this trait, as it offers a rewarding experience. Feedback, on the other hand, is closely related to the visibility system status heuristic of usability — in short: tell users what is happening.
User controls and the use of metaphors. Give users total control over the product, while minimizing the chance that users will do something they’ll regret. A popup that seeks to confirm a potentially destructive action is a good example.
On the other hand, Apple encourages the use of metaphors in the UI — which is both more engaging and easier to learn for users. Toggle buttons that resemble switches and flipping through the pages of eBooks are great examples.
Navigation in iOS
Your iOS UI design is a delicate thing — and when you get to the iOS wireframe, your navigation design will play a starring role. Navigation in general is vital for your product to enjoy a nice flow and for users to be able to go to all corners of your product — so all functionalities are within reach. Here are the main guidelines that Apple recommends to designers and developers — no matter what kind of navigation you go for.
Provide a clear path and mind your information architecture (IA). Like other guidelines provided by Apple, it shows that usability is a prime concern. No matter how you approach the navigation question, you want people to be able to find anything they are looking for with ease.
This will likely depend on your information architecture, which will define the hierarchy and importance of each part of the product. You want to convey the most important parts with making access to those parts in the form of minimal clicks needed to reach them.
Stick to standard navigation controls/components. iOS UI design is all about following the style and offering a familiar face to new users. You want to make the most of the fact that people are already used to navigation controls offered by Apple, so that users don’t need to invest time and effort into learning their way around your iOS UI.
It’s worth noting that while Android comes with a fixed navigation bar at the bottom of the screen, iOS does not. This means you need to account for all navigation controls in your iOS wireframe, like the “back” control.
Now that we got an idea of what a navigation system should offer, let’s go over the types of navigation you can adopt when wireframing your iOS app.
Hierarchical navigation: Users make one choice per screen until they find what they are searching for. In order to go from one destination to a new one, users need to go back and retrace their steps or start over — and make different choices.
Flat navigation: Switch between different content categories in a system that lacks hierarchy.
Experience-driven navigation: Also known as “Matrix Navigation”, this allows users to move freely from one screen to the other, without a hierarchy. This can be tricky to design, as you’ll need to find a balance between giving the user all the options and not overloading both user and screen.
A rather interesting feature of iOS is that most apps will allow for users to go back in their navigation by simply swiping left-to-right. This makes use of their metaphors and preference for motion in design — and should be accounted for in your wireframe!
iOS navigation bars
These bars are typical of iOS, and offer users a back button and can have a few control buttons. You can play around with the look of the bar, as there’s some margin there as to what you can do.The important thing is that you hide the bar when showing full screen content, so as to not distract or overcrowd the screen.
It’s not recommended to overcrowd the bar itself either. Limit your iOS UI design to a back button, the title of the page and one more control. You can make the title bigger or smaller, depending on if you want to use it to convey the importance of the page, within the hierarchy of the product.
Multisegment crumbs are a no-go for the bar. The back button is usually a clue as to where the user came from into that screen, and not a full map of their movements. Apple asks that if you think your users might need a bit more information or will feel lost, that you consider flattening the hierarchy of your iOS UI design.
Should you have custom components in your iOS UI?
General agreement seems to be that custom components aren’t a very good idea.
One of the most dangerous things for any app out there is the onboarding process — those crucial initial steps where users explore and learn to use the product. This can require a lot of effort from the user, both for exploring new horizons (or screens) and remembering what each little button does.
By choosing to not use the classic icons and components that Apple offers, you get yourself into a tricky position. Not only will people have to invest some real effort into getting past that learning curve, but you will also be left with a hefty bill.
Getting those custom components developed and settled into the project won’t come cheap — especially when the alternative comes free of charge.
Luckily, you can find Apple’s UI kit on their own official website, completely free. Alternatively, you can rely on trust-worthy wireframing tools as those tend to offer free UI kits that respect Apple’s requirements and guidelines — Justinmind’s iOS UI kit, is a wonderful example.
The wrap up
Designing the UI of your iOS product comes with a certain set of advantages and challenges, just as any other operating system out there. It is true that not as many people use iOS as Android — but the sheer amount of phones may not be the best indicator of whether your product should be in iOS or not.
One good reason to enjoy wireframing your iOS app is that all your components are listed out and accessible — so all you have to worry about is making an app that flows well and respects the Human Interaction Guidelines. The more users recognize the classic iOS vibe around the product, the more familiar they will feel exploring its screens and functions.
iOS is a platform that has true power, even if it doesn’t have the numbers. Hopefully, your iphone wireframe will be among the first few steps to a new iOS app that users can rely on and enjoy!
Originally published at https://www.justinmind.com on July 4, 2019.
