10 Tips For iPhone User Interface Design

Digital Organics: Web Design Sunshine Coast - 1/102 Howard Street, Nambour, QLD 4560 T 617 5476 3800, SEO Sunshine Coast

10 Tips For iPhone User Interface Design

Designing for iOS4 devices is totally different from designing for the web. Sarah Parmenter

illustrated how to conceptualize, design, and develop a successful user interface for iPhone.

The most successful apps fulfill basic needs of people who need to find something quickly, or

people who are plain bored or just micro tasking.

When you design user interface with the Iphone, it's a completely different category because

you've got one platform, Webkit (there are other browsers but the main one is Webkit) and all the

constraints of designing for the web. We have barriers to actually make it designing for Iphone a

pleasure and that's something that's a bit strange to get your head around because we have this

guidelines, various strict restrictions on what we can and can't do in the Iphone. But this actually

makes the design process easier.

How do we start this process and give a helping hand in making an Iphone user interface project

you might find along the way?

1. Make a Development Choice

The first choice is Apple SDK. It's got steep learning curve, cocon and objective C. It uses apps

from the Apple SDK which is $99 to join but it's got a lot of potential to generate a significant

income from the Itunes store. There are great books you can find to learn more about Iphone and

mobile design and development to such books as "Iphone in Action", "The Iphone Developer's

Cookbook", and "Mobile Design and Development".

Your second choice Web Only App. This uses HTML/CSS techniques with no revenue from the app

store. It's good for clients on lower budgets and can be made to look like a native app.

The third choice is a Hybrid App. There's app like PhoneGap, Mobile Roadie, and JQTouch. You

have to be very careful what you use because sometimes apps get rejected on the basis of not

using the SDK.

2. Clearly Define What you Design

You start with an Application Definition Statement (ADS). It is a couple of sentences that describes

exactly what your app does. Don't make large paragraph with every single detail and as coherent

to someone who maybe doesn't understand. Just keep it short and straightforward.

Figure out the best UI components for your application. The first type of design app is Serious

Tool which is one of the very specific design methods. This comes with limited colour palette and

always focuses on minimising graphics. The most important thing about this type is the data. It

contains standard navigation with clear divisions and blocks.

http://www.digitalorganics.com.au/mobile-marketing/


Next is the Fun Tool. They are types with moderate use of colour and graphics and with simple

hierarchy of information. This always encourages leisurely productivity which is very diffrent to the

Serious Tool.

The third type is Fun Entertainment. Now this is very easy to design for because this embodies

games. This are extremely graphically-rich, have fun use of sound, with simple hierarchy of

information, and in-your-face visual feedback.

The fourth one is Serious Entertainment. This specific design have moderate use of graphics,

focused on content, with normally heavy use of tabbed data, and standard navigation elements.

This is probably the hardest type to get yor head around.

The fifth app type is Utility. These are graphically rich with normally single screen. It tries to not

have a hierarchy and normally used for less than 30 seconds.

3. Provide Inspiring Documents

You can wireframe however you like – paper, Fireworks, Photoshop – but don’t get too detailed:

keep to shades of grey and white and block elements. Don’t produce detailed icons or anything

that could steer your client away from the main task of signing off the functionality; they can sign

off design elements later.

Think about the gestures a user will need to use to get from one screen to another or to refresh a

page and sign these off at this stage as well. You might also want to bear in mind whether you’re

going to support a different landscape mode, in which case you’ll need to wireframe this too.

Giving the user a visually rich landscape mode can really add brownie points to your app.

4. Be Prepared for UX Interjection

If you’re presenting your wireframes to clients, take the time to produce comprehensive

documents, annotate where required and reinforce any design or UX decisions you’ve had to make

for the greater good of the app. By putting your thoughts down on paper and explaining details

concisely, you’ll minimise questions and queries from the client throughout the process. Don’t be

tempted to just send off screens as an attachment in an email: give them purpose and show them

in the most realistic environment you can.

I always embed my screens into a Keynote document, with the screen on the left and a paragraph

