Creativity comes from rules
The Human Interface Guidelines (opens in new tab) feels very much like a technical document, which might be surprising coming from Apple, but the rules are there to help you understand the technical aspects of the platform and so design for it better. Recognise that they give you a baseline to work from and that, knowing those constraints, you can be more creative.
Elements are essential
The ‘iOS UI Element Usage Guidelines’ section provides a very useful breakdown of how and when to use the absolute core building blocks of the interface, such as the navigation bar, table lists and buttons. You need to know and appreciate the default interface in order to create truly great bespoke ones.
Consider the screen
Designing for screens on iOS mobile devices is a different matter to designing for the web, as they’re very bright, very sharp and very reflective. They can be used both indoors and outdoors – and are also usually covered in fingerprints. So test ruthlessly on the actual screen during the design process.
Create custom icons
Icons represent a user’s first experience of an app, so you should consider how they work at different sizes. For example, the larger version of the Contacts icon appears as an address book with ring binding and letters down the side; the smaller one just has a suggestion of these textures, rather than being a crunched-down image.
Research suggests that often when users rotate a device, they’re prepared to immerse themselves more deeply in that content. So you might want to use a switch to landscape orientation as a trigger for more features, such as a video clip. Consider the idea that users are less likely to be just using one finger to interact.
Gestures, not clicks
The input method should be fundamental to how you design your interface. A finger is much larger than a mouse pointer and you can’t always see past it, so leave space around the actual hit region. However, bear in mind that people also use their thumbs, making the sides of the screen a sweet spot for those.
The invisible grid
The HIG states that no interactive element, such as a button, should be less than 44 points wide or high. Those dimensions operate as a kind of standard metric for an unspoken grid that relies upon 44 points: buttons are 44 points, the icon bar and Facebook menu are 88 points. This gives you a consistency that underlies a lot of visual elements.
Focus on the primary task: do one or two things really well rather than trying to offer lots of features to a lesser standard. It’s much more about short, focused experiences, or ‘snacking’ – doing things in five-minute bursts with interruptions – rather than just immersing yourself in one app.
Make it stretchable
Stretchable views are similar to nine-slice scaling in Fireworks. For example, if you’re creating a button with rounded edges that you want to stay the same shape whatever size it is, you need to make sure it has stretchable views so that iOS can stretch the middle part of the button as much as it wants without warping the image.
Get the basics right
When you first read the section of the HIG titled ‘Human Interface Principles’, there’s a temptation to scan it because it can feel a little like preaching to the converted. Read it properly and you’ll discover that it’s full of solid advice, such as keeping your interfaces consistent and giving users feedback as they wait for tasks to complete.
Icons: Jamie Jones