Responsive Design Is An Affordance

With all the craziness around web design lately, it seems like everyone’s scurrying to play catch-up, especially where Responsive Web Design (RWD) is concerned. I know I constantly feel like I’m behind the curve. We’re all still trying to hone the intricacies of designing for various devices and contexts. I don’t know anyone yet who’s mastered it or who claims that they have a far superior approach, and there’s nothing wrong with this. As we tackle these problems, we’re constantly faced with the shortcomings that browsers and devices still have, or the many open issues that the industry is still trying to figuring out. In all of this craziness, it’s easy to forget about the perspective of users, especially with responsive design.

Users don’t know the state of the web

Actually, users may not understand how much they really do know. They’re the one’s using the plethora of available devices today. But, that doesn’t mean they understand the inner-workings of browsers, or media queries, or that the site they’re viewing is loading slow because of a combination of their data network speed and unoptimized code and images.

When the iPhone first came out, we were loading full web pages that were designed for desktop experiences. We still come across sites frequently that haven’t been optimized or prepared to be viewed on the major devices out there. But, there’s a certain degree of forgiveness when a user pulls up their favorite desktop-optimized site on their phone, and has to zoom in and pan around. They can clearly see that the site is not going to be easy to use. So, they zoom in, pan around, and maybe eventually get to what they’re looking for. And, this is ok. As we’re all trying to catch up, it’s hard to churn out a completely re-designed site that works brilliantly on any device. Users may not understand what’s taking so long, but I don’t see anyone getting angry over it. I think they clearly understand that there’s a transition taking place.

You can use this

Now, when users visit a site, and the first page loads with clear navigation and nice, easy-to-consume content that they don’t have to zoom in and pan around to view, you’re setting a new expectation. Now you’re saying to your users, “You can use this.” The user can clearly see what options are available to them and the site begins to feel more natural on the device they’re viewing it on, whether it’s in the palm of their hand, on their T.V., or in the dashboard of their vehicle. Because of this, their expectations have now changed from being somewhat forgiving, even if a little frustrated, of having to zoom in and pan around, to being sure that they can use what they are seeing. You’ve just afforded the user several responses to your interface. And without even knowing it, they expect some of these things:

• They expect that can find all the information they’re looking for.
• They expect pages to load quickly enough for the device they’re viewing.
• They expect interactions will feel native to the device they’re using.
• They expect to be able to accomplish the tasks they’re presented with.

Let’s see what’s behind some of these expectations.

Users expect to be able to find what they’re looking for.

When it comes to responsive navigation, we have lots of options out there. Some are even becoming standards that we can rely on. But, aside from what your navigation looks like, users generally expect to be able to find the same things they were able to find when they were viewing your site earlier on their computer. How many times have you jumped on a site on your phone to look up that same thing you found during the day on your computer, only to find it cumbersome and terribly difficult, regardless of whether the site is responsive or not?

This is hard stuff. In no way am I saying that someone out there already has this perfect, and that the rest of us just need to quit pissing off our users and do it right. When the device you’re users are viewing your content on is unpredictable, you just have to do your best to put yourself in their shoes for a bit, and ask yourself, “Are there any adjustments I can make, even if they’re just small or quick, that could improve things at the various device sizes likely to be using this site?” Simply pulling up your site on some of the major devices and using it like your users is such a great start. Don’t just linearize your content and call it a day. All of these things play into navigation, so consider some of these things while you’re testing your site:

• Do you find yourself cursing every time you get to the bottom of your page, only to have to scroll all the way back to the top to navigate somewhere else? Put a “back-to-top” link at the bottom of the page. Done.
• Does your information hierarchy suddenly make no sense at all to read in the order presented on a small device, when it made perfect sense on a desktop? Look into some quick ways to re-arrange or hide and show new things to make it right again.
• Does your navigation collapse on small devices? Might be a good idea to find a new way to indicate to the user where they are at in a site.
• Was there a sub-navigation of some sort that could be re-thought to be easier to use?
• Putting yourself in your users’ shoes, see how quickly you can jump around your site as you’re interested in learning about new topics. If you get frustrated, chances are, your users will too.

