The Importance of Conventions

You sigh, accept defeat, and hit the back button, where you then realize you made a fatal error by clicking a false link. Cursing the intertubes for stealing those minutes of your life, you vow to surf the web cautiously from now on, clicking links only if you really mean it, because you don’t have that time to waste.

Since then, cruising this here internet has surely become easier. This isn’t just because we don’t live in a 28.8 Kbps world anymore, but also because we recognize the real hyperlinks we are looking for. We accept that blue, underlined text is a link and we’ve figured out that the dancing man in the corner telling us we’ve won a dinner to the Olive Garden is a cleverly placed advertisement and not our ticket to endless breadsticks.

As years go on, we adapt to linking conventions. We have gone beyond blue for link colors, but also make sure we keep our amount of link styles under control. We now know how tab sets function as well as we know our morning coffee. As soon as we see those rich media and pop-up ads, we know to look for a tiny close button in the upper right of the graphic. These are the habits that allow web users to explore without fear; we know what to expect and that keeps us on web pages longer.

Curious about how everyone else is handling focus and hovers, I took a look at three sites:

Google

As the number one site on the web, Google is an interesting case, where everything except the logo and one line of body copy is actually clickable. The links are distinguished and clear:

• The text links feature underlines on hover (no craziness there).
• The button styles actually have two different types of hovers.
  • The “Sign In” has a gradient change.
  • The submit buttons have a drop shadow.
• The text links on the black bar actually change if you are signed in versus signed out.
  • Signed out, the gray text changes to white.
  • Signed in, the text moves closer together and a light gray background color is applied on hover.

Facebook

The second most visited site on the web, Facebook follows a lot of familiar behaviors.

• Unlike Google’s logo, Facebook’s logo is a link.
  • The hover state is only a cursor to pointer change.
• Once a user has logged in, there are a few neat interactions in the left sidebar.
  • Hovering over an item like “Messages” shows a pencil icon.
    • Hovering over the pencil icon shows an “edit” title. The editing actions are not vital to the experience, so users who don’t learn this action will be fine without it.
  • The ability to access your Apps or Groups would be more important, and while some of us probably assume that those words are clickable, in case we were unsure, hovering reveals the word “more”, reaffirming our assumptions and allowing us to click with confidence.

COOP Chicago Coworking

While not as heavily trafficked, I wanted to look at a site that sports a few non-traditional link states.

• COOP has some standard links that are underlined, and they clearly have a destination. These links have a color change on hover.
• We also are treated to some unexpected decorum on larger link areas.
  • Size changes on box elements allow users to know the entire box is clickable.
  • Slight rotations on the Polaroid photos also let a user know that these non-traditional items are something that can be interacted with.

As we see, conventions don’t have to be boring to create a good experience. Every day I see more of the web pushing out new ideas and experiences. I’m not sure I’d recommend making all your body text blue and your links black, but smart decisions and easier functionality is always awesome. CSS transitions for a color change can be classy and subtle without jarring the user experience. Or, adding a simple text-shadow can create some depth without reminding us of tags. What are some of your favorite examples of link styles?

Back to Top