 |
A project to make businesses more aware of their customer experience, and how to fix it. By Mark Hurst. |
| About Mark Hurst | Mark's Gel Conference | New York Times Story on This Is Broken | Newsletter: Subscribe | RSS Feed |
Search this site:
Categories:
- Advertising
- Current Affairs
- Customer Service
- Fixed
- Food and Drink
- Just for Fun
- Misc
- Not broken
- Place
- Product Design
- Signs
- Travel
- Web/Tech
Previous: U.S. coinage | Main | Next: "Walk" signal visibility
October 21, 2004 10:43 AM
Broken: Yahoo's new links
Yahoo has posted a beta of its home page. It's a nice design, with several improvements listed here.
But one tactical "broken" issue: the links aren't underlined!
I don't mean to pick on Yahoo, because I see this more and more in expensive redesigns: somehow the designers must think they're being extra cool by not underlining the link.
My question: why would a company choose to make its links harder to distinguish?
It's 2004. I think we can live with this. As long as
#1 link colors aren't the same as normal text
#2 you at least make it change in some manner on :hover
it's acceptable.
mendel - Yes, you can stop now. I refer you to the New York Times, the Washington Post, and Google. Excellent sites with underlined links throughout. The other sites should underline their links.
Underlining is typewriter technology. It's not 1994 anymore, and the Web is allowed to have attractive typography.
When you were at Yahoo's site, did you notice that pretty much *every word* was clickable? Do you really mean to say that underlining every word on the page is a usability enhancement?
Attractive in this case is less usable. It's harder to distinguish links from non-links - you have to distinguish just by color, which is hard to do when it's between black and dark blue. Underlining is a *Web* technology and it's worked well for years.
You don't have to distinguish just by color. You distinguish by context.
What audience would not know what Yahoo is, end up at Yahoo, but be unable to understand that it is a page full of links? Brand-new Web users will be indifferent about underlining and will figure out clickability from context. Experienced Web users will know that Yahoo's main page is filled with things to be clicked on. Is there an audience in 2004 that knows that Yahoo is full of things to click on, but can't figure out what to click on because nothing is underlined?
My apartment has a switch on the wall at the entrance to every room. None of them are labeled "lights" even though all of them turn lights on and off. Now, one might say that that's a usability problem because switches should be labeled with an indication of what they do, but I say it isn't, because anyone that would be in my apartment would be familiar with the idea that a switch by the entrance to a room is for the lights.
Similarly, this isn't a usability problem, because the context of the links provides the information that they are links to the target audience.
It's the difference between "I find this difficult to use" and "I think that some people might find this difficult to use". I think this posting is in the second category, and I think that those Some People won't be using Yahoo in the first place.
I can't believe you're saying this, Mark! Do you know how much trouble Safari users went to to get *rid* of default link underlines when it first came out?
The *user* should decide how this should be treated, and browsers let you do the choosing. It's a PITA to deal with sites that enforce underlining and take away user control!
I *never* want to see underlined links!
If it's the user's choice, then make the default the *easiest* - i.e. underlining links - and then allow the advanced users (the elite group in mendel's "second category") to change the setting in their Safari browsers to see them non-lined.
Count me in the Some People group - I can't stand it when links aren't underlined. They're harder to see.
As I understand it, most, if not all browsers allow you choose whether or not you want links underlined, not just Safari. I have the option with Mozilla, and I remember when I used Internet Explorer it was there. If underlined links are the default for a page, anybody that dislikes it can turn off the option in their browser. If underlined links are disabled on the page itself, there's no way for someone who prefers it to turn it back on.
For the broadest audience, clearly defining your links is requisite. For sites with savvy users, you may be able to get away with more 'design-y' link stylings such as merely having a color shift or bolding the link. In any case, I agree with the posters who suggest at minimum a hover state.
However, when looking at the Yahoo! redesign, I don't understand why they didn't just add a simple character such as a carat at the end of each link to indicate what is clickable.
Automobiles >
Stereos >
etc. >
It cleans up the design (no more underlining), improves readability, and still tells the user there is an action associated with a title. It's another solution.
I can't believe I just won't let go of this thread...
Several months ago, eBay did some horrible page machinations and one of the things they did was to underline all bloody links.
The user outcry was deafening. Somewhere in their user forums there are pages and pages of screams from 'normal' (huh) users from those days.
I just did some lightweight css work and haven't paid attention to the issue since then. I don't know if eBay ever fixed it or not. I'm not about to change my customization just to find out if there are still underlines everywhere! :)
It can be argued that underlining links is a barrier to usability as it cuts of the descenders of each character making words difficult to read, particularly in situations where there is a dense grouping of links.
Generally I underline links within a content block and turn underlining off for navigation blocks.
Links in navigation blocks are distinguished by context. Links in content blocks appear as defined by the user.
Maybe it's not so much that the links are not underlined, but that there's no consistent treatment for links. Some links are bold, some not. Some links are blue, some are black. Some links are preceded by ">>", some are followed by "..." When you're not signed in, the "Sign In" link is bold and underlined. The "text links" in the Yahoo! Shopping box are pictured as underlined.
Seems like the kind of question that can best be answered through some usability testing and hard data, not conjecture.
I have no such data. But knowing Yahoo, I would suspect they did a *lot* of testing before making the switch to non-underlined?
Terence included in his post what I forgot in mine: context is critical, and users generally can distinguish between navigational links and content blocks. If there is any place to retain underlining, it's in a content block where simple color or weight shifts might be mistaken for emphasis and not 'clickability.'
That said, a truly egregious usability sin is underlining non-linked text for emphasis. Now that's really annoying.
Good point, Michael. I've also seen a usability-related website displaying links, non-underlined, colored black... just like the non-linked text elsewhere on the page.
Mendel, the switches in my entryway and in my bedroom do _not_ turn on a light. They make a nearby electrical outlet "live." If I plug in a lamp and turn the light on, _then_ the switch will turn the light on and off.
Can't always assume functions.
I almost never agree with Mark but I emphatically agree this time. The web is tending towards interface standards slowly, and this is one that should be a given by now. I love beautiful type, but the utilitarian function of body copy is a place where form has to follow function.
As terrence put it, in navigation blocks or interfaces, underlines aren't needed because context tells you the labels are clickable. But relying on context to be the indicator that something is clickable in body copy is a crapshoot isn't going to work. If my experiences in testing tells me anything, it is that users don't read. They do the cursory scan of the page and click on the thing that looks most like what they came for. Research out there shows that most users even disregard structured interfaces, much to the dismay of IAs like myself.
Also, I wouldn't say that the points being raised here are conjecture, as someone mentioned. The scholarship around user experience design and the related fields is increasing and not every decision is relegated to "well, we'll never know unless we test it". Don't get me wrong, usability testing is still central to getting good results. But plenty of emergent standard practices are out there on plenty of usable and successful sites. It is a shame to see one - underlining links - getting screwed up for purely aesthetic reasons. Form follows function on this one, folks.
All of that said, I would be interested to see if Yahoo's research showed low usability on the home page because of the "sea of links," as someone else mentioned.
A hyperlink needs to be called out by an underline and/or unique color when it's mixed in with other text, to show the user it's clickable. When the item is an obvious link, such as a headline to a news story or a list of menu items, I feel a simple on-hover event such as color change and underline combined with the cursor change will suffice.
If this isn't enough you can always put the text "hey stupid, this is a link!" with an arrow pointing to the clickable text.
I like the new Yahoo design, it's much easier on the eyes without all that bright blue underlined text.
People, get over it. Let it go. It doesn't matter. You are the only people who care. Trust me on this one. Go for a jog or something.
OK..just came back from a Jog. As a rule, I always try to stick to underlines, always, except for when context makes it more than apparent(ie. navigation bars, bulleted links, more links). However, I've been using dotted underlines because they make my interfaces less busy. Does anyone else? Stop Design (http://www.stopdesign.com/) does this very elegantly.
I refer you to DON'T MAKE ME THINK by Steve Krug. Underline the damn links. It became a standard for a reason. Our first and foremost responsibility is to communicate. Our users shouldn't HAVE to "figure it out". End of story.
Speaking of links...why is the email link on the Contact Us page of creativegood.com an IMAGE?? >> http://www.creativegood.com/contact.html
Do you lot ever stop mid-sentence and realise -- wait, I'm 30+/nearly 30/whatever, and i am enagaged in a several page discussion about *underlining* -- and then think forward to the fact that when you (meaning me) die, nothing you have made all your life will work in the current operating system/browser/ whatever they use then?
Carlos, It is so that automated bots cannot grab that email address and start spamming them. They cannot read an image.
>> People, get over it. Let it go. It doesn't matter. You are the only people who care. Trust me on this one. Go for a jog or something.
Too right!
I think there are lot of people who need to get off their usability high horses; accept that things change; and give users (and web designers) some credit.
There are plenty of web pages which have been designed so that the links aren't blue and underlined but they are still different enough from the surrounding (non-clickable) text for it to be obvious that they're links. Users know that web pages only have two types of text: stuff you can click on and stuff you can't. As long as the two types are different enough and consistent that's all you need.
Anyone with an ounce of appreciation for aesthetics can tell that many pages look better without the links being the default blue and underlined. Sure, if the aesthetics were at the expense of usability then they'd be inappropriate, but that's not necessarily the case *just because* they're not the way that browsers started rendering them 10 years ago.
Speaking of links...why is the email link on the Contact Us page of creativegood.com an IMAGE?? >> http://www.creativegood.com/contact.html
Wow, a flat colour image saved as a JPG. Use GIF, dude.
With this issue, Mark is becoming as much of a dictator as Nielsen.
And Andy's last post is like a breath of common sense fresh air.
From Jakob Nielsen:
"Assuming the link text is colored, it's not always absolutely necessary to underline it."
http://www.useit.com/alertbox/20040510.html
Even Jakob Nielsen can see that standards can change over time.
Rob writes:
>> it's much easier on the eyes without all that bright blue underlined text.
Exactly. I believe use of underlines depends largely on context, and one context for Yahoo!'s front page is its high frequency of use. Removing underlines is one strategy that can help prevent eye fatigue, reduce clutter, and contribute to an overall comfortable user experience on pages that people visit repeatedly, such as Yahoo!.
Look closely at the new Yahoo! page and you'll see other design changes that aim to improve the user experience from this perspective. For example, the new page no longer uses the standard bright blue link color and instead incorporates a more subtle shade of blue - close enough to the standard shade for users to recognize that it implies something is a link, yet less harsh on the eye than the standard color.
As the design researcher responsible for much of the research on Yahoo!'s new front page design, I assure you that yes indeed, we did quite a bit of rigorous testing before rolling out the new page!
I suppose that Yahoo! can't afford to publish a front page that doesn't work. So my guess is they did their homework on usability testing. With undecorated links, and with normal users.
I like the old design better. for one thing it renders properly in my preferred browser - the new one is a big mess.
Ok, since you mentioned it, i see that blue links are clickable on the new and non-blue is not. But I have to think about that. And it requires I not be color blind.
Unlike others, I do not find underlined text to be difficult to read.
I don't care for the way the new design has cues like ">>" What does that mean and why is it different from links that don't have ">>" ? It seems to be used to mean three different things on the new yahoo ui.
Wow, Mark, I think you hit a nerve on the link issue. While I prefer the non-underlined links, I don't feel strongly about them one way or the other.
There are two things that I do feel strongly about on Yahoo's changes.
One, in general, the new organization of content, is much cleaner and easier to read (only partly due to the links). In the past, I intentionally avoided the Yahoo home page because it was hard to find anything. I like the new layout much better.
Two, while I know Yahoo! is trying to be the one-stop portal for everything online, they have de-emphasized their number one marketing asset almost out of existence - the web directory. The new design shortchanges it further than the old design did and it's still buried at the bottom of the page. What a waste. Am I the only one that feels this way?
For those who are saying that it makes them have to think. Hmmm I fail to see where the thinking would be a problem or concern. Lets see, since every single word and picture on the page is a link (with the exception of the copyright notice and "Search the web), do you really need to be told it is a link? It's like having a blank white page and needing to be told it is white. As medel says, it would look horrible to underline every singe word on the page.
If any of you go to the current yahoo website you will see that when u roll over the links they are underlined
Not that it matters now, but I did not post the November 11, 2004 comment attributed to me. To whoever did, grow up.
Using IE6.0 SP2 all links are underlined on my My Yahoo page. I have tried to turn off the underlining using Tools/Internet Options/Advanced/Browsing/Underlining Links/Hover but with no luck.
I've submitted a Bug Report to the My Yahoo Production Team and am awaiting a response.
When all the links are underlined on the page it is very hard on the eyes.
If you are experiencing the same problem as me, send me an email to: martin_rosoff@yahoo.com if you have any solution.
I hope to hear back very soon from the folks at Yahoo.
Comments on this entry are closed
Previous: U.S. coinage | Main | Next: "Walk" signal visibility
Because a page consisting of primarily underlined text is very hard to read. Yahoo's not the first; the opportunity to get away from the second biggest typographical accident on the Web was jumped on years ago when it first became possible. "Underline on hover" is the happy medium that got settled on, and that's what you find on Yahoo, AOL, the White House, Microsoft, the BBC, C|Net, Dell, HP, IBM, the Wall Street Journal, the San Francisco Chronicle, FOX News.. can I stop now?
To humor you, I went to try Yahoo's beta page, though, and I had no difficulty figuring out what was and wasn't a link. Maybe I've just got some special talent?
Posted by: mendel at October 21, 2004 11:40 AM