In his presentation at Breaking Development in San Diego CA Cameron Moll shared a framework for designing experiences that work across multiple screens. Here's my notes from his talk on: Pitfalls & Triumphs of the Cross-Screen Experience
- What is mobile? Can we define it by the devices people use or where they use them? All these lines are blurring. Web browsers are not only in cars but on fridges, and more. We can't frame our discussions by devices. We need to plan for what's coming in the future.
- What about mobility? How do we define the use of devices that people pick up anywhere and everywhere. It's not easy to frame our devices and context. We need to design for what's coming next.
- Screens are just a window into an experience.
- The best interface is no interface. Do we really believe this? The best interface is the one that's in reach. It might be on the nightstand, TV, your pocket, etc.
- At any given time, you might have 2-5 screens on at the same time. How can we classify and understand these cross-screen experiences?
Cross Screen Experiences
- Discrete: an experience on one screen independent of, but ideally cohesive with experiences on other screens. Examples: Twitter and NPR.
- Sequential: experiences that flow across screens. Example: Amazon cart that can be accessed on any screen. 67% of people used sequential screens for shopping in Google study. Up to 50% of people email themselves a link to continue a task on another device.
- Complementary: an experience complemented by a device's unique capabilities. Each experience adds what it does well to the overall task or process. Example: driving directions on Google maps on the whole complements maps on the big screen.
- Extensional: an experience that is controls or is controlled by another source. Example: use a mobile app to control Apple TV.
- Simultaneous: an experience involving multiple experiences simultaneously. Example: watching TV and using phone.
Dos and Dont's
- Don't stereotype devices. Just because you are on a large screen, does not mean you aren't distracted or have short attention spans.
- Don't fall prey to the convenience of device silos. The lines between devices are converging. When you silo by devices you might be missing out on opportunities. You need starting points like mobile first or responsive design but don't
- Do respect people's mental models. Create an aesthetic and functional cohesiveness between experiences. Our memory muscle can influence where we expect functionality.
- Do be respectful of people's device choices: don't force them to use native apps if they want to use the Web. 72% of users say they don't want to download apps from businesses.
- Do sequence tasks across screens as much as possible. Especially when the activity naturally carries over between screens: require revision or contemplation.
- Do make it vertically responsive as well. Small viewports are common when browser chrome and navbars eat up vertical space. Example: Gmail allows you to toggle the header on/off and changes line height of emails in your Inbox.
- Don't assume "one size fits all" works for all users. Is responsive design a one size fits all approach? In the browser, yes. But somehow native apps have experienced this scrutiny.
- The complete cross-device story isn't just about responsive Web sites, it includes native apps and more.
- Until the Web browser can match the experience of native apps, people will continue to use native apps.
- Should we provide people an opportunity to toggle responsive designs? If so, that would indicate there's something wrong with RWD -there isn't.
- But we might want to let people pinch & zoom between different renderings of content. This way they could select a denser layout if they want it.
- Do leverage outside expertise. Complement your skills with those of others. We're trying to accomplish a lot.
- Any company that fails to act like a start-up is doomed to fail at some point -Tony Fadell.
- Cross screen design is just Web design. We should keep striving for getting to one Web.