SlideShare a Scribd company logo
1 of 48
Download to read offline
iPad Interface Design



                        1
2
3
But isn’t it just a
  big 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         Pan            Swipe




                                     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 Usability
  on 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.com
Email: dave.verwer@shinydevelopment.com
Twitter: @daveverwer




                                          48

More Related Content

Viewers also liked

Viewers also liked (12)

Latvijas bibliotēku portāls
Latvijas bibliotēku portālsLatvijas bibliotēku portāls
Latvijas bibliotēku portāls
 
Ruby on Rails For .Net Programmers
Ruby on Rails For .Net ProgrammersRuby on Rails For .Net Programmers
Ruby on Rails For .Net Programmers
 
Unobtrusive JavaScript
Unobtrusive JavaScriptUnobtrusive JavaScript
Unobtrusive JavaScript
 
Openstreetmap im Tourismus
Openstreetmap im TourismusOpenstreetmap im Tourismus
Openstreetmap im Tourismus
 
Hand Hygiene
Hand HygieneHand Hygiene
Hand Hygiene
 
EBD Course: Lecture 4 Secondary Sources
EBD Course: Lecture 4 Secondary SourcesEBD Course: Lecture 4 Secondary Sources
EBD Course: Lecture 4 Secondary Sources
 
Chain of infection ash
Chain of infection  ashChain of infection  ash
Chain of infection ash
 
Web2.0 Basics für den Grünen Wahlkampf Wien 2010
Web2.0 Basics für den Grünen Wahlkampf Wien 2010Web2.0 Basics für den Grünen Wahlkampf Wien 2010
Web2.0 Basics für den Grünen Wahlkampf Wien 2010
 
Das Social Web verstehen und nutzen
Das Social Web verstehen und nutzenDas Social Web verstehen und nutzen
Das Social Web verstehen und nutzen
 
Dr. Brian Payne - Infection Chain Concept
Dr. Brian Payne - Infection Chain ConceptDr. Brian Payne - Infection Chain Concept
Dr. Brian Payne - Infection Chain Concept
 
Openstreetmap BarCamp Wien
Openstreetmap BarCamp WienOpenstreetmap BarCamp Wien
Openstreetmap BarCamp Wien
 
Infection Control
Infection ControlInfection Control
Infection Control
 

Similar to iPad Interface Design

A research on i pad device & experience design
A research on i pad   device & experience designA research on i pad   device & experience design
A research on i pad device & experience designVinny Wu
 
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)Brian Fling
 
User Experience Workshop
User Experience WorkshopUser Experience Workshop
User Experience WorkshopMotivate Design
 
e-schools conference presentation
e-schools conference presentatione-schools conference presentation
e-schools conference presentationMaggie Verster
 
Designing for the iPad
Designing for the iPadDesigning for the iPad
Designing for the iPadusabilitynj
 
iPhone/iPad Human Interface Design
iPhone/iPad Human Interface DesigniPhone/iPad Human Interface Design
iPhone/iPad Human Interface DesignMartin Ebner
 
Georgetown_student ipad considerations_11-15-2011
Georgetown_student ipad considerations_11-15-2011Georgetown_student ipad considerations_11-15-2011
Georgetown_student ipad considerations_11-15-2011Bill Tomoff
 
Pass the i pad please - 5 Lessons for Creating Great Tablet Experiences
Pass the i pad please - 5 Lessons for Creating Great Tablet ExperiencesPass the i pad please - 5 Lessons for Creating Great Tablet Experiences
Pass the i pad please - 5 Lessons for Creating Great Tablet ExperiencesAnswerLab
 
Augmented Reality for Collaborative Experience
Augmented Reality for Collaborative ExperienceAugmented Reality for Collaborative Experience
Augmented Reality for Collaborative ExperienceDarya Yegorina, DBA
 
iPads in Education: From Pilot to Performance
iPads in Education: From Pilot to PerformanceiPads in Education: From Pilot to Performance
iPads in Education: From Pilot to Performancelogiki
 
Creating a Learning-Focused Interactive PDF via Adobe InDesign
Creating a Learning-Focused Interactive PDF via Adobe InDesign Creating a Learning-Focused Interactive PDF via Adobe InDesign
Creating a Learning-Focused Interactive PDF via Adobe InDesign Shalin Hai-Jew
 
Introduction to iPads in Middle School
Introduction to iPads in Middle SchoolIntroduction to iPads in Middle School
Introduction to iPads in Middle SchoolGary Toews
 
