Why the iPad UI Differs from Tablet PC and iPhone

Editor's Notes

2. What happened?
3. What happened?
10. 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.
16. The iPhone went in the opposite direction: it would completely get rid of standard computer's traditional GUI.
17. 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.
18. 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.
19. 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.
22. The iPad’s bigger size makes it much more appropriate than the iPhone for many uses...
23. 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.
24. 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.
25. iPad games can be much more complex, while maintaining finger sized controls.
26. The iPad larger screen allow for Comics to be read in their entirety, preserving the intended page layout.
27. 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.
28. 3D games can be much more immersive than their smaller screen version.
29. 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.
30. 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.
32. 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.
33. 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.
34. 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.
35. 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.
36. 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.
37. 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.
39. 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.
40. 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).
41. 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.
42. 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.
44. Easy (once you know it can be done) very immediate and very beautiful way to interact.
45. 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.
46. Multi touch potential exemplified!
48. 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.
49. 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.
50. 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.