SlideShare a Scribd company logo
Designing Holistic Ubiquitous Experiences
Christian Crumlish | UXI Live - June 17, 2013
Tablet First
sorry...
I couldn’t help myself
Tablet First
• Designing Holistic Ubiquitous Experiences
• Christian Crumlish | UXI Live - June 17, 2013
but seriously, folks
Mobile First?
Tablet First?
First things first…
• Research first
• Understand customers first
• Design a holistic experience first
• Without regard to devices or endpoints
• Platform first, APIs first
and while I have you all here…
―Mobile‖ First
Mobile means ubiquitous
• It’s the user who’s mobile
• ―best screen available‖
• Mobile user journeys
• Product as service
• Holistic UX
Doing ―mobile‖ second at CloudOn…
• Tablet product came first
• Second device: a step back to holistic
• Assumptions vs. reality…
One info hierarchy – many screens
Some (painful) lessons learned
• Refactoring to a single codebase across device form
factors
• App store hassles
 ―The install process is the worst on-boarding ever invented by
man‖ — Bill Scott
• Getting instrumentation right
• ―Going Mobile‖ – regularly walk around with the mobile
device, using phone connectivity, and try to GSD.
Holistic user experience
Holistic UX Layouts (via Luke W)
Map the ecosystem
• Product as service
• Device-agnostic experiences
• Concept modeling
• Extended user journeys
• Meet the user where they are
 ―speak‖ email
 provide value before requiring commitment
Scenario sketching Customer runs CloudOn app and
connects to CloudOn via wifi.
Always work in parallel
Regardless of the ―main‖ task, always consider
 Orientation
 Browser and native apps
 Multiple operating system styles and conventions
 Successive versions of OSes, devices, browsers
 Device fragmentation
 All form factors
…when designing your holistic UX
Landscape and portrait
Browser vs. client app
Browser vs. client app
When in Rome…
So when does Tablet First make sense?
http://readwrite.com/2012/10/22/editors-note-
welcome-to-the-new-readwrite
http://www.wired.com/geekdad/2013/01/obama-ux-director
https://twitter.com/paulmcaleer/status/325989938107650048
Tablet first is our philosophy - and real
stats back it up. The issue is more people
still think laptop *only*.
— Paul McAleer, GoGo
@paulmcaleer
http://stream.wsj.com/story/latest-headlines/SS-2-63399/SS-2-218175/
… a strategy called “tablet first,” which assumes that
tablets are going to change how people work and will also
become the place where developers will create the most
innovative applications and websites.
―[Tablet-first design] brings into account things like swipe….
―Then if you start from there, then the mobile experience becomes a
relatively simple space-constrained version of the design, while the
desktop experience nicely generalizes this is what you do with the
mouse. But the devil’s in the details.‖
Sridhar Ramaswamy, Google SVP of ads and commerce
Source: http://www.adweek.com/news/technology/fast-chat-google-svp-sridhar-ramaswamy-148914
For devices that hit the market just three years ago, they're doing pretty well,
generating 8 percent of all Internet traffic. By Dara Kerr March 7, 2013 5:19 PM PST
The numbers are out -- people increasingly prefer to browse the Internet on
tablets rather than smartphones.
http://news.cnet.com/8301-1035_3-57573182-94/tablets-surpass-
smartphones-in-driving-global-web-traffic/
What type of experience?
• Focused, direct task?
 Start with handheld
 Get the basics right
 Optimize the core experiences
• Creative, visually complex, spatially expansive task?
 Start with tablet
 (Especially for generative work, space matters)
 Then expand the design ―down‖ (to mobile)
 And ―up‖ to desklap
Tablet First benefits
• design ―from the middle out‖
• focus on a medium form factor
• support for portability
• think in terms of gestures
• address a mixed paradigm
• Recommendation:
– Prototype tablet experiences in the browser
– Tools like http://draggabilly.desandro.com/ can help with this
Questions?
Thank you!
Christian Crumlish
Director of Product
CloudOn, Inc.
@mediajunkie

More Related Content

More from Christian Crumlish

Designing for Play at Web 2.0. Expo SF 2010
Designing for Play at Web 2.0. Expo SF 2010Designing for Play at Web 2.0. Expo SF 2010
Designing for Play at Web 2.0. Expo SF 2010
Christian Crumlish
 
Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)
Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)
Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)
Christian Crumlish
 
