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.

iPad Interface Design

10,083 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
  • 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

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

×