Designing for context — Going beyond “mobile first”

Considering external factors to expand the mobile first design concept

Prior to the massive upsurge in smartphone capability and adoption, designing products for the web was a fairly straightforward task. In the days that saw us all have colossal desktop computers and CRT monitors proudly displayed in our homes as a statement of our technological prowess and wealth, as digital designers we knew the stage from which our product would be experienced; From a comfortable chair in an air conditioned home or office with a fresh cup of coffee.

This unfortunately gave designers the green light to fill the web with grandioso, bandwidth chewing flash intros to add an unnecessary level of theatre to an online store coupled with animation packed client heavy interfaces that needed a degree to find the login button. But at the time, going online was much more of an occasion than it is today.

Fortunately for all of us, those days are now gone.

Over the years we’ve heard a lot about “mobile first” design, simply put meaning designing your interface on how it will be served on a mobile device first, taking the “less is more” approach and expanding the layout as screen size increases. There’s no doubt that a mobile first approach is the best way to design products that will be experienced across multiple devices, but what about about multiple environments and across multiple circumstances of use?

I’d like to take the mobile first design concept one step further and introduce a layer above mobile first that focusses on the external factors on how that product is being experienced before we consider layout. To keep things simple, let’s call it “context first”.

For the plethora of different device widths on the market that we design for, there are the same again (if not more) external factors on how that specific device is experiencing your product, and a number of these factors can be used by the device with ever increasing ease to tailor the experience. Let’s look at a quick example.

This is the mobile homepage for McDonalds UK on an iPhone 5C. From a mobile first perspective this is a good example of design. Everything is nicely scaled, it’s not overloaded with information and touchable elements are big enough to easily tap to navigate around.

But now let’s look a bit more closely at how with a context first approach this interface could have been enhanced.

Let’s focus on the very top of the screen, the Apple status bar. It’s 1:15pm, I’m not using wi-fi, I have location services enabled and I have only 17% of battery remaining. Now I could be sat in the office with wifi turned off, using my last remaining battery to research the McDonalds environmental policy, but let’s make the more realistic assumption that I’m looking for lunch.

McDonalds put a fair amount of marketing spend into informing us where their nearest restaurants are, so why not carry this over into their mobile offering, where users have shown an active interest on the brand by visiting their site on a device.

The layout of this particular page could be easily adapted thanks to it’s modular design to provide a context aware experience quickly helping the user to achieve the goal of their original visit without the need to further navigate the site, all thanks to the various HTML5 APIs that are available to developers.

Beyond this very simple example, the key is to combine the external data available to make assumptions on the context that your product is being used in and present the most relevant and useful information to that situation:
Use network and battery information to be kind to a users device.
Remove CPU crunching animations for poor connections or low battery.
Provide more “snackable” views to your content app for people on the move or at “busy” times of the day.

Strive to enhance the experience and delight users, in a constantly connected world great products can be become discarded all too easily if the overall experience doesn’t delight. Use context to make your applications as smart as possible and avoid letting your interface get between the added value of your service and your faithful userbase. If you don’t, someone else will come along that will.