Yahoo! Pattern Library & Social Design Patterns
Yahoo! Pattern Library & Social Design PatternsYahoo! Pattern Library & Social Design Patterns
Yahoo! Pattern Library & Social Design Patterns
Christian Crumlish
 
Designing Social Interfaces at Web Directions South 2009
Designing Social Interfaces at Web Directions South 2009Designing Social Interfaces at Web Directions South 2009
Designing Social Interfaces at Web Directions South 2009
Christian Crumlish
 
Ukulele For Geeks: Secrets of the Pentatonic Scales
Ukulele For Geeks: Secrets of the Pentatonic ScalesUkulele For Geeks: Secrets of the Pentatonic Scales
Ukulele For Geeks: Secrets of the Pentatonic Scales
Christian Crumlish
 
Social Design For Patternistas
Social Design For PatternistasSocial Design For Patternistas
Social Design For Patternistas
Christian Crumlish
 
Design Hacks with Stencils & Patterns
Design Hacks with Stencils & PatternsDesign Hacks with Stencils & Patterns
Design Hacks with Stencils & Patterns
Christian Crumlish
 
Designing with patterns in the real world
Designing with patterns in the real worldDesigning with patterns in the real world
Designing with patterns in the real world
Christian Crumlish
 
Presence, identity, and attention in social web architecture
Presence, identity, and attention in social web architecturePresence, identity, and attention in social web architecture
Presence, identity, and attention in social web architecture
Christian Crumlish
 
Grasping Social Patterns
Grasping Social PatternsGrasping Social Patterns
Grasping Social Patterns
Christian Crumlish
 
Social Design and the Yahoo! Pattern Library
Social Design and the Yahoo! Pattern LibrarySocial Design and the Yahoo! Pattern Library
Social Design and the Yahoo! Pattern Library
Christian Crumlish
 
State of the Patterns 2008
State of the Patterns 2008State of the Patterns 2008
State of the Patterns 2008
Christian Crumlish
 
Heads In Space
Heads In SpaceHeads In Space
Heads In Space
Christian Crumlish
 
Social Media Design Patterns (BarCampBlock)
Social Media Design Patterns (BarCampBlock)Social Media Design Patterns (BarCampBlock)
Social Media Design Patterns (BarCampBlock)Christian Crumlish
 
Failure *Is* an Option
Failure *Is* an OptionFailure *Is* an Option
Failure *Is* an Option
Christian Crumlish
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information Architecture
Christian Crumlish
 
Every Breath You Take: Presence
Every Breath You Take: PresenceEvery Breath You Take: Presence
Every Breath You Take: Presence
Christian Crumlish
 
Please Forget You Knew My Name: Secretly Influenced by the Dead
Please Forget You Knew My Name: Secretly Influenced by the DeadPlease Forget You Knew My Name: Secretly Influenced by the Dead
Please Forget You Knew My Name: Secretly Influenced by the Dead
Christian Crumlish
 

More from Christian Crumlish (18)

Designing for Play at Web 2.0. Expo SF 2010
Designing for Play at Web 2.0. Expo SF 2010Designing for Play at Web 2.0. Expo SF 2010
Designing for Play at Web 2.0. Expo SF 2010
 
Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)
Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)
Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)
 
Yahoo! Pattern Library & Social Design Patterns
Yahoo! Pattern Library & Social Design PatternsYahoo! Pattern Library & Social Design Patterns
Yahoo! Pattern Library & Social Design Patterns
 
Designing Social Interfaces at Web Directions South 2009
Designing Social Interfaces at Web Directions South 2009Designing Social Interfaces at Web Directions South 2009
Designing Social Interfaces at Web Directions South 2009
 
Ukulele For Geeks: Secrets of the Pentatonic Scales
Ukulele For Geeks: Secrets of the Pentatonic ScalesUkulele For Geeks: Secrets of the Pentatonic Scales
Ukulele For Geeks: Secrets of the Pentatonic Scales
 
Social Design For Patternistas
Social Design For PatternistasSocial Design For Patternistas
Social Design For Patternistas
 
Design Hacks with Stencils & Patterns
Design Hacks with Stencils & PatternsDesign Hacks with Stencils & Patterns
Design Hacks with Stencils & Patterns
 
Designing with patterns in the real world
Designing with patterns in the real worldDesigning with patterns in the real world
Designing with patterns in the real world
 