about the screen to the right. I never embed full quality artwork because I’ve had my fingers

burned too many times. It’s a good habit to slightly downsize the artwork for presentation.

5. Orientations, Dimensions, and Hierarchy

You’re also going to need to think about the space for touch gestures, such as buttons. The

minimum hit size on an iPhone is 44 x 22px: anything smaller than this and a user might get


frustrated with mis-hitting their intended buttons. The ideal fingertip target is a comfortable 44 x

44px. You also have to think about the space between anything a user will need to touch. The

recommended minimum space between elements is between 12 and 22px.

Always embed my screens into a Keynote document, with the screen on the left and a paragraph

about the screen to the right. I never embed full quality artwork because I’ve had my fingers

burned too many times. It’s a good habit to slightly downsize the artwork for presentation.

6. Unravel High Fidelity UI

You’ll notice that the apps that ship with your iPhone or iPad are of the highest quality, that

attention to detail is in abundance and that they’re pleasing to the eye. The apps that get the

greatest graphical reviews are those that follow suit. The iPhone and iPad are in such close

proximity to your eye level that it’s possible to make the most subtle of textures and gradients

noticeable. Flat, block colours can work well but just adding hints of gradients, texture and realism

can lift your app from good to fantastic.

Other elements that can make an app beautiful are text highlights, tactile backgrounds, subtle

shadows, high gloss finishes and clean, crisp, custom icons within your app (of course, all used

sparingly and appropriately).

Studying the UI of your favourite app will help you to see these little details but the best apps are

always those that get the UI and the UX right, such as the Twitter for iPhone app (formerly

Tweetie). The “pull to refresh” has become a standard gesture across many apps and coupled with

a beautiful user interface: it’s no wonder it has become a favourite amongst Twitter iPhone users.

7. Don't Reinvent the Wheel

While you are designing, keep your documents neat and tidy. If you’re working in Photoshop,

make sure you group and name layers sensibly. Whilst Photoshop is an industry favourite, you can

work in any program that can export PNG files, as this is what is used for development.

It’s normal to hand over a Photoshop document to a developer at the end of the process: unlike

the web, this isn’t frowned upon. It’s always worth asking your developer whether they’d like you

to pre-slice the UI into PNG files.

8. Take Time to Design a Beautiful Icon

Your icon is one of the most important things you’ll design: it will be someone’s first contact with

your app on the App Store. Start on paper: it’s expendable and easy to let your ideas flow without

committing to anything. Once you have something you feel you could develop further and better

on the computer, move forward. The best icons always portray a single, defined silhouette and tell

a story of what your app represents.


Spotlight icons are seen on the search screen of the iPhone

Try to leave text out of the icon: it rarely works and is mostly unnecessary as your app name will

be presented below the icon anyway.

9. Pricing UI Design

Your standard iPhone icon is 57 x 57px with a border radius of 10px and iPad icons 72 x 72px with

a border radius of 12px.

Don’t forget about your icons for the App Store, which are a supersize 512 x 512px but normally

scaled to 175 x 175px for the App Store.

10. App Approval Process and Onward Development

Use purely the Apple SDK if possible. Try not to use the high-breed methods because some of time

get rejected and its worth looking into the internet and to read what they tend to adapt.

Don't use any Apple icons or imagery or any Apple trademarks. Do not use popular stock icons.

We want a little bit custom and not something available freely on the internet. Try not to be too

controversial; find a language, a hook where you can make a cue and can get it through that way.

Keep your developers happy because chances are you're not gonna developing this yourself.

Provide very comprehensive documents and clearly labeled and grouped layers in Photoshop when

you handover these documents to Iphone developers. Pre-slice PNG files where necessary bacause

they're the only files that Apple developers work with.

Moreover, consider designing for Retina Display just be aware it's double the amount of work. To

take advantage of the Retina Display you're going to have to create 2 sets of artwork adding 2x to

the end of your filename [email protected]. Create bigger and more detailed icons ie. the 57 x 57

icon becomes 114 x 114. Try and design in vector format so that all imagery is scalable and future

proof.