SlideShare ist ein Scribd-Unternehmen logo
1 von 94
THE NUI PARADIGM SHIFT
UX PARIS | JULY 6, 2011 | SAM WOODMAN, ADOBE
1997   2000   2003   2005   2008
A BIGGER IPHONE?
I was wrong
THAT’S NOT MY ARM
20                    20                    20


         Pl ay ing games   Do ing em a il , re ading   Watch ing films




          20                          20                   20

                                                  k
L is te n ing t o m                  H ome wo r
                   us ic                                   ???
AN IPAD POWER USER
SHE’S AN ARTIST
SHE’S A CHAMPION
SHE’S A GENIUS
SHE’S A HACKER
WELL, SORT OF...
It’s not just about the technology
OK, IT WAS ME
YOU’RE JOKING, RIGHT?
20                                                                        20
                                                20
I wa n t to use t h is li k
                            ea                                             Why do es n’t th is wor k
      m ag ic wa n d !
                                                                          w he n I to uch th e sc re en?
                                                       s tor   y!
                                         Re a d me m y




                20                                                                                20
                                                     20
                                                                                                            nt t   o us e
                                                                                         An d I do n’t wa
   Th is do e sn’t wo rk , e it h
                                  er!                                                                t his!
                                        I do n’t wan t to us e th es e!
20
               20

20        20        20
     20




                         The experience divide
Start   Abstraction   Finish




                      Icons from thenounproject.com
Start   Abstraction   Finish




                      Icons from thenounproject.com
Start   Less abstraction   Finish




                           Icons from thenounproject.com
Faster
              Easier
             Delightful
             Fulfilling


Start   Better experience   Finish




                            Icons from thenounproject.com
Our Job




          Icons from thenounproject.com
OK, so what’s gonna change?
#1   everything’s going mobile
Connection Speeds



                            Cable/DSL
                            3G/4G/LTE
Connection Speed (Mbps)




                                                                  50Mb/s




                                                         12Mb/s

                                                                   3G




                          1995          2000     2005    2010              2015




                                                                                  Source: Adobe Systems, Inc.
Internet Users



                                                      We Are Here
Internet Users (MM)




                         Desktop




                             Mobile



                      2007       2008   2009   2010   2011    2012   2013   2014   2015




                                                                                          Source: Morgan Stanley
US connected devices: situational usage
#2   tablets will cannibalise other products
A quick recap



     • No instruction manual
     • Instant on
     • 10 hour battery
     • Portability
     • Less abstraction
     • Multiple uses
Reasons for using a tablet instead of a laptop or PC
        35% of tablet owners said they used their desktop less or not at all now, and 32% of laptop users said
        the same since they bought a tablet (May 2011)

             31%




                            21%




                                           15%

                                                         12%          12%       12%
                                                                                            11%
                                                                                                          10%

                                                                                                                        7%




          Easy to         Ease of       Fast start    Convenience     Size   Can use in   Fast speed   Like device   Lightweight
         carry with      interface/        up                                 multiple                   features
            you             OS                                               locations




Source: The Nielsen Company, Q1 2011 Mobile Connected Device Report
Impact on existing devices
Impact on existing devices




                             Cannibals!
#3   we’re going to have to design for
     multiple devices
Before




Desktop



          Phone
Graceful degradation
But things have changed...




                             Source: Sheryl Yulin
Now



          Mobile
          phone

Desktop            Tablet




 Game
                    TV
console


           etc.
Positive influence
fastcodesign.com
#4   design for multiple platforms
There are already a bunch of tablets




                                       Source: lesnumeriques.com
Market share 2011




 Apple     Samsung                Motorola   Blackberry      HP
 iPad 2   Galaxy Tab               Xoom       Playbook    TouchPad

  iOS                   ANDROID               QNX          WebOS

68.7%                   19.9%                3.9%          2.8%


                                                          Source: Gartner April 2011
Platform differences


            • Different OS’s
            • Different Android versions
            • Different gestures
            • Different screen sizes
            • Different resolutions
            • Different pixel densities
            • Different code for apps
3.5” diagonal screen




Same physical size, di erent pixel counts
150 x 40 pixel bu on




Desktop monitor       Galaxy Tab         Droid 2            iPhone 4
   @100 dpi            @160 dpi         @240 dpi           @320 dpi
  = 1.5” x 0.4”      = 0.9” x 0.25”   = 0.6” x 0.17”     = 0.46” x 0.13”



         Same pixel count, di erent physical sizes
             (Minimum recommended size: 0.25” x 0.25”)
