28 Things Everybody Should Know, Part XIV

Navigation layout should reflect the movement it represents.

When the blueprints for information architecture are laid out, developers have a clear understanding of the relationship between each option and its ensuing result. This is because the elementary structure of an experience, such as a website or presentation, is a visual series of options branching out to other options, like the outline to a Choose Your Own Adventure book.

In the later stages of development, navigation is added to give the project functionality, usually in the form of buttons that serve as design metaphors.

In terms of human-computer interaction, a metaphor draws a parallel to something we know in the real world. We refer to directories as folders because we’re used to a folder holding papers full of information, or files. When first opening a web browser, a user starts off at a default page, specified by an icon of a little house. This home page is supposedly a more familiar place than the rest of the internet, and can be returned to at any time when things get out of hand. And when was the last time you used a cassette tape to take messages? Chances are your cell phone still uses the images of a cassette to represent the voicemail feature. Chances are probably just as great that we’ll see the same obsolete icon as long as voicemail exists, despite the fact that, thankfully, you’ll never have to wait for your machine to rewind your messages ever again.

This is an image of the minimal but essential navigation I have on my browser. I don’t use these buttons a lot–I prefer holding Alt and using my arrow keys to navigate, and F5 to refresh–but the metaphor is abundantly clear: pressing left will move back and right will move forward. This hinges on the assumption that our brains perceive progression from left to right, and being raised on the English language, that works out perfectly for me.

Another simple and effective example is audio and video controls, with applications like WaveLab, Audition and Media Player Classic, which emulate the buttons on a stereo. Here, the back and forward buttons represent not only the direction, but the relative scope of the movement: the button just left of the center will move back a little each second, while the one further to the left will jump all the way to the beginning of a song, or, when multiple tracks are used, skip to the previous track, which is visualized as being positioned to the left of the current track.

Interactive presentations, such as PowerPoint and HyperCard, utilize buttons to move forward and back along a series of pages (also called slides, frames, cards and so on, depending on the application). These buttons can be placed anywhere by the designer, so instead of progressing to the right, a presentation can move down, up or left–but it’s important to stick to a scheme and be consistent with it.

And then there’s Microsoft.

Thankfully I seldom have to resort to using Windows Help, but when I do, this button layout gets me every time. The Next button, used to move to the next step in the process, is on the left, then the Back button, followed by Start Over, the button that shares its behavior with the Skip Back button on a stereo. Why is this button on the very right when it brings the user back to the beginning? The layout of this menu is not only a little off, it’s exactly backwards.

Not only would I suggest reversing the order of the buttons, but because two of them move back and the other moves forward, I’d put a little distance between the Next button and the other two, giving a bit more indication that the Next button navigates to the right, while the other two, grouped closer together, will both take the user back, just with varying distance. Even better, icons to accompany the text would give a more easily recognizable hint as to what these buttons do. People only come here when something goes wrong with Windows. The last thing they need is another headache on top of what they’re already trying to deal with.

Users are accustomed to common interaction metaphors such as this, and there’s likely nothing you can do to break the presumptions they’ve built up over years of subconscious use. As long as a system is built with these established presumptions in mind, users will find it more intuitive and easy to navigate with no extra training–years of real-life experience will provide the training no tutorial ever can.


0 Responses to “28 Things Everybody Should Know, Part XIV”

  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: