iPad Interface Design

1

2

3

But isn’t it just abig iPhone?

4

5

6

7

8

9

10

iPad UI Concepts

11

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

14

15

16

17

Autorotation

18

19

20

21

22

Real World Materials

23

“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

26

27

28

29

30

31

“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

34

35

36

Gestures

37

Tap Tap & Hold

Pinch SwipePan

38

“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

Web Usabilityon iPad

40

41

42

43

Summary

44

★ Design specifically for iPad.

★ Flatten your user interface hierarchy.

★ Take advantage of autorotation.

★ Use real world interfaces where appropriate.

★ Gestures are hard.

45

http://bit.ly/iPadHIG

46

http://bit.ly/NielseniPadUsability

47

Web: http://shinydevelopment.comEmail: dave.verwer@shinydevelopment.comTwitter: @daveverwer

48