iPhone<br />UserInterfaceDesignEssentials<br />MOBILE DEVELOPER CONFERENCE, 2011, BANGALORE<br />Saturday, January 22, 201...
Biju <br />Damodharan<br />Harshad<br />Kulkarni<br />Yahoo! India UED<br />Designs products for global and regional audie...
Tapparatus<br />Bestexit<br />Epicurious<br />Saturday, January 22, 2011<br />
Convert<br />Powerybase<br />Guidedways<br />Saturday, January 22, 2011<br />
Yahoo! Finance<br />Yahoo! Deals<br />Yahoo! Messenger<br />Saturday, January 22, 2011<br />
Know your Application Type<br />Design for iPhone<br />Development Environment <br />Interface Builder<br />Saturday, Janu...
Know Your Application<br />ProductivityApplications<br />ImmersiveApplications<br />UtilityApplications<br />Saturday, Jan...
Productivity Application<br />Organize and manipulate information<br />User experience is focus on task. quickly find what...
Utility Application<br />Visuallyattractive<br />Minimum user input<br />Quick summary of information<br />Filters to sort...
Immersive Application<br />Fun application<br />Full screen visual rich environment<br />Simple Tasks<br />Hides device UI...
Choosing The Style<br />Based on type of information and tasks it enables,<br />choose appropriate style<br />Saturday, Ja...
Product Definition Statement<br />Helps to turn list of features into a coherent product<br />It is a tool used to determi...
Know Your Audience<br />Experience/Novice, Specific Task/Entertainment, Serious or Casual<br />Users are mobile<br />Quick...
Lets Create PDS<br />Saturday, January 22, 2011<br />
Design for iPhone<br />It is a small 320x480 pixel screen (163ppi)<br />The size of a fingertip is 44x44 pixels <br />Mind...
1. Small Screen<br />One of the longest standing issues in Web design has been the "everything including the kitchen sink ...
1. Small Screen<br />With 80% less screen space, you should know what matters most<br />The app should have a laser-like f...
1. Small Screen<br />Saturday, January 22, 2011<br />
1. Small Screen<br />Saturday, January 22, 2011<br />
1. Small Screen<br />Saturday, January 22, 2011<br />
1. Small Screen<br />App should be instantly understandable<br />Main function should be immediately apparent<br />Minimiz...
2. Fingertip Targets<br />The average cursor size is 16x16 pixels, but the average size of your fingertip is  44x44 pixels...
2. Fingertip Targets<br />Saturday, January 22, 2011<br />
2. Fingertip Targets<br />Do not create targets lesser than 44x44 pixels<br />Do not place them too close together <br />I...
3. Animation & Gestures<br />Animation is a great way to communicate effectively, as long as it doesn’t get in the way of ...
3. Animation & Gestures<br />Saturday, January 22, 2011<br />
3. Animation & Gestures<br />Saturday, January 22, 2011<br />
3. Animation & Gestures<br />Add animation cautiously, especially in applications that do not provide an immersive experie...
3. Animation & Gestures<br />Saturday, January 22, 2011<br />
3. Animation & Gestures<br />Use complex gestures as shortcuts to expedite a task<br />Avoid associating different actions...
4. Graphics & Realism<br />Saturday, January 22, 2011<br />
4. Graphics & Realism<br />When appropriate, add a realistic, physical dimension to your application. <br />The more true ...
5. Minimum Required Input<br />Small screen requires lot of attention to input information<br />Text field vs. pickers<br ...
6. Express Information Briefly<br />Short and Direct<br />Real life/world metaphors<br />Saturday, January 22, 2011<br />
Dev Environment<br />Naming Conventions<br />Image format<br />Interface Builder<br />Saturday, January 22, 2011<br />
Saturday, January 22, 2011<br />
References<br />MobileHIG<br />LUKEW Ideation + Design<br />Tapfancy<br />mobile.yahoo.com/iPhone<br />Saturday, January 2...
Thanks<br />Saturday, January 22, 2011<br />
Upcoming SlideShare
Loading in …5
×

Silicon India Mobile Developer Conference 2011

992 views
943 views

Published on

iPhone User Interface Design Essentials, presented at Mobile Developer Conference, 2011, Bangalore

