Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Designing Ubiquitous Multi-device Experiences
WebVisions Chicago | September 26, 2013
Christian Crumlish | Director of Pro...
but first…
A shout-out to Justin Maxwell (@303)
• BayCHI talk, Feb 8, 2011
• Holistic User Experience:
• http://www.baychi.org/calend...
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. r...
Some (painful) lessons learned
• Refactoring to a single codebase across devices
• App store hassles (don’t get me started...
―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 (outsid...
How to do ―holistic UX‖
How to do it
• First things first
• Map the ecosystem
• Sketch scenarios (be device-agnostic)
• Find the
• mobility
• touc...
First things first…
• Research first
• Understand customers first
• Design a holistic experience first
• Without regard to...
Map the ecosystem
• Do some concept modeling
• Sketch elaborate, extended user journeys
• Storyboards and comics, stick fi...
Scenario sketching
Identify…
• Touch points
– where can you enter, augment the user’s life?
• Interesting moments
– Microinteractions
– Trick...
map moments to devices
What type of experience?
• Focused, direct task?
– Start with handheld
– Get the basics right
– Optimize the core experien...
For devices that hit the market just three years ago, they're doing pretty
well, generating 8 percent of all Internet traf...
Sketch…
• End-to-end flows
• Screen elements and modules
• Complete screens in your ―first‖ form factor
• Use your periphe...
Always work in parallel
Regardless of the ―main‖ task, always consider
 Orientation
 Browser and native apps
 Multiple ...
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...
Sketch prototyping methods
• Take photos
• Assemble into a sequence
• Make a walk-through using slides and links
• Use a d...
Use prototypes for testing
• Test on yourself: reality check
• Test on your colleagues: gut check
• Test on your neighbors...
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 Crumlish
Director of Product
CloudOn, Inc.
@mediajunkie
Holistic UX: Designing Ubiquitous Multi-device Experiences
Holistic UX: Designing Ubiquitous Multi-device Experiences
Holistic UX: Designing Ubiquitous Multi-device Experiences
Holistic UX: Designing Ubiquitous Multi-device Experiences
Holistic UX: Designing Ubiquitous Multi-device Experiences
Holistic UX: Designing Ubiquitous Multi-device Experiences
Holistic UX: Designing Ubiquitous Multi-device Experiences
Holistic UX: Designing Ubiquitous Multi-device Experiences
Holistic UX: Designing Ubiquitous Multi-device Experiences
Holistic UX: Designing Ubiquitous Multi-device Experiences
Holistic UX: Designing Ubiquitous Multi-device Experiences
Holistic UX: Designing Ubiquitous Multi-device Experiences
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013
Next
Download to read offline and view in fullscreen.

27

Share

Download to read offline

Holistic UX: Designing Ubiquitous Multi-device Experiences

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Holistic UX: Designing Ubiquitous Multi-device Experiences

  1. 1. Designing Ubiquitous Multi-device Experiences WebVisions Chicago | September 26, 2013 Christian Crumlish | Director of Product, CloudOn Holistic UX
  2. 2. but first…
  3. 3. 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.
  4. 4. does this sound familiar?
  5. 5. ―we need a mobile website‖
  6. 6. ―we need a mobile app‖
  7. 7. silos
  8. 8. silos
  9. 9. Yahoo Connected Life
  10. 10. Yahoo Connected Life
  11. 11. Yahoo Connected Life
  12. 12. AIM
  13. 13. AIM
  14. 14. AIM
  15. 15. AIM
  16. 16. ―there has to be a better way…‖
  17. 17. Doing ―mobile‖ second at CloudOn… • Tablet product came first • Second device: a step back to holistic • Assumptions vs. reality…
  18. 18. Some (painful) lessons learned • Refactoring 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.
  19. 19. ―The install process is the worst on-boarding ever invented by man‖ —Bill Scott
  20. 20. (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
  21. 21. How to do ―holistic UX‖
  22. 22. 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
  23. 23. First things first… • Research first • Understand customers first • Design a holistic experience first • Without regard to devices or endpoints • Platform first, APIs first
  24. 24. Map the ecosystem • Do 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
  25. 25. Scenario sketching
  26. 26. Identify… • Touch points – where can you enter, augment the user’s life? • Interesting moments – Microinteractions – Tricky stuff – Stuff you’re scared of • Make or break experiences
  27. 27. map moments to devices
  28. 28. 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
  29. 29. 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/
  30. 30. Sketch… • End-to-end flows • Screen elements and modules • Complete screens in your ―first‖ form factor • Use your peripheral vision the whole time
  31. 31. 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
  32. 32. Landscape and portrait
  33. 33. Cross-device IA
  34. 34. Browser vs. client app
  35. 35. Browser vs. client app
  36. 36. Holistic UX Layouts (via Luke W)
  37. 37. prototype and test
  38. 38. Start testing your design right away • Prototypes based on sketches • Prototypes based on wireframes • Prototypes based on mocks • Prototypes based on pixel-perfect designs
  39. 39. Sketch prototyping methods • Take photos • Assemble into a sequence • Make a walk-through using slides and links • Use a dedicated app that can add hot spots – POP, Protosketch
  40. 40. Use prototypes for testing • Test 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
  41. 41. You don’t have a ―UX‖ of each device.
  42. 42. Your webappsiteproductservice…
  43. 43. has a single holistic user experience,
  44. 44. so start acting like it.
  45. 45. Questions? Thank you! Christian Crumlish Director of Product CloudOn, Inc. @mediajunkie
  • hernanfino

    Nov. 28, 2014
  • andrewryzhankov

    Nov. 12, 2014
  • sybrantdotcom

    Sep. 11, 2014
  • PhilipSutherland

    Aug. 5, 2014
  • photoninfotech01

    Aug. 5, 2014
  • mouson

    Jul. 29, 2014
  • jiyun1

    Jul. 29, 2014
  • stanciub

    Apr. 1, 2014
  • RafaelRodrigues69

    Feb. 14, 2014
  • JanainaPereira6

    Feb. 12, 2014
  • kaidomo

    Nov. 27, 2013
  • robson_ribeiro

    Nov. 27, 2013
  • alexboamfa

    Nov. 26, 2013
  • luisgarcia90

    Nov. 26, 2013
  • resmini

    Nov. 26, 2013
  • RobertMangrobang

    Nov. 25, 2013
  • Naugamonster

    Oct. 28, 2013
  • yojfo

    Oct. 17, 2013
  • thomaslissajoux

    Oct. 15, 2013
  • organogram

    Oct. 7, 2013

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.

Views

Total views

7,122

On Slideshare

0

From embeds

0

Number of embeds

180

Actions

Downloads

84

Shares

0

Comments

0

Likes

27

×