Jakob Nielsen's site has been redesigned
nngroup.com
nngroup.com
His early work was very interesting, drawing attention to the fact that sometimes what "looks good" or "works well" according to someone's intuition doesn't actually produce the best measured results. He was a pioneer, at least in Web terms, of promoting the kind of data-based decision making that many successful Internet businesses take for granted today. Anyone who designs web sites but hasn't read early Nielsen is missing out, IMHO.
However, as time passed, his articles became increasingly self-referential and self-promotional, and seemed to include less and less substantial, original content. By his own arguments his material was becoming worse.
His old site famously wasn't a shining beacon of graphic design, and he always seemed rather proud of that -- ironically, really, with the body of research we now have that shows how much influence a good visual design can have on readability. With the redesign used since the move to the NN Group site, he seems to have completely jumped the shark. Even famous Nielsen material on the F-shaped reading pattern and the use of underlining for hyperlinks seems to have been discarded. The text is set in a small size and with a font stack that will render unpleasantly on a significant number of visitors' computers (because Helvetica is often installed on Windows PCs, but only as a cheap and nasty screen version of a printer font). And what happened to not making real content look like an advert?!
It really is a shame, because every now and then he does still write a great article. I wonder what the Nielsen of 15 years ago would make of his site today.
- Not all links have a title attribute
- Large lists of links do not have a skip link.
- Searchform is a javascript submit, with no fallback or warning (doesnt work without javascript support)
- Mailto: adresses have subject preset.
- Links are not underlined.
- Popular topics links are black instead of blue, and the hovercolor doesn't register for the colorblind.
- Larger images often lack an alt-attribute.
- Inline CSS hampers custom user stylesheets.
- Submenu is somewhat confusing, visually disjointed from the main menu.
- The contact form is a table without a table summary, and doesn't work without javascript enabled, without a warning.
- Missing a breadcrumb
- Low contrast for blue links on white background.
- Trouble finding the contact form. Submenu is initially hidden and you have to select "Contact information" from a list of links inside the "People" page.
- After submitting form: <h1> </h1><h1><strong>Message Sent</strong></h1><p> </p>
- Font-stack of Helvetica renders ugly on Windows machines
- Form labels are not bold, above the form input, or of reasonable font-size.
- Content pages don't start with the content, but with a huge sidebar of links, not conform reading pattern.
- Both HTML and CSS are not valid.
- http://www.nngroup.com/articles/ is somewhat paralizing with information/link overload.
I do like the design a lot, it being vanilla Foundation.
I absolutely agree. The new design is an even worse offender against his own recommendations.
https://news.ycombinator.com/item?id=5019049
(two months ago, no comments)
https://news.ycombinator.com/item?id=5267093
(one month ago, four comments)
and anyone who has followed any of the useit.com links in the last two months would have discovered this change. EDIT: The second HN submission shown links to the site's discussion
http://www.nngroup.com/news/item/useitcom-moves-to-nngroupco...
of this change in location of Alertbox columns.
I agree with the several questions posted here in comments that I'm puzzled by the rationale for some of the changes, which are not always easily explained by what's on the page
http://www.nngroup.com/news/item/useitcom-moves-to-nngroupco...
about the domain change, which has the paragraphs below about the new design:
"Legacy design is rarely a good rationale in the long run, but there was a second reason to maintain useit.com for many years: while nngroup.com needs a corporate look-and-feel to attract consulting clients, it was possible to retain a more emotionally forceful design for useit.com. The site admittedly didn't look very good, but it was a strong rallying point for rebellion against the bloated design style that dominated during the dot-com bubble.
"Even after the dot-com bubble burst, there was a long period where the barebones useit.com design stood out and elevated the site above many latecomer UX websites. Cutting through the clutter is an important value on the web, which has so much more information than anybody needs.
"However, eventually it makes less sense to rebel against the excesses of the past. Also, with almost 500 Alertbox columns published, it became clear that more navigational apparatus was needed. One solution could have been to redesign useit.com to make it more like other sites. But why bother? If a big change was needed anyway, it was better to use the opportunity to integrate the articles with the company information and host all the material on the same website with a single navigation structure and a single search. So that's what we did: no more microsite for the Alertbox."
http://www.nngroup.com/articles/guidelines-for-visualizing-l...
He has a massive get out of jail card - he says "Assuming the link text is colored, it's not always absolutely necessary to underline it". But then he says that for accessibility you must do so.
However, he says:
"There is no need to use special colors or other visualizations when the cursor hovers over a link. Doing so only makes the page appear more cluttered as the user moves the mouse across the screen."
How... awkward... for him.
I should note that he has entirely rewritten his guidelines from his old "alertbox":
http://web.archive.org/web/20040605085708/http://www.useit.c...
I see he has removed this nugget of advise:
---
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).
The two colors should be variants or shades of the same color, so that they're clearly related. Using drastically different colors (say, orange and green) makes it hard for users to understand the relationship between the two types of links and to identify which color is the "used" version of the other.
* Shades of blue provide the strongest signal for links, but other colors work almost as well.
* As always, when using color to signal information, you should provide redundant cues for color-blind users. Making unvisited links brighter and more luminous than visited links will usually accomplish this goal.
---
Let's see:
* Dull washed out colour for unvisited links - check!
* Different colour entirely for visited and unvisited links - check!
* "There is no need to use special colors or other visualizations when the cursor hovers over a link. Doing so only makes the page appear more cluttered as the user moves the mouse across the screen." - check!
* "Users typically understand a left-hand navigation rail with a list of links on a colored background, assuming it resembles the navigation areas on most other sites." - same background colour for left hand navigation rail... check!
Use common sense and the W3C for accessibility, for everything else there's Nielsen.
Focusing so much on the UI elements rather than overall goal always seemed like a lost opportunity to educate people, and ultimately feels like "oh, this is much too hard to understand, just follow these rules and you'll be OK." It's an easy solution for people to get behind, but not very effective for improving UI on the web.
None of the world's most successful websites pays overmuch attention to aesthetics, including Amazon, eBay, Craigslist, Wikipedia, Facebook, Yahoo, MailOnline, The New York Times, the old Hotmail, Slashdot, Reddit and Hacker News.
In any case, details that are purely aesthetic -- subjective matters of beauty and personal taste -- don't make a difference to ease of use. That's a tautology, because not mattering to other factors is almost the definition of a detail being merely aesthetic. However, more generally, things like visual design and typography do matter and can make a measurable difference.
Once there was a Wordpress theme available in official theme repository with a footnote "Jakobian theme created by Ozan Onay, based on the prophetic work of Jakob Nielsen." Based on tables - like the real thing.
Some things should never change.
font-family: "Helvetica", Helvetica, Arial, sans-serif;