Designing a Consistent Experience Across Desktop and Mobile

In a world where a single product or service with desktop and mobile experiences is the norm, designing for each platform becomes a challenge. The website, desktop app, and mobile app should all feel like they belong together. When the experience between is consistent, it’s hardly noticeable; it’s when things are inconsistent that things go awry.

Several years back I read about The New York Times redesigning their website and mobile app. Instead of matching 1:1 across their web and mobile interfaces—which is common for responsive websites when viewed on different mediums—the design team pushed for consistency where it made sense. Looking back, it’s a no-brainer. But if you’re not designing with this in mind, it’s easy to lose sight of it.

Let’s pick on HipChat. In a fairly simple app, the behavior for spinning up a new chat varies between desktop and mobile. Full disclosure: I have no qualms throwing mud at this app. Atlassian tried to copy Slack, fell way short, and have since hung it out to dry. And yes, I know their carbon copy of Slack exists and it’s called Stride. I’m sure there are talented designers there and Atlassian just isn’t putting any more effort into this app—the one I’m forced to use at work every. single. day. I’m not bitter or anything. But that’s a topic for another time.

“New chat” in the HipChat desktop app…

1. To chat with someone you click on New chat. It’s located in the top of the main window:

2. From there you can search for users:

3. Select the user and your new chat window appears:

Easy enough. It’s simple and straightforward.

Now let’s do the same thing in the mobile app…

1. This is the main screen. What we’ve learned from the desktop app is that we need a new chat. Based on that, we should tap on the + icon:

2. D’oh. We’re taken to a screen where we can create a new chat room. This is not what we were expecting:

Conversely, to create a chat room in the desktop app, it’s available under File>Create Room.

Let’s take a look at each platform’s top/nav bar.

Here are the big inconsistencies:

1. Each has a new/add function:
   Desktop: new chat.
   Mobile: create room.
2. Each has a search functionality:
   Desktop: search chat history.
   Mobile: new chat.

Starting a new chat is probably the action I take most often and I always find myself incorrectly tapping the plus icon in the mobile app. Even though it seems minuscule, I find it incredibly frustrating.

When it’s good to not be consistent

You probably noticed that there are other things in the top/nav bars that don’t quite match up, but that’s ok. The desktop app includes your avatar, status indicator, and a help icon. The mobile app doesn’t include those, but it does have a settings icon.

Why is this ok? Each experience needs to be appropriate for each platform. A mobile nav bar typically doesn’t have room for all of those elements. If a designer or product owner tried to cram them all into a nav bar, things would look off. Those features should still exist in the mobile app, but they should be accessed in a different way.

Tweaking HipChat’s design

Here’s my take on what HipChat could do differently.

This design maintains consistency between each action’s behaviors. Since New chat and Create room are fairly similar in nature, it’s tough to represent them only using icons. Using Material Design’s FAB with the stacked actions, I’ve paired text to each action to remove any doubt.

Creating consistency without even trying

At my 9-to-5 I primarily design the mobile experience while others on my team focus on the desktop web app. I’m a big proponent of web and mobile counterparts working together while designing new features. Stick a web UX’er and a mobile UX’er in a room and ask them to design a feature together and consistency will be an organic byproduct of the design process.

Even if you can’t design in parallel, there are things you can do to make sure the experience you’re creating will match on both platforms:

1. Use the same terms. If one platform’s button uses Buy Now and the other one says Purchase, that’s a no-no. Make sure corresponding titles, labels, buttons, and help text match each other.
2. Follow the same flows. User flows become familiar, especially for repetitive processes. Make desktop and mobile match as closely as possible.
3. Use the same language. You might end up needing different messages between your platforms. For example, a mobile app could have a message asking the user to enable location services. The desktop app probably won’t have this, which is fine. Just make sure that all the voice and tone is steady across platforms.
4. Match the look & feel. Visually match on colors, typography, etc. This helps with maintaining a branded experience.

Did I leave something out? Do you love HipChat and want to defend its honor?! Let me know in the comments.