Our 3rd edition of the report with mobile UX guidelines made me reflect on how this field has changed in the past 7 years. Back in 2009, Jakob Nielsen deemed mobile usability an oxymoron: most sites had terrible usability, as designers were exploring the design space and trying different alternatives. Now we can confidently say that mobile usability has improved and many sites have decent usability, even when used on a phone.
Much like fashion, UI design trends recur, and each year brings in its share of new “styles”. Skeumorphism, flat design, accordions, tabs, hamburgers, gestures, infinite lists, mini-IAs: in the past years we’ve seen many of these come and go, and then come back. Some have been around since the beginnings of mobile web.
So what’s produced the current change in mobile usability?
Part of it is just experience with the medium: we now have 9 years of designing for mobile under our belt, if you start counting back in 2007 when the iPhone came out. This is a lot less than our experience with the desktop web, but still enough time to explore and experiment with design alternatives.
Another reason is that most sites have finally understood that they must deliver an experience tailored to mobile. Our previous editions of the mobile report spent some time convincing companies of the necessity of tweaking the experience for mobile. We no longer feel that this is needed: most companies have understood that they cannot just deliver the full-site experience on mobile. So we don’t need to argue why having a mobile-optimized user experience is necessary.
Last, but not least, the popularity of responsive web design (RWD) has had an overall-positive influence on mobile usability.
The Effects of Responsive Design on Mobile Usability
Just recently someone asked me on Twitter if I still “prefer mobile sites over responsive design in 2015.” This was based on our book Mobile Usability and on Jakob Nielsen’s controversial and much misunderstood article Mobile Site vs. Full Site.
The short answer is no, I don’t prefer mobile sites or responsive ones. What I do like is sites that deliver the best mobile user experience, whatever the site type. And sometimes the best experience is provided by a mobile-dedicated site, sometimes by a responsive site.
In truth, users don’t care if a site is responsive or not: they simply don’t see any difference between a mobile-dedicated site and a responsive site. For them, anything that does not look the same as the desktop site is a mobile site. And if mobile sites have poor usability, they are not “mobile optimized.” (Only a month ago, a participant in one of our studies complained that the Boston Globe site, one of the more famous sites employing responsive design, was not mobile optimized because the pages were too long and she could not find whatever she was looking for on the page.)
From a usability standpoint, it doesn’t matter how the site is implemented: responsive or mobile-dedicated, they all must obey the same rules of mobile design. Some may argue that content and feature parity is what distinguishes responsive vs. mobile dedicated, but that is not necessarily true: there are responsive sites that do not show the full set of features or content available on the desktop sites, and there are mobile sites that do have content and feature parity. Plus, for many sites, content and feature parity is the right answer, and for others a good mobile experience means trimming down on content and features.
The difference between RWD and mobile-dedicated is mostly at the strategy and implementation levels: responsive sites do have behind a unique content repository and a unified strategy; and from that angle, it definitely makes sense to avoid duplicating effort and hosting the same content everywhere.
But it’s not responsive design per se that I want to talk about. I’d like to talk about the influence of responsive design on mobile usability in these few past years. And I think that overall it’s been a good influence and a few years of significant progress.
Because often RWD starts with designing for mobile, we have seen an increased awareness of basic mobile-usability principles. These principles were around since the very beginnings of the mobile web, but the popularity of RWD has put them into focus and made them more salient.
First, as I said before, content and feature parity is not what distinguishes a mobile-dedicated site from a responsive one. However, even though not all responsive sites provide the same features and content on mobile, RWD has made it clear that at least some form of content and feature parity may be desirable in many instances. As a result, most companies have understood the need of delivering a decent mobile experience, that is not reduced to 2–3 randomly picked pieces of content. Only a few years ago IKEA’s mobile site showed a single bed in their list of bedroom-furniture items. Now most sites do understand that mobile content cannot be arbitrarily limited. The answer to a question should be the same regardless of where the question is asked: mobile, desktop, tablet.
The second big implication of responsive design has been that sites have finally understood that content must be prioritized over chrome on mobile. (“Chrome” refers to all the UI elements: buttons, menus, links, and so on.) It doesn’t mean that designers have found the sweet spot for the mobile content–to–chrome ratio: they’re still learning and experimenting with hiding the navigation under the hamburger menu versus exposing it in tab bars and or abbreviating it in narrow navigation bars. But designers seem to finally agree that we need to prioritize content on mobile.
Last but not least, some of the techniques that often benefit responsive sites (e.g., sticky navigation, back-to-top buttons, accordions, and even the much discussed hamburger menu) have started to be adopted by other sites and apps, often with results that have improved usability. (A note on the hamburger menu for navigation: it does reduce navigation discoverability even on mobile, but for some sites or apps it may still be the best solution.)
What Designers Still Need to Learn
So, if RWD has helped improve mobile usability, does that mean that responsive sites are more usable on mobile? Not necessarily. RWD has made content prioritization and content parity part of the conversation, and overall, mobile design has benefitted. But RWD has also had negative impacts on mobile usability, perhaps the most important being that of the superlong page. Designers were told that the fold doesn’t matter, because, since the screen is so tiny on mobile, what else can users do but scroll? And yes, they scroll, but only if they are enticed to. There are ways to fix the long page, and good sites take advantage of them. For instance, long pages marry well with mini-IAs — mini table of contents at the beginning of the page — that tell users what the page is about and implement direct access to the various sections. Long mobile pages also work well with accordions, with sticky navigation, and back-to-top buttons. More and more sites, responsive or not, take advantage of these constructs, although these have yet to become mainstream concepts like the hamburger menus.
Another important issue that is still not well understood by designers is that mobile content needs to be layered. That does not mean that we need to arbitrarily cut it or hide (which unfortunately is what many do), but rather that we need to prioritize the gist and defer the details to secondary pages.
And last, but not least, we need to learn how to fit our desktop-based, deep information architecture into a 2-level navigation that is usable on mobile. A deep information architecture (often supported by cascading menus on the desktop) doesn’t translate well on mobile: it often forces the user to take too many steps to reach the content.
What It Means for Desktop Users
Unfortunately I could write pretty much the opposite article about the influence of responsive design on the usability of desktop sites. The idea of starting RWD by designing for mobile has been great for mobile, but quite catastrophic for the desktop. We’ve lately seen on the desktop long pages devoid of information, hidden navigation and search, as well as big images and a poorly understood concept of prioritizing the content over chrome. Unfortunately we cannot design with only one device in mind when users are distributed across multiple platforms: we need to take into account the specifics and the strengths of each device and tweak our designs so they match the capacity of the communication channel with that device.
New Research Report
Our many mobile-usability findings and guidelines are captured in our new report Mobile User Experience. (Now published in a newer edition, reflecting events and research after this article was written.) Many guidelines reflect the current mobile patterns and interactions; old guidelines that were still retained were revamped with new examples.
