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

Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsRoshan Dwivedi
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
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
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
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
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
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
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
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
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 

Recently uploaded (20)

Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
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
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
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
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
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
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 

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