 |
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: 9-11 Commission search | Main | Next: (Just for fun) Chopsticks instructions
April 11, 2005 12:02 AM
Broken: Hidden links
Meryl Evans writes:
This is from MobilePlanet.com's lovely site map. Black text, no underline, can't be a link, can it? Why, yes it is! Oh, looky! The pointer and the text change when they meet.
[Why would any designer intentionally make links hard to find by showing them in plain black type? -mh]
I want to bitchslap all the idiot web page writers (they are not designers, they can write HTML, and badly) who think good design is hiding the fact that something is a link, until the mouse is over it. When I come to a page that makes me play "hunt with the mouse until I get the finger" I go somewhere else.
And not using underlines should be a smackable offense.
I don't see such a big problem with this one. You are obviously at the sitemap, or resource center, they are all links. You wouldn't really confuse what's there with a normal paragraph of text, and not be sure of what to click next.
If they continued having no underline on links and black text for links throughout the site on normal pages I would have a problem I guess.
my short check list;
colour blind: still obvious what is a link without the colour, as the tint of the hover distinguishes for rollover.
Cognitive: Headings seperate the sections significantly to allow quick scanning
visually impaired users: hard to tell from the screenshot but I assume the headings are text and would be read out by a screen reader and could also be magnified with a browser (would have to double check in IE though)
Okay, this could defintely be better, but I think an actual usability test would settle the issue once and for all.
Coincidentally, I ran across a personal webpage with a more egregious version of the same problem. Scroll to the bottom of this page of photos from Juggler Matt Hall, and note how difficult it is to figure out how to get back to the main page:
http://scweb.esuhsd.org/programs/jugglesensei/Texas2005/Texas2005.html
That's the problem with all you UI guys, you want to take away the joy and surprise when you finally figure out how to do things.
Think about our intrepid web surfer, reading a website. He's bored, his eyes are kind of droopy, and he has trouble concentrating, he wiggles the mouse around to give his hand something to do, and stay away.
Suddenly, a word changes color. It's a link! He's alive again careening off into the unknown! Going where no one has gone before, visiting strange new webpages. Some with Flash, some without. Some with clearly marked links, others a "Where's Waldo"-ish search for hours of enjoyment!
[Why would any designer intentionally make links hard to find by showing them in plain black type? -mh]
Design *committee*.
Pointy-haired boss: "The page is OK, but it looks a little cluttered. Can we get rid of all those underlines. Makes it hard to read and ugly."
Designer: "Sir, those aren't underlines, they're..."
PHB: "There that's better. I'll just send this off to Development."
Designer: "I'll go kill myself."
I hate underlines too, butI always make links some shade of blue (different from the text), with a rollover underline (always though that a rollover underline feels right, a little bit of encouragement about the link, and indication that it will respond when you click).
Not a designer though :)
Even worse -- on our company's terrible document management system, someone reversed the colors of visited and non-visited links. When a user looks for a recently traveled path, as anyone working on a given project will do, he'll look for the red or purple link. But instead, we have to look for the *blue* non-visited links. I like to think of it as a cry for help from a designer who knows he's helping to produce a terrible, terrible system.
I'm going to say this is not broken because there is no content on the page, just links. Underlining them would in fact clutter the page unnecessarily. Jakob Neilsen, the expert on usability, affirms this: "There are two main cases in which you can safely eliminate underlines: navigation menus and other lists of links." This is a list of links.
http://www.useit.com/alertbox/20040510.html
The could improve it, though. The easiest way is to reverse the color scheme, so that the headlines are black and the links are blue. They could also add a tooltip to each item and add a sentence that states these are links, such as "CLick a link below for more information."
In this scenario, the fact that they are links may be obvious to some and not others. I've been on quite a few pages like this where the company is simply listing their capabilities, not providing links for further information.
This type of page design is becoming more apparent as people think it provides a more sleek look and feel, and makes people feel all squishy and warm when they see cool technology like the text changing color. Black should be used for standard text, not hyperlinks.
The problem comes in when they use this in less-than-obvious settings, such as the link provided by Robby. Make the font a noticeably different color if you're not going to underline it.
This problem is not limited to a site map, it just happened to be the best example at the time. I've been to many sites that do this sort of thing in their content.
The opposite is also a problem -- when a site bolds and adds colors to a few words so you think it's a link when it's not.
meryl: Even worse-- when a site underlines words that aren't links... that never fails to totally throw me off.
And I've been to a few message forums where links are almost indistinguishable from plain text... Makes it *really* hard to tell exactly where the boundaries of the link are, if it's even obvious there's a link at all.
The problem isn't just the fact that they aren't underlined. As Nielson said, it can remove clutter from a list of links. But there is NOTHING to indicate they're links, except for a mouseover. They should at least be dark blue.
In cases of navigation without blue or underlines, there is usally a button or tab-shape to indicate it's a link. But in this case, nothing.
maybe im just a more intuitive user than most of you, but i came across this page, it would be obvious to me that these are links, because of their categorization and subtitling for one
There is a site that disabled the hand cursor as well as hide the links. They have no rollovers, no underlines, and no hand. You can imagine my frustration when I tried to find the links. I had to click every word, and when I examined the source, foud thar they had letters instead of words for links and they were impossible to find. After going back to the site using Firefox, however, the links were clearly visible. Turns out it was just a purist anti-microsoft site. The moral: use Firefox.
NOT BROKEN. MOST links these days aren't even underlined or blue anymore. If you couldn't figure out that they're links, despite the headings and sub categories, the fact that it's a "site map", and the fact that the links light up when the mouse is moved over them, then you're D U M B !
there is an intuitiveness about "to return to the home page, click here" and here has rollover underline and is obv link. the real value in the juggler's site is in the photos.....
http://scweb.esuhsd.org/programs/jugglesensei/Texas2005/Texas2005.html
"there is an intuitiveness about 'to return to the home page, click here' and here has rollover underline and is obv link. the real value in the juggler's site is in the photos....."
"Here" should never be used as link text, according to the w3c, and everyone else.
Anon: Unfortunately, it doesn't work for everyone. I tried, logically enough, to click on the word "click".
Ok. Yes this is just a sitemap page, but don't most *good* websites have the same fonts, colors, and link attributues? There's no reason for me to think the rest of the site would be any better at all. Broken.
Dragon: just because it's everywhere doesn't mean it's not broken. Do a google search for "here" and you'll see part of the reason why Shadow is right. You'll find the most popular links that have nothing to do with the word "here". All plugins for viewing crappy websites that require plugins.
Sorry but it's idiotic. Just because you CAN do something doesn't mean you SHOULD. You only do something if you HAVE to. Blue underline has always been standard with links. Changing the color is bad enough. Removing the underline is not only stupid, it borders on suicide for the navigability of the site.
Life would be so much simpler for everyoen if idiots would stick to protocol.
I'm kind of tired going to a site and trying to figure out if the page was stripped of proper link protocols or not.
Im trying to figure out something.. since when do link HAVE to be blue? Since when do that HAVE to be underlined? If that is the case, then why are links in pictures not blue and underlined? There is no international standard of linkage. They are normaly blue and underline, since when they first came out they where blue and underlined, and so now everyone accepts this. Links do normaly have to stand out, just to let the users know what is a ling and what is not. but apperntly the companies color is blue, so if they would have had them blue linked, then what? So called standards are form by someone doing something, then everyone else just mimicing them.
Put 8 monkeys in a cage. put a ladder leading to a bannana. every time a monkey goes for the banana spray the other monkeys with cold water, eventually, the monkeys will relise, that if one of them goes for the bananan that they get sprayed and will start trying to stop the one trying to get a banana from going up the ladder. Replace one of the monkeys out with one that doesnt know this. Soon the new monkey will try to go for banana, and the other monkeys will attack him to make him stop. Eventually that monkey will relize that if he goes for banana that he will get attacked. Continue replacing out the monkeys like so, until there is none of the origanl, the new ones would have been attacked every time they went for the banana, relize that if they or another monkey goes for the banana that the others not going for the banana attack the one on the ladder, but will never know the real reason behind the attacking. This is how policy is formed.
Youre absolutely right. It depends on color schemes etc. Look at any professional web site and often the links are NOT blue and underlined for professionalism's sake
It doesn't have to be blue specifically, as long as there's enough visible contrast. And it should be easy to tell which links are visited and which are fresh, if you come back two days later trying to remember which of several pages on the site had the info you wanted. That means if you're going to use blue and purple, you'd better use blue for fresh and purple for visited, or people are going to get confused. But if you want to use bright green for fresh links and dark red for visited, that works too.
It's all about minimizing the time it takes for a visitor to figure out where the links are, which ones they've already seen, etc. Because, with rare exceptions, people don't go to your site to hunt for the links, they go to your site to see what's on it.
I work as a ui designer, and I can understand the desire for following a standard in general. I also agree that visual designers and "committees" at times make questionable decisions about link styles and usage. However I must say I enjoyed the post by : "Picho at April 13, 2005 12:12 AM" regarding the monkeys.
At times I feel that we as designers go to the lowest common denominator, and end up infantalizing prospective "users". Good and usable design should innovate while also being intuitive.
As Meryl states, this is from mobileplanet's SITE MAP. What are you expecting at a Site Map, if not links?
For many sites the primary reason for having a Site Map is to ensure that their site is properly spidered/indexed by Search Engines.
If, as a user (meaning you're not a bot from Google or the like), you're going to the Site Index, then you're likely trying to determine:
1) what information is available on the site; and/or
2) where this information is located within the site's taxonomy.
For the Site Map to meet this User's needs, it should meet the following criteria:
1) group Pages by Category; and
2) visually indicate the distinction between Category and Page.
The referenced Site Map meets these criteria and is definitely not broken.
This is a good example of the struggle between designExtremists and usabilityExtremists (or we could say Form & Function). Both groups are necessary to balance things out, but we'll all be better off to remain in the happy gray space of in-between.
- Drew
Drew: Meryl also states in a comment that while the screenshot is of the site map, it was simply the best example, and the problem is present on the rest of the site.
Focusing on the fact that the picture is of the site map misses the point, which is that the site design makes it difficult to recognize all their links.
Please. This isn't broken. If you left all links blue and underlined, and never change anything, you'd be left with the most boring websites ever.
Let's see here. First we'll dump all the creative link effects. Next....right, let's drop the pictures. Ah! Those fonts are far to contemporary. Let's go back to a boring, windows 3.x font... Where does that leave you? A web directory style page that makes it look like your web team was too lazy to make an actual page and instead just put a default directory index out.
Comments on this entry are closed
Previous: 9-11 Commission search | Main | Next: (Just for fun) Chopsticks instructions
Style.
...Naw! They just didn't take UI Design 101.
Posted by: style@haha.com at April 11, 2005 02:15 AM