Design Responsive Behavior: Being a True User Advocate.

Posted Today

Throughout my years as a UX designer, I have come to realize that responsive behavior has become an after thought. The return on investment in good responsive behavior design is always greater than the investment itself. However, there is a surprising number of designers who choose to implement poor interaction models on responsive utilities because MVP (minimal viable product) has become a corporate priority. Don’t get me wrong, MVP has its merits (it should always be built around how to minimize product features when launching), but never at the expense of the users. This article will outline how we, as designers, can push for better products by thinking through our designs from end to end.

Take your Static Designs a Step Further

I have worked at companies where the designers set static breakpoint templates for themselves (Desktop is 1400, Tablet is 768, and Mobile is 375). However, having such a strict set of templates can cause problems. Whenever designers think very rigidly about how the web works and only utilize the theoretical approach, the practical usage falls apart.

For example, on a recent project, my design team and I decided to use the following three breakpoints: 1024, 768, and 480. Typically, a designer begins the process by setting up a sketch (or photoshop) file with those breakpoints in mind. However, a problem that some designers fail to address is how to process the components between the breakpoint ranges. In other words, the designer does not consider what happens between the 1024 and 768, for example. This is a situation where designers need to be mindful of their current environment. A design may look wonderful at exactly 1024, but may fall apart at 900 or less, and if a user is accessing a design from that awkward 900 point, they may struggle to complete their task. There is rarely an occasion where users land on that perfectly designed point.

The solution is simple: Start thinking like a developer. Take the design and have fun with it. Choose a random number between two of your breakpoints (try to get as close as you can to your next breakpoint without hitting it) and see what happens. Ask yourself detailed questions at this breakpoint about components on the page: Are they squished? Are the components in disarray? Is the design unrecognizable from your original design? By sampling and gathering this information, the designer can start to redesign a better concept that will accommodate these in-between points.

Design Responsive Behavior for Utilities to Create a Better Ecosystem.

During my time as a designer at Marriott, I was asked to redesign its search results page. The biggest challenge was to make this concept viable on all viewports. This meant considering functionality on desktop, its behavior on tablet and mobile, and considering how these different mediums adapted to each user’s mindset within each different view.

Putting aside the complete redesign of this page, this section will focus on the filtering system, its responsive behavior, and the importance of the viewport variations, beginning with the desktop:

First step to design responsive behavior: figuring out the wider view in desktop.

A prototype I built using HTML, CSS and JS. These are used for a couple of purposes: to user test, to have stakeholder have a REAL feel of what the experience is going to be like and for us designers to dictate what’s best for the product itself.

In desktop, the filters sit on the top of the page. We decided to keep price and distance surfaced because these two factors are always the most important for users seeking hotels. In summation, the most important factor for users is the cost of the room and the proximity to their event or other surrounding attractions.

After clicking “More Filters,” the whole list expands. This is what we called “geek out mode.” If someone wanted to filter a specific set, they can. This interactive flow was tested more than 3 times to land on the design we have today.

Now, refer to the graphic below to see this menu in the phone viewport. Observe the differences between the filter above and the filter below:

Second step to design responsive behavior: understanding how the mobile view changes according to the user's mindset.When we designed the different interaction flows for the different viewports, we asked ourselves these questions (taking a mobile first approach):

How important is this to the user?
If it is less essential to the user, then minimize its importance. Hide it, remove it, or figure out a way to reduce its impact on the user’s task.

How do I allow the user to utilize this component in a confined space without compromising their goal?

Much like the filtering on Marriott, we allowed the users to filter easily on the phone in a way that allowed focus (it was a full screen take over). We limited distractions and fully optimized their ability to complete that task.

How do I make interactions meaningful and enjoyable?

This is a hard question, because I used to be one of those people (earlier on my career) who thought animating everything would make an experience enjoyable, but that is far from the truth. If designers craft overly complicated animations, users will feel burdened by that animation’s duration. Notice that there is only one animation when the user lands on the phone view of filters: the slide. This was necessary to give it an app feel, while also letting users know what is happening. Without that slide, making a filter panel appear out of nowhere is disorienting.

Stop Putting the Burden on Developers

In my experience, I have witnessed many designers point blame towards developers when things don’t “act right.” More often than not, the reason why that happens is because we, as designers, have failed to see things beyond those perfectly designed pages in our sketch/photoshop files. Instead of placing blame on others, designers should create a collaborative environment where both designers and developers can submit input. Engage in a conversation where the goal is to create a design that works realistically. The discussion should not only be centered around technical aspects of a product, but also the design behavior. In order to create the best products possible, designers and developers must collaborate together, and be partners, instead of competitors.

Here are some ways for designers to getting into the developer mindset:

  1. Consider learning how to code and start building prototypes
    This might seem absurd, but you’ll start understanding how these developed projects work on the web. It will improve your UX design skills too, because you’ll experience your product in the context of the user even more.
  2. Use sketch’s resize tool, and go to town.
    Just grab your Artboard, make a copy, and scale it down. You’ll have to do some cleaning, but you can get a quick idea of how your application will scale in the in betweens.
  3. Whiteboard sessions – including developers
    Take some of your desktop designs and place it on the whiteboard. Then, make it a team exercise to design the different breakpoints. Stick to low fidelity sketches. Take a picture afterwards and convert it to a well thought out design. This is great to expose developers to your design process, and for you to be exposed to a developer’s thinking process.

These are just a few ideas, but it will help collaboration flow through the product process.

Re-evaluate Conventional

There is this idea among designers that anything in-browser or out of the box UI is considered user-friendly.  However, that is not always the case.

An example of this is dropdowns. Here are two great sources for understanding how backwards this conventional UI component has become:

  1. “Dropdowns Should be the UI of Last Resort”
  2. “You know what? Fuck Dropdowns”

There is an argument to be made that they are still usable in desktop, within reason. If you stuff your dropdown with an essay, that will obviously not be usable in desktop or even in mobile.

A great example of this would be another mini project we did at Marriott shown below:

As you can see, the currency dropdown works relatively well on desktop. We didn’t want to take a lot of space with a radio button list or any other UI component.

So, what happens to this dropdown on tablet and mobile? After comparing the two, you can see the common behavior between them:


In conclusion

As designers, we should always break out of our comfort zone and truly strive to create experiences that work for our users in any viewport. Collaborate with your peers to push those boundaries to create something memorable. Believe me, the moment we stop seeing each other as competitors and start becoming partners, our products will shine.

This article was written by
Majed Elass
CEO & Designer of Pixel Commerce, Majed has extensive experience in designing for digital products. He creates hyper realistic prototypes for user testing and stakeholder approval. Combining both his abilities in design and development, Majed pushes for user centered experiences.