Dave Verwer iPad Interface Design iPad at the CUC

1,236
-1

Published on

Dave Verwer of Shiny Development presented this iPad Interface Design presentation at Vision+Media's iPad at the CUC event in Liverpool on Wednesday 2nd June 2010

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,236
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
52
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dave Verwer iPad Interface Design iPad at the CUC

  1. 1. iPad Interface Design 1
  2. 2. 2
  3. 3. 3
  4. 4. But isn’t it just a big iPhone? 4
  5. 5. 5
  6. 6. 6
  7. 7. 7
  8. 8. 8
  9. 9. 9
  10. 10. 10
  11. 11. iPad UI Concepts 11
  12. 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. 13
  14. 14. 14
  15. 15. 15
  16. 16. 16
  17. 17. 17
  18. 18. Autorotation 18
  19. 19. 19
  20. 20. 20
  21. 21. 21
  22. 22. 22
  23. 23. Real World Materials 23
  24. 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. 25
  26. 26. 26
  27. 27. 27
  28. 28. 28
  29. 29. 29
  30. 30. 30
  31. 31. 31
  32. 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. 33
  34. 34. 34
  35. 35. 35
  36. 36. 36
  37. 37. Gestures 37
  38. 38. Tap Tap & Hold Pinch Pan Swipe 38
  39. 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. 40. Web Usability on iPad 40
  41. 41. 41
  42. 42. 42
  43. 43. 43
  44. 44. Summary 44
  45. 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. 46. http://bit.ly/iPadHIG 46
  47. 47. http://bit.ly/NielseniPadUsability 47
  48. 48. Web: http://shinydevelopment.com Email: dave.verwer@shinydevelopment.com Twitter: @daveverwer 48
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×