Responsive design has brought with it a whole new world of design challenges. How can we design content containers that work at different widths? How do we decide what content a user needs to access, and how quickly? What can we do to make this website feel like the same product across all these devices?
We’ve spent a lot of time concentrating on the way things look across different devices. How menus are divvied up on small screens; how content shifts around the page. That’s the bulk of “Responsive Design”, as it has come to be known. Responsive design, since its introduction, has encouraged us all to stop adding things and start taking away. Which is not a bad thing at all. The responsive movement has ushered in a long-awaited stripping-back of our websites. Design is about taking away as much as it is adding.
But of course, we web designers do more than just layout and typography tweaks; we design experiences. All websites have an experience. One which is arrived at through careful and deliberate (and often quite clever) design decisions about the flow from one interaction to the next. It seems to me as though this experience layer has often been overlooked in responsive design. Sure, your blog now looks great on my iPhone, but how does it feel?
Case Study: Netflix
I first started thinking about this extra layer of “responsiveness” after having used Netflix on a few of my devices. Netflix is by no means a responsive website in the sense you and I first consider – squeeze the width of the browser window, and all you’ll get is a horizontal scroll bar and some broken navigation.
But the experience of the website is a prime example of responsive design. The service has three basic “modes”, as I call them; Television, Desktop, and Mobile. Let’s run through the scenarios.
Me and Emily use Netflix a lot. To be more precise, we watch The Office on Netflix every single day. Actually, let me expand on that; we watch at least 10 episodes of The Office on Netflix every single day. Call it an addiction, but it’s a great show and it helps us filter out noise when we’re working or trying to relax.
I digress. It’s a Sunday night, and we’re looking for something to watch on Netflix via Emily’s Xbox. In accordance to tradition, we pick The Office, and watch our way through a great chunk of Season 3. At the end of each episode, when the credits are rolling, the screen changes to show a preview of the next episode, and tells us it will play automatically in 15 seconds. This is perfect, since we’re too fat and lazy to get out of bed and change the episode ourselves. After about 6 episodes, or at the end of a season, this screen changes; it shows the preview, but asks us if we’d like to continue watching instead of automatically playing. We’ve probably fallen asleep, so this is for the best.
Here’s another scenario. We’re both working at a desk with The Office playing in the background on one of our computers. Again, at the end of every episode, we get a preview of the next with an auto-play countdown. This time is a little different though. The “Continue Playing?” prompt appears about 3 minutes into an episode after a few have already been played. At times, it can be irritating, but I’m starting to see a pattern here.
Finally, we have mobile. I’ll sometimes stick an episode of The Office on Netflix on my iPad, and put that on my desk next to my iMac. The difference in experience here is bigger than at Television or Desktop; when an episode finishes playing, the screen returns to the episode selection view. No auto-play of any kind.
Sitting, Standing, Moving
Hopefully, you’re all nodding your heads in a “I see where you’re going, Dan” way. But let’s go there together anyway. The three states speak, to me, in three different attitudes. Television is like a cold beer. “It’s ok. Relax. Everything’s gonna be fine. I won’t bother you unless I have to. Watch 5 seasons of The Office, no one’s going to judge you.” Desktop is a little busier. “Don’t you have work to do? And think about the bandwidth this is eating up. Fair enough; carry on watching. Oh, I love this episode! Corporate Ryan is such an asshole.” Finally, mobile is working to help you. “You can watch this one episode, but remember how much bandwidth streaming can eat up. I don’t want you getting a hefty data bill.”
Maybe I’m just tired and it’s making me write ridiculous things, but those are the personas I hear when I use Netflix across my devices. And they’re perfect. I like to think Netflix has thought long and hard about these flows across devices.
Don’t Overthink It
I’ve seen these responsive experiences in other services, too. Websites that query your location on mobile devices and tell you how far their office is, and other clever things. However, a lot of sites and services tend to overthink the difference in experience, and remove functionality.
The most recent example I've seen of this is in the Dropbox iOS application. The app notifies you when you're invited to a shared folder. Great! Exactly what I need when I'm on the move. Dropbox is great for accessing files on the move.
However, there's a slight problem. Unless I tap the notification itself, there's no way for me to accept the folder invitation inside the app itself. Irritating if I've dismissed the notification, or I have multiple invites to folders.
I can understand the reasoning behind this decision; accepting or declining folder invites isn't something most users will want to do on their mobile phones. They'll likely want to review the invitation, tell Dropbox where to put the folder, and other things in their own time at a computer. But to remove the option completely from the iOS app is a recipe for a jarring experience in the event the user does want to perform those actions on the go.
Use It Like Crazy
I'm not picking holes angrily - there are almost definitely reasons behind Dropbox's tradeoff on mobile devices, as well as countless other apps and websites that have similar compromises in different scenarios. Another possibility would be that simply no one has run into the same issue. The key to designing experiences - especially across a variety of devices and platforms - is to use it like crazy. The kinds of situations in which holes or gems in experiences on websites and apps make themselves present are often the most unlikely situations imaginable, but they happen. More often than you think.
Extreme testing is paramount. Design for the extreme cases. The "typical user" design and experience will be formed from the extreme cases.