Published in: Design, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
992
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Silicon India Mobile Developer Conference 2011

  1. 1. iPhone<br />UserInterfaceDesignEssentials<br />MOBILE DEVELOPER CONFERENCE, 2011, BANGALORE<br />Saturday, January 22, 2011<br />
  2. 2. Biju <br />Damodharan<br />Harshad<br />Kulkarni<br />Yahoo! India UED<br />Designs products for global and regional audience which are used across devices <br />Saturday, January 22, 2011<br />
  3. 3. Tapparatus<br />Bestexit<br />Epicurious<br />Saturday, January 22, 2011<br />
  4. 4. Convert<br />Powerybase<br />Guidedways<br />Saturday, January 22, 2011<br />
  5. 5. Yahoo! Finance<br />Yahoo! Deals<br />Yahoo! Messenger<br />Saturday, January 22, 2011<br />
  6. 6. Know your Application Type<br />Design for iPhone<br />Development Environment <br />Interface Builder<br />Saturday, January 22, 2011<br />
  7. 7. Know Your Application<br />ProductivityApplications<br />ImmersiveApplications<br />UtilityApplications<br />Saturday, January 22, 2011<br />
  8. 8. Productivity Application<br />Organize and manipulate information<br />User experience is focus on task. quickly find what is needed, perform necessary action<br />Tend to organize information hierarchically<br />High usage of native elements and interactions<br />Saturday, January 22, 2011<br />
  9. 9. Utility Application<br />Visuallyattractive<br />Minimum user input<br />Quick summary of information<br />Filters to sort information<br />Saturday, January 22, 2011<br />
  10. 10. Immersive Application<br />Fun application<br />Full screen visual rich environment<br />Simple Tasks<br />Hides device UI and has custom UI<br />Quick summary of information<br />Filters to sort information<br />Saturday, January 22, 2011<br />
  11. 11. Choosing The Style<br />Based on type of information and tasks it enables,<br />choose appropriate style<br />Saturday, January 22, 2011<br />
  12. 12. Product Definition Statement<br />Helps to turn list of features into a coherent product<br />It is a tool used to determine suitability of features and terminology<br />Saturday, January 22, 2011<br />
  13. 13. Know Your Audience<br />Experience/Novice, Specific Task/Entertainment, Serious or Casual<br />Users are mobile<br />Quickly open the application and see useful content immediately<br />Perform tasks in just few taps<br />Saturday, January 22, 2011<br />
  14. 14. Lets Create PDS<br />Saturday, January 22, 2011<br />
  15. 15. Design for iPhone<br />It is a small 320x480 pixel screen (163ppi)<br />The size of a fingertip is 44x44 pixels <br />Mind your gestures and animation<br />Delight with stunning graphics, add realism<br />Minimum Required Input<br />ExpressInformationBriefly<br />Saturday, January 22, 2011<br />
  16. 16. 1. Small Screen<br />One of the longest standing issues in Web design has been the "everything including the kitchen sink problem”<br />On a 1024x768 screen there's lots of pixels to fill!<br />Saturday, January 22, 2011<br />
  17. 17. 1. Small Screen<br />With 80% less screen space, you should know what matters most<br />The app should have a laser-like focus on what customers need and no room for anything else<br />Saturday, January 22, 2011<br />
  18. 18. 1. Small Screen<br />Saturday, January 22, 2011<br />
  19. 19. 1. Small Screen<br />Saturday, January 22, 2011<br />
  20. 20. 1. Small Screen<br />Saturday, January 22, 2011<br />
  21. 21. 1. Small Screen<br />App should be instantly understandable<br />Main function should be immediately apparent<br />Minimize the number of controls<br />Saturday, January 22, 2011<br />
  22. 22. 2. Fingertip Targets<br />The average cursor size is 16x16 pixels, but the average size of your fingertip is 44x44 pixels<br />Give tappable elements in your application a target area of about 44x44 pixels<br />Saturday, January 22, 2011<br />
  23. 23. 2. Fingertip Targets<br />Saturday, January 22, 2011<br />
  24. 24. 2. Fingertip Targets<br />Do not create targets lesser than 44x44 pixels<br />Do not place them too close together <br />If the UI is frequently touched then larger the better<br />Saturday, January 22, 2011<br />
  25. 25. 3. Animation & Gestures<br />Animation is a great way to communicate effectively, as long as it doesn’t get in the way of users<br />Animation can communicate status, provide useful feedback, and help people visualize the results of their actions<br />Saturday, January 22, 2011<br />
  26. 26. 3. Animation & Gestures<br />Saturday, January 22, 2011<br />
  27. 27. 3. Animation & Gestures<br />Saturday, January 22, 2011<br />
  28. 28. 3. Animation & Gestures<br />Add animation cautiously, especially in applications that do not provide an immersive experience<br />Use subtle animation used in the built-in iOS applications<br />Use animation consistently throughout your app<br />Saturday, January 22, 2011<br />
  29. 29. 3. Animation & Gestures<br />Saturday, January 22, 2011<br />
  30. 30. 3. Animation & Gestures<br />Use complex gestures as shortcuts to expedite a task<br />Avoid associating different actions with the standard gestures users know<br />In general, avoid defining new gestures<br />Saturday, January 22, 2011<br />
  31. 31. 4. Graphics & Realism<br />Saturday, January 22, 2011<br />
  32. 32. 4. Graphics & Realism<br />When appropriate, add a realistic, physical dimension to your application. <br />The more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it.<br />Saturday, January 22, 2011<br />
  33. 33. 5. Minimum Required Input<br />Small screen requires lot of attention to input information<br />Text field vs. pickers<br />Saturday, January 22, 2011<br />
  34. 34. 6. Express Information Briefly<br />Short and Direct<br />Real life/world metaphors<br />Saturday, January 22, 2011<br />
  35. 35. Dev Environment<br />Naming Conventions<br />Image format<br />Interface Builder<br />Saturday, January 22, 2011<br />
  36. 36. Saturday, January 22, 2011<br />
  37. 37. References<br />MobileHIG<br />LUKEW Ideation + Design<br />Tapfancy<br />mobile.yahoo.com/iPhone<br />Saturday, January 22, 2011<br />
  38. 38. Thanks<br />Saturday, January 22, 2011<br />

×