SlideShare una empresa de Scribd logo
1 de 44
Hints & Tips on Design
for iPhone & iPad

October 2010

www.cogapp.com
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/
Paper Prototyping




http://www.uistencils.com/products/iphone-stencil-kit   $24.95
Keep the flow



                `
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.
Keep the Flow – Split View iPad




1024 x 768px - Master and detail can be viewed.
Keep the Flow – Popover




                          Really useful for orientation changes.
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.
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.
UI –
Less is more
UI – Toolbars Modal




                               segmented control




scope bar / modal




                    action sheet
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 )
Create an experience.

It should feel like an app,
      not a website.
From Print
to Pixels
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/
iPad apps have a higher price
 point, reflecting users higher
    expectations of them.
From print
to pixels.


Limitations of screen size are
reflected in low price point.
From print
to pixels



Higher price point, closer to
the physical magazine, but
still needs a lot of work.



What is interactive here?
T

Type
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.
Built in fonts for iPad
Touchability
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 )
This is a device people
 want to engage with.

Let them explore and
       discover.
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?
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.
We’ve downloaded
and played with
some iPad apps.
Some quick, broad
thoughts...
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.

katem@cogapp.com         +44 1273 821600

www.cogapp.com

Más contenido relacionado

Destacado

كتاب بكر آبوبكر في كتابه: أساطير اليهود وآرض فلسطين في القرآن الكريم
كتاب بكر آبوبكر في كتابه: أساطير اليهود وآرض فلسطين في القرآن الكريمكتاب بكر آبوبكر في كتابه: أساطير اليهود وآرض فلسطين في القرآن الكريم
كتاب بكر آبوبكر في كتابه: أساطير اليهود وآرض فلسطين في القرآن الكريمBaker AbuBaker
 
Урок-вікторина "Квадратний корінь"
Урок-вікторина "Квадратний корінь"Урок-вікторина "Квадратний корінь"
Урок-вікторина "Квадратний корінь"sveta7940
 
Maya civearlyamericas
Maya civearlyamericasMaya civearlyamericas
Maya civearlyamericasHST130mcc
 
Session | Basics of Digital Marketing
Session | Basics of Digital MarketingSession | Basics of Digital Marketing
Session | Basics of Digital MarketingAkash-Srivastava
 
Modeling Catastrophic Events in Spark: Spark Summit East Talk by Georg Hofman...
Modeling Catastrophic Events in Spark: Spark Summit East Talk by Georg Hofman...Modeling Catastrophic Events in Spark: Spark Summit East Talk by Georg Hofman...
Modeling Catastrophic Events in Spark: Spark Summit East Talk by Georg Hofman...Spark Summit
 
üNi̇versi̇teler bütçe konuşma metni̇
üNi̇versi̇teler bütçe konuşma metni̇üNi̇versi̇teler bütçe konuşma metni̇
üNi̇versi̇teler bütçe konuşma metni̇AlimBey
 

Destacado (10)

Simulado fgv
Simulado fgvSimulado fgv
Simulado fgv
 
كتاب بكر آبوبكر في كتابه: أساطير اليهود وآرض فلسطين في القرآن الكريم
كتاب بكر آبوبكر في كتابه: أساطير اليهود وآرض فلسطين في القرآن الكريمكتاب بكر آبوبكر في كتابه: أساطير اليهود وآرض فلسطين في القرآن الكريم
كتاب بكر آبوبكر في كتابه: أساطير اليهود وآرض فلسطين في القرآن الكريم
 
Урок-вікторина "Квадратний корінь"
Урок-вікторина "Квадратний корінь"Урок-вікторина "Квадратний корінь"
Урок-вікторина "Квадратний корінь"
 
Maya civearlyamericas
Maya civearlyamericasMaya civearlyamericas
Maya civearlyamericas
 
Меры поддержки граждан
Меры поддержки гражданМеры поддержки граждан
Меры поддержки граждан
 
Session | Basics of Digital Marketing
Session | Basics of Digital MarketingSession | Basics of Digital Marketing
Session | Basics of Digital Marketing
 
Marca personal
Marca personalMarca personal
Marca personal
 
Moj istorijski strip
Moj istorijski stripMoj istorijski strip
Moj istorijski strip
 
Modeling Catastrophic Events in Spark: Spark Summit East Talk by Georg Hofman...
Modeling Catastrophic Events in Spark: Spark Summit East Talk by Georg Hofman...Modeling Catastrophic Events in Spark: Spark Summit East Talk by Georg Hofman...
Modeling Catastrophic Events in Spark: Spark Summit East Talk by Georg Hofman...
 
üNi̇versi̇teler bütçe konuşma metni̇
üNi̇versi̇teler bütçe konuşma metni̇üNi̇versi̇teler bütçe konuşma metni̇
üNi̇versi̇teler bütçe konuşma metni̇
 

Más de Cogapp

When automated analysis goes wrong
When automated analysis goes wrongWhen automated analysis goes wrong
When automated analysis goes wrongCogapp
 
Thinking Through Digital: Top tips for designing projects and working with te...
Thinking Through Digital: Top tips for designing projects and working with te...Thinking Through Digital: Top tips for designing projects and working with te...
Thinking Through Digital: Top tips for designing projects and working with te...Cogapp
 
Digital Strategy for Museums 2016
Digital Strategy for Museums 2016Digital Strategy for Museums 2016
Digital Strategy for Museums 2016Cogapp
 
Challenges and opportunities for presenting Arabic manuscripts online
Challenges and opportunities for presenting Arabic manuscripts onlineChallenges and opportunities for presenting Arabic manuscripts online
Challenges and opportunities for presenting Arabic manuscripts onlineCogapp
 
Creating compelling user interfaces
Creating compelling user interfacesCreating compelling user interfaces
Creating compelling user interfacesCogapp
 
Everything you ever wanted to know about IIIF but were too afraid to ask
Everything you ever wanted to know about IIIF but were too afraid to askEverything you ever wanted to know about IIIF but were too afraid to ask
Everything you ever wanted to know about IIIF but were too afraid to askCogapp
 
MW16 IIIF: Unshackle Your Images
MW16 IIIF: Unshackle Your ImagesMW16 IIIF: Unshackle Your Images
MW16 IIIF: Unshackle Your ImagesCogapp
 
Transform your museum with Agile
Transform your museum with AgileTransform your museum with Agile
Transform your museum with AgileCogapp
 
Digital: from Idea to Audience - Opportunities for Digital Excellence with a ...
Digital: from Idea to Audience - Opportunities for Digital Excellence with a ...Digital: from Idea to Audience - Opportunities for Digital Excellence with a ...
Digital: from Idea to Audience - Opportunities for Digital Excellence with a ...Cogapp
 
IIIF The International Image Interoperability Framework at MCN2015
IIIF The International Image Interoperability Framework at MCN2015IIIF The International Image Interoperability Framework at MCN2015
IIIF The International Image Interoperability Framework at MCN2015Cogapp
 
Making Meaning with Online Collections: Ten Top Tips
Making Meaning with Online Collections: Ten Top TipsMaking Meaning with Online Collections: Ten Top Tips
Making Meaning with Online Collections: Ten Top TipsCogapp
 
Agile for Beginners and Thrillseekers - MuseumNext 2015 Geneva
Agile for Beginners and Thrillseekers - MuseumNext 2015 GenevaAgile for Beginners and Thrillseekers - MuseumNext 2015 Geneva
Agile for Beginners and Thrillseekers - MuseumNext 2015 GenevaCogapp
 
Scaling Drupal on Amazon Web Services (DrupalCamp Brighton)
Scaling Drupal on Amazon Web Services (DrupalCamp Brighton)Scaling Drupal on Amazon Web Services (DrupalCamp Brighton)
Scaling Drupal on Amazon Web Services (DrupalCamp Brighton)Cogapp
 
Building Multilingual Websites with Drupal (DrupalCamp Brighton)
Building Multilingual Websites with Drupal (DrupalCamp Brighton)Building Multilingual Websites with Drupal (DrupalCamp Brighton)
Building Multilingual Websites with Drupal (DrupalCamp Brighton)Cogapp
 
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)Cogapp
 
Rich storytelling with Drupal, Paragraphs and Islandora DAMS (DrupalCamp Brig...
Rich storytelling with Drupal, Paragraphs and Islandora DAMS (DrupalCamp Brig...Rich storytelling with Drupal, Paragraphs and Islandora DAMS (DrupalCamp Brig...
Rich storytelling with Drupal, Paragraphs and Islandora DAMS (DrupalCamp Brig...Cogapp
 
Leading Digital Transformation in the Cultural Sector: A resource for managers
Leading Digital Transformation in the Cultural Sector: A resource for managersLeading Digital Transformation in the Cultural Sector: A resource for managers
Leading Digital Transformation in the Cultural Sector: A resource for managersCogapp
 
MuseumNext 2014: Masterclass. Opportunities for digital excellence with a lit...
MuseumNext 2014: Masterclass. Opportunities for digital excellence with a lit...MuseumNext 2014: Masterclass. Opportunities for digital excellence with a lit...
MuseumNext 2014: Masterclass. Opportunities for digital excellence with a lit...Cogapp
 
Cogapp's World Usability Day Slides
Cogapp's World Usability Day SlidesCogapp's World Usability Day Slides
Cogapp's World Usability Day SlidesCogapp
 
Cogapp Open Studios 2012 - Rethinking Interfaces
Cogapp Open Studios 2012 - Rethinking InterfacesCogapp Open Studios 2012 - Rethinking Interfaces
Cogapp Open Studios 2012 - Rethinking InterfacesCogapp
 

Más de Cogapp (20)

When automated analysis goes wrong
When automated analysis goes wrongWhen automated analysis goes wrong
When automated analysis goes wrong
 
Thinking Through Digital: Top tips for designing projects and working with te...
Thinking Through Digital: Top tips for designing projects and working with te...Thinking Through Digital: Top tips for designing projects and working with te...
Thinking Through Digital: Top tips for designing projects and working with te...
 
Digital Strategy for Museums 2016
Digital Strategy for Museums 2016Digital Strategy for Museums 2016
Digital Strategy for Museums 2016
 
Challenges and opportunities for presenting Arabic manuscripts online
Challenges and opportunities for presenting Arabic manuscripts onlineChallenges and opportunities for presenting Arabic manuscripts online
Challenges and opportunities for presenting Arabic manuscripts online
 
Creating compelling user interfaces
Creating compelling user interfacesCreating compelling user interfaces
Creating compelling user interfaces
 
Everything you ever wanted to know about IIIF but were too afraid to ask
Everything you ever wanted to know about IIIF but were too afraid to askEverything you ever wanted to know about IIIF but were too afraid to ask
Everything you ever wanted to know about IIIF but were too afraid to ask
 
MW16 IIIF: Unshackle Your Images
MW16 IIIF: Unshackle Your ImagesMW16 IIIF: Unshackle Your Images
MW16 IIIF: Unshackle Your Images
 
Transform your museum with Agile
Transform your museum with AgileTransform your museum with Agile
Transform your museum with Agile
 
Digital: from Idea to Audience - Opportunities for Digital Excellence with a ...
Digital: from Idea to Audience - Opportunities for Digital Excellence with a ...Digital: from Idea to Audience - Opportunities for Digital Excellence with a ...
Digital: from Idea to Audience - Opportunities for Digital Excellence with a ...
 
IIIF The International Image Interoperability Framework at MCN2015
IIIF The International Image Interoperability Framework at MCN2015IIIF The International Image Interoperability Framework at MCN2015
IIIF The International Image Interoperability Framework at MCN2015
 
Making Meaning with Online Collections: Ten Top Tips
Making Meaning with Online Collections: Ten Top TipsMaking Meaning with Online Collections: Ten Top Tips
Making Meaning with Online Collections: Ten Top Tips
 
Agile for Beginners and Thrillseekers - MuseumNext 2015 Geneva
Agile for Beginners and Thrillseekers - MuseumNext 2015 GenevaAgile for Beginners and Thrillseekers - MuseumNext 2015 Geneva
Agile for Beginners and Thrillseekers - MuseumNext 2015 Geneva
 
Scaling Drupal on Amazon Web Services (DrupalCamp Brighton)
Scaling Drupal on Amazon Web Services (DrupalCamp Brighton)Scaling Drupal on Amazon Web Services (DrupalCamp Brighton)
Scaling Drupal on Amazon Web Services (DrupalCamp Brighton)
 
Building Multilingual Websites with Drupal (DrupalCamp Brighton)
Building Multilingual Websites with Drupal (DrupalCamp Brighton)Building Multilingual Websites with Drupal (DrupalCamp Brighton)
Building Multilingual Websites with Drupal (DrupalCamp Brighton)
 
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)
 
Rich storytelling with Drupal, Paragraphs and Islandora DAMS (DrupalCamp Brig...
Rich storytelling with Drupal, Paragraphs and Islandora DAMS (DrupalCamp Brig...Rich storytelling with Drupal, Paragraphs and Islandora DAMS (DrupalCamp Brig...
Rich storytelling with Drupal, Paragraphs and Islandora DAMS (DrupalCamp Brig...
 
Leading Digital Transformation in the Cultural Sector: A resource for managers
Leading Digital Transformation in the Cultural Sector: A resource for managersLeading Digital Transformation in the Cultural Sector: A resource for managers
Leading Digital Transformation in the Cultural Sector: A resource for managers
 
MuseumNext 2014: Masterclass. Opportunities for digital excellence with a lit...
MuseumNext 2014: Masterclass. Opportunities for digital excellence with a lit...MuseumNext 2014: Masterclass. Opportunities for digital excellence with a lit...
MuseumNext 2014: Masterclass. Opportunities for digital excellence with a lit...
 
Cogapp's World Usability Day Slides
Cogapp's World Usability Day SlidesCogapp's World Usability Day Slides
Cogapp's World Usability Day Slides
 
Cogapp Open Studios 2012 - Rethinking Interfaces
Cogapp Open Studios 2012 - Rethinking InterfacesCogapp Open Studios 2012 - Rethinking Interfaces
Cogapp Open Studios 2012 - Rethinking Interfaces
 

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/
  • 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 )
  • 16. Create an experience. It should feel like an app, not a website.
  • 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?
  • 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
  • 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.
  • 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