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

SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 

Recently uploaded (20)

SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck 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