SlideShare a Scribd company logo
1 of 55
Download to read offline
iPad Design Headaches
TAKE TWO TABLETS &
CALL ME IN THE MORNING

@globalmoxie
www.globalmoxie.com
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
Photo: Aldo Cavini Benedetti http://www.flickr.com/photos/aldoaldoz/2332755401/
IPAD DESIGN MALADIES
• Greedy pixel syndrome
•Media hypertrophy
•The frankeninterface
•Popover pox
•iPad elbow
•Content stutter
IPAD HEALTH CHECK
Low resting heart rate
BUILD FOR LEISURE, BUT...
Optimize for quick sprints
IPAD DESIGN MALADY
Greedy pixel syndrome
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
THE PRESCRIPTION
• Big chunky elements
• Generous space
• Clarity trumps density
• Tap quality trumps tap quantity
IPAD DESIGN MALADY
Media hypertrophy
IPAD DESIGN MALADY
(Media overkill)
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
A word about page flips
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
NOT BEING DIRTY… HONEST
Familiarity & intimacy
invite touch
THE PRESCRIPTION
• Feature content, not interface
•Honor overall brand identity
•Old and tested ≠ old fashioned
•Ask: Is different actually better?
IPAD DESIGN MALADY
The frankeninterface
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
THE PRESCRIPTION
• Avoid mixed metaphors
• Love the one you’re with
• Provide touch cues and hints
•Don’t abandon digital advantages
IPAD DESIGN MALADY
Popover Pox
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
THE PRESCRIPTION
• Use popovers to act on content
• Use popovers for quick peeks
• Avoid popovers for exploration
 and navigation
IPAD DESIGN MALADY
iPad Elbow
I hate the iPad’s back
button with the heat of
     a million suns.
Buttons are a hack
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
THE PRESCRIPTION
• Seek alternatives to buttons
• Controls at top and at left
• Avoid popovers for exploration
 and navigation
A PLEA
Explore multitouch gestures
Two hands
Uzu
iPad Design Headaches: Take Two Tablets and Call Me in the Morning
THE PRESCRIPTION
• Gestures = keyboard shortcuts
• Embrace multitouch for modes
• Play
• Experiment, talk, share
IPAD DESIGN MALADY
Content stutter
Exciting!
Thanks!
  @globalmoxie
www.globalmoxie.com

More Related Content

Viewers also liked

Going Native: The Anthropology of Mobile Apps
Going Native: The Anthropology of Mobile AppsGoing Native: The Anthropology of Mobile Apps
Going Native: The Anthropology of Mobile AppsJosh Clark
 
Up with Complexity!
Up with Complexity!Up with Complexity!
Up with Complexity!Josh Clark
 
Mind the Gap: Designing the Space Between Devices
Mind the Gap: Designing the Space Between DevicesMind the Gap: Designing the Space Between Devices
Mind the Gap: Designing the Space Between DevicesJosh Clark
 
Significant Glances: Meaningful Interaction on the Wrist
Significant Glances: Meaningful Interaction on the WristSignificant Glances: Meaningful Interaction on the Wrist
Significant Glances: Meaningful Interaction on the WristJosh Clark
 
Cl cup technical 2017_учебник 1 тура_v6
Cl  cup technical 2017_учебник 1 тура_v6Cl  cup technical 2017_учебник 1 тура_v6
Cl cup technical 2017_учебник 1 тура_v6Danil Petrushin
 
Multidevice Mambo
Multidevice MamboMultidevice Mambo
Multidevice MamboJosh Clark
 

Viewers also liked (7)

Going Native: The Anthropology of Mobile Apps
Going Native: The Anthropology of Mobile AppsGoing Native: The Anthropology of Mobile Apps
Going Native: The Anthropology of Mobile Apps
 
Up with Complexity!
Up with Complexity!Up with Complexity!
Up with Complexity!
 
Mind the Gap: Designing the Space Between Devices
Mind the Gap: Designing the Space Between DevicesMind the Gap: Designing the Space Between Devices
Mind the Gap: Designing the Space Between Devices
 
