SlideShare a Scribd company logo
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
 
Njasa i pad
Njasa i padNjasa i pad
Njasa i pad
 
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
 
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

In-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT ProfessionalsIn-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT ProfessionalsExpeed Software
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoTAnalytics
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...Product School
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxDavid Michel
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1DianaGray10
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Product School
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaRTTS
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...Elena Simperl
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
 
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀DianaGray10
 
Quantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIsQuantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIsVlad Stirbu
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesThousandEyes
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...Product School
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...Product School
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Product School
 

Recently uploaded (20)

In-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT ProfessionalsIn-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT Professionals
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
 
Quantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIsQuantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIs
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
 

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