Breaking Development: Cross-Screen Experiences

by Luke Wroblewski April 7, 2013

In his presentation at Breaking Development in Orlando FL 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.
  • The best interface is no interface. Do we really believe this? The best interface is the one that's in reach.
  • 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
  • Extensional: an experience that is controls or is controlled by another source.
  • Simultaneous: an experience involving multiple experiences simultaneously.

Dos and Donts

  • 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.
  • 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.
  • Do sequence tasks across screens as much as possible. Especially when the activity naturally carries over between screens.
  • Do make it vertically responsive as well. Small viewports are common when browser chrome and navbars eat up vertical space.
  • 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 apps have 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.