Users expect pages to load quickly on the device they’re using.

Again, users don’t know what’s going on behind your site. If they click a link to your site, and they’re staring at a blank page because the background of your site is some awesome, 3MB blurred images that looks sweet with white text on it, they may never even wait around to see it. Or, if they get 3 pages deep into your site but find that they’re waiting too long for each page to load, they may just decide that the experience you’re offering just isn’t worth their time, no matter how gorgeous you made it. So here are a few things your team can look into for performance:

• How are serving content? The first thing to consider is your method for detecting and serving to various devices. Are you just using media queries? Are you using technologies like RESS to detect devices and serve different content? Knowing what your technology constraints are will help you know how to tackle your other problems.
• Optimize images for different devices and bandwidths. I think this one’s probably the most frustrating and difficult right now. But, a simple google search will provide you with some possible options to try.
• Did you optimize your code or make efforts to cut down on unnecessary HTTP requests? Using preprocessors like Sass, or tools that minify your CSS and Javascript can help. (Some tools, like Codekit will even optimize your images too.) And concatenating these files into one minified file will help you cut back on your HTTP requests so your pages are only requesting a couple files instead of 10, or 30!
• There are other things to consider as well, like they way you’re using Javascript, or jQuery manipulate your page or content as your pages load. More on that next.

Users get confused when interactions don’t feel natural on the device they’re using.

If you’re designing the interactions on your site, you’re probably using Javascript, or some Javascript library, like jQuery. Or, maybe you’ve taken the dive into CSS3 Animations. And if you’re the cat’s meow, you’re trying to harness the power of a device’s core graphics engine by using 3d transforms to make things feel buttery smooth. But even that approach comes with a lovely dose of complexities.

Regardless of the technologies you’re using, test it. If it feels like garbage, or it lags and stutters and causes confusion, consider eliminating the animation entirely if it’s not adding value or important visual cues to the user. Just find ways to keep your users feeling confident and focused on the content.

Users expect to be able to accomplish the tasks they’re presented with.

This is the big one. Maybe you’ve got a portion of your site that’s rather complex, such as a large membership application, like one that I’m working on for a current project. And let’s say it has file uploads, like the one I’m working on does. What do you do if they try to use this thing on a phone or a tablet? Where do you draw the line? You wanted your responsive site to help the user, to be prepared for any situation right?

This is where it comes back to users not knowing the limitations of technology yet. Sure, you could jump through some hoops to allow users some way to get files uploaded to a form on some devices, but you can’t figure out that solution right now for every possible device, nor should you. You’re not going to break your back figuring out a completely unnecessary method for someone to upload a word document from the dashboard of their car. It’s ok to not provide all of the exact same functionality for every device.

But this is where some people stop. We all have access to the various ways to know whether a user is on a device with a tiny screen, or even if that device has the ability to upload a document, like a desktop or laptop does.

This is our opportunity to educate users. Instead of leaving them hanging with a form that, to them, feels broken because they can’t use all the features, make the effort to explain what’s going on. Adding a simple message when users are on a device where things could get difficult can mean the world. You could say something like, “It looks like you might not be at a computer. For this portion of the site, you’ll need access to a computer so you can upload some files. Contact us if you need some help with this.” That will tell them what they need to know while educating them at the same time. And it shows that you know what they’re trying to do, and that you planned for it.

Sure, savvy users may understand that it’s ridiculous to expect to be able to do some things on their phones that they can do on their computers, but nothing is more crystal clear than eliminating that question altogether.

Conclusion

There are many, many more things you could consider when delivering a responsive design for your product or website to your users. The key thing to remember is that the moment you put a design in front of your users that looks like it can be used, they’re expectation is that it indeed can be used. And if there are times when you can’t deliver what they expect, just take a little more time to educate them with an explanation, and tell them how they can still accomplish their task another way. Remember that they don’t know what you know, so they will have different expectations and shorter fuses. Do your best to put yourself in their shoes wherever possible and give them something to use that you would use your self.

Originally published at http://analyticl.com.