iPad Interface Design



                        1
2
3
But isn’t it just a
  big iPhone?


                      4
5
6
7
8
9
10
iPad UI Concepts



                   11
Use the large iPad screen and new UI elements to
  give people access to more information in one
place. Although you don’t...
13
14
15
16
17
Autorotation



               18
19
20
21
22
Real World Materials



                       23
“One way to increase the perceived value of
your application is to replicate the look of high-
quality or precious materia...
25
26
27
28
29
30
31
“One way to increase the perceived value of your
application is to replicate the look of high-quality
or precious material...
33
34
35
36
Gestures



           37
Tap         Tap & Hold



Pinch         Pan            Swipe




                                     38
“In different apps, touching a picture could produce any
of the following 5 results:
✦ Nothing happens
✦ Enlarging the pict...
Web Usability
  on iPad


                40
41
42
43
Summary



          44
★   Design specifically for iPad.

★   Flatten your user interface hierarchy.

★   Take advantage of autorotation.

★   Use...
http://bit.ly/iPadHIG

                        46
http://bit.ly/NielseniPadUsability

                                     47
Web: http://shinydevelopment.com
Email: dave.verwer@shinydevelopment.com
Twitter: @daveverwer




                        ...
Upcoming SlideShare
Loading in …5
×

iPad Interface Design

8,915 views
8,521 views

Published on

iPad User Interface Design from a talk given at the "iPad at the CUC" event held on the 2nd June 2010 in Liverpool. More details over at http://shinydevelopment.com/blog

Published in: Technology, Design
1 Comment
24 Likes
Statistics
Notes
  • I think apple did a good job with the ui

    --
    http://www.loogos.org/articles/how-to-get-an-apple-ipad-tablet-for-free
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
8,915
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
587
Comments
1
Likes
24
Embeds 0
No embeds

No notes for slide

iPad Interface Design

  1. iPad Interface Design 1
  2. 2
  3. 3
  4. But isn’t it just a big iPhone? 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. iPad UI Concepts 11
  12. Use the large iPad screen and new UI elements to give people access to more information in one place. Although you don’t want to pack too much information into one screen, you also want to prevent people from feeling that they must visit many different screens to find what they want. iPad Human Interface Guidelines 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. Autorotation 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. Real World Materials 23
  24. “One way to increase the perceived value of your application is to replicate the look of high- quality or precious materials. For example, if the effect of wood, leather, or metal is appropriate in your application, take the time to make sure the material looks realistic and valuable.” iPad Human Interface Guidelines 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. “One way to increase the perceived value of your application is to replicate the look of high-quality or precious materials. For example, if the effect of wood, leather, or metal is appropriate in your application, take the time to make sure the material looks realistic and valuable.” iPad Human Interface Guidelines 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. Gestures 37
  38. Tap Tap & Hold Pinch Pan Swipe 38
  39. “In different apps, touching a picture could produce any of the following 5 results: ✦ Nothing happens ✦ Enlarging the picture ✦ Hyperlinking to a more detailed page about that item ✦ Flipping the image to reveal additional pictures in the same place (metaphorically, these new pictures are "on the back side" of the original picture) ✦ Popping up a set of navigation choices” Usability of iPad apps and Websites, Nielsen Norman Group. 39
  40. Web Usability on iPad 40
  41. 41
  42. 42
  43. 43
  44. Summary 44
  45. ★ Design specifically for iPad. ★ Flatten your user interface hierarchy. ★ Take advantage of autorotation. ★ Use real world interfaces where appropriate. ★ Gestures are hard. 45
  46. http://bit.ly/iPadHIG 46
  47. http://bit.ly/NielseniPadUsability 47
  48. Web: http://shinydevelopment.com Email: dave.verwer@shinydevelopment.com Twitter: @daveverwer 48

×