*Image was taken from Basecamp

Why the emergence of these pretty widgets that look nothing like what users are used to, yet look good while doing it? This one is simple.

In the same way coders must cope with the quirks of how each browser deals with CSS, designers must cope with the way each browser interprets the following:

  
    <button>This is a button</button>
  

Each browser has its own graphical representation of the submit button. Despite their lack of uniformity in the different browsers, they have the benefit of supreme accessibility. However, with the rising ubiquity of Javascript enabled users, developers can have their cake and eat it too, by using the image button, even giving it the up/down effect you get when you press a conventional HTML button.

If your application needs to work anywhere at any time, stick with the ugly button. But if you know your audience has the Javascript chops, give the alternative image button a try.

An alternative title for this post could be “The birth of Web 2.0,” only I don’t believe in Web2.0 for reasons which shall be discussed in a forthcoming post. Instead, I refer to the emerging environment we’re experiencing today as the “modern Internet.” But I digress.

In the beginning, there was the underlined blue link.

The underlined blue link stood unchallenged for a long time. Long enough that it managed to hardwire itself as a pattern in users’ minds. Anytime users see any underlined blue text, they are going to think that’s a link.

The underline and blue color give the text something interaction designers call the affordance for clickability. Affordance for clickability was important because most links would take the visitor to another place that the visitor was trying to reach. A page with little affordance for clickability would leave a visitor stranded, until he or she reached for the Back button. This wasn’t a problem though because all links looked the same.

In the early days of the web, affordance for clickability was all but guaranteed by the fact that all links looked the same.

This was about to change.

Enter the :hover attribute.

The first users of the CSS attribute :hover came in two flavors. The first type horribly mutated the text, wreaking havoc on layouts and generally making things harder for the user. The second type played with the text-decoration attribute AKA underlining the text. Plain? Yes. Hideous/Annoying/Disruptive? No.

The trouble with the :hover attribute was that designers didn’t feel safe modifying more than the text-decoration attribute for fear of offending the gods of usability. Besides, using :hover, the change being made to the page was rather plain, and unless you began flirting with inline Javascript, it was going to stay that way.

The introduction of :hover behavior began introducing a new kind of affordance for the web. We’ll talk about it soon.

The Emergence of the modern link

I don’t know who first had the idea to invert the background and font colors as :hover behavior, so I’ll point you to the 37signals web app Basecamp. Now, it’s important to note that the 37signals.com has no :hover behaviors whatsoever. This gives the page the feeling of stability, and when you’re trying to convince visitors to rely on your software, stability is a good thing. It’s good front page design practice to save the higher levels of interactivity for your app itself.

That’s exactly what Basecamp does. Once inside the app, almost ever single link tag has a :hover behavior, as well as a bit of padding, which increases the size of the changed background color.

The question now is this: Why is the background color so much more effective than switching the underline as a :hover behavior?

Overriding user expectations

It’s because when you change the link’s background, you’re modifying a much larger portion of the screen than you are with text-decoration. Giving the link a few pixels of padding on all sides increases the area even more. When the background of a link changes, it creates contrast where there once was none. Naturally, the eye is pulled to contrast, so by modifying the link’s background color as :hover behavior, you’re pulling the giving it attention automatically. By directing and redirecting attention frequently, you create a feeling of interactivity. No longer are you working to establish affordance for links. You’re working to establish affordance for your app.

And why not? Unlike the days of yore, most of the links in your application don’t even take the user somewhere. Many probably don’t even refresh the page. Creating the interactive interface helps a user stay comfortable with the fact that you aren’t fulfilling their previous expectations of a link taking the browser to a different page.