holistic ux: designing ubiquitous multi-device experiences
DESCRIPTION
It's the user who's mobile, moreso than the device, and users will turn to the best screen available when they want to get things done. Will your product work on that screen, whatever size, shape, or capabilities it offers? Can a single information architecture serve multiple device types? How do you design simultaneously for portrait and landscape orientations, and multiple device types, sizes, and screen resolutions? How are digital experiences like products and how are they like services? And how do you design experiences for users that may be moving from device to device and moving their data from app to app from one person to another? These challenges demand a holistic approach to user experience design that must break out of the boundaries of a single particular device or even a single application, and embrace users where they are and when they want access to the service inside the product. Holistic UX design starts with exploring and understanding user journeys in the larger ecosystem, and then works from back to the front, building a solid foundation in the platform layer before developing any user interface.TRANSCRIPT
Designing Ubiquitous Multi-device Experiences
WebVisions Chicago | September 26, 2013Christian Crumlish | Director of Product, CloudOn
Holistic UX
but first…
A shout-out to Justin Maxwell (@303)
• BayCHI talk, Feb 8, 2011• Holistic User Experience:• http://www.baychi.org/calendar/20110208/
• World-class user experiences require coordination and shared priorities among marketing, customer service, business development, engineering, and of course, interface design.
• No single person can be "the user experience designer.” The person in that role is destined for failure in an organization that believes a single bucket in the brigade will keep users happy and engaged.
does this sound familiar?
“we need a mobile website”
“we need a mobile app”
silos
silos
Yahoo Connected Life
Yahoo Connected Life
Yahoo Connected Life
AIM
AIM
AIM
AIM
“there has to be a better way…”
Doing “mobile” second at CloudOn…
Tablet product came first
Second device: a step back to holistic
Assumptions vs. reality…
Some (painful) lessons learnedRefactoring to a single codebase across devices
App store hassles (don’t get me started)
Getting instrumentation right – oy vey
Realizing the importance of “going mobile”regularly walk around with the mobile device
using phone connectivity
and try to GSD.
“The install process is the worst on-boarding ever invented by man” —Bill Scott
(Some) principles of holistic UX
It’s the user who’s mobile
Your “product” is really a service
Wide-angle UX (outside your interface)
Rules not pixels
Best available screen
Peripheral vision
How to do “holistic UX”
How to do it
• First things first• Map the ecosystem• Sketch scenarios (be device-agnostic)• Find the • mobility• touch points• interesting moments
• Do some “big IA”• Start sketching • Get to prototyping quickly
First things first…
• Research first• Understand customers first• Design a holistic experience first• Without regard to devices or endpoints• Platform first, APIs first
Map the ecosystemDo some concept modeling
Sketch elaborate, extended user journeys
Storyboards and comics, stick figures and arrows
not screens
Meet the user where they are“speak” email
provide value before requiring commitment
Scenario sketching
Identify…Touch points
where can you enter, augment the user’s life?
Interesting momentsMicrointeractions
Tricky stuff
Stuff you’re scared of
Make or break experiences
map moments to devices
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
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/
Sketch…
End-to-end flows
Screen elements and modules
Complete screens in your “first” form factor
Use your peripheral vision the whole time
Always work in parallelRegardless of the “main” task, always consider
OrientationBrowser and native appsMultiple operating system styles and conventionsSuccessive versions of OSes, devices, browsersDevice fragmentationAll form factors
…when designing your holistic UX
Landscape and portrait
Cross-device IA
Browser vs. client app
Browser vs. client app
Holistic UX Layouts (via Luke W)
prototype and test
Start testing your design right away
Prototypes based on sketches
Prototypes based on wireframes
Prototypes based on mocks
Prototypes based on pixel-perfect designs
Sketch prototyping methodsTake photos
Assemble into a sequence
Make a walk-through using slides and links
Use a dedicated app that can add hot spotsPOP, Protosketch
Use prototypes for testingTest on yourself: reality check
Test on your colleagues: gut check
Test on your neighbors: first impressions
Recruit against you personas for more thorough accurate testing
You don’t have a “UX” of each device.
Your webappsiteproductservice…
has a single holistic user experience,
so start acting like it.
Questions?
Thank you!
Christian CrumlishDirector of Product
CloudOn, Inc.
@mediajunkie