Presence, identity, and attention in social web architecture
Presence, identity, and attention in social web architecturePresence, identity, and attention in social web architecture
Presence, identity, and attention in social web architecture
 
Grasping Social Patterns
Grasping Social PatternsGrasping Social Patterns
Grasping Social Patterns
 
Social Design and the Yahoo! Pattern Library
Social Design and the Yahoo! Pattern LibrarySocial Design and the Yahoo! Pattern Library
Social Design and the Yahoo! Pattern Library
 
State of the Patterns 2008
State of the Patterns 2008State of the Patterns 2008
State of the Patterns 2008
 
Heads In Space
Heads In SpaceHeads In Space
Heads In Space
 
Social Media Design Patterns (BarCampBlock)
Social Media Design Patterns (BarCampBlock)Social Media Design Patterns (BarCampBlock)
Social Media Design Patterns (BarCampBlock)
 
Failure *Is* an Option
Failure *Is* an OptionFailure *Is* an Option
Failure *Is* an Option
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information Architecture
 
Every Breath You Take: Presence
Every Breath You Take: PresenceEvery Breath You Take: Presence
Every Breath You Take: Presence
 
Please Forget You Knew My Name: Secretly Influenced by the Dead
Please Forget You Knew My Name: Secretly Influenced by the DeadPlease Forget You Knew My Name: Secretly Influenced by the Dead
Please Forget You Knew My Name: Secretly Influenced by the Dead
 

Recently uploaded

projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
farazahmadas6
 
Exploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdfExploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdf
fastfixgaragedoor
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
h7j5io0
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
garcese
 
Top Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdfTop Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdf
PlanitIsrael
 
7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint
Alvis Oh
 
vernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdfvernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdf
PrabhjeetSingh219035
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
7sd8fier
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
Alan Dix
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Mansi Shah
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
smpc3nvg
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
Mansi Shah
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
gpffo76j
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
9a93xvy
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
ResDraft
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
madhavlakhanpal29
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
ameli25062005
 
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
708pb191
 

Recently uploaded (20)

projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
 
Exploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdfExploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdf
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
 
Top Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdfTop Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdf
 
7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint
 
vernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdfvernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdf
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
 
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
 

Tablet First: Designing Holistic Ubiquitous Experiences

Editor's Notes

  1. This is a longstanding venerable form factor, both portable and suitable for getting things done. This Roman-era tablet requires a stylus (pre-Steve Jobs).
  2. For a visitor to Israel, getting through the passport line on arrival is a terrible first-time user experience. With 10 or more lines, one is nearly always in a slow one. A single snaking line looks worse but works much better. The Israelis in the audience don’t experience this and may not be aware of it. The lesson is to understand your users when their experiences are different from your own.
  3. We thought people were *much* less likely to attempt editing and creation tasks on the tiny phone screen than they actually were.
  4. Clockwise from top-leftwireframe with metadata area and activity streamTablet layoutPhone screens, one each for the activity stream and the metadataWeb browser layout (alpha)
  5. DesignedAcross devicesAcross appsAcross online / offline divideAcross peopleExpressedPer device
  6. LukeW offers many suggstions for how responsive designs might stack up in different layouts, all sharing the same information hierarchy.Investigate adaptive design for similarly responsiveness in client apps.
  7. This is a CloudOn user on an airplane trying to reach our cloud services with iffy wifi.
  8. Always consider portrait, landscape AND transitions between orientations
  9. Browser experience gives greatest breadth(Note this is a preview of the browser alpha)
  10. App experience can be more fine-tuned, closer to the device’s hardware capabilitiesLukeW calls this “reach” vs. “rich”I told him rich and reach are homophones in Hebrish
  11. When developing for iOS and Android, how to balance the OS standards of each, while maintaining a unique style for your product?There’s no easy answer
  12. the site has been rebuilt with a tablet-first approach, meaning that instead of starting with a PC and browser as our reference and then scaling that design down to mobile devices, our designers and engineers used mobile as a starting point and worked out from there
  13. Kunesh: All of the web applications we built used responsive design [where the application reformats to the device being used], and most of them were built to target tablets first, then phones and laptops.
  14. Battery Ventures has hired a new entrepreneur in residence – Charles Jolley, a former executive at Facebook and Apple – and has asked him to help the firm pursue a new investment strategy, VentureWire has learned.