iPad and iPhone Design Tips


Published on

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

iPad and iPhone Design Tips

  1. Hints & Tips on Design for iPhone & iPad October 2010 www.cogapp.com
  2. Hints & Tips on Design for iPhone & iPad An exploration into iphone/ipad design by Cogapp Authors: Colin Jenkinson Eleanor Rudge Ollie Aplin
  3. Hints & Tips on Design for iPhone & iPad Contents: Resources Keep the Flow UI–Less is More From Print to Pixels Type Touchability Other Apps–Our Thoughts In Summary Find out More
  4. Online Resources http://developer.apple.com www.teehanlax.com (Latest iphone and ipad PSD files and guides) (Search for Human interface and iPad guidelines) http://www.uxmag.com http://www.apple.com/html5/ (More condensed overview of Apple HI guides) (HTML 5 design lushness / SAFARI) blog.cocoia.com/2010/ipad-ui-roundup/ http://www.uistencils.com (Good, Bad and Ugly breakdown of iPad UI) (Super useful metal protoytyping stencil) Loads of good resources are out there.
  5. A great PSD Toolkit to get started with prototyping by http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/
  6. Paper Prototyping http://www.uistencils.com/products/iphone-stencil-kit $24.95
  7. Keep the flow `
  8. Keep the Flow – One Screen iPhone 480 x 320px - One screen at a time. Size restriction means a limited, but essential interface - ‘JEEP’ - just enough essential parts. Can only show the master or detail, never both at once.
  9. Keep the Flow – Split View iPad 1024 x 768px - Master and detail can be viewed.
  10. Keep the Flow – Popover Really useful for orientation changes.
  11. Keep the Flow – Toolbar Positions Will Differ Positioning relates to natural point of contact and how the devices are held and their size. iPhone bottom toolbar. iPad top toolbar.
  12. Keep the Flow – Toolbar Positions Will Differ Positioning relates to natural point of contact, how the devices are held and their size. iPhone bottom toolbar. iPad top toolbar.
  13. UI – Less is more
  14. UI – Toolbars Modal segmented control scope bar / modal action sheet
  15. Watch out for feature creep! Keynote Desktop interface Use modes to simplify UI. Less is more. The trick is to figure out which sets of features are important at that time. Keynote iPad interface ( Extract from Apple iPad HI guidelines )
  16. Create an experience. It should feel like an app, not a website.
  17. From Print to Pixels
  18. From Print to Pixels The natural reading flow on ipad works differently to print. Traditional grids using multiple columns and large amounts of wrapping text create a confusing flow of content on ipad. Consider single columns of vertical scrolling text with a comfortable line length. A single column layout also allows for natural swiping navigation left and right. http://informationarchitects.jp/wired-on- ipad-just-like-a-paper-tiger/
  19. iPad apps have a higher price point, reflecting users higher expectations of them.
  20. From print to pixels. Limitations of screen size are reflected in low price point.
  21. From print to pixels Higher price point, closer to the physical magazine, but still needs a lot of work. What is interactive here?
  22. T Type
  23. iPhone – Retina Display 4 x the pixels Snap to pixels. ( no nasty blur ) Delicate serif fonts will still degrade. Consider scaling up and degradation. Will we need to design two sets of assets? ( 960 x 640 & 480 x 320 ) Preview on native device early and often.
  24. Typemageddon! What makes type foundries happy doesn’t always make users happy. It’s exciting, but it’s early days. Test, refine in native environment. Font Foundries are exploring new font licensing models and additional usage costs for iPad.
  25. Built in fonts for iPad
  26. Touchability
  27. All hands on deck. Large enough to support two handed input. DOES NOT mean twice the UI. Support it in discoverable and optional way. Don’t use for essential tasks, but this can save time for users when discovered. ( Extract from Apple iPad HI guidelines )
  28. Content is the interface. De-emphasize User Interface controls. Help people focus on the content. Consider fading controls after people have stopped interacting with them for a little while, and redisplaying them when people tap the screen. Use modes to simplify UI. ( Extract from Apple iPad HI guidelines )
  29. This is a device people want to engage with. Let them explore and discover.
  30. Make it real! Really? Touch conveys the identity and realness of an object. Make things look real; page turning, printed paper, textures, bevels and ‘real world’ materials. iPad can simulate actual size, hence mimicking real life actions is more acceptable e.g. page turning. Big debate online about this. ( Extract from Apple iPad HI guidelines )
  31. Make it real! Really?
  32. Make it real! Really? People are comfortable and familiar with Apple GUI. Respect it, but don’t over use it. Create additional bespoke UI styles to make an app look unique and on-brand. Build a hierarchy of components and use Apple GUI on the primary ones.
  33. We’ve downloaded and played with some iPad apps. Some quick, broad thoughts...
  34. Navigation is your friend. There are no navigational standards, as there are on the web. In some apps you often can’t tell the difference between ‘touchable’ and regular images and/or text. Navigation is hidden and revealed in different ways, and with different gestures within each app. Gestures will do different things between each app. It’s easy to feel lost in an app - it’s useful to be always go home, or back one level.
  35. Interaction is key. It’s a touchable device - people will want a certain level of interaction for a satisfying experience. But: don’t ask the user to do too much - they’ll become frustrated. Allow the users to use the gestures that they’ll expect to use - pinch, swipe, etc.
  36. Reading is hard. There are lots of apps out there that present you with lots of great text based content. We’re still trying to figure out the best way to read lots of text on an iPad. Problems with multi columns. Problems with one long thin column. Swipe or scroll? It’s going to take some time to figure out what works well.
  37. Guardian Eyewitness Image gallery. Does one thing, and does it really well. Navigation always available: tap on, tap off. Navigation uses almost standard Apple styling - users are instantly familiar with how it will work.
  38. Gilt Luxury shopping app. Layout simple, stylish. It’s really intuitive to use. There’s 2 levels of interaction - the first allows you to do everything you’d need using the standard buttons presented at each stage. The second allows you to drag and drop items in and out of your basket, rewarding the user with satisfying responses.
  39. Keynote iPad version of desktop application. Really simple to use. Loads of functions, but each is only revealed exactly when you’d need to use it - so you’re not overwhelmed with too much choice, and it remains intuitive. Great example of hiding the file system from the user.
  40. Phaidon Design Classics for the iPad. Looks great. Condensed an awful lot of information into a relatively simple app. Reading is simple! They seem to have it spot on - nice line length, spacing, font size and so on - and doesn’t require too much input from the user. Would be nice to zoom images. There is also no context given to extra images in slideshow mode. Icons used for navigation are a bit ambiguous at first – but if you play around with it for a while, you soon learn what’s what.
  41. In Summary – - Keep the flow. - The user needs to know where they are. - Navigation - keep it easy, intuitive. - Animations and transitions create an ‘app’ experience. - Back / home buttons are really helpful. - What is ‘tap-able’? - Make sure it’s easy to read content. - Don’t expect the user to do too much. - Make sure the user can do the things they expect to be able to do. - The best apps seem to do one thing, and do it very well. - Don’t try and do too much, and don’t try and fit too much onto one screen. - Only reveal content/functionality when it is needed. - Test your work with users and amend your designs accordingly.
  42. Find Out More – We are developing our own set of icons for use on iPhone and iPad. Get in touch if you’d like to know more.
  43. Find Out More – This is a new and evolving platform. To keep track of our thoughts and ideas please see the links below: http:// www.cogapp.com/eleanor’sblogposturl http:// www.cogapp.com/blog/categories/iphone http://www.delicious.com/cogapp/ipad http://www.delicious.com/cogapp/iphone http://twitter.com/cogapp
  44. Hints & Tips on Designing for iPhone & iPad To find out more about our work please contact Kate Moerel. katem@cogapp.com +44 1273 821600 www.cogapp.com