ipad interface design

48
iPad Interface Design 1

Upload: daveverwer

Post on 17-May-2015

8.126 views

Category:

Technology


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: iPad Interface Design

iPad Interface Design

1

Page 2: iPad Interface Design

2

Page 3: iPad Interface Design

3

Page 4: iPad Interface Design

But isn’t it just abig iPhone?

4

Page 5: iPad Interface Design

5

Page 6: iPad Interface Design

6

Page 7: iPad Interface Design

7

Page 8: iPad Interface Design

8

Page 9: iPad Interface Design

9

Page 10: iPad Interface Design

10

Page 11: iPad Interface Design

iPad UI Concepts

11

Page 12: iPad Interface Design

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: iPad Interface Design

13

Page 14: iPad Interface Design

14

Page 15: iPad Interface Design

15

Page 16: iPad Interface Design

16

Page 17: iPad Interface Design

17

Page 18: iPad Interface Design

Autorotation

18

Page 19: iPad Interface Design

19

Page 20: iPad Interface Design

20

Page 21: iPad Interface Design

21

Page 22: iPad Interface Design

22

Page 23: iPad Interface Design

Real World Materials

23

Page 24: iPad Interface Design

“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: iPad Interface Design

25

Page 26: iPad Interface Design

26

Page 27: iPad Interface Design

27

Page 28: iPad Interface Design

28

Page 29: iPad Interface Design

29

Page 30: iPad Interface Design

30

Page 31: iPad Interface Design

31

Page 32: iPad Interface Design

“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: iPad Interface Design

33

Page 34: iPad Interface Design

34

Page 35: iPad Interface Design

35

Page 36: iPad Interface Design

36

Page 37: iPad Interface Design

Gestures

37

Page 38: iPad Interface Design

Tap Tap & Hold

Pinch SwipePan

38

Page 39: iPad Interface Design

“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: iPad Interface Design

Web Usabilityon iPad

40

Page 41: iPad Interface Design

41

Page 42: iPad Interface Design

42

Page 43: iPad Interface Design

43

Page 44: iPad Interface Design

Summary

44

Page 45: iPad Interface Design

★ 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: iPad Interface Design

http://bit.ly/iPadHIG

46

Page 47: iPad Interface Design

http://bit.ly/NielseniPadUsability

47

Page 48: iPad Interface Design

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

48