Significant Glances: Meaningful Interaction on the Wrist
Significant Glances: Meaningful Interaction on the WristSignificant Glances: Meaningful Interaction on the Wrist
Significant Glances: Meaningful Interaction on the Wrist
 
Cl cup technical 2017_учебник 1 тура_v6
Cl  cup technical 2017_учебник 1 тура_v6Cl  cup technical 2017_учебник 1 тура_v6
Cl cup technical 2017_учебник 1 тура_v6
 
Multidevice Mambo
Multidevice MamboMultidevice Mambo
Multidevice Mambo
 
State of Tech in Texas
State of Tech in TexasState of Tech in Texas
State of Tech in Texas
 

Similar to iPad Design Headaches: Take Two Tablets and Call Me in the Morning

Fred Spencer: Designing a Great UI
Fred Spencer: Designing a Great UIFred Spencer: Designing a Great UI
Fred Spencer: Designing a Great UIAxway Appcelerator
 
Designing a Great UI
Designing a Great UIDesigning a Great UI
Designing a Great UIFred Spencer
 
iPads in special education
iPads in special educationiPads in special education
iPads in special educationSpectronics
 
iPads in the Common Core Classroom
iPads in the Common Core ClassroomiPads in the Common Core Classroom
iPads in the Common Core ClassroomKdeethomas1
 
Sage show 2013 making the most of mobile
Sage show 2013 making the most of mobileSage show 2013 making the most of mobile
Sage show 2013 making the most of mobileDale Denham
 
She says problemsolvingtoolkit
She says problemsolvingtoolkitShe says problemsolvingtoolkit
She says problemsolvingtoolkitSheSays Toronto
 
Ot pt apps 2012 updated
Ot pt apps 2012 updatedOt pt apps 2012 updated
Ot pt apps 2012 updatedEllen Deutsch
 
Marketing mix of Apple iPad
Marketing mix of Apple iPadMarketing mix of Apple iPad
Marketing mix of Apple iPadRenzil D'cruz
 
ASMP SB3 Workshop "What makes a great portfolio?"
ASMP SB3 Workshop "What makes a great portfolio?"ASMP SB3 Workshop "What makes a great portfolio?"
ASMP SB3 Workshop "What makes a great portfolio?"Ellen Boughn
 
iPads, Androids and Kindles, Oh My!
iPads, Androids and Kindles, Oh My!iPads, Androids and Kindles, Oh My!
iPads, Androids and Kindles, Oh My!mputerba
 
Facebook v LinkedIn Showdown or No-show
Facebook v LinkedIn   Showdown or No-showFacebook v LinkedIn   Showdown or No-show
Facebook v LinkedIn Showdown or No-showPolka Dot Impressions
 
Caamp making the most of mobile
Caamp making the most of mobileCaamp making the most of mobile
Caamp making the most of mobileDale Denham
 
From AdLand with Love: A Motivational Tale
From AdLand with Love: A Motivational TaleFrom AdLand with Love: A Motivational Tale
From AdLand with Love: A Motivational TaleDiana Caplinska
 
Exploring i pad technology
Exploring i pad technologyExploring i pad technology
Exploring i pad technologyDesiree Caskey
 
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
 
Entrepreneurial Science w GSLI
Entrepreneurial Science w GSLIEntrepreneurial Science w GSLI
Entrepreneurial Science w GSLIAdam Berk
 

Similar to iPad Design Headaches: Take Two Tablets and Call Me in the Morning (18)

Fred Spencer: Designing a Great UI
Fred Spencer: Designing a Great UIFred Spencer: Designing a Great UI
Fred Spencer: Designing a Great UI
 
Designing a Great UI
Designing a Great UIDesigning a Great UI
Designing a Great UI
 
Advanced titanium for i os
Advanced titanium for i osAdvanced titanium for i os
Advanced titanium for i os
 
iPads in special education
iPads in special educationiPads in special education
iPads in special education
 
iPads in the Common Core Classroom
iPads in the Common Core ClassroomiPads in the Common Core Classroom
iPads in the Common Core Classroom
 
Sage show 2013 making the most of mobile
Sage show 2013 making the most of mobileSage show 2013 making the most of mobile
Sage show 2013 making the most of mobile
 
