ipad interface design
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/blogTRANSCRIPT
![Page 1: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/1.jpg)
iPad Interface Design
1
![Page 2: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/2.jpg)
2
![Page 3: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/3.jpg)
3
![Page 4: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/4.jpg)
But isn’t it just abig iPhone?
4
![Page 5: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/5.jpg)
5
![Page 6: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/6.jpg)
6
![Page 7: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/7.jpg)
7
![Page 8: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/8.jpg)
8
![Page 9: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/9.jpg)
9
![Page 10: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/10.jpg)
10
![Page 11: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/11.jpg)
iPad UI Concepts
11
![Page 12: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/12.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/13.jpg)
13
![Page 14: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/14.jpg)
14
![Page 15: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/15.jpg)
15
![Page 16: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/16.jpg)
16
![Page 17: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/17.jpg)
17
![Page 18: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/18.jpg)
Autorotation
18
![Page 19: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/19.jpg)
19
![Page 20: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/20.jpg)
20
![Page 21: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/21.jpg)
21
![Page 22: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/22.jpg)
22
![Page 23: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/23.jpg)
Real World Materials
23
![Page 24: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/24.jpg)
“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](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/25.jpg)
25
![Page 26: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/26.jpg)
26
![Page 27: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/27.jpg)
27
![Page 28: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/28.jpg)
28
![Page 29: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/29.jpg)
29
![Page 30: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/30.jpg)
30
![Page 31: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/31.jpg)
31
![Page 32: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/32.jpg)
“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](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/33.jpg)
33
![Page 34: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/34.jpg)
34
![Page 35: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/35.jpg)
35
![Page 36: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/36.jpg)
36
![Page 37: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/37.jpg)
Gestures
37
![Page 38: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/38.jpg)
Tap Tap & Hold
Pinch SwipePan
38
![Page 39: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/39.jpg)
“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](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/40.jpg)
Web Usabilityon iPad
40
![Page 41: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/41.jpg)
41
![Page 42: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/42.jpg)
42
![Page 43: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/43.jpg)
43
![Page 44: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/44.jpg)
Summary
44
![Page 45: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/45.jpg)
★ 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](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/46.jpg)
http://bit.ly/iPadHIG
46
![Page 47: iPad Interface Design](https://reader034.vdocument.in/reader034/viewer/2022052619/5558209fd8b42a25588b4b88/html5/thumbnails/47.jpg)
http://bit.ly/NielseniPadUsability
47