Usability Principle: Visualizing Links
-
Artist:
From Jakob Nielsen, recognized as the authority on Web site usability since 1995:
To maximize the perceived affordance of clickability, color and underline link text. Users shouldn't have to guess where they can click.
Avoid using color for text unless it's a link. However, if you've opted to present links with less than the maximum perceived affordance for clickability, you can recover some of the lost usability by signaling clickability when the user hovers over the link. For example, if your links aren't underlined, you can make an underline appear while hovering.
The color for unvisited links should be more vivid, bright, and saturated than the color for visited links, which should look "used" (dull and washed out).
For more information, visit Nielsen's Alertbox at http://www.useit.com/alertbox/. Avoid confusion now! This PSA is brought to you by your friendly neighborhood MOGging web site development professional.
Locating MOG account...
Comments (11)
word, Tak! it's one of those things that really annoy me.
Agreed. Though visually I prefer links not to be underlined (I often ditch the underline myself when designing sites) you should always make sure links are styled in a easily recognizable matter. If the mog-team want to keep with the black/brown/orange color scheme, I think I would rather the links on be orange. This may surrender some readability, but it would make link recognition much easier.
i believe this option can be customized by moggers. all you have to do is change it in the CSS by "designing your own skin". you probably don't have to design a whole skin, i think you can just change one thing or many.
Molli, are you seriously implying that MOGgers have to learn CSS if they want to see links?
I'm not 100% sure, but I think the skin you create only works for your own profile page and not the rest of the site. I'll have to test it tomorrow, and if it works I'll pass instructions to all who would like it. Regardless, I don't think this is an issue the individual user should have to worry about. That's like saying to an average user "If you have problems with windows, just download Linux and code your own operating system".
i'm not implying anything. i was responding to the "web site development professional" who provided this PSA.
Yeah, the defaults need a tweak. We will never be rid of the original brown/orange.
Looks like I touched a nerve there Molli. Sit and feel that for a second, and then imagine feeling that every time you log in to this site, for two and a half years. It's like being chewed to death slowly by gnats to be ignored like this and told that these concerns just don't matter.
Seth Godin made what I thought was a telling comment on the state of customer service a few days ago. It started like this:
Actual conversation at a local shoe store: "Do you have dress shoes in a size 6?"
"No, I'm sorry we don't."
"We're from out of town. Do you know any place we can get some?"
"I'm sorry I don't. Perhaps you'd like some in a size 8?"
Now, what are the chances that someone who wants a size 6 is going to buy an 8? Zero. The game is over. You lost.
It occurs to me that the sort of business MOG has relies on content to get rankings to get seen to sell advertising and services related to the content. It seems that you would want to make the content vehicle as easy to use as possible to facilitate as much content as humanly possible.
But maybe IBM's Internet Evolution and other micro content sites are doing something wrong that MOG has figured out better.
Hi. I respectfully disagree. Jakob Nielsen is held up as a usabilty guru -- but he's been (in my opinion) a needless foe to design. Your comments about visited link colors and underlining are strictly in line with usability and design arguments that have been waged in the deep past of the web and are waning in recent years (and had their peak -- when Nielsen had his peak, too -- in 1998). When he was writing those rants and diatribes people were building websites as gigantic image maps and non-semantic markup. They didn't know what a a;hover was and how it could instruct the user on what is a link and is not.
Now, for comparisons. Look at any major news site. Most don't underline links, and even fewer have visited link colors.
Now look closely at Yahoo! News. It's the most visited news site on the planet. (Quote from AP story: "The site had 80 million page views on election day in 2004 and 142 million the day after, when John Kerry conceded to George W. Bush. "We expect to do twice and perhaps three times as much traffic in 2008,"") They have no underline, they have no visited colors. They do this to keep the pages -- which are a mix of long-read-style columns and indexes full of links -- simple and parsable. Users get it. The only place they use underlines in stories (and dotted at that!) is to differentiate between contextual search utilities (pop-up related topics ala wikipedia) and simple links.
Now look at another example: google.com. Yes, they have underlines. Yes they have default-browser-blue links. There also isn't a whole lot else going on design wise. The content is sparse, and the underlines don't create an unparsable mess. They take this underlining to extremes in some of their apps, but I forgive them. Interface design and design period isn't their strong suit (ok, with some exceptions -- Jeff Veen's work on Google Analytics interfaces is pretty much awesome).
Others? Huffington Post. Pitchfork (they use underlines on non links!), Stereogum. Amazon (some are underlined, some are not, some provide hover, some don't). In short, there are no hard and fast rules. And designers do what they feel is right.
Now on to one of your (via Nielsen) points:
"Avoid using color for text unless it's a link. However, if you've opted to present links with less than the maximum perceived affordance for clickability, you can recover some of the lost usability by signaling clickability when the user hovers over the link. For example, if your links aren't underlined, you can make an underline appear while hovering."
Mog does this extensively. The site provides visual feedback on all links via underline on hover. In some cases we even shade the selection.
Visited link colors? I'm not sure this is so much a usability issue as a design choice, but it could be argued either way.
Now the fun part -- you can go download greasemonkey (http://www.greasespot.net/) for FF (you are, as you said in IT, so this should be familiar to you) and write a little script that does exactly what you want when viewing Mog -- force blue underlines -- force vlink colors to be muted, etc. Go for it. And if you tailor one to your likings post it in our forum. Let users know about it. Mash it up. That's what this web thing is all about.
All that said, I'm ready to get back to music. Design and usability conversations might have a wider audience at A List Apart or Useit.
I see your points tjay, but MOG's design is different from every site you mentioned. The point about underlining links that Nielsen is making is that if the affordance is invisible, as yours are, then you have to work harder to make up for your design to increase usability. I won't defend Nielsen here nor explain affordances to you, but I do take exception to the attitude, now twice advanced by MOG staffers, that I should write scripts and / or code my own stylesheets to use this site, just because, as you say, I can. I work on marketing projects 50 hours a week. I'd like to hang out and talk to my friends about music without having to work to do it.
My points were made to explain once again that MOG is harder to use than it should be. Sites like CNN, yahoo and amazon do and do not use underlined links and colored links, but they do them in ways that are standardized. On amazon, they stick to black text for content and either underlined blue or bolded blue for links; on Yahoo they have links designed with symbols like arrows, dark blue, and in lists, and when visited, they go light so you know what is going on. On MOG however, the design of links does not make other pages affordable to users - the colors blend together, links disappear and even highlighted text is hard to distinguish from non-highlighted text.
If I look over a page on CNN, yahoo, or Amazon I can tell without scrolling or hovering which text lines or sections or actually links, and I can confirm this by hovering.On MOG I have no choice but to either highlight all the text or hover over it to find the links. On my own page, my links looks like "visited links" because they are "grayed out" all the time
On a site like MOG I submit to you that MOG should consider a simpler design which affords inline links in a more obvious way. I also strongly disagree that there are no "hard and fast rules" in web design. A web site that sacrifices ease of use for design is more interested in appeasing the ego of its designers not its users. And it seems to me that the users are using your site less and less.
"I see your points tjay, but MOG's design is different from every site you mentioned."
It sure is. Each has had it's own genesis. Ours, to be sure, has grown organically. But the interface choices you see are part of a style guide that was developed -- the result of the interface as it is today is not a mistake. That's not to say there isn't room for improvement.
"I won't defend Nielsen here nor explain affordances to you, but I do take exception to the attitude, now twice advanced by MOG staffers, that I should write scripts and / or code my own stylesheets to use this site, just because, as you say, I can."
I'm well ware of what design affordances are, no need to explain, thanks. The only reason MOG staffers have suggested you write your own fixes, is because you have been the only one to make these points -- and in a very public manner - and over and over. These are your opinions. MOG's design is the product of a team of people at MOG. The intersection of your opinion and MOG's design clearly creates an unhappy place for you. It's not that your opinion is incorrect -- your points are all valid for you and what you bring to interface and information design -- we just disagree with you. Design is not quantitative. And with that said, we think you may be able to prevent yourself from feeling as though you are being "...chewed to death slowly by gnats" by taking a small amount of corrective action on your part. Sisyphus no more! Take the greasemonkey challenge! Then maybe you can spend more time " hang[-ing] out and talk[-ing] to my friends about music" and less time posting about non-music related topics. I bet the greasemonkey script could be done in less than 15 minutes.
"On a site like MOG I submit to you that MOG should consider a simpler design which affords inline links in a more obvious way."
I appreciate your advice -- and your opinion. It's been heard loud and clear.
"And it seems to me that the users are using your site less and less."
This is also an interesting POV. This is something that CAN be quantified. The facts are that more people are using MOG more often -- and it's increasing every day. Posts are up, comments are up, registrations are up, week over week. That's not to say that the MOG team is resting on their laurels... we have many more improvements -- design, scalability and functionality. Who knows... we may even address your grievances in the process of shaping the things to come. MOG is committed to usability, accessibility, and a design that facilitates the interfaces as well as extends the MOGgyness.
Now back to the music.