Removing ambiguity from Facebook’s message navigation

Published on 7^th January 2010 in Design, Usability, tagged ambiguity, Facebook, mental models, navigation.

Recently Facebook made a minor change to their inbox message page which has improved its usability considerably. It’s a great example of how small adjustments to an interface can make a huge difference.

Perhaps you won’t have noticed it, so let’s first take a look at what the message toolbar used to look like:

Looks fine, right? Well focus on the right hand side, where the buttons are for navigating between messages. Without proper labelling, these are ambiguous. Does the left arrow take you to an older or newer message? It’s not clear at all and Facebook aren’t the first to fall for this.

This left and right button layout also doesn’t tie into the mental model of how the Facebook inbox works. When you’re looking at all of your messages, they’re stacked on top of each other. When you’re looking at single messages, you’re moving up and down the stack, not side to side.

So how did Facebook solve this problem? By simply switching the navigation buttons around:

Now when you look at them, it’s obvious where the buttons will take you because they conform to the mental model of the inbox. It’s a straightforward solution to an otherwise tricky problem.