The Island of Misfit Responsive Designs, Part 2

Stop treating design as a noun. Design is a verb.

—Kevin Lee, Head of Design at Visa

In this 2 part blog post, I wanted to take a different perspective on responsive designs. Responsive design, the hot new design technique to create one design across multiple devices despite myriad device sizes, provides a great deal of flexibility. But, with any one-size-fits-all approach, there’s a stunting that takes place to a design. In order, to make a design that works on all devices, we limit what we can do on any one device.

In part 1 (which I’m sure everyone’s read already), I described limitations to user flows and use contexts that happen when making sure a design works on all devices. Furthermore, I also described how fitting a design to all device types limits the native input techniques and interaction styles to each device. Neither of these are reasons to avoid a responsive approach,  but the wise designer should consider how these limitations enhance/harm the user experience.

This time around I wanted to talk about 1) how a responsive design precludes a design ecosystem and interdevice communication and also talk through 2) unique design process concerns for a responsive design.

3. Smart device “ecosystems”

Okay, first of all, before someone tries to preempt me. We need to acknowledge the possibility of a “smart” ecosystem: Maximum Overdrive

Increasingly so, our devices are going to be connecting together like an intricate puzzle (a frustrating, fragile, easy-to-break puzzle that has installation instructions). That means, experiences will not only occur on one device. But, something that starts on mobile phone moves to a kiosk then back to your phone. Later in the day, the experience continues on the tablet and the television simultaneously.

The idea here is that an experience doesn’t happen on a device. It will be happening more and more frequently within an entire ecosystem of devices. The consequence is any particular interface design needs to work on, work across, and flow through more than one device. That said, responsive design has a tall order ahead of it.

devicesOverTime.png

Two years ago, Michal Levin wrote on this topic in the book “Designing Multi-Device Experiences: An Ecocsystem Approach to User Experiences Across Devices.” She described three design approaches including consistent, continuous, and complementary. Under this framework, consistent is what we have come to understand as responsive (or adaptive) design. These are designs that work on several form factors and looks & acts consistent across them all. So far, so good. This is the base level of device-to-device interaction. Continuous is the next step where I start an activity on one device, and it can transfer over potentially multiple other devices. Each device adds its own flavor unique to what makes that device unique. Lastly, complimentary means devices being used simultaneously for one activity. It’s a coordinated effort between devices.

Research I have participated in has also explored this topic of device landscapes. The key here is that in device landscapes users have problems to which they apply their entire landscape to, which may mean multiple devices, applications, and tools. This device landscape may be both personal and shared across multiple users. Furthermore, each device within the landscape is imbued with personal value. When a user decides to add a device, app, or design, it will often mean we might have to push something else out of the landscape to make room.

The consequence of these frameworks is the playing field is getting very messy, very quickly. The consumer experience is moving toward an increasingly interconnected ecosystem of technology. While a responsive design will set us up nicely for continuous experiences, without a lot of forethought and custom design we will not be able to cover these other ways ecosystems/device landscapes influence how users will want to use our designs. This may limit their usefulness.

Things to consider:

  • What devices do your users use currently?
  • What is the nature of tasks your users want to use your design for?
  • How might these activities be separated across devices?
  • What activities make the most sense to be designed for on certain devices rather than other devices?
  • How will users multitask while using your design?
  • Will uses have multiple devices near each other when using your design?
  • How might these designs be used socially?
  • How can we help users maintain their device landscapes, i.e., adding the new to overtake the old?

4. Responsive Design gotchas

When designers, product managers, business analysts bring up the possibility of responsive design, they often extol the myriad benefits responsive design brings (and I would agree with these benefits + it’s pretty cool to see something work on the desktop AND your mobile phone). But, there are some hidden factors that tarnishes the luster of this promising approach.

First of all, responsive design is often more resource intensive than traditional design for one medium. The reason is because you are trying to make sure it works regardless of the device resolution. While it is one truly design, it very much can mimic designing multiple designs and then some when all is said and done. A designer needs to do a lot of other things to ensure the design actually does work on all these different devices. Even if the user takes a mobile-first approach, which will ensure the design can work on smaller- and larger-sized screens alike, a good designer should still give thought to the way those larger designs will look.

Secondly, responsive design is more difficult to demonstrate to developers. If we’re designing for one screen, then we can use standard comps and wireframes to show how a screen should be laid out. But, things get more complicated when we have a variety of devices (potentially dozens depending on our approach). With responsive design, we need to rely on prototyping or comps for all the different form factors. Of utmost importance though, we need to make sure communication is crystal clear. Because without that communication something that might be assumed in the design might be missed at one of the many different screen resolutions.

How Does This Work
So, you want 2 urinals in the corner… got it.

Lastly, responsive design forces total device and browser support. No longer is there an excuse to not support this browser or that browser (we’re looking at you Internet Explorer). We can’t continue to say, “Oh you can look at our website on a mobile device, you just need to pinch to zoom in.” There are no more excuses. Responsive design is a blessing and also a curse that forces you to do it all correctly.

A few things to consider:

  • Do we have the resources to support a move to responsive design done right?
  • How is our current communication between designers and developers? What do we struggle with now? Will responsive design make that worse?
  • Do we really want to do responsive design?

…But don’t take my word for it

So, in this series we talked about a variety of reason to give stop in your process to responsive design. Consider the use contexts, what makes each device unique, the ecosystem approach to design, and the consequences of a responsive design to a development process.

Given everything I have said so far, it seems that I would advocate against responsive design. But, in truth, I’m a pretty big fan. I’m a bigger fan of proper design, however. Responsive design is something that your design team needs to truly commit to, understanding the consequences of that approach, and maintained a user centered approach when engaging in.

That said, I believe in giving people what they want when they want it. Responsive design is a sure-fire way to accomplish that.

So, let’s get to it…