Hints & Tips on Design
for iPhone & iPad An exploration into iphone/ipad design by Cogapp Authors: Colin Jenkinson Eleanor Rudge Ollie Aplin
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
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.
A great PSD Toolkit to
get started with prototyping by http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/
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.
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 )
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/
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.
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.
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 )
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 )
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 )
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
Hints & Tips on Designing
for iPhone & iPad To find out more about our work please contact Kate Moerel. firstname.lastname@example.org +44 1273 821600 www.cogapp.com