Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Why the iPad UI matters
And how it differs from the Tablet PC, but also
from the iPhone.

                                ...
Tablet Computer?
Tablet Computer?


“Within five years I predict [the tablet] will be the most
popular form of PC sold in America."
Tablet Computer?


“Within five years I predict [the tablet] will be the most
popular form of PC sold in America."
        ...
2001: The Tablet PC concept
                 (from Microsoft’s press release)
2001: The Tablet PC concept
                 (from Microsoft’s press release)




• Speech input
2001: The Tablet PC concept
                                        (from Microsoft’s press release)




• Speech input
• ...
2001: The Tablet PC concept
                                        (from Microsoft’s press release)




• Speech input
• ...
2001: The Tablet PC concept
                                        (from Microsoft’s press release)




• Speech input
• ...
2001: The Tablet PC concept
                                        (from Microsoft’s press release)




• Speech input
• ...
A wimp?
Why the Tablet PC failed
Why the Tablet PC failed

• By using the same UI as the traditional computer,
  Microsoft failed to recognized the tablet’...
Why the Tablet PC failed

• By using the same UI as the traditional computer,
  Microsoft failed to recognized the tablet’...
Why the Tablet PC failed

• By using the same UI as the traditional computer,
  Microsoft failed to recognized the tablet’...
2007: The iPhone
2007: The iPhone
The iPhone is not a WIMP

• No Windows, but full screen apps
• No icons (only shortcuts)
• No Menus
• No pointers, but dir...
Apple’s new UI guidelines for
a new platform
Apple’s new UI guidelines for
a new platform

• Focus on the Primary Task
Apple’s new UI guidelines for
a new platform

• Focus on the Primary Task
• REDUCE the number of features
Apple’s new UI guidelines for
a new platform

• Focus on the Primary Task
• REDUCE the number of features
• Provide Finger...
2010, The iPad
2010, The iPad
- But wait, the iPad isn’t
new, it’s just a big iPod!
- Yes, it is bigger...
Browsing a newspaper site
on the iPhone
- But no, it’s bigger, so the
UI has to be different!
An layout optimised for
iPhone won’t work for iPad
Apple’s new guidelines for a
different device.
Apple’s new guidelines for a
different device.

• Resist the temptation to fill the large screen with
  features that are n...
Apple’s new guidelines for a
different device.

• Resist the temptation to fill the large screen with
  features that are n...
Apple’s new guidelines for a
different device.

• Resist the temptation to fill the large screen with
  features that are n...
Apple’s new guidelines for a
different device.

• Resist the temptation to fill the large screen with
  features that are n...
Combine the content from
separate iPhone screens
Mail on iPhone
Mail on iPad
Mail on iPad
Consider Multifinger Gestures
Multi finger pinch to open an album
Multi finger drag and tap to match photo sizes
Accordeon!
Add Physicality &
Heightened Realism
The limits of realism
Why should you care?
• Since the mainframe days, there is a strong historic trend
  towards easier to use applications, th...
