If you have published something on the web, you are most likely familiar with the two basic areas that web publicity can be divided in: getting visitors to your site, and keeping them there (actually there is also a third one - making them come back, check back for a followup article on this important topic).

The first one is a very large and constantly developing area, and many good articles have been written on it. Some of the keywords which can be mentioned here are:

- submission to search engines
- getting listed in directories
- taking part in affiliate programs
- classic advertising
- joining webrings
- starting a blog
- writing an article
- making a press release
- and many others

This, however, is not our main focus. What is addressed a lot less often, especially from a statistical point of view, is the second area: what do users do on average when they come to a site, and what are the best ways to grab their attention and make a good first impression?

A recent study at Ottawa's Carleton University found that web surfers actually form an impression of a site's visual value in 50-100 milliseconds. Of course, that alone does not yet decide their behavior, but it creates a certain prefilter which then colors the subsequent impression when the site is examined in more detail (if it actually gets there, that is).

Let us assume a visitor has come to your entry page and starts viewing it, and let us try to dissect this process on a chronological scale. This may not be the same for all sites, but for the sake of simplicity we can analyze a more-or-less average case (quickly loading page, quick and impatient user searching for information on a certain topic which your site features) and depict a number of basic mistakes at each stage.

- first 50-300ms: user sees the background and the basic site layout. A couple of basic dont's at this stage include: a strange background color (pink, orange, and similar bright colors are disliked by many), especially in a combination with similarly colored-fonts or layout elements. Always aim for clear readability! Dark grey 8-point font on a black background may look cool, but it tires people to read it (few actually do), and if they don't read it, what's the point of writing it? For some examples of what can go wrong at this stage look at

- http://www.zyra.org.uk
- http://www.purple.com

Sites that look distinctly unprofessional and offensive to the eye (say, combine the above colors with some flashy ads) have a good chance of being discarded already at this stage, when the user has not even read any of the content. So, unless you are a pro aiming for some specific look, this is something you should avoid at any cost.

- next 2 to 4 seconds: user scans the basic page layout and headlines. Here, the topic and key elements of your site should be visible already (i.e. "The Complete Guide on Pet Food"). A frequent mistake here is that the page layout is overloaded and cluttered with numerous frames, banners, menus, ads, etc. This confuses the visitor since it is not clearly visible where the real content actually is. Keep it as clear-cut as you can. Of course, most of the time you will have some advertisements, but in the long term it is better to place them more organically (i.e. into a content page on the same subject) and not make them obtrusive and annoying as on innumerable sites currently around on the web.

Here's a tip that is actually important for the first category of website optimization as well: non-cluttered sites are much more spider-friendly and thus improve the chances that all of your relevant content actually gets indexed by the search engines.

- next 2-3 seconds*: user reads a few initial sentences of your entry page and finishes forming a basic impression. It is at this point that many people will leave. The reason is usually simple: they don't see anything of immediate interest. Maybe your page has it, but they didn't find it in the 6-8 seconds that they are used to. This sounds really obvious when you think about it - we've all observed it often enough - but when people design pages they often think about it from a "how can I pack all I want in here and make it possibly flashy" standpoint instead of "how can I make it possibly quick and easy for the user to find my key content".

* The length of this stage may vary, since not all people read/scan at the same speed. Especially older people will in general not rush it so much, which may give you another 10-20 seconds.

- final 2-3 seconds: user clicks on one or two links that appeal most to him. From an unofficial empirical study, in about 80% of the cases the first link clicked is in the main menu or in the first content paragraph, so it is important to have those point to relevant, quickly loading information on your site (e.g. linking to Microsoft.com or to a 5-MB PDF file in the first paragraph is in general not a good idea).

If the quick and impatient user is still around after the first 6-10 seconds, chances are that he has found something that grabbed his attention - in most cases a striking headline, an interesting inlined picture, or the first few sentences of a content paragraph. Which is when you can lean back and watch him read all the interesting information on your site...or maybe not. The next steps, which mainly deal with intra-site navigation and content, and are also essential, will be the topic of a follow-up article. As for this one, to summarize, here are some design points that can be considered a good start for a visually attractive page that is likely to hook its visitors:

Colors and basic layout:

- for content sites, understatement is in general better than trying to use up all the page space
- flashy colors only if you are absolutely sure what you are doing
- no grey on black background (or in general close colors for text/background)
- no weird color combinations: white/black good, pink/orange bad

Structure:

- possibly simple and concise
- fast-loading
- emphasize keywords
- inline meaningful pictures and links, but do not exaggerate
- avoid elements that offense the eye (sharp corners, blurry pictures, etc)

Content areas:

- in content areas, write short, compact sentences
- unless you're an online casino, don't abuse blinking buttons, Flash, and glitter effects
- no super-small (below 9px) text unless you don't intend it to be read (as e.g. for copyright notes)
- no serif fonts, those are subconsciously perceived ugly and unprofessional*. E.g. Verdana, Helvetica, Tahoma are good website fonts. However, if you consciously want to make an amateur, neighbor-next-door impression, you may consider it. See "The Surprising Truth About Ugly Websites".
- emphasize keywords and use small paragraphs to split content into meaningful blocks. Try to avoid large, clumped areas of text without any clear visual hooks.

Navigation:

- do not make the visitor click even once more than necessary. According to empirical data, each additional click in general reduces the chance of the visitor staying with you nearly exponentially, i.e. after three clicks you'll just have about 1/8th of your original audience. Various websites take this principle to the extreme and provide basically 1-click services: Google, NeatProgs.com, Local.com, etc
- do not hide or obscure navigation controls. Always have them clearly visible and adequately described (a dog icon for the "support" page may be cute but is not quite self-explanatory).
- a responsive, subtle visual feedback for mouseover is good style for navigation controls. Do not make this heavyweight and slow though, (trailing effects and such), since it tends to irritate users

Audio/video:

- as a general rule, NO automatically playing sound. Many users outright hate that since they may be browsing at work and don't want it to be announced by your site to all their colleagues in a 10 meter radius. http://www.toshiba.de is a nice example of how even major sites can go wrong with this (unless they took it down already..)
- avoid inlining automatically loading video since it tends to be orders of magnitude larger than all the other files and can slow your page down drastically. If you must have video, make it streaming, and only start loading it on user demand.

There are two final remarks that should be made:

first, none of this is etched in stone. Web design is a quickly developing area, and with time things that may be true today may become less true. One example one can think of is Flash content. As of today, for a site with mainly textual content, the rule should be: the less the better. A well-designed and organic Flash header may still be a good thing, but Flash abuse is one of the easier methods to drive your visitors away. However, in future, as bandwidth becomes greater all the time and thus permits more interactivity, entirely Flash sites - which, when well done, are certainly a different kind of experience than the regular text-based web, and allow doing a lot more to catch user attention than your regular text-based entry page - may perhaps become more and more common.

And second, and perhaps most important, as the web gets ever larger and evolves, content becomes more crucial than ever. There are millions of pages with average and bad design out there, thousands of good ones, yet the ones with lots of interesting content are in the end the ones that users keep coming back to. So, if you have limited time and resources (as most of us), you are definitely better off making a visually simple site with a lot of interesting content than a flashy yet shallow site.

Sergey holds a M.Sc. degree in CS and is one of the founders and owners of S-Kaze, Ltd, a company designing and developing innovative and unique next-generation websites.

References:

Lindgaard G., Fernandes G. J., Dudek C. & Brown, J., "Attention web designers: You have 50 milliseconds to make a good first impression!" Behaviour and Information Technology, 25:115 - 126 (2006).

Web Style Guide, 2nd Edition Patrick Lynch, Sarah Horton