Based on our experience creating great iOS apps, we’ve come up with a list of 5 things we believe designers should keep in mind while conceptualizing interfaces for iOS. While the focus of this article is only on iOS apps, much of the advice here translates directly to other mobile platforms.
1. Understand Your Medium
This seems obvious, but designing apps instead of websites actually represents a huge shift in mindsets. Apps aren’t websites and shouldn’t be designed like them, either. Let’s talk about specifics.
Apps have a completely different user interaction model from websites: taps vs. clicks, views vs. pages, buttons vs. links, etc. We believe a change in language when discussing app design helps us keep the right frame of mind.
In addition to a different interaction model, apps should have different modalities. Don’t overload the user with too much in one view; separate different functionality into different views. This is even more important on the iPhone than on the iPad, since screen space is even more constrained.
How users get around in apps vs. on websites is another area of contrast to consider. Navigation hierarchies in apps tend to be narrower and deeper than on the web. Users are used to having to tap several times in order to achieve some goal or to access some content; don’t try and prevent this natural drilling-down behaviour by putting too much on the screen at once.
Navigation is very different on iOS – there is no browser chrome or Back button. Since iOS launched, many navigation conventions have emerged; which one is right for your app depends on your specific needs. Check out Pttrns for a great collection of approaches that apps have taken in regards to navigation.
Finally, remember that iOS apps run on iOS devices. Duh, right? But it’s an important point. Rendering semitransparent content with rounded corners and a drop shadow over top of a image overlaid with an animated gradient is probably going to cause a performance problem. Work with a developer to figure out a way to implement tricky designs without causing user-noticeable lagging in the interface.
Wikipedia has a comprehensive breakdown of all iOS devices, but we thought we’d distill that down to a short list of devices running iOS 6. We’re hoping this will help you make informed decisions about your app’s design and how it can degrade gracefully on less capable hardware.
|iPod Touch (4th Generation)||3.5″||640×960||
|iPod Touch (5th Generation)||4″||640×1136||
|iPad (2nd Generation)||9.7″||1024×768||
|iPad (3rd Generation)||9.7″||2048×1536||
|iPad (4th Generation)||9.7″||2048×1536||
2. Design Universally
We believe that the best applications are those that work universally. That means they work on Retina screens and non-Retina screens; they work on tall screens and short screens; they work on iPads and iPhones and iPod touches; most importantly, they work well in all these contexts.
This is hard, but we’ve got a few quick tips to get you 80% of the way there.
Avoid odd-sized Retina graphics
Non-Retina assets must have exactly half the size of their Retina counterparts. That means that a non-Retina asset corresponding to a 101 pixel Retina asset would have a dimension of 50.5 pixels, which is impossible. Save yourself and your developer some headaches and always use round dimensions for Retina assets.
Make Tap Targets Big Enough
Remember how users aren’t using your app in a web browser? Well, they also aren’t using a mouse. Instead, all interactions with your app are made with a far less precise instrument: a finger.
In order to make sure that users can easily interact with your app’s interface, make sure that anything they can tap is at least 44 points wide and tall.
3. Design on a Device
iOS devices have a range of pixel densities and vary in their reproduction of colour. When designing iOS apps, you should take that into account.
In order to get an accurate idea of what your app will look like, you need to render it on a range of devices: Retina and non-Retina, tall and short, iPad and iPhone. Use LiveView or Skala to mirror your photoshop files on your device. Lastly, don’t forget to vary the screen brightness to make sure your app looks good in all circumstances.
4. Animate your Interface
Animations are easy on iOS – Apple has gone to a lot of trouble so apps can easily be supplemented with cool animated transitions. It would be a shame not to take full advantage of this opportunity.
Unfortunately, animations are not easily conveyed through PSDs. The best idea for designing awesome animations is to work with a developer to prototype them on an actual device. Together, you can make throwaway apps that explore your idea for an animation. This will let you get a precise feel for exactly how your animations behave.
When designing animations, take advantage of what the user is already familiar with. Users expect that when they tap on an item to see more details, the new view should “push” in from the right; they also expect views for creating new content to slide up from the bottom. Mimic those motions in your own custom animations and don’t associate new actions with the existing animations. You should lean on what the user is familiar with to give them a better sense of familiarity and trust with your app.
5. Involve Developers Early
We believe that the best apps are made when developers are involved early in the design process, and when designers stay involved late in the development process. Collaboration between designers and developers will lead to some great work.
Implementing any reasonably complex design will have implementation challenges – the sooner developers can start thinking about solving those problems, the better the solutions will be.
We developers have ideas about interfaces that we’re not necessarily able to polish into an actual design. We also know iOS like the back of our hands, so we can point out elements of designs that don’t fit well within iOS. When designers and developers work together, awesomeness happens.
So there you go. Apps aren’t websites. Design universally. Design on a device. Animations are awesome. Involve developers early. These points will get you most of the way there – the rest is up to you.