320x480 @160dpi                           640x960 (at same density)                        640x960 @320dpi
                 100%                                             100%

       (Not easily. You can make              (Not easily. You can make stu ll the screen
       stu ll the screen using                using percent sizing, but your fonts and icons
       percent sizing, but your               will still be tiny. And any xed pixel sizes, e.g.
       fonts and icons will still be          in constraint-based layouts or padding values,
100%




       tiny. And any xed pixel                will be wrong.)
       sizes, e.g. in constraint-
       based layouts or padding
       values, will be wrong.)
                                       100%
#5   gestural and sensorial design
iPad sensors

• cameras
• motion sensor
• gyroscope
• ambient light sensor
• location sensor
• proximity sensor
• compass
designbynotion.com
tat.se
Slideshare / Dan Saffer
And now some practical stuff...
#1   general guidelines
curiouxblog.wordpress.com
Slideshare / Josh Clark
However, take it all with a pinch of salt...
#2   native apps or web apps?
Native app
Web app
Digital Magazine
#3   designing for gestures
http://boxesandarrows.com/view/storyboarding-ipad
#3   visual design: immersive or tacky?
informationarchitects.jp
Slideshare / Josh Clark
#4   using templates
uistencils.com
teehanlax.com
#4   prototyping
#4   inspiration
We’re living in exciting times...

Weitere ähnliche Inhalte

Ähnlich wie The NUI Paradigm Shift

Smart Pad In 10 months
Smart Pad In 10 monthsSmart Pad In 10 months
Smart Pad In 10 monthsSeungyul Kim
 
Mobile Apps - The Business & Technology
Mobile Apps - The Business & TechnologyMobile Apps - The Business & Technology
Mobile Apps - The Business & TechnologyAndri Yadi
 
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof SzafranekWhat lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof SzafranekWooga
 
Accenture Mobility MWC 2012 - Bubble over barcelona - lars kamp
Accenture Mobility MWC 2012 - Bubble over barcelona - lars kampAccenture Mobility MWC 2012 - Bubble over barcelona - lars kamp
Accenture Mobility MWC 2012 - Bubble over barcelona - lars kampLars Kamp
 
Mobile Web Vs Mobile Apps
Mobile Web Vs Mobile AppsMobile Web Vs Mobile Apps
Mobile Web Vs Mobile AppsJoe Hass
 
Mobile-first, a quick introduction
Mobile-first, a quick introductionMobile-first, a quick introduction
Mobile-first, a quick introductionJelle Desramaults
 
China's Mobile Internet Revolution... and What It Means to The Rest of The Wo...
China's Mobile Internet Revolution... and What It Means to The Rest of The Wo...China's Mobile Internet Revolution... and What It Means to The Rest of The Wo...
China's Mobile Internet Revolution... and What It Means to The Rest of The Wo...Michael Tan
 
Mobile Learning - The Future Of Workplace Learning
Mobile Learning - The Future Of Workplace LearningMobile Learning - The Future Of Workplace Learning
Mobile Learning - The Future Of Workplace LearningUpside Learning Solutions
 
Mobile, Mobile, Mobile
Mobile, Mobile, MobileMobile, Mobile, Mobile
Mobile, Mobile, MobilePaul Golding
 
"Connected home" - aplikacja dla domu i biznesu
"Connected home" - aplikacja dla domu i biznesu"Connected home" - aplikacja dla domu i biznesu
"Connected home" - aplikacja dla domu i biznesuBiznes to Rozmowy
 
Flurry Analytics - NOAH12 London
Flurry Analytics - NOAH12 LondonFlurry Analytics - NOAH12 London
Flurry Analytics - NOAH12 LondonMarco Rodzynek
 
Flurry Analytics - NOAH12 London
Flurry Analytics - NOAH12 LondonFlurry Analytics - NOAH12 London
Flurry Analytics - NOAH12 LondonNOAH Advisors
 
What’s Next in Mobility? Key Areas of Cyberinfrastructure
What’s Next in  Mobility?  Key Areas of CyberinfrastructureWhat’s Next in  Mobility?  Key Areas of Cyberinfrastructure
What’s Next in Mobility? Key Areas of CyberinfrastructureCybera Inc.
 
Android and its apps market overview
Android and its apps market overviewAndroid and its apps market overview
Android and its apps market overview01Booster
 
Html5 performance
Html5 performanceHtml5 performance
Html5 performancefanqstefan
 
Future Insight: Mobile Commerce in Japan
Future Insight: Mobile Commerce in JapanFuture Insight: Mobile Commerce in Japan
Future Insight: Mobile Commerce in JapanInfinita Inc.
 
