In this post on mobile usability I'm looking at how a mobile app can deliver consistency, something that is only gaining in importance in our connected device filled world. It's unlikely this is going to be the only device users consume your content or service on. The original heuristic from Jakob Neilsen talks about consistency more in terms of following patterns and norms on that platform:

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Whilst this is certainly important, that’s not so much what I’m going to focus on in this post. That’s pretty much UX design 101 and there’s lots out there about best practices for different devices. What I find interesting is that increasingly online services have recognised the need to create their own norms and conventions as they have to work across a variety of platforms. Businesses realise they don’t want you to have to learn a whole new set of actions just because you’re accessing a service on a different device.

The increasing convergence of iOS with OS X is a prime example, as is Google’s widely praised Material Design, which has brought together a diverse set of apps and websites under a consistent set of design rules. So if you’re looking to build your own world-beating online product, it’s worth thinking about how you can achieve a similar consistency. It’s not only the bedrock of good UX design but also the basis of strong branding as you can then ‘own’ that experience.

Here are a few products that show great consistency throughout the design of their multi-platform offering in some different ways.

BBC iPlayer and supporting all the things

The BBC began creating their own digital design language in about 2008, having long valued the importance of a consistent experience and iPlayer is the ultimate lesson in multi-device consistency. The nature of the way they are funded by the British people means they need to be as open as possible to all and support many different devices including Windows phones, all the major games consoles as well as the obvious desktop and mobile. On top of that the increasingly useful smart TV is the natural home for a service like iPlayer.

Here we have three different iPlayer incarnations and they’ve come up with a system of design that works on all formats. The initial experience when you first arrive is reassuring as it feels so similar: the same content images and the similarly styled top 40 most popular. The large images being the dominant elements are both nice and tappable on mobiles and easily viewable from a distance on a TV.

Once you dig into the details there are differences between the platforms but that is mainly to reflect the different amounts of screen space available, also on the TV you don’t want to ‘click’ through to read about something, you just want to watch with as few ‘clicks’ as possible, as navigating on a remote control is slow. On the web there are SEO/findability concerns so every programme has a web page with all the relevant data about it. The service manages to be consistent between platforms without ignoring the demands of each one.

Medium and the detail of icons

A professional blogging site, Medium is a service that is all about providing consistency, given that it offers such restrictive control over how you can display your content. Thus it makes sense that they’re also consistent between the different ways you can read the content on mobile.

The web and mobile app experiences are very similar, with the user feeling immediately clear that they’re in the right place. One key consistent element that makes the web feel like a native app is the footer bar that frames the page and sticks to the bottom of the user's screen. The icons might be arranged in a slightly different combination but the fact they are the same is a helpful standard. A lot of services have recognised icons as a subtle chance to brand the experience and now every site seems to want its own icon set. It's a challenge to make such small interface elements unique yet obvious, but if you can pull it off it does add a touch of class. 

Oddly, the headers aren’t identical, as the mobile web presents it’s titles over image in the same way as the desktop but the app presents them separately—something that should be simple to align.

Trello and desktop mimicry

The project management web application, Trello has a mobile app that is a good illustration of making the experience exactly the same as desktop, just a bit smaller. This is not always a recommended option as the screen space and interaction paradigms can be quite different. However in this case Trello is a tool that you’re mainly going to use on desktop, probably in an office scenario, so the app is likely to be a secondary option. If you do then need to catch up on the fly you don’t need to learn a whole new system because it behaves exactly as you’re used to.

The workspace looks exactly the same with the matching colour background updating as soon as you change it. In terms of actions, there’s very little that you’re restricted from doing on the mobile app in comparison with the desktop. Each card feels like a modal window on mobile even though it fills the screen, as you close it with the corner ‘x’ icon rather than having full navigation options. Equally the notification bar displays in the same way as the desktop by coming in from the right hand side so you instantly understand how it differs from the cards.

Trello is all about lightweight speed and ease of use. In this case the best way to keep the user working speedily on the app is to present them the same design they’re used to on desktop.

———

There are lots of ways to deliver consistency and even in writing this and studying the different screens I realise how even those that do it well don't match precisely. If you can implement it from an early stage, the easier it will be for the modern user to achieve their goals no matter what device they visit on.