Dave Verwer iPad Interface Design iPad at the CUC

48
iPad Interface Design 1

description

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

Transcript of Dave Verwer iPad Interface Design iPad at the CUC

Page 1: Dave Verwer iPad Interface Design iPad at the CUC

iPad Interface Design

1

Page 2: Dave Verwer iPad Interface Design iPad at the CUC

2

Page 3: Dave Verwer iPad Interface Design iPad at the CUC

3

Page 4: Dave Verwer iPad Interface Design iPad at the CUC

But isn’t it just abig iPhone?

4

Page 5: Dave Verwer iPad Interface Design iPad at the CUC

5

Page 6: Dave Verwer iPad Interface Design iPad at the CUC

6

Page 7: Dave Verwer iPad Interface Design iPad at the CUC

7

Page 8: Dave Verwer iPad Interface Design iPad at the CUC

8

Page 9: Dave Verwer iPad Interface Design iPad at the CUC

9

Page 10: Dave Verwer iPad Interface Design iPad at the CUC

10

Page 11: Dave Verwer iPad Interface Design iPad at the CUC

iPad UI Concepts

11

Page 12: Dave Verwer iPad Interface Design iPad at the CUC

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

Page 13: Dave Verwer iPad Interface Design iPad at the CUC

13

Page 14: Dave Verwer iPad Interface Design iPad at the CUC

14

Page 15: Dave Verwer iPad Interface Design iPad at the CUC

15

Page 16: Dave Verwer iPad Interface Design iPad at the CUC

16

Page 17: Dave Verwer iPad Interface Design iPad at the CUC

17

Page 18: Dave Verwer iPad Interface Design iPad at the CUC

Autorotation

18

Page 19: Dave Verwer iPad Interface Design iPad at the CUC

19

Page 20: Dave Verwer iPad Interface Design iPad at the CUC

20

Page 21: Dave Verwer iPad Interface Design iPad at the CUC

21

Page 22: Dave Verwer iPad Interface Design iPad at the CUC

22

Page 23: Dave Verwer iPad Interface Design iPad at the CUC

Real World Materials

23

Page 24: Dave Verwer iPad Interface Design iPad at the CUC

“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

Page 25: Dave Verwer iPad Interface Design iPad at the CUC

25

Page 26: Dave Verwer iPad Interface Design iPad at the CUC

26

Page 27: Dave Verwer iPad Interface Design iPad at the CUC

27

Page 28: Dave Verwer iPad Interface Design iPad at the CUC

28

Page 29: Dave Verwer iPad Interface Design iPad at the CUC

29

Page 30: Dave Verwer iPad Interface Design iPad at the CUC

30

Page 31: Dave Verwer iPad Interface Design iPad at the CUC

31

Page 32: Dave Verwer iPad Interface Design iPad at the CUC

“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

Page 33: Dave Verwer iPad Interface Design iPad at the CUC

33

Page 34: Dave Verwer iPad Interface Design iPad at the CUC

34

Page 35: Dave Verwer iPad Interface Design iPad at the CUC

35

Page 36: Dave Verwer iPad Interface Design iPad at the CUC

36

Page 37: Dave Verwer iPad Interface Design iPad at the CUC

Gestures

37

Page 38: Dave Verwer iPad Interface Design iPad at the CUC

Tap Tap & Hold

Pinch SwipePan

38

Page 39: Dave Verwer iPad Interface Design iPad at the CUC

“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

Page 40: Dave Verwer iPad Interface Design iPad at the CUC

Web Usabilityon iPad

40

Page 41: Dave Verwer iPad Interface Design iPad at the CUC

41

Page 42: Dave Verwer iPad Interface Design iPad at the CUC

42

Page 43: Dave Verwer iPad Interface Design iPad at the CUC

43

Page 44: Dave Verwer iPad Interface Design iPad at the CUC

Summary

44

Page 45: Dave Verwer iPad Interface Design iPad at the CUC

★ Design specifically for iPad.

★ Flatten your user interface hierarchy.

★ Take advantage of autorotation.

★ Use real world interfaces where appropriate.

★ Gestures are hard.

45

Page 46: Dave Verwer iPad Interface Design iPad at the CUC

http://bit.ly/iPadHIG

46

Page 47: Dave Verwer iPad Interface Design iPad at the CUC

http://bit.ly/NielseniPadUsability

47

Page 48: Dave Verwer iPad Interface Design iPad at the CUC

Web: http://shinydevelopment.comEmail: [email protected]: @daveverwer

48