“View mode” approach to responsive web design
Rethinking the way we build webapps to create a better user experience regardless of screen size
One of my favorite quotes/phrases about responsive web design is this one by Luke Wroblewski:
“Losing 80% of the screen space forces you to focus on the most important set of features for your customers”
To me it really sums up what responsive web design is all about, and why the mobile first approach has forced us to focus on the really important feature of any webapp — its content!
Another great advantage of the mobile first approach is that it forces us ( designers and developers ) to think creatively about the way that we incorporate features and functions in our webapps. The “off canvas navigation” approach is a great example of how a very important feature, that sometimes needs a lot of space, can be incorporated in a user friendly and elegant way on a relatively tiny screen.
Off canvas navigation is especially effective when you have webapps with a complex and deep content structure, because it hides the navigation from the view when the user is focused on the content, and when the user wants to navigate, the view changes and the navigation is in focus. And it allows the navigation to take up the space needed to give the user a good overview of the webapps content.
This approach could just as effectively be used on other features, such as search, filtering of content, shopping basket, ect. ect.
Lets look at an example taken from a very common feature: filtering of content.
Above you see a wireframe of a list of products with the ability to filter the list on a series of parameters.
And here is the same page in a mobile version, where all the parameters are stacked nicely underneath each other.
What happens when the user starts to filter the content? Well actually everything is working just a it is supposed to, the content still being filtered. But visually, to the user, nothing happens because the content the user is filtering is placed below the fold and therefore the user never sees the actual result of his or hers choices — an issue I have seen a lot of times, and a typical indicator that the webapp didn’t have a mobile first approach.
A solution could be to hide some of the parameters on the mobile version, or making the view scroll down to the content when the user is done setting his or hers filtering parameters — i have seen both and none of them offer a really great user experience.
Working with different view modes
Another way to work around the issue, is to start working with different view modes. That is to divide different functions of your webapp into individual views.
Let’s return to the example from before. What if instead of the box with the filtering parameters, we placed an button called “filter results” or something similar. And when the user clicks this button it activates a new view that slides in and that takes up around 70% of the screen size. It could look something like this:
On this view the user is presented with the same parameters as before, and when he or she makes some choices the result updates in the background (to visually show the user that his or hers action has an effect on the content) and when the user closes the view, it slides away and the user is allowed to focus on the content again.
This approach could also be used for something like search, which in my opinion is a very mistreated function on the mobile web.
Mostly search on a mobile view is hidden behind a search button placed in the header, when the user click the button, a small input field slides down, and that’s about it. Sometimes the input field is set to automatically gain focus when it slides down which opens the smartphones keyboard.
This is actually not a bad solution, especially if you remember the automatic focus thing.
But what if we used the view modes approach on the search as well. When the user clicks the search button, a new view slides in with an input field at the top, that automatically gains focus and the keyboard slides up. below you can see the 2 solutions side by side.
The advantage here of the view mode approach is that you have more vertical screen real estate available which allows you to show some live search results or search suggestions as the user types. It also allows you to load the results asynchronously avoiding a complete page load to show the results. If the user doesn’t find what he or she was looking for they can just close the view and return to the view/page that is still in the background.
Not only for mobile version
There are many advantages of using this approach on the mobile version of a webapp. It brings the features that is important to the user into focus, but only when they are needed. The view slides in on top for you content, which allows for more vertical screen real estate, and because the content i placed in its own view the user have the ability to scroll in the view separately — This allows for more complex filtering parameters, more search result or deeper navigation. But most important of all it allows the user to focus on the content the webapp without distractions.
The advantages of this approach could also be used on a desktop, tablet or whatever-screen-size version of a webapp. Here the view that is important to the content e.g. the filtering parameters, could be visible on the righthand side of the page, so that the user doesn’t need to click a button to show the filtering parameters (see example below). Or you could have a series of icons on the righthand side of the page that allows the user to switch between views like: search, shopping basket, comments, feedback, filtering options ect. ect.
Using this approach on all screen sizes also gives the user a more uniform experience across all devices.
So if I should rephrase the quote from Luke Wroblewski I mentioned in the beginning of this article it would sound something like this:
“Losing 80% of our screen space forces us to rethink the way we build webapps, to allow our customers to focus on the feature that is important, when they need them. And thereby creating a better user experience regardless of screen size”
