Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.
•
40 likes•2,567 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.
Similar to Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone. (20)
Recently uploaded
Recently uploaded (20)
Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.
- 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)
- 3. Tablet Computer? “Within five years I predict [the tablet] will be the most popular form of PC sold in America."
- 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. 2001: The Tablet PC concept (from Microsoft’s press release)
- 6. 2001: The Tablet PC concept (from Microsoft’s press release) • Speech input
- 7. 2001: The Tablet PC concept (from Microsoft’s press release) • Speech input • Pen input with “The Stylish Stylus”
- 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. 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. 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”
- 15. A wimp?
- 16. Why the Tablet PC failed
- 17. 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.
- 18. 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.
- 19. 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.
- 20. 2007: The iPhone
- 21. 2007: The iPhone
- 22. 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
- 23. Apple’s new UI guidelines for a new platform
- 24. Apple’s new UI guidelines for a new platform • Focus on the Primary Task
- 25. Apple’s new UI guidelines for a new platform • Focus on the Primary Task • REDUCE the number of features
- 26. Apple’s new UI guidelines for a new platform • Focus on the Primary Task • REDUCE the number of features • Provide Fingertip-Size Targets
- 27. 2010, The iPad
- 28. 2010, The iPad
- 29. - But wait, the iPad isn’t new, it’s just a big iPod!
- 30. - Yes, it is bigger...
- 37. Browsing a newspaper site on the iPhone
- 39. - But no, it’s bigger, so the UI has to be different!
- 41. An layout optimised for iPhone won’t work for iPad
- 42. Apple’s new guidelines for a different device.
- 43. 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.
- 44. 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.
- 45. 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.
- 46. 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.
- 47. Combine the content from separate iPhone screens
- 48. Mail on iPhone
- 49. Mail on iPad
- 50. Mail on iPad
- 53. Multi finger pinch to open an album
- 54. Multi finger drag and tap to match photo sizes
- 55. Accordeon!
- 56. Add Physicality & Heightened Realism
- 59. The limits of realism
- 60. 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.
- 61. Gmail on the iPad
- 62. 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/)
- 63. Thanks for reading! Fabien Marry @AlphabUX www.AlphabUX.net
Editor's Notes
- What happened?
- What happened?
- The design slightly evolved over time. The UI stayed the same Windows one: good luck hitting those tiny icons in the taskbar with a stylus while holding the tablet in your hand, and walking or in a train.
- The iPhone went in the opposite direction: it would completely get rid of standard computer's traditional GUI.
- By understanding that a different device used in a mobile setting required a different UI, and that such a small screen would not allow all the features of a desktop version, Apple successfully launched its new platform, and rewrote the rules for its competitor.
- By understanding that a different device used in a mobile setting required a different UI, and that such a small screen would not allow all the features of a desktop version, Apple successfully launched its new platform, and rewrote the rules for its competitor.
- By understanding that a different device used in a mobile setting required a different UI, and that such a small screen would not allow all the features of a desktop version, Apple successfully launched its new platform, and rewrote the rules for its competitor.
- The iPad’s bigger size makes it much more appropriate than the iPhone for many uses...
- The larger size allows the device to be shared across users, as in the Scrabble board game that would be simply laid flat on a table. It also includes networking features allowing players to user their iPhone as tile holders.
- Maps is another app that is brought to a whole new level by the larger screen, making it much easier to see where you are and where you have to go.
- iPad games can be much more complex, while maintaining finger sized controls.
- The iPad larger screen allow for Comics to be read in their entirety, preserving the intended page layout.
- Brushes is an app that allow people to paint on the screen with their fingers. The larger iPad canevas makes for a much better experience.
- 3D games can be much more immersive than their smaller screen version.
- The iPhone was a big leap in bringing a good browsing experience on a phone, but it still requires much zooming and panning. The experience is miles bellow what you get on a laptop.
- The iPad larger screen changes everything: text can be read easily, without any panning or zooming. Interacting physically with the articles also brings a proximity unheard of with traditional computers.
- This was Griffin’s iTalk, one of my favourite iPhone app. This app is a voice recorder. They understood that what people wanted to do when they launched this app was to start a recording, and to do so straight away. As a result, they made their record button huge, rendering it unmissable and easy to hit in a hurry. But simply scaling this interface to the iPad dimensions would result in a button that would be comically and pointlessly large. This is an example where the UI need to be deeply re tough to work on iPad.
- Note: Since the searchenginejournal.com post pointing this example was published, office depot corrected their redirection, and now show the “normal” version of their website.
- The first point is key: focus on what really matters. This strong focus is the reason many people actually prefer using their mobile apps for many tasks even when they have their larger laptop at hands. It is important that this advantage is not lost when moving to the iPad.
- The first point is key: focus on what really matters. This strong focus is the reason many people actually prefer using their mobile apps for many tasks even when they have their larger laptop at hands. It is important that this advantage is not lost when moving to the iPad.
- The first point is key: focus on what really matters. This strong focus is the reason many people actually prefer using their mobile apps for many tasks even when they have their larger laptop at hands. It is important that this advantage is not lost when moving to the iPad.
- The first point is key: focus on what really matters. This strong focus is the reason many people actually prefer using their mobile apps for many tasks even when they have their larger laptop at hands. It is important that this advantage is not lost when moving to the iPad.
- Due to the limited screen size, Mail on the iPhone requires many full screen changes, and present the different levels of information only one at a time.
- On the iPad, Mail can present several levels at a time, which making using the application much more fluid. This UI is an interesting mix of old (the left column is similar to iPhone lists) and new (combined view, toolbar at the top). It also share similarities with the Mac’s source lists (Finder, iTunes).
- In portrait orientation, keeping a good text layout for the mail content means that there is no space for the left column to remain permanently. It is then called only when needed by pressing a button, and is dismissed automatically. This UI, called Popover was created specially for the iPad.
- Another popover exemple, here in the iPad’s version of Keynote, Apple’s presentation application. Popovers are a cross between the Mac’s inspector palettes and modal dialogues.
- Easy (once you know it can be done) very immediate and very beautiful way to interact.
- Gestures, especially multi finger ones, are a great way to accelerate your workflow. However, they are undiscoverable: unlike menus or icons, there is no way for the user to know in advance what can be done. They are similar to keyboard shortcuts, and should be used in the same way: a great way to get thing done in an easier and faster way, but should never be used as the only way to access key features since they are likely to be ignored.
- Multi touch potential exemplified!
- For iPad, Apple recommend using realistic, real word graphics, something that they did not do for iPhone. This push for realism works quite well as the iPad dimensions and minimalistic hardware design can lead you to feel like you are holding the “real” thing in your hand.
- In this example from Apple’s Number spreadsheet app, realism works great: this abstract away all the spreadsheet complexity to only display a form similar to the paper ones used until now, creating a string emotional connection.
- This app is very beautiful as well, pushing attention to detail quite far (notice the stitches in the middle of the book). But the metaphor is stretched too far here: this paper pages have physical butons and scrollable areas, which completely break the mental model of traditional paper books, and destroy the illusion of holding a real address book.