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.
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.
17. Doing ―mobile‖ second at CloudOn…
• Tablet product came first
• Second device: a step back to holistic
• Assumptions vs. reality…
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.
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
23. 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
24. First things first…
• Research first
• Understand customers first
• Design a holistic experience first
• Without regard to devices or endpoints
• Platform first, APIs first
25. 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
30. 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
32. 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
33. 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/
34. Sketch…
• End-to-end flows
• Screen elements and modules
• Complete screens in your ―first‖ form factor
• Use your peripheral vision the whole time
35. 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
50. Start testing your design right away
• Prototypes based on sketches
• Prototypes based on wireframes
• Prototypes based on mocks
• Prototypes based on pixel-perfect designs
51. 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
52. 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
We thought people were *much* less likely to attempt editing and creation tasks on the tiny phone screen than they actually were.
Help your users find their candy
Some sketchy sccenarios showing how different types of users might see the same info
This is a CloudOn user on an airplane trying to reach our cloud services with iffy wifi.
More scenario sketches
Always consider portrait, landscape AND transitions between orientations
Clockwise from top-leftwireframe with metadata area and activity streamTablet layoutPhone screens, one each for the activity stream and the metadataWeb browser layout (alpha)
Client experience offers greater richness.
Browser experience gives greatest breadth
LukeW offers many suggestions 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.
Exploring global nav options for both landscape and portrait orientations
Closeup on the landscape flow
We put these on the walls and debated them
NehaSaigal did many of these diagrams, under the supervision of Angel Colberg.
Gaming out the nav for the Nexus 7 let us consider Android and mini tablets at the same time (and of course both landscape and portrait)
Closeup on the Nexus 7 flows
Xinying Li’s wireframe schematics define modularity rules for part of our UI
Neha made sure the navigation model we intend to launch on the tablet will also make sense when we take it to the phone. By the way, NehaSaigal and Xinying Li were perhaps the best summer UX ever in the history of the planet earth. Our lead product designer, Angel Colberg, led them through an incredibly productive summer and we were grateful to have them and sad to let them return to school to finish their work. (No, I will not tell you where they are at school, as I am hoping to recruit them for myself in the spring.)