Future Insight: Mobile Commerce in Japan
Future Insight: Mobile Commerce in JapanFuture Insight: Mobile Commerce in Japan
Future Insight: Mobile Commerce in JapanChristopher Billich
 
Trends, Challenges & Solution For Mobile App UX Design
Trends, Challenges & Solution For Mobile App UX DesignTrends, Challenges & Solution For Mobile App UX Design
Trends, Challenges & Solution For Mobile App UX DesignHu yang
 

Ähnlich wie The NUI Paradigm Shift (20)

Smart Pad In 10 months
Smart Pad In 10 monthsSmart Pad In 10 months
Smart Pad In 10 months
 
Mobile Apps - The Business & Technology
Mobile Apps - The Business & TechnologyMobile Apps - The Business & Technology
Mobile Apps - The Business & Technology
 
Blog Talk 2010 | Apps are Bad
Blog Talk  2010 | Apps are BadBlog Talk  2010 | Apps are Bad
Blog Talk 2010 | Apps are Bad
 
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof SzafranekWhat lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
 
What Lies Ahead for HTML5
What Lies Ahead for HTML5What Lies Ahead for HTML5
What Lies Ahead for HTML5
 
Accenture Mobility MWC 2012 - Bubble over barcelona - lars kamp
Accenture Mobility MWC 2012 - Bubble over barcelona - lars kampAccenture Mobility MWC 2012 - Bubble over barcelona - lars kamp
Accenture Mobility MWC 2012 - Bubble over barcelona - lars kamp
 
Mobile Web Vs Mobile Apps
Mobile Web Vs Mobile AppsMobile Web Vs Mobile Apps
Mobile Web Vs Mobile Apps
 
Mobile-first, a quick introduction
Mobile-first, a quick introductionMobile-first, a quick introduction
Mobile-first, a quick introduction
 
China's Mobile Internet Revolution... and What It Means to The Rest of The Wo...
China's Mobile Internet Revolution... and What It Means to The Rest of The Wo...China's Mobile Internet Revolution... and What It Means to The Rest of The Wo...
China's Mobile Internet Revolution... and What It Means to The Rest of The Wo...
 
Mobile Learning - The Future Of Workplace Learning
Mobile Learning - The Future Of Workplace LearningMobile Learning - The Future Of Workplace Learning
Mobile Learning - The Future Of Workplace Learning
 
Mobile, Mobile, Mobile
Mobile, Mobile, MobileMobile, Mobile, Mobile
Mobile, Mobile, Mobile
 
"Connected home" - aplikacja dla domu i biznesu
"Connected home" - aplikacja dla domu i biznesu"Connected home" - aplikacja dla domu i biznesu
"Connected home" - aplikacja dla domu i biznesu
 
Flurry Analytics - NOAH12 London
Flurry Analytics - NOAH12 LondonFlurry Analytics - NOAH12 London
Flurry Analytics - NOAH12 London
 
Flurry Analytics - NOAH12 London
Flurry Analytics - NOAH12 LondonFlurry Analytics - NOAH12 London
Flurry Analytics - NOAH12 London
 
What’s Next in Mobility? Key Areas of Cyberinfrastructure
What’s Next in  Mobility?  Key Areas of CyberinfrastructureWhat’s Next in  Mobility?  Key Areas of Cyberinfrastructure
What’s Next in Mobility? Key Areas of Cyberinfrastructure
 
Android and its apps market overview
Android and its apps market overviewAndroid and its apps market overview
Android and its apps market overview
 
Html5 performance
Html5 performanceHtml5 performance
Html5 performance
 
Future Insight: Mobile Commerce in Japan
Future Insight: Mobile Commerce in JapanFuture Insight: Mobile Commerce in Japan
Future Insight: Mobile Commerce in Japan
 
Future Insight: Mobile Commerce in Japan
Future Insight: Mobile Commerce in JapanFuture Insight: Mobile Commerce in Japan
Future Insight: Mobile Commerce in Japan
 
Trends, Challenges & Solution For Mobile App UX Design
Trends, Challenges & Solution For Mobile App UX DesignTrends, Challenges & Solution For Mobile App UX Design
Trends, Challenges & Solution For Mobile App UX Design
 

Kürzlich hochgeladen

The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 

Kürzlich hochgeladen (20)

The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 

The NUI Paradigm Shift

