Internet

Back in early December 2008 I wrote Site Design Basics – Navigation and Links using the high profile Just Jared blog as an example, after all the big guys can take some constructive criticism. Here we are about a month and a half later and I’ve checked the site again and although I’ve noticed some changes, the underlying problem remains – even though so many websites have buttons and text links that are black, its a web design usability mistake… a web design faux pas. As a matter-of-fact Jakob Nielsen’s Top Ten Web Design Mistakes of 2005 item number 2 is “Non-Standard Links” – it made spot #2 in his list of 10! Read about Jakob Nielsen on Wikipedia (link above on his name) if you are a web design freak or a usability freak like me, its really interesting. At any rate black text links are a no-no even if they are graphical, unless they actually look like a button. Here are “poor” and “good” examples of black links:

Even though these both have arrows, only one is visibly a button. when someone gets to your website the last thing you want them to do is to have to look around to decide whether or not your links are clickable – you want it to be easily visible that something IS clickable.

Area 1 (see figure 1 near logo at top): This area has been re-worked a little bit, but I discovered something less noticable – a search bar! My wife’s been checking this site out for 4 months now and I was talking to her about it again the other night when I decided to write this and she said she had no clue there was a search bar, and I’m not surprised because its well hidden. The old site’s textual list of celebrities has been replaced (below the search bar near the logo) has been replaced by the new “Featured Stories” area (note the Kontera contentlink there also – the “evil Kontera” will be discussed later*). What you have is 3 featured stories, each one consisting of a thumbnail picture and text. In the screenshot here at the first one has a small pic of Angelina and Brad and a larger mugshot of just Angelina with the text “Angelina Jolie is Akris Suit-able” in black. Then there are 2 more featured stories, and above the last story, below “com” in the Just Jared.com logo is a pair of blue arrow buttons for navigation. Those are quite nice, however the clickable text for each story is in black and to further confuse things the top halves of the pictures are not clickable and while the bottom halves are.

Area 2 (see figure 1 above article): These are older and newer links which take you to the post before and after the current post. Again you cannot tell at-a-glance that these are “Older” and “Newer” links to navigate through posts, they sort of blend in to the page. They should be visually identifiable as buttons.

Area 3 (see figure 1 right edge): Here is more black text hiding the fact that it is clickable. Unfortunately the text did not show up in this screenshot, that’s my faux pas. There are black and also gray “read more” links in this column, “Just advertise here” links, and celebrities names here that do not appear to be clickable, but they are.

The Fix: Fixing what I’ve pointed out above is simple CSS editing. CSS would fix the camouflaged search box, and all of the text I’ve pointed out, making these hidden links “jump out” and probably making a lot of regular Just Jared regulars a lot happier.