As interface designers, we want our work to look good and also to make sense. Every element on the screen should please the eye, and at the same time interfaces aren’t merely art objects. They have work to do. Interfaces need to provide information and clearly indicate the possible courses of action. These two factors—sex appeal and function, prettiness and clarity, decoration and meaning—they often co-exist when the designer is skillful. But still there is a potential for conflicts between how we want a design to look and how that design is understood by our customers. I recently ran into one of these questions of decoration versus meaning on GitHub.

Global navigation on GitHub

After you log in to GitHub, the global navigation appears at the right-hand side of the header. The navigation block is wrapped and held together by a rounded rectangle.

Look at the rounded rectangle that holds this nav block together. There is a grey border around the outside and the whole block has a light blue background. The border and background are decorative. They stylize the block and add visual interest. To help you see that these elements are decorative, I made a quick comparison with the original on top and a new version below with no border or background:

Both versions are pleasing to the eye, and the functionality appears to be unchanged between them. You might say the difference between the two is merely aesthetic or personal and leave it at that. However there is more to the story. The decision to wrap the links with a containing element goes beyond style. The decorative container actually changes the meaning of the links and, as we will see, it causes a problem for GitHub. To see why, first we need to take a look at how containing elements affect the way customers interpret a design.

Containers affect the meaning of the elements they contain

When you place a link inside a container, you suggest a relationship between the container and the link. Technically speaking the container “scopes” the link. For a familiar example, think of the edit links you often see in web applications:

The two edit links above are scoped by their containers. The viewer expects the top edit link to edit Michael Bluth because the link appears in the same box as Michael’s name. The edit links are the same. It’s the containers that make the difference.

So how does this apply to GitHub’s navigation? The issue is with the “repositories: all” link. GitHub hosts thousands of public repositories that anyone can browse, and each user may also have their own repositories. That’s where we hit an ambiguity in the design of their navigation.

GitHub’s decoration implies a scope on the repositories link

When the global navigation block is wrapped in a border, the “all” link appears to be scoped by the current user. If you clicked the link, you would expect to see repositories that belong to that user only.

Compare that to the version without a border. Here it’s not so clear whether the “all” link would take you to Michael’s repositories or the master list of all users’ repositories.

Not just decoration: confusing behavior on GitHub

At first the border of GitHub’s navigation looked like it was only a question of decoration or style. Now we’ve seen that aesthetic decisions can also influence how viewers understand a design. In GitHub’s case, the expectation created by the scoped repositories link doesn’t match up with the behavior. When you click the “all” repositories link, you do not actually see the repositories for the current user. Instead you are taken to the master list of public repositories for all users. It turns out that if you want to see just the repos for the current user, you need to click the user’s name beside the avatar. Tricky!

Redesigns that take scope into account

How could we tweak GitHub’s design to remove the confusion? One option is to remove the container and reorder the elements so there is no implication at all that the repository links are scoped by the current user:

This redesign uses visual principles to make a meaningful difference in the way the block is interpreted. By moving the avatar to the right side and removing the border, there is no longer an urge to assume the repository links relate to the current user.

Another possibility is to keep the decorative container from the original and use copywriting to overpower the suggested scope:

The second redesign uses two links—”all” and “mine”—to differentiate between the master list of all repositories and the list of repositories belonging only to the current user. Whether visual principles or words are used, both redesigns remove the ambiguity around the “all” link and set clear expectations.

GitHub is a wonderful service and I know I’m picking hairs here. At the same time, UI is a game of subtlety. The eyes and brain are sensitive and incredible faculties. As designers we should be very aware that sometimes when we design for the eyes we can also forget to design for the brain. I hope these examples help you to become more sensitive to the fine line between decorative elements and elements that change the meaning of your interfaces.