2022 COMP4010 Lecture5: AR Prototyping
2022 COMP4010 Lecture5: AR Prototyping2022 COMP4010 Lecture5: AR Prototyping
2022 COMP4010 Lecture5: AR PrototypingMark Billinghurst
 
Augmented Reality, Artificial Intelligence, and Business Intelligence
Augmented Reality, Artificial Intelligence, and Business IntelligenceAugmented Reality, Artificial Intelligence, and Business Intelligence
Augmented Reality, Artificial Intelligence, and Business IntelligencePatrick
 
Building a semantic enterprise content management system v2
Building a semantic enterprise content management system v2Building a semantic enterprise content management system v2
Building a semantic enterprise content management system v2Ron Michael Zettlemoyer
 
Getting Real About Enterprise 2.0
Getting Real About Enterprise 2.0Getting Real About Enterprise 2.0
Getting Real About Enterprise 2.0Acando Consulting
 

Similar to iPad Interface Design (20)

A research on i pad device & experience design
A research on i pad   device & experience designA research on i pad   device & experience design
A research on i pad device & experience design
 
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
 
Responsive Design is Dead
Responsive Design is DeadResponsive Design is Dead
Responsive Design is Dead
 
Digital Collaboration SGI 27_09_09
Digital Collaboration SGI 27_09_09Digital Collaboration SGI 27_09_09
Digital Collaboration SGI 27_09_09
 
User Experience Workshop
User Experience WorkshopUser Experience Workshop
User Experience Workshop
 
e-schools conference presentation
e-schools conference presentatione-schools conference presentation
e-schools conference presentation
 
Designing for the iPad
Designing for the iPadDesigning for the iPad
Designing for the iPad
 
iPhone/iPad Human Interface Design
iPhone/iPad Human Interface DesigniPhone/iPad Human Interface Design
iPhone/iPad Human Interface Design
 
Georgetown_student ipad considerations_11-15-2011
Georgetown_student ipad considerations_11-15-2011Georgetown_student ipad considerations_11-15-2011
Georgetown_student ipad considerations_11-15-2011
 
Pass the i pad please - 5 Lessons for Creating Great Tablet Experiences
Pass the i pad please - 5 Lessons for Creating Great Tablet ExperiencesPass the i pad please - 5 Lessons for Creating Great Tablet Experiences
Pass the i pad please - 5 Lessons for Creating Great Tablet Experiences
 
Augmented Reality for Collaborative Experience
Augmented Reality for Collaborative ExperienceAugmented Reality for Collaborative Experience
Augmented Reality for Collaborative Experience
 
iPads in Education: From Pilot to Performance
iPads in Education: From Pilot to PerformanceiPads in Education: From Pilot to Performance
iPads in Education: From Pilot to Performance
 
Njasa i pad
Njasa i padNjasa i pad
Njasa i pad
 
Creating a Learning-Focused Interactive PDF via Adobe InDesign
Creating a Learning-Focused Interactive PDF via Adobe InDesign Creating a Learning-Focused Interactive PDF via Adobe InDesign
Creating a Learning-Focused Interactive PDF via Adobe InDesign
 
Thai IT Delegation to Japan 2012
Thai IT Delegation to Japan 2012Thai IT Delegation to Japan 2012
Thai IT Delegation to Japan 2012
 
Introduction to iPads in Middle School
Introduction to iPads in Middle SchoolIntroduction to iPads in Middle School
Introduction to iPads in Middle School
 
2022 COMP4010 Lecture5: AR Prototyping
2022 COMP4010 Lecture5: AR Prototyping2022 COMP4010 Lecture5: AR Prototyping
2022 COMP4010 Lecture5: AR Prototyping
 
Augmented Reality, Artificial Intelligence, and Business Intelligence
Augmented Reality, Artificial Intelligence, and Business IntelligenceAugmented Reality, Artificial Intelligence, and Business Intelligence
Augmented Reality, Artificial Intelligence, and Business Intelligence
 
Building a semantic enterprise content management system v2
Building a semantic enterprise content management system v2Building a semantic enterprise content management system v2
Building a semantic enterprise content management system v2
 
Getting Real About Enterprise 2.0
Getting Real About Enterprise 2.0Getting Real About Enterprise 2.0
Getting Real About Enterprise 2.0
 

Recently uploaded

#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 

Recently uploaded (20)

#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 

iPad Interface Design

  • 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
  • 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
  • 19. 19
  • 20. 20
  • 21. 21
  • 22. 22
  • 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