She says problemsolvingtoolkit
She says problemsolvingtoolkitShe says problemsolvingtoolkit
She says problemsolvingtoolkit
 
Ot pt apps 2012 updated
Ot pt apps 2012 updatedOt pt apps 2012 updated
Ot pt apps 2012 updated
 
Marketing mix of Apple iPad
Marketing mix of Apple iPadMarketing mix of Apple iPad
Marketing mix of Apple iPad
 
ASMP SB3 Workshop "What makes a great portfolio?"
ASMP SB3 Workshop "What makes a great portfolio?"ASMP SB3 Workshop "What makes a great portfolio?"
ASMP SB3 Workshop "What makes a great portfolio?"
 
iPads, Androids and Kindles, Oh My!
iPads, Androids and Kindles, Oh My!iPads, Androids and Kindles, Oh My!
iPads, Androids and Kindles, Oh My!
 
Facebook v LinkedIn Showdown or No-show
Facebook v LinkedIn   Showdown or No-showFacebook v LinkedIn   Showdown or No-show
Facebook v LinkedIn Showdown or No-show
 
Caamp making the most of mobile
Caamp making the most of mobileCaamp making the most of mobile
Caamp making the most of mobile
 
From AdLand with Love: A Motivational Tale
From AdLand with Love: A Motivational TaleFrom AdLand with Love: A Motivational Tale
From AdLand with Love: A Motivational Tale
 
iPad App-Citement!
iPad App-Citement!iPad App-Citement!
iPad App-Citement!
 
Exploring i pad technology
Exploring i pad technologyExploring i pad technology
Exploring i pad technology
 
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
 
Entrepreneurial Science w GSLI
Entrepreneurial Science w GSLIEntrepreneurial Science w GSLI
Entrepreneurial Science w GSLI
 

More from Josh Clark

The Physical Interface
The Physical InterfaceThe Physical Interface
The Physical InterfaceJosh Clark
 
Magical UX and the Internet of Things
Magical UX and the Internet of ThingsMagical UX and the Internet of Things
Magical UX and the Internet of ThingsJosh Clark
 
Designing for Touch: Mobile Design is Industrial Design
Designing for Touch: Mobile Design is Industrial DesignDesigning for Touch: Mobile Design is Industrial Design
Designing for Touch: Mobile Design is Industrial DesignJosh Clark
 
Going Native: The Anthropology of Mobile Apps
Going Native: The Anthropology of Mobile AppsGoing Native: The Anthropology of Mobile Apps
Going Native: The Anthropology of Mobile AppsJosh Clark
 
O'Reilly Webcast: Tapworthy iPhone App Design
O'Reilly Webcast: Tapworthy iPhone App DesignO'Reilly Webcast: Tapworthy iPhone App Design
O'Reilly Webcast: Tapworthy iPhone App DesignJosh Clark
 
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and UsabilityTapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and UsabilityJosh Clark
 

More from Josh Clark (6)

The Physical Interface
The Physical InterfaceThe Physical Interface
The Physical Interface
 
Magical UX and the Internet of Things
Magical UX and the Internet of ThingsMagical UX and the Internet of Things
Magical UX and the Internet of Things
 
Designing for Touch: Mobile Design is Industrial Design
Designing for Touch: Mobile Design is Industrial DesignDesigning for Touch: Mobile Design is Industrial Design
Designing for Touch: Mobile Design is Industrial Design
 
Going Native: The Anthropology of Mobile Apps
Going Native: The Anthropology of Mobile AppsGoing Native: The Anthropology of Mobile Apps
Going Native: The Anthropology of Mobile Apps
 
O'Reilly Webcast: Tapworthy iPhone App Design
O'Reilly Webcast: Tapworthy iPhone App DesignO'Reilly Webcast: Tapworthy iPhone App Design
O'Reilly Webcast: Tapworthy iPhone App Design
 
Tapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and UsabilityTapworthy: Designing iPhone Interfaces for Delight and Usability
Tapworthy: Designing iPhone Interfaces for Delight and Usability
 

