Links and Affordance within a Design
When you approach a door, the available door handle that allows you to pass through usually has an affordance that tells the user this is a tool that turns, switches or presses forward (depending on the door). How do you cope when you approach a set of glass doors where only certain sections open and close and there are no obvious signals or markers that afford entry? You get confused, right? We use doors every day of all shapes and sizes but they’re not all the same. And most doors work perfectly well because they have the affordance to us of being a door. They look like a door and act like a door.
On the other hand our electronic dishwasher, video player or mobile phone generally lack a lot of the affordance they should have. We complain about them constantly - manuals written in Korean are testament to the issue. Please don’t deny there’s a problem with the 1001 inventive interfaces to programming a television.
Web design requires the same attention to affordance. Something that’s a link needs to have the affordance of a link, for example. Cool is alright but if you went to work tomorrow and designed a cool door for your office which lacked affordance you might get some complaints - suddenly you have an office that’s got usability and accessibility issues! People can’t find the way in to see you and those who find the handle try to turn it when the knob needs pulling towards them. For no apparent reason they find themselves locked out of your office. While, of course, it works perfectly well for you because you know the secret behind that lack of affordance. This is the crux of usability and accessibility in real world web design.
That’s why links have the hover, visited, active and focus pseudo classes. They provide the affordance that these are links of varying states and provide mechanisms that fit user’s mental models about what should happen. Link identification is an important factor in the usable functionality of your design in the wild. Links make the web what it really is - hide them away and there isn’t much left to work with for the user. Like Steve Krug said, Don’t Make Me Think!
I can see that it can be tempting to only use subtle colour variations to distinguish links from general text. It can be tempting to refrain from using hovers and visited link pseudo classes because they impact away from the clean design we might aspire toward building in our own uncorrupted vision. But when we do, it should be with extreme caution because we’re removing the affordance factor. We’re overlooking the inherent complexity in the relationship between users and the interface.
Its not just about pleasing blind people. Its about creating usable and accessible interaction models for the user. What makes sense to us as designers means very little in comparison to what makes sense to users in general. We can’t afford the misguided arrogance that transposes our own mental model out into the wild user environment. Most users aren’t technicians, aren’t webophiles, aren’t fluent in the mechanisms of internet technologies. Ask a total stranger in the street to explain Really Simple Syndication or Hypertext Transfer Protocol or the XMLHttpRequest Object.
Its about having an office door which people can use - it looks like a door handle, turns like you expect it to, and nearly everyone can use it. If that makes sense.
Update: 19 June, 2008
For example WCAG 1.0 Guideline 2 (Checkpoints 2.1 and 2.2) say don’t rely on colour alone. They are Priority 1 Checkpoints and a site contravening that rule by using colour alone to identify links (especially subtle colour alone) therefore fails WCAG 1.0 at its most basic level right out of the gate. From a usability perspective Jakob Nielsen has some advice on link affordance in Guidelines for Visualizing Links and Change the Color of Visited Links. While I wouldn’t go so far as to have default blue links all over a site the point is clear - links require the affordance of hyperlinking to another resource and other expected behaviours and states.
