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

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