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/
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.
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 )
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.
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.
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 )
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.
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