Why No Graphics?

by Jakob Nielsen on January 1, 1995

Useit.com, the website where I published Alertbox articles from 1995 to 2012, was famous (or infamous) within the web design community for its minimalist approach to visual design. 

The real reason was explained in an interview with The Guardian : " The web design guru that web designers love to hate ." My scaled-back design had a strong effect on the reflective level of Don Norman's theory for  emotional design .

Screenshot of Useit.com on November 28, 2012

Screenshot of the www.useit.com homepage.

My original reasons, when I designed the site in 1995, were as follows:

  • Download times rule the Web , and since many users still don't have broadband, Web pages can be no more than 6 KB if they are to download in one second which is the required response time for hypertext navigation. Users do not keep their attention on the page if downloading exceeds 10 seconds, corresponding to 60 KB at modem speed. Keeping below these size limits rules out most graphics.
  • I am not a visual designer, so my graphics would look crummy anyway. Since this website is created by myself (and not by a multidisciplinary team as I always recommend for large sites) I didn't want to spend money to hire an artist.

These arguments are still relevant, even though most users now have broadband access and can accommodate a few images. Indeed, I have started using screenshot and charts in my articles from time to time.

For more info about the need for sub-second response times, see my book Multimedia and Hypertext: The Internet and Beyond or my short essay on the three main response time limits .

I did have to add a small glyph to the navigation bar to emphasize the meaning of the hierarchy nesting. My original design used a simple colon to separate the levels, but some users thought that the colons indicated alternative choices on the same level (and not a progressively deeper nesting of options, as intended). The arrows seem to be slightly easier to understand as an indication of moving deeper and deeper into the site.

Character-only navbar
Before: use of a colon as hierarchy separator

 

Navbar with glyph
After: use of an arrow as hierarchy separator

(Update 2007: note that the current recommendation for the breadcrumb separator is to simply use a > [greater-than sign]. Users are now so accustomed to breadcrumbs that there's no need for the added symbolism provided by an arrow.)

 


Share this article: Twitter | LinkedIn | Google+ | Email