Recently uploaded

VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 

Recently uploaded (20)

VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 

iPad Design Headaches: Take Two Tablets and Call Me in the Morning

Editor's Notes

  1. Talk focuses on iPad. As with iPhone 3yrs ago, Apple has set benchmark for new tablet market. About to see an avalanche of new tablets, most of them Android. Microsoft working on something too, and BlackBerry. But I’m not optimistic about the first generation of iPad competitors. From Microsoft, not yet clear what OS it will run, jockeying within the company. I gather Windows 7 currently has the edge over Windows Phone 7. Android tablets based on an OS not yet designed for tablet. For the moment, Apple defines the tablet market—and for better or worse, it’s emerging interface conventions, too. So, this talk focuses on iPad interface, but I expect that much of this will apply to new wave of tablets, too.
  2. Looking at interface maladies I’ve seen in first generation of iPad apps. We are in REALLY early days. Bonafide new platform introducing a new style of computing, with new context, mindset, and ergonomics. First truly multitouch mass consumer device: new gesture vocabulary required. Still in midst of lots of hype Still not in hands of people who actually use it. Still figuring out exactly what we’re doing. Going to call out some common problems, but I admire every app that I mention here. It’s hard to do this stuff, and anyone who gets it even partly right has my respect. So important to experiment right now, to take risks, and it’s important for all of us to learn from each other’s mistakes as well as our successes.
  3. iPad is a device of leisure… contemplation. User interviews: People get up and move to diff physical space Reflects a different state of mind. Division between work and leisure; computer for work, tablet for leisure computer for doing, tablet for thinking computer for tasking, tablet for relaxing (Doesn’t mean people don’t do work with iPad, but its form encourages broader, often more creative and expansive mindset)
  4. Just because people are in leisure mode doesn’t mean you can waste their time. As mobile designers, we know focus and efficiency are important on phones. You might think you have more leeway on tablets, but you don’t. In handhelds, it’s because people on go, chaotic situations, hurry. iPad, more leisurely, more stable, and you’re more likely to have their attention. But app switching. Moving among apps. Reading a book, switch to safari. Reading Twitter, switch to to-do list. Still have to optimize for primary tasks. Big screen, more time... doesn’t mean you can get lazy. Winnow features, winnow chrome, focus.
  5. Tempting to gobble up all the available pixels. Let’s use up that expansive screen. See it coming from two directions. iPhone designers: woohoo we’ve got more space, blow it up. Desktop designers who say, close enough, let’s cram what we’ve got in there. As graphic designers, we know the value of white space and calm. As mobile designers we know: clarity always trumps density. Strive for thoughtfulness and art in software, rather than a pile of features or dense information displays. Rule doesn’t change just because we have a larger screen, and in fact it’s just as important. Again: iPad mindset is one of leisure and contemplation
  6. Design should complement that mindset. If user has low resting heart rate, so should app (exception of games, more adrenaline the better) Weather Station Pro. Casual, contemplative. Cute, even warm. Clean, simple, uncluttered. That extra screen space doesn’t have to be jammed.
  7. Accuweather.com Crowded, dense, scary graphics. No need to put ALL that content on a single screen, difficult to scan and parse. Should use popovers. Tap to see more. Tap quantity isn't nearly as important as tap quality. Don't fret about putting some features another tap away. Clarity trumps density. This is not about dumbing down your app. You don’t have to remove features and info from your app, but push them into other views. Complexity is okay. Complexity is good, it’s what gives our lives and our designs substance. It just shouldn’t be complicated. Complexity and complication are not the same thing.
  8. Condition marked by overdeveloped media, and/or chronically underdeveloped content.
  9. Fancy, sizzlin’ interfaces awe-inspiring on first view but tire in everyday use. Ill served by early emphasis on media. Our expectations were set that this would totally reinvent traditional media. Many took that expectation to heart.
  10. ABC News app pastes latest videos onto a globe Spin to browse, click to watch. Nifty graphics trick, but the interface doesn’t inform or enlighten. It does not organize the clips in any meaningful way. It actually keeps you from the content, hiding and distorting it. Feel this with other media apps, too. Popular Science. Yahoo Entertainment.
  11. Planet of news isn’t the first planetary interface gimmick to fall short. Model of the solar system from around 1800. Elaborate gears to show you the mechanism. Edward Tufte used this in “Envisioning Information” to illustrate “the sin of pridefully obvious presentation”: more attention to contraption than to content it aims to present. *Content* should define app, not its machinery, not its technology. That doesn’t mean that we can’t deploy awesome graphics and media.
  12. Solar Walk a more successful version of the solar system model. You’re just exploring content, zooming through the solar system. Like the ABC news globe, it’s a spiffy 3d experience. But the animation serves a purpose, directly tied to the content, underscoring time, distance, space. The app is all content, very little artifice or interface.
  13. Solar Walk a more successful version of the solar system model. You’re just exploring content, zooming through the solar system. Like the ABC news globe, it’s a spiffy 3d experience. But the animation serves a purpose, directly tied to the content, underscoring time, distance, space. The app is all content, very little artifice or interface.
  14. This caution against media overkill doesn’t mean more traditional media can’t find new ways to display content. Comixology is the company behind apps for Marvel Comics, DC and others. It zooms and pans around comic book frames in a way that’s all about the artwork but emphasizes its cinematic appeal and storytelling. This is reinvention by focusing on the content. but with new, immersive experience. Still worth saying, this is repurposing. This is print media with a print metaphor. A lot of pressure on media companies to change that, to reinvent their form, but I’m not sure that the problem is necessarily one of form. And I’m not sure that they’re wrong for staying close to their traditional print look even in this new medium. Making something new is good, it’s awesome, it’s fun. I love the new. We’re all in this business because we’re fascinated with the new. But new and change isn’t good in itself. Don’t be different to be different. Be different if you can be BETTER.
  15. This caution against media overkill doesn’t mean more traditional media can’t find new ways to display content. Comixology is the company behind apps for Marvel Comics, DC and others. It zooms and pans around comic book frames in a way that’s all about the artwork but emphasizes its cinematic appeal and storytelling. This is reinvention by focusing on the content. but with new, immersive experience. Still worth saying, this is repurposing. This is print media with a print metaphor. A lot of pressure on media companies to change that, to reinvent their form, but I’m not sure that the problem is necessarily one of form. And I’m not sure that they’re wrong for staying close to their traditional print look even in this new medium. Making something new is good, it’s awesome, it’s fun. I love the new. We’re all in this business because we’re fascinated with the new. But new and change isn’t good in itself. Don’t be different to be different. Be different if you can be BETTER.
  16. This caution against media overkill doesn’t mean more traditional media can’t find new ways to display content. Comixology is the company behind apps for Marvel Comics, DC and others. It zooms and pans around comic book frames in a way that’s all about the artwork but emphasizes its cinematic appeal and storytelling. This is reinvention by focusing on the content. but with new, immersive experience. Still worth saying, this is repurposing. This is print media with a print metaphor. A lot of pressure on media companies to change that, to reinvent their form, but I’m not sure that the problem is necessarily one of form. And I’m not sure that they’re wrong for staying close to their traditional print look even in this new medium. Making something new is good, it’s awesome, it’s fun. I love the new. We’re all in this business because we’re fascinated with the new. But new and change isn’t good in itself. Don’t be different to be different. Be different if you can be BETTER.
  17. NY Times doesn’t look new at all. Looks like NY Times. Simple paging swipe left or right to flip pages. Tap to view. The columns feel like a newspaper, it has an oddly familiar feeling. Not exactly nostalgic but certainly sentimental and not in a bad way. Some have criticized news media for being too safe. It’s not for lack of imagination. This wasn’t the team’s original vision.
  18. Andre Behrens, Jennifer Brook, Adam Kaplan Invited to Cupertino two weeks before the iPad announcement. Spent those 2 weeks in a server closet to hustle together a demo. This was their first mockup of NY Times iPad app. Based on Article Skimmer, which Andre created for nytimes.com. Called concept The Deck, developed in the fall in anticipation of iPad. This was the first thing they got up and running on an iPad. (Interesting: NPR News, Pulse and others, both would later embrace similar concepts) Realized it wouldn’t work, didn’t feel like the Times (neither the paper nor the website) and felt it wouldn’t meet readers’ expectations of the visual brand.
  19. So, the day after finishing that initial prototype, back to the drawing board. Jennifer Brooks’ sketches of what would become the iPad app.
  20. Very strong print metaphor. Feels good, familiar to read newspaper that looks like newspaper. Couple of quibbles: column design narrow Not enough content with this very small selection. Both issues will be addressed in a new version next month. Also: shouldn’t put key controls on bottom of screen for reasons I’ll explore later. The point: Sometimes you can impress most by doing it quietly.
  21. Flipboard actually looks a helluva lot like NY Times Some called NY Times called nice but predictable, yet pretty much everyone was bowled over by Flipboard. Because: for Twitter, Facebook, and RSS feeds, this presentation was new. They somehow made your dizzy array of digital feeds look like a calm, staid newspaper. Enormously successful. Again: it’s a platform that encourages leisure and contemplation. Flipboard turns a buzzing information storm into an easy-on-the-eyes custom magazine. Flipboard creates an entirely new interface by going to time-tested graphic design treatments. Don’t underestimate power of humdrum, of the familiar. Old interface conventions not necessarily old-fashioned. If there’s one thing printing daily has taught publishers: People desire routinely great, simple, straightforward daily news experience. No spinning globes required. Doesn’t mean media and animation can’t play a role. Animation can have an important and useful cognitive impact.
  22. For at least 2 decades, people have trotted out desktop apps. As if that’s what we were all waiting for. Oh, THAT’s why I don’t read Cat Fancy on my computer.
  23. Many have commented that page flip has been abused, or overly kitsch. These kinds of animations CAN be kitsch, have to be careful. If animations take too long or get in the way or, they distract from content. But nods to the past are okay. There’s charm to a page flip, unlike horse shit in your car. If make it quick, it adds to the experience. Reinforces the physical touch metaphor. The gesture of the page turn is natural, easy, familiar. Not like the sad desktop gimmicks of yesteryear, here the experience and mechanical gesture really does feel like turning the page of a book. Familiar is good.
  24. Emotional attachment to software. This is new: affection for mobile software. It’s a feeling that’s more familiar to physical objects that we have. It’s not just our mobile devices that are accessories, but their apps too. Many iPhone/iPad users would tell you that the apps on phone say as much about them as the items in their bag or the pictures on their wall. Emotional satisfaction is a big part of a great user experience. The connection of touch is one of the most intimate experiences. Realistic interfaces that invite touch encourage emotional attachment. The texture and look of a well loved leather journal. If looks/behaves like treasured personal totem, app itself benefits from same emotional connotation. Physicality invites touch, too. Not just in a “ooh, I want to touch that” way, but in terms of affordances. Texture and physicality gives clues about how the app works, where you should touch. Apple really emphasizes in its interface guidelines. Make it realistic. But you have to do more than throw some photoshop textures at it. Apple’s own apps show the hazards, as we’ll see in a moment.
  25. These are really back to basics, common-sense rules of good design, but we can sometimes forget ourselves in our enthusiasm for the new
  26. I also call this the “I can’t believe it’s not butter” bait and switch It’s an app whose visual design uses one interface metaphor, but its interaction actually uses another.
  27. Calendar: ooh, a lovely desk calendar. Very pretty, and of course you naturally know how to use it. Just swipe to turn the page, right? Um, no. Have to use the buttons at bottom. You have to embrace your interface metaphor. If you’re going to make it look like a book, make it act like one, too.
  28. Contacts: Tapping doesn’t turn page here, either. Actually brings up the delete button. Point: Your interface metaphor should suggest how to use the app. Affordances (interface hints) that tell you where and how to use them. Here, the book metaphor is a confusing misdirection. Creates expectation that works like a book, but really through desktop-style buttons.
  29. To-do list app called Manage. Very pretty. But you can’t actually act on these elements in the physical sense they suggest. Too many metaphors in one place. Choose one, make it feel natural. If you go this route of aping a physical object: EMBRACE THE METAPHOR think hard about new interaction opportunities it proposes. In user testing I see this all the time: If it looks like a physical object, people will try to interact with it like one. What does your interface suggest that they do with the content itself? Don’t make people tap buttons, let them interact directly with the content. Meanwhile, you have many magazine apps that are TOO literal with metaphor. Very true to original print artifact. Little more than PDFs. Clear exactly how to use But difficult to find table of contents: no random access Calendar and contacts: designers following their metaphor half-heartedly in interaction Mags: too literally and they miss interaction opportunities This is understandable: Weird hybrid. Not web, phone, desktop, nor a paper/physical interface. Yet it suggests elements of all four. The tablet is the awesome bastard child of many parents. Great opportunities, lots of tradition to draw from. But have to be careful about mixed metaphors.
  30. USA Today: good job managing metaphor, reducing interface clutter. Looks like the newspaper. More than paper. Enable more than flipping thru pages. Not about heavy-handed media, about thoughtful presentation. USA Today: Traditional + digital advantages Subtle hints of newspaper, doesn’t overdo it. Familiar but not cloying. Gestures to move quickly through. But not enough controls! Gestures will develop. Standards will emerge. Ran out of time to indicate the section navigation.
  31. Marked by popovers gradually spreading over the skin of your entire interface.
  32. I love Twitterrific. Simple, airy, straightforward way to read Twitter. They do a ton of things right, but the app is susceptible to popover pox. On iPhone, you move through views by changing the whole screen. That would be disorienting on a screen this size. Vertigo. So Apple created the popover, kind of the right-click of the iPad. Tap and hold a tweet, I can see actions.
  33. Tap avatar to peek into profile. Great way to peek into info for a quick view. And for iPhone devs, wow, you can actually reuse your iphone views. Handy! Trouble is when you want to explore to navigate info. Great thing about Twitter is that a brief piece of info can send you on this path of discovery about people, topics, conversations. Twitterrific (and it’s hardly the only one) lets you do this but corrals you into popovers. Awesome that it makes it so easy to explore tweets, but misses the opportunity for that big airy view that tablets afford. So use popovers, definitely, but view it as a warning sign if you find yourself spending too much time inside them.
  34. Pain caused by repeatedly dragging your arm across the screen, especially to that tiny button in top corner.
  35. Fitts’ Law: The smaller the target, and the farther away it is, the harder it is to hit. Studies have shown that Fitts law applies to touchscreens, too, with the model fitting better with a bigger touchscreen. On phones, problem not as pronounced. Can hit the entire screen with your thumb. On iPad, you’re moving your whole arm, and those buttons, even though they’re the same size on the iPhone, suddenly much harder to use ergonomically.
  36. Touchscreen lets us tickle the brain in new ways because it’s more intimate to touch the thing you’re interacting with. But touching a button is not really direct interaction. Even in real world, they work at a distance. Just because you’re touching *something* doesn’t mean you’re interacting directly with the primary object. Buttons don’t create the intimacy we’re talking about. Direct interaction does, content as control. Our brains evolved to navigate physical space, to work directly with objects. Don't get trapped in the metaphors and hacks of this temporary alternate universe of computer interface. Design for humans. Design for direct interaction.
  37. Pinball HD. The entire screen is a button. Tap anywhere to get flippers to go. Think: Where are opportunities to eliminate buttons? I’ll follow that thought in a moment. First: I don’t mean to say you should never use buttons. Particularly as we continue to develop gesture vocabulary -- the invisible controls that we use to swipe through touchscreen interfaces -- we need visible controls to help people. But when add controls, at least make them comfortable to hit.
  38. So where do you put controls for comfort on the iPad? On phones, put primary controls in thumb’s hot zone. Hot zone for right-handed user. Where the thumb most naturally comes to rest.
  39. iPad doesn’t have a conventional grip. Hold it in all different ways. Couch, bed, desk, standing. Two handed, side, top grip. Any part of screen is a likely tap target. But bottom is bad for controls. Thumb zone doesn’t apply here.
  40. Opposite of iPhone, back to web/desktop standards. Visually/ergonomically, better at top. Instapaper. Put controls at the bottom, they run into your belly when you’re on the couch, resting it on your stomach.
  41. Howcast. Content optimized for landscape viewing. For landscape, consider controls at side, where you’ll be holding it, and you have plenty of room. Apple’s split view locks this in, fixing controls at left in landscape. Left optimizes for right-handed users, 85-90% of users. Familiar desktop conventions here, and it works. Controls on top or at left.
  42. Vast unexplored territory that we as a community need to explore and experiment, along with our users. Buttons are a hack, though effective. Better to have interface metaphors that let you work directly on content. Multitouch gestures are a bit of a hybrid: Gestures are the keyboard shortcuts of the touchscreen. Should rarely be the only way to do something, but provide smart shortcuts, more fluid use of the app. Instead of hitting that tiny button to trigger the popover, give me a five finger touch. Let me do a three-finger swipe to leap back out to the top of the Mail app. These conventions don’t exist yet. Apple hasn’t provided them, but they’re badly needed. So we need to explore this as a community.
  43. Multitouch = using more than one touch, more than one finger at once. On phones, this is frankly impractical. If hold it with one hand, you’re limited to thumb tapping. People avoid multitouch on handheld. Awkward. Since phones are the only mainstream touchscreen device, means we have no culture of multitouch yet. The iPad has the opporunity to change that. Unlike phone, you pretty much have to use it with two hands. So always have a full hand to use for gestures, multi-finger touch always possible. Big screen invites big gestures.
  44. Kinetic multitouch particle visualizer. In a word, it’s a lava lamp, a toy to hypnotize stoners. But it uses fingers to trigger different modes. Ten modes, one for each finger. A ten finger press essentially triggers a controls mode, letting you slide your hand instead of working artificial controls like sliders. Uzu is a toy. Or more like a musical instrument. It feels more like you’re playing it rather than *using* it. When any of us master a device or an app or an instrument, that’s how it feels. Intent fluidly transferred to action. Gestures give us opp to make apps that are like instruments. Play more than just use. Toys are useful. Toys teach children how to interact with the world, teach cause and effect. Toys like uzu can teach us to use these devices and gestures.
  45. We should play as developers. Twitter recently released its official iPad app. Loren: “I would definitely call this an experiment.” Playful gestures. More important, Twitter demonstrates a way to eliminate the back button, work directly with content, by exploring the content itself, sliding around the content in a visual history of your exploration.
  46. Don’t go it alone. We have to talk about this stuff. Gestures are invisible and have to be learned. But our culture is full of examples of that, customs that are unlabeled with no explanation. Travel abroad for a while to see how disorienting that can be. Customs that are effortless for natives disorienting for us. The creative process isn't just perfect "Eureka!" moments, it's a lot of "oh shit!" and "it’s 2am and I have to do SOMETHING" moments. But as we explore possibilities of gestures... 'we copied this because well known company X did it, and we assumed they tested it', and you get a cascade of conventions that arose from somebody’s rushed deadline work. So understand that everything you see right now is an experiment. Question it, test it, discuss it. Important to work together on this.
  47. At least for the moment, iPad is almost certainly AT LEAST the fourth media device for the person using it. TV, Computer, Phone. As we switch among media for these things, we need to get better at helping that transition become seamless. Instapaper, Netflix, Amazon, grocery lists Relationships between mobile products are more important than the products themselves. It is about the ecosystem iPad test participants were unanimous in saying that they're not impressed that brands have iPad apps - to them it's just mandatory. We’re all cloud developers now.
  48. New platforms don’t come along very often. Just inventing what this thing does, what iPhone does. Be expansive, let imagination roam. I’ve called out some apps for missteps, but I applaud them for venturing out. I love what all of these apps are doing. It’s important to try new things, throw everything we’ve got at the drawing board. But we also have to be aware that our enthusiasm for the new is also an achilles heel. Have to have some sober moments to ask: does this make sense? As designers we know this: insightful work is part technical know-how, but empathy, imagination, expansive world view generate breakthrus. We have the coolest job in the world. Inventing future. Go make something amazing.