• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
10 tips for i phone user interface design
 

10 tips for i phone user interface design

on

  • 931 views

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

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

Statistics

Views

Total Views
931
Views on SlideShare
931
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    10 tips for i phone user interface design 10 tips for i phone user interface design Document Transcript

    • 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, its a completely different category because youve 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 thats something thats a bit strange to get your head around because we have this guidelines, various strict restrictions on what we can and cant 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. Its got steep learning curve, cocon and objective C. It uses apps from the Apple SDK which is $99 to join but its 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 Developers Cookbook", and "Mobile Design and Development". Your second choice Web Only App. This uses HTML/CSS techniques with no revenue from the app store. Its good for clients on lower budgets and can be made to look like a native app. The third choice is a Hybrid App. Theres 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. Dont make large paragraph with every single detail and as coherent to someone who maybe doesnt 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.Digital Organics: Web Design Sunshine Coast - 1/102 Howard Street, Nambour, QLD 4560 T 617 5476 3800, SEO Sunshine Coast
    • 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 getDigital Organics: Web Design Sunshine Coast - 1/102 Howard Street, Nambour, QLD 4560 T 617 5476 3800, SEO Sunshine Coast
    • 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. Dont 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.Digital Organics: Web Design Sunshine Coast - 1/102 Howard Street, Nambour, QLD 4560 T 617 5476 3800, SEO Sunshine Coast
    • 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. Dont 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 youre 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 theyre the only files that Apple developers work with. Moreover, consider designing for Retina Display just be aware its double the amount of work. To take advantage of the Retina Display youre going to have to create 2 sets of artwork adding 2x to the end of your filename ie.logos@2x.png. 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.Digital Organics: Web Design Sunshine Coast - 1/102 Howard Street, Nambour, QLD 4560 T 617 5476 3800, SEO Sunshine Coast