Hinweis der Redaktion

  1. Please see the \n
  2. The presentation I want to give you today is about Natural User Interfaces, but more specifically I’m really going to be talking about tablets. Now I’m actually using a tablet to give this presentation and I even used keynote on the tablet to build most of it.\n\nSo first of all I’m going to be talking about the revelation I had when I purchased an iPad, then I’m going talk about some the impacts tablets will have and then finally I’ve got a few tips and tricks to share with you.\n\nSo first of all a bit of context\n\nI’ve owned quite a few devices with touch screens over the years, starting with the fabulous Palm Pilot back in the late nineties. But the first device I started getting really excited about was the iPhone.\n\n\n
  3. As you all know, the iPad was launched just over a year ago\n
  4. I was so impressed with the iPhone that when the iPad was launched just over a year ago, I just naturally thought it was going to a bigger iPhone. And I was trying to work out how I was going to use one of these up against my ear.\n\nSome of you may have thought the same thing.\n
  5. But no, the iPad is completely different and for me - in my opinion - this is the start of a paradigm shift in computing.\n\n\n
  6. I finally succumbed and bought an iPad a month after the launch\nAnd I bought it as a personal device, something I could quickly consult email on.\n
  7. However, when I got it home, my family jumped on it.\nAnd it was only when I saw my family using it, that I started to understand the potential\nNot only was I using it to do email or read news, my kids were using it to play games, watch films, listen to music and even to do homework.\n
  8. But I really want to talk to you about my 4 year old daughter, Rose\n
  9. Rose loves playing with the iPad.\nShe draws on it.\n
  10. She’s great at racing games\n
  11. And she loves puzzles\n
  12. And she even does complicated things like entering passwords or changing preferences.\nAll of this without being able to read.\nI thought she was a prodigy.\n
  13. And then I realised that infact she was simply remembering patterns\n
  14. And it looks as though I’m not alone in thinking that my daughter is an iPad prodigy.\nThere are 1000’s of videos on Youtube posted by proud parents.\n
  15. And I realised that the success of the iPad wasn’t just the technology - and by technology I mean the gestural interface, the 10 hour battery, the slim form factor or the fact that you can turn it on instantly - it’s the overall experience of using the thing.\n\nThere had been tablets before, but they were all about the technology - the touch screen, the type of processor, the RAM etc. What the iPad and iPhone are all about is replacing notions of technology, that frankly nobody really cares about, by an experience - an ecosystem of films, music and apps that just work.\n\nI can tell you I’ve tested some tablets that have much better technical specifications than the iPad but they’re really clunky to use and it’s no surprise they’re not selling.\n
  16. Anyway, back to the story with Rose.\nOne day, I came back home from work to find these dirty marks all over our TV\n
  17. So I asked Rosie\n
  18. And she said that the news was really boring and she was trying to change channels on the TV\n
  19. I had to explain to Rosie how to change channels\nFirst of all, you’ve got to use the TV remote and press here, then you’ve got to use the Free remote and you can either click on the plus or minus or you can select a number, but be careful if the number has two digits because you’ve got to press the first one down for two seconds...\n
  20. And of course after her experience with the ipad she just looked at me as though I was absolutely crazy\n
  21. So we had a chat about the different things around our house and how Rose would like them to work.\nShe thought that she should be able to wave the remote around like a magic wand\nShe’d love to be able to get our hifi to read her a story\nShe thinks our telephone is broken because nothing works when she touches the screen\nSame thing with her DVD player\nAt any rate, she says that she doesn’t want to use remote controls\nAnd she certainly doesn’t want to have to learn to use a keyboard\n
  22. Then I realised that there is a huge experience divide today.\nRosie’s expectations of how things should work are already based on her experience with the iPad or on the Wii - and any lesser experience will result in frustration.\n
  23. So let’s look at this experience divide for a moment.\n\nToday, when I wanted to do something like send an email, or change TV channels, or play a video game, I have to abstract my intention into a number of keystrokes, mouse movements or button presses.\n\nThis abstraction often requires a steep learning curve. You’re required to read an instruction manual.\n\n\n\n\n
  24. And this isn’t only the input device.\n\nI’m also going to have to navigate an interface and understand it in order to complete a process.\n\nThis can often take a lot of mental work and can result in errors and frustration.\n
  25. Now what the iPad and other tablets have done, is to reduce the abstraction. Rosie has never had to read an instruction manual to use her iPad.\nAnd Natural User Interfaces are already a fantastic success. You only have to look at the success of the Wii gaming console to understand this. The Wii was launched around the same time as the Playstation 3. They were about the same price however the Playstation 3 was far more technologically advanced. But it did not have a Natural User Interface. And guess who’s the market leader today?\n
  26. And reducing the abstraction means that processes can be completed faster with fewer mistakes. But it’s not only about productivity. It’s also about emotion.\n\nRemoving the barriers between the user’s intention and their goal will create a greater sense of fulfillment. The user will achieve their goals with less effort and the time they save can be used to be more creative in order to exceed their goals. \n\nSo a better experience not only means a more productive one, but also one that is delightful and fulfilling. And making the experience delightful and fulfilling, means that users will become loyal and trusting and eventually become advocates.\n
  27. And why is this important to us as designers? Because this is our job to make it happen. It’s our job to create this experience.\n\nAnd all of sudden what we do is getting a lot of attention. Before, information architecture and visual design was an after thought and now I believe we’ve got one of the most pivotal and important roles in the project process - we define the experience.\n\nClients are realising that the great experiences we design them will win them loyal customers.\n\n\n
  28. Ok, so what’s gonna change and what impacts will be felt?\n\n\n
  29. One thing thaat I find interesting and this is critical to us as designers is that everything is going mobile.\n
  30. Now, one thing I didn’t realise was that mobile connection speeds will be soon faster than cable. This means that it will be faster to surf the internet on your mobile device than on your PC at work or home. They predict this to happen in a couple of years time.\n
  31. They’re also predicting that more users will access the internet from their mobile device than their desktop in a couple years aswell.\n\nAnd what this means for us is that the websites and applications that you’re designing today will be viewed for the most part on browsers on mobile devices.\n
  32. However there is a bit of a problem with the term “mobile device”. Recent research has shown that most tablet users are actually keeping their tablets at home or work and don’t really use them on the move.\n\nBecause a device is deemed mobile, like a phone for example, it doesn’t necessarily mean that the user is mobile.\nJust look at this graphic.\n68% of people who surf the internet on their cell phone do so whilst watching TV!\nHalf of them do so when they’re in bed!\nEven a third admit to surfing when they’re in the bathroom!!!\n
  33. The second impact is that tablets will start to cannibalize other products\n
  34. So let’s just recap some of the advantages of tablets:\nI don’t need to use an instruction manual\nWhen I turn it on, it’s on imediately\nThe battery lasts 10 hours\nIt’s got a really portable form factor\nAnd I know for certain tasks, I get them done a hell of lot faster - casual computing - not everybody is a hardcore gamer or a professional photoshop user\nAnd there are a bunch of apps - so it can be my home entertainment center, my message center, my social network center, my news center etc. etc. \n
  35. When you look at this recent report by Nielsen about people who have PCs and tablets, you start realising that people in some cases are using their tablet more.\nIn the top three, they’re saying that they’re doing this because\nIt’s easier to carry with you\nThe interface is easier\nAnd there is faster start up\n
  36. PC sales are slowing due to something called “good enough computing” which basically means that people are satisfied with the PCs they have today, they’re fast enough to do the things they require.\nNew PCs with the latest technology aren’t significant drivers of sales volume anymore.\nPC sales are also slowing due to the growth of tablets. People are realising that what they do on a PC they can also achieve using something that is simple to use and more practical.\nWhen I look at my mum who recently spent a 1000 pounds on a new computer just to consult emails and look at family photos, she could have easily done this with a tablet.\n\nApple has creating this paradigm shift and it is forcing every one of the existing players to innovate -\nComputer manufacturers such as Dell, HP, Toshiba, Acer, Sony - they’re all producing tablets now\nSoftware manufacturers such as Microsoft are having to adapt\nAnd telephone manufacturers such as Nokia and RIM are having to adapt their businesses in order to survive aswell\n\n
  37. And when I was saying that tablets are having an impact on laptop and PC usage - it’s even more than that. Tablets are having a huge impact on sales of other devices. Analysts are saying that tablets are cannibalising market share of other products.\nThis BFM report and recent Forrestor research, shows that the slow down in sales of devices like PC’s, MP3 players, Cameras, Satellite Navigation\nand even magazines and books can be attributed to tablet devices.\n
  38. And I think what’s interesting aswell is that tablets won’t just be confined to home use or what we call casual computing.\n\nTablets are also having an impact in the workplace, aswell. The iPad was iniatially designed as a consumer device, however, many employees have been bringing their personal iPads into work and demanding that their IT departments support them. They’re asking to have their email on their tablets and they’re preferring to work with more simple apps on their tablet rather than the bloatware on their PCs.\n\nAs you can see, Apple are recognising this and they now have dedicated section on their website called “a new way to work”\n\nBut it’s not just Apple, other manufacturers have been building dedicated workplace tablets, such as the Cisco Cius which will be launching shortly. Blackberry and HP are also trying to get into this market.\n
  39. Another impact, and this isn’t uniquely to do with tablets, is that fact that we’re going to have to start designing for multiple devices.\n\nWe, as users, expect to have similar experiences across all of our devices. We don’t want a good experience on the desktop and a crappy experience on the phone. Brands are beginning to understand this aswell, as bad experiences have a negative image on the brand.\n
  40. So beforehand, the desktop was the center of the universe\n
  41. And if we had to design for mobile devices this was pretty much an after-thought. We used to do something called graceful degradation. But it wasn’t very graceful. This basically meant that we took a website or an app and chopped out loads of functionality in order to shoe horn it into a mobile telephone.\n\n\n
  42. The desktop computer is no longer the centre of the universe. During a typical day, we’re increasingly using other devices to access apps and websites.\n\nAnd more and more we’re accessing the same website or app across different devices, meaning that I may start a process on one device and then finish on another.\n\nI may browse an e-commerce catalogue on one device, then make my purchase on another one, for example.\n\n
  43. Now, we’re understanding that the desktop is only a part of the story and the challenge will be to provide a seamless and consistent experience across different devices.\n\n
  44. As we try to have a much more holistic approach to designing for different devices, we’re seeing that interface design on mobile devices is having a positive influence on interface design for the desktop.\n\nWith the new medium, we’re more constrained by screen size and power, and this has had a positive effect on concentrating uniquely on essential features and avoiding the bloatware syndrome.\n\nAnd for many tasks, we’re realising that we can do these with more simple and effective interfaces\n
  45. And isn’t it interesting to see that the next version of Windows and MacOS will be heavily inspired by their respective mobile OS interfaces\n\nWith Windows 8 being influenced by Windows Phone and MacOS Lion being influenced by iOS.\n\nI think that this will go much further than just the OS and we’ll start to see some radical re-design of the software aswell - and I’m hoping that bloatware will be a thing of the past.\n\n
  46. So another impact is the fact that we’ve also got to start designing for multiple platforms as well as multiple devices.\n
  47. It’s only been just over a year since the first ipad was launched. Today, I can purchase any of these in France - and I’ve been told that we should expect another 20 on the Android platform alone in the run up to Christmas.\n\n\n
  48. However, this year there are only four major operating systems - Apple iOS, Google Android, Blackberry QNX and HP Web OS\nAnd this year, Apple has the lion’s share- it’s product, not only was it released earlier, but it is a lot more mature and stable, it costs the same or less than it’s competitors and it already has 10 000 native apps compared to only a handful for the other OS’s.\n s\nInfact, analysts are predicting that it won’t be until 2015 that Android tablets will start to dent Apple’s superiority. This will happen - as with Android phones, there will be a loads of Android tablets to choose from and they will become much cheaper. We’re seeing collaboration between Microsoft, Blackberry and Android in order to get their apps cross platform and combat Apple’s superiority with their app store.\n
  49. And what’s interesting is the iPad generates nearly 90% of all tablet traffic - and 1% of all internet traffic.\n
  50. As you can see, designing for multiple operating systems and devices can be a bit of a head-ache.\nYou’ve got different versions within operating systems\nYou’ve got different UI guidelines\nYou’ve got different screen sizes\nDifferent resolutions\nDifferent pixel densities\nand different code bases\n\n
  51. So for example, for a same screen size, there are different pixel densities\n\n
  52. And this means that things like buttons will be displayed in different sizes. A button on desktop monitor is therefore hardly touchable on an iPhone 4.\n\n
  53. Text is exactly the same. Text on a desktop monitor becomes barely readable on the iPhone 4. \nThe conclusion here is to use software that will allow you to easily and automatically scale content between devices.\n\n
  54. So on to a few thoughts about gestural and sensorial design\n
  55. We all know that tablets, like many smartphones now, does multi touch. There are guidelines about using gestures - but you know I thinks brilliant with this new medium is that we’re thinking constantly about new ways of interacting with it and challenging our perceptions about how things should work.\nThe Microsoft search engine Bing is launching a new version of their iPad app today and it includes a great bit of functionality called lasso. Instead of entering a word in the search box, you can circle around a word or words in a text and search for those.\n\n
  56. So whilst multi-touch is innovative, what’s really revolutionary, is when it’s combed with the different sensors in the device. And tablets are packed full of different sensors.\n\nSo for the iPad for example, we’ve got front and rear cameras, we’ve got an accelerometer, we’ve got a gyroscope, we’ve got an ambient light sensor, a gps system, a proximity sensor and a compass.\n\nAnd today there’s a fantastic opportunity to feedback a lot more situational and contextual information to the user. A tablet app can really start to adapt itself to the user’s situation and context.\n\nThink about this:\nDepending on what I’m doing, offer me the best way to interact with the device. Whether I’m holding my iPad like this, or like this or perhaps it’s down on my lap - offer me the most adapted interface.\n\nAnd I think we won’t just be using multitouch to interface with tablets. Proximity sensors will eventually allow us to do near surface gestures, hovering over the screen.\n\nAnd with the front and rear cameras - we can already imagine the potential with Microsoft Kinect. There are a number of projects going on at the moment on youtube showing various hacks.\n\nI think that this will radically change the way that we will use tablets and natural user interfaces, when we start to incorporate more of this sensor technology into the apps -\nBeing able to:\nKnow who I am and what my preferences are\nKnow what I’m doing\nKnow where I am\n\n\n
  57. This is an interestig example that I found recently. It’s a concept by an irish design studio called Meta Mirror and it’s all about layering information above the TV. \n
  58. Check out the swedish agency called TAT aswell - they’re doing some interesting future forecasting stuff, however I’m not too sure whether I’d really like to live in the world they’re trying to predict!\n
  59. One thing that I did want to point out though, is that there are limitations. And they are human limitations.\n\nHP, Dell, Microsoft and others have been investing heavily in touch screens for PCs but they’re not selling terribly well.\nDan Saffer thinks it’s because of something called the Gorilla Arm.\nHe says that humans are not designed to hold their arms in front of their faces, making small gestures like in minority report. This is ok for short-term use but not for long-term use. \nInteresting to see the difference of view here between HP and Apple on this. HP have launched their touchsmart computer with a vertical touch screen however Apple are refusing to integrate touch screens into their desktops and laptops and prefer to offer multitouch horizontal extensions to the screen.\n\n
  60. Let’s move on now to some stuff that I’ve found on the internet that’s been useful for me and that I think might be of interest for you\n
  61. First of all, guidelines for designing for tablet apps\n
  62. All of the Operating Systems have their own UI guidelines to try and maintain consistency accross app design\n\n\nThe limited screen estate and the limited credit on the number of physical actions needed to complete one task (don’t make me swipe and touch too often), pushes the designer to create a dead simple information architecture and an elaborate an interaction design pattern with a minimal number of actions. This goes hand in hand with the economic rule of user interaction design: Minimize input, maximize output.\nSince the smallest touch point for each operation is a circle of the size of a male index finger tip, we cannot cram thousands of features (or ads!) in the tight frame; we have to focus on the essential elements. Don’t waste screen estate and user attention on processing secondary functions.\nWe found that the iPad applications we designed, made it relatively easy to be translated back into websites. iPad could prove to be a wonderful blue print to design web sites and applications. If it works on the iPad, with a few tweaks, it will work on a laptop.\n
  63. And there are a number of people who are creating their own guidelines and critisizing the lack of consistency that exists today.\nIt’s not very surprising to see that Jakob Nielsen and Don Norman are leading the charge with a report they’ve published on iPad usability.\nThere are some interesting insights in the report.\nThings like:\nAvoid splash screens - and you’ll see a lot of these today in digital magazines\nGet swiping consistent and avoid having multiple items on the same screen that are swipable.\nAvoid touchable areas that are too small\nAnd get these touchable areas more discoverable\n\n\n\n
  64. And I’d strongly recommend a quick read of curioux blog. She’s got some really interesting things to say about her experience in designing iPad applications.\nShe includes advice such as things like:\nSupport all orientations\nFlatten information hierachy\nReduce full-screen transitions and minimize modality\nMigrate toolbar content to the top\n\n
  65. And Josh Clark has an interesting presentation on slideshare with a lot of advice.\nHe’s advocating that we should\nSeek alternatives to buttons\nEmbrace big gestures\nLet controls drift to corners\nAvoid controls at top middle\n\n
  66. However, although I’d encourage you to read all of this and to learn from other designers’ past experiences - I’d be really hesitant in following such dogmatic advice.\n\nThe medium is so young that it would such a shame to castrate it with strict UI guidelines.\n\nI always remember clients years ago quoting Jacob Neilsen saying that the links on their website had to be underlined and in blue. Look on the web today and I can’t find any underlined blue links!\n\nSo, we shouldn’t be constraining creativity and innovation. And, yes we will make usability mistakes. But let’s just assume them, change them and move on. The beauty of all of this is that modifications can be made rapidly.\n\n
  67. Today, there are different ways that you can create apps for mobile devices and each one has it’s advantages and disadvantages.\n
  68. A native app is one which is written in code that is specific to the operating system. This means that if you want your app to work on two operating systems - ie iPad and Android, you’re going to have to build and maintain two seperate applications. Native apps are great if the app is complex and immersive, and needs access to the device functionality such as the sensors I was talking about earlier, or device content such as photos.\n\nOne work around that is available is the ability to build components once and then package them into different code bases using products like Phone Gap for HTML and Adobe AIR for Flash. And yes it is possible to have Flash apps on the iPad.\nIn order to manage the different pixel densities and screen sizes, of the different devices, this can be done using JQuery in Dreamweaver or in Flashbuilder.\n
  69. A web app is basically a website that can be displayed fullscreen like an app. With HTML5, CSS3 and JQuery, simple effects, animations and transitions can be added to really make it feel like a simplified app. As it is basically just a website, modifications to the app can be made transparently, unlike native apps where the user has to physically install new versions. In theory, as most devices are using the same webkit browser, you should be able to display the app across multiple platforms. In practice, however, this is much more difficult and depends upon the complexity of the app. For example with the Financial Times, it is only available for the iPad. What is interesting about web apps, is that they completely bypass the app stores and app marketplaces.\n
  70. And the third category I’m showing here are digital magazines. Although these are officially apps, they’re often thought of as being a genre apart and have their own library including a subscription model. Adobe has launched a product called the Digital Publishing Suite that allows designers to create digital magazines directly from within InDesign.\n
  71. So, designing for gestures\n
  72. I’m not going to go into great detail here - just want to point you towards some interesting resources. There’s a great article on boxes and arrows about storyboarding iPad gestures and transitions.\n
  73. And gesturecons is a great website where you can filter available gestures for each device like this\n
  74. \n
  75. Now onto a few thoughts about visual design for tablets\n
  76. In Apple’s iPad Human Interface Guidelines, they recommed to “Consider adding physicality and realism and When appropriate, add a realistic, physical dimension to your application.”\n\n
  77. However there has been some strong backlash from the design community, calling this phoney and tacky.\n\nAn interesting article to read is on the informationarchitects.jp website, comparing the superrealistic aesthetic to Kai’s photoshop plug-ins back in the 90’s.\n
  78. Josh Clark hates this aswell, and calls it the frankeninterface...\n\nHowever, I’m not so sure... \n\nWe’re forever borrowing from the real or our perception of the real - even if it doesn’t exist or we have no experience of it - in order to illustrate affordance.\n\nThink for example, about icons that we design - the icon to save for example: this is often represented by a floppy disk. When was the last time you saw a real floppy disk? How many people from younger generations have even held a floppy disk? How about other icons, such as cogs, hour glasses and even the magnifying glass..\n\nAt any rate, when done properly, I believe that these interfaces are can be extremely playful and delightful and it’s not just about productivity. Whether the interfaces are based upon reality or just our perception of reality, that’s not really important - what is important is creating an emotional tie with the user.\n
  79. There are plenty of templates available for designing tablet interfaces\n
  80. Starting with stencils and sketchbooks for paper prototyping\n
  81. Illustrator wireframe stencils\n
  82. And there are exhaustive lists of stencils on Speckboy.com and\n
  83. and also on the wonderful Smashing Magazine.\n
  84. Prototyping is essential in order to get approval from clients and to do user testing.\n
  85. And there are a number of ways to prototype for tablets, but perhaps one of the quickest and dirtiest ways is to do this in Keynote or Powerpoint.\n\nKeynotopia have some fantastic templates that allow you to do this. By creating basic animations and transitions, and then copying the file onto the tablet, you can create a really quick prototype.\n
  86. And another way of doing this is by screencasting your designs live from your laptop to tablet. There are a number of apps that allow you to do this, but perhaps the two most popular are Air Display and LiveView.\n\nLet me show you a quick demo of LiveView.\n
  87. And in terms of inspiration there are many websites that are starting to collect tablet interface designs that worth a look, such as\n
  88. Landing Pad\n
  89. IOS Inspires me\n
  90. App Sites\n
  91. Dribbble\n
  92. Lovely UI\n
  93. iOSpirations\n
  94. and patterns\n
  95. And to finish with, I just want to say that as UX professionals, we are living in exciting times. \n\nAs increasing numbers of clients are beginning to understand that a successful product or service is created through a solid customer experience strategy, the UX profession has suddenly been thrown into the spotlight.\n\nNUI Products such as tablets, are doing much to increase customers’ expectations of how interface experiences should be. Suddenly customers are realising that interfacing with a screen doesn’t have to be a painful experience. Customers are demanding that interfaces be quick, easy and simple to use. \n\nProduct manufacturers, Service providers, IT departments etc. who fail to meet these new standards in customer experience will face serious consequences and must adapt in order to survive. The UX profession is perfectly positionned to help these companies cross the Experience Divide.\n\n\n