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.
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.
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:
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:
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.
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:
These are just a few ideas, but it will help collaboration flow through the product process.
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:
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.
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:
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.