Gmail on the iPad
Sources
• “Tablet PC: The Laptop Evolves Into a True Mobile Computer”, press release from
   Microsoft (http://www.microso...
Thanks for reading!

                  Fabien Marry
                   @AlphabUX
             www.AlphabUX.net
Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.
Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.
Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.
Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.
Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.
Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.
Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.
Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.
Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.
Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.
Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.
Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.
Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.
Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.
Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.
Upcoming SlideShare
Loading in …5
×

Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.

9,486 views

Published on

A in-depth look at the iPad user interface with guidelines and examples.
What's new, and what lessons were learned from theTablet PC concept and the iPhone own user interface.

If you think the iPad is just a bigger iPod, this presentation is for you.

Slightly updated from the presentation I made at UXCampLondon 2010.

Published in: Design, Devices & Hardware
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • For the Best iPhone and iPod touch apps and games for your devices, check out http://www.slideshare.net/Zanura
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.

  1. 1. Why the iPad UI matters And how it differs from the Tablet PC, but also from the iPhone. Slightly updated since UXCamp London 1.5 (April 17th, 2010)
  2. 2. Tablet Computer?
  3. 3. Tablet Computer? “Within five years I predict [the tablet] will be the most popular form of PC sold in America."
  4. 4. Tablet Computer? “Within five years I predict [the tablet] will be the most popular form of PC sold in America." Bill Gates, 2001
  5. 5. 2001: The Tablet PC concept (from Microsoft’s press release)
  6. 6. 2001: The Tablet PC concept (from Microsoft’s press release) • Speech input
  7. 7. 2001: The Tablet PC concept (from Microsoft’s press release) • Speech input • Pen input with “The Stylish Stylus”
  8. 8. 2001: The Tablet PC concept (from Microsoft’s press release) • Speech input • Pen input with “The Stylish Stylus” • "Customers have to feel they're gaining functionality, not giving up functionality”
  9. 9. 2001: The Tablet PC concept (from Microsoft’s press release) • Speech input • Pen input with “The Stylish Stylus” • "Customers have to feel they're gaining functionality, not giving up functionality” • Runs Win XP
  10. 10. 2001: The Tablet PC concept (from Microsoft’s press release) • Speech input • Pen input with “The Stylish Stylus” • "Customers have to feel they're gaining functionality, not giving up functionality” • Runs Win XP • “Supports all Windows applications without modification”
  11. 11. A wimp?
  12. 12. Why the Tablet PC failed
  13. 13. Why the Tablet PC failed • By using the same UI as the traditional computer, Microsoft failed to recognized the tablet’s need for an interface appropriate for touch.
  14. 14. Why the Tablet PC failed • By using the same UI as the traditional computer, Microsoft failed to recognized the tablet’s need for an interface appropriate for touch. • Microsoft and partners were aiming at a form factor than was too large (and heavy) to be usable.
  15. 15. Why the Tablet PC failed • By using the same UI as the traditional computer, Microsoft failed to recognized the tablet’s need for an interface appropriate for touch. • Microsoft and partners were aiming at a form factor than was too large (and heavy) to be usable. • No desire to reduce the feature set, leading to cluttered interfaces.
  16. 16. 2007: The iPhone
  17. 17. 2007: The iPhone
  18. 18. The iPhone is not a WIMP • No Windows, but full screen apps • No icons (only shortcuts) • No Menus • No pointers, but direct manipulation by multitouch
  19. 19. Apple’s new UI guidelines for a new platform
  20. 20. Apple’s new UI guidelines for a new platform • Focus on the Primary Task
  21. 21. Apple’s new UI guidelines for a new platform • Focus on the Primary Task • REDUCE the number of features
  22. 22. Apple’s new UI guidelines for a new platform • Focus on the Primary Task • REDUCE the number of features • Provide Fingertip-Size Targets
  23. 23. 2010, The iPad
  24. 24. 2010, The iPad
  25. 25. - But wait, the iPad isn’t new, it’s just a big iPod!
  26. 26. - Yes, it is bigger...
  27. 27. Browsing a newspaper site on the iPhone
  28. 28. - But no, it’s bigger, so the UI has to be different!
  29. 29. An layout optimised for iPhone won’t work for iPad
  30. 30. Apple’s new guidelines for a different device.
  31. 31. Apple’s new guidelines for a different device. • Resist the temptation to fill the large screen with features that are not directly related to the main task.
  32. 32. Apple’s new guidelines for a different device. • Resist the temptation to fill the large screen with features that are not directly related to the main task. • Consider ways to combine the content from separate iPhone screens into one screen on iPad.
  33. 33. Apple’s new guidelines for a different device. • Resist the temptation to fill the large screen with features that are not directly related to the main task. • Consider ways to combine the content from separate iPhone screens into one screen on iPad. • Consider Multifinger Gestures.
  34. 34. Apple’s new guidelines for a different device. • Resist the temptation to fill the large screen with features that are not directly related to the main task. • Consider ways to combine the content from separate iPhone screens into one screen on iPad. • Consider Multifinger Gestures. • Add Physicality and Heightened Realism.
  35. 35. Combine the content from separate iPhone screens
  36. 36. Mail on iPhone
  37. 37. Mail on iPad
  38. 38. Mail on iPad
  39. 39. Consider Multifinger Gestures
  40. 40. Multi finger pinch to open an album
  41. 41. Multi finger drag and tap to match photo sizes
  42. 42. Accordeon!
  43. 43. Add Physicality & Heightened Realism
  44. 44. The limits of realism
  45. 45. Why should you care? • Since the mainframe days, there is a strong historic trend towards easier to use applications, the iPad could be the next step. • First signs show the market will be big and apps will be priced higher than the iPhone’s, supporting an healthier industry. • You have to make sure the websites you produce will look great on iPad, or at least still work and don’t look too bad. • Sooner or latter, a client will ask you to work on his iPad app. • Even Web Apps are moving towards platform specific layout.
  46. 46. Gmail on the iPad
  47. 47. Sources • “Tablet PC: The Laptop Evolves Into a True Mobile Computer”, press release from Microsoft (http://www.microsoft.com/presspass/features/2001/nov01/11-11tabletpc.mspx) • Apple’s Mobile Human Interface Guidelines (http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html) • Apple’s iPad Human Interface Guidelines. (http://developer.apple.com/iphone/library/documentation/General/Conceptual/iPadHIG/index.html) • Apple Keynote’s videos. • Extracts from Fraser Speirs’ “iPad UI conventions Flickr set (http://www.flickr.com/photos/fraserspeirs/sets/72157623224262135/) • Martin Vidberg, “Des BD à la page” (http://vidberg.blog.lemonde.fr/2010/04/02/bd-numeriques/) • Matt Legend Gemmell, “iPad Application Design” (http://mattgemmell.com/2010/03/05/ipad-application-design) • InformationArchitects.jp, “Designing for iPad:Reality Check” (http://informationarchitects.jp/designing-for-ipad-reality-check/) • Stephan Spencer, “6 ways to optimise your site for the iPad” (http://www.searchenginejournal.com/is-your-site-ipad-ready/20094/)
  48. 48. Thanks for reading! Fabien Marry @AlphabUX www.AlphabUX.net

×