Mobile UX isn’t just about breakpoints
Responsive design. The evolution of interface design in the last ten years made this approach the most important standard. Every website should be optimized for mobile UX, and content should be reordered to fit smaller (or larger) screens. This is a bare minimum — and common sense on the web today — which is likely the reason why designers began misusing it.
Mistaking Decent Breakpoints for Good Mobile UX
As RWD (Responsive Web Design) became a standard, designers started simplifying the philosophy behind it. If you have three boxes in a row on the desktop, you should position those three vertically on a mobile screen. Nice work, but how do you know whether there is a need for them at all in a mobile context? What if there’s only a need for two of them? Alternatively, what if you need them in a different order? Intent defines design, not a responsive grid.
While it’s a good rule of thumb to have the same functionality and content available on every screen size, it’s not necessarily true for your specific website… and it’s absolutely questionable if you’re working an a web browser-based application.
RWD in its essence isn’t about reordering stuff. It’s an idea of designing for context by adapting to its constraints and particular scenarios. If you put the RWD technique in aside for a moment, to make something responsive also means that you have to go beyond screen sizes, to make it responsive to the user’s current situation. You have to know what you are using it for.
Hammering Everything with RWD
The first mistake that designers tend to make is interpreting RWD’s techniques to applications running in browsers without judgement. It’s easy to do so, as the border between apps and websites is quite unclear. However, reordering the UI and rescaling elements work only if we stay within a certain context, like a typical mobile scenario. The most significant difference between apps and websites is the user’s intent, as well as the task he or she must finish.
Most simple websites have the same purpose, with little or no difference in content, no matter if you’re opening it on a phone or laptop. Apps, however, always need to react to the user’s situation, which requires greater precision. A policeman won’t — and maybe shouldn’t — write a report on his smartphone at a crime scene, so there may not be a reason to clutter his mobile screen with that online form at all. To be more exact, what needs to be displayed and optimized for mobile UX depends on job stories framed by relevant user scenarios.
What about Desktop First?
The most recognized approach related to RWD is ‘Mobile First,’ based on the premise that one should design from the bottom-up, starting with the smallest screen. It also indicates that the number one platform today is the smartphone. Over the last several years, we have had many clients at Exalt who already knew the term and asked us to design accordingly. However, some of these projects were clearly about designing ‘Desktop First’ services. It’s one thing to know that Mobile First is a “good thing.” It’s another to know whether it fits your case. For us, Desktop First means not only starting by designing interfaces for desktop displays, but also that at least 80% of user scenarios describe a desktop context.
There are even a few occasions where no mobile scenario is known at all. This is very typical for web-based B2B software, like tools involving heavy file management or interfaces used in plants, customer service centres and others. We have had a few occasions where we’ve created desktop-only responsive web apps for certain B2B clients. The complexity of the product was way too high to even consider a fluid-responsive screen below 1000 pixels. Desktop First exists and it remains an important approach in many user scenarios. In such environment, the best mobile apps created for the user will likely be auxiliary tools with particular features — a design made for a certain context.
Design for Context
The second mistake regarding the usage of RWD is to assume that purpose of use will be the same on smartphones and tablets. “Mobile” still means that our user is probably en route, rather than sitting behind a desk at a workstation. Mobile, therefore, means that he or she is more involved in the environment; it’s the opposite of a desktop first scenario where the users focus is indeed on the display.
You can’t directly downscale a product like Photoshop to a mobile screen; however, you can certainly create an alternative for a mobile context. In such cases, a mobile UX strategy won’t be successful because of an efficient usage of the RWD technique. With that said, even Photoshop could be made responsive, but only because you know what must be done on a phone (or a tablet) by the user.
Mobile UX design is more than just fitting content into smaller screens. RWD describes the technical side of how to design websites and it can even offer a hint for how to start drawing web-based app interfaces, but the user’s real needs in a mobile context require us to do additional research.
Responsive design, therefore, should not be used for its own sake, or because it’s the modern way of creating interfaces. Before jumping into it’s toolset, and starting to rearrange boxes, clear goals should be set based on how, where, and why people will eventually interact with the product you design.
