10 principles of effective web design _ how-to _ smashing magazine.pdf

10 Principles Of Effective Web Design | How-To | Smashing Magazine

24.03.2008 10:28:28 PMopera:8

10 Principles Of Effective Web Design

January 31st, 2008 in How-To | 295 Comments

del.icio.us

digg

StumbleUpon

Advertisement

Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of

the page is the only person who clicks the mouse and therefore decides everything, user-centric design has

become a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature,

it might as well not exist.

We aren’t going to discuss the implementation details (e.g. where the search box should be placed) as it has

already been done in a number of articles; instead we focus on the main principles, heuristics and approaches for

effective web design — approaches which, used properly, can lead to more sophisticated design decisions and

simplify the process of perceiving presented information.

Please notice that

you might be interested in the usability-related articles about 10 Usability Nightmares and 30 Usability Issues

we’ve published before,

we’ll cover more principles of effective design in our following posts. Therefore you might want to subscribe to

our RSS-feed.

In order to use the principles properly we first need to understand how users interact with web-sites, how they

think and what are the basic patterns of users’ behavior.

How do users think?

Basically, users’ habits on the Web aren’t that different from customers’ habits in a store. Visitors glance at each

new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the

thing they’re looking for. In fact, there are large parts of the page they don’t even look at.

Most users search for something interesting (or useful) and clickable; as soon as some promising candidates are

found, users click. If the new page doesn’t meet users’ expectations, the Back button is clicked and the search

process is continued.

Users appreciate quality and credibility. If a page provides users with high-quality content, they are willing to

compromise the content with advertisements and the design of the site. This is the reason why not-that-well-

designed web-sites with high-quality content gain a lot of traffic over years. Content is more important than the

design which supports it.

Users don’t read, they scan. Analyzing a web-page, users search for some fixed points or anchors which would

guide them through the content of the page.

Users don’t read, they scan. Notice how “hot” areas abrupt in the middle of sentences. This is typical for the

scanning process.

Web users are impatient and insist on instant gratification. Very simple principle: If a web-site isn’t able to meet

users’ expectations, then designer failed to get his job done properly and the company loses money. The higher is

the cognitive load and the less intuitive is the navigation, the more willing are users to leave the web-site and

search for alternatives. [JN / DWU]

Anca

Sticky Note

http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/


24.03.2008 10:28:28 PMopera:8

Users don’t make optimal choices. Users don’t search for the quickest way to find the information they’re

looking for. Neither do they scan web-page in a linear fashion, going sequentially from one site section to another

one. Instead users satisfice; they choose the first reasonable option. As soon as they find a link that seems like it

might lead to the goal, there is a very good chance that it will be immediately clicked. Optimizing is hard, and it

takes a long time. Satisficing is more efficient. [video]

Both pictures show: sequential reading flow doesn’t work in the Web. Right screenshot on the image at the

bottom describes the scan path of a given page.

Users follow their intuition. In most cases users muddle through instead of reading the information a designer has

provided. According to Steve Krug, the basic reason for that is that users don’t care. “If we find something that

works, we stick to it. It doesn’t matter to us if we understand how things work, as long as we can use them. If

your audience is going to act like you’re designing billboard, then design great billboards.”

Users want to have control. Users want to be able to control their browser and rely on the consistent data

presentation throughout the site. E.g. they don’t want new windows popping up unexpectedly and they want to be

able to get back with a “Back”-button to the site they’ve been before: therefore it’s a good practice to never open

links in new browser windows.

1. Don’t make users think

According to Krug’s first law of usability, the web-page should be obvious and self-explanatory. When you’re

creating a site, your job is to get rid of the question marks — the decisions users need to make consciously,

considering pros, cons and alternatives.

If the navigation and site architecture aren’t intuitive, the number of question marks grows and makes it harder

for users to comprehend how the system works and how to get from point A to point B. A clear structure,

moderate visual clues and easily recognizable links can help users to find their path to their aim.

Let’s take a look at an example. Beyondis.co.uk claims to be “beyond channels, beyond products, beyond

distribution”. What does it mean? Since users tend to explore web-sites according to the “F”-pattern, these three

statements would be the first elements users will see on the page once it is loaded.

Although the design itself is simple and intuitive, to understand what the page is about the user needs to search

for the answer. This is what an unnecessary question mark is. It’s designer’s task to make sure that the number of

question marks is close to 0. The visual explanation is placed on the right hand side. Just exchanging both blocks

would increase usability.

ExpressionEngine uses the very same structure like Beyondis, but avoids unnecessary question marks.

Furthermore, the slogan becomes functional as users are provided with options to try the service and download

the free version.

By reducing cognitive load you make it easier for visitors to grasp the idea behind the system. Once you’ve

achieved this, you can communicate why the system is useful and how users can benefit from it. People won’t

use your web site if they can’t find their way around it.

2. Don’t squander users’ patience

In every project when you are going to offer your visitors some service or tool, try to keep your user requirements

minimal. The less action is required from users to test a service, the more likely a random visitor is to actually try

it out. First-time visitors are willing to play with the service, not filling long web forms for an account they might


24.03.2008 10:28:28 PMopera:8

never use in the future. Let users explore the site and discover your services without forcing them into sharing

private data. It’s not reasonable to force users to enter an email address to test the feature.

As Ryan Singer — the developer of the 37Signals team — states, users would probably be eager to provide an

email address if they were asked for it after they’d seen the feature work, so they had some idea of what they

were going to get in return.

Stikkit is a perfect example for a user-friendly service which requires almost nothing from the visitor which is

unobtrusive and comforting. And that’s what you want your users to feel on your web site.

Apparently, Mite requires more. However the registration can be done in less than 30 seconds — as the form has

horizontal orientation, the user doesn’t even need to scroll the page.

Ideally remove all barriers, don’t require subscriptions or registrations first. A user registration alone is enough

of an impediment to user navigation to cut down on incoming traffic.

3. Manage to focus users’ attention

As web-sites provide both static and dynamic content, some aspects of the user interface attract attention more

than others do. Obviously, images are more eye-catching than the text — just as the sentences marked as bold are

more attractive than plain text.

The human eye is a highly non-linear device, and web-users can instantly recognize edges, patterns and motions.

This is why video-based advertisements are extremely annoying and distracting, but from the marketing

perspective they perfectly do the job of capturing users’ attention.

Humanized.com perfectly uses the principle of focus. The only element which is directly visible to the users is

the word “free” which works attractive and appealing, but still calm and purely informative. Subtle hints provide

users with enough information of how to find more about the “free” product.

Focusing users’ attention to specific areas of the site with a moderate use of visual elements can help your

visitors to get from point A to point B without thinking of how it actually is supposed to be done. The less

question marks visitors have, the better sense of orientation they have and the more trust they can develop

towards the company the site represents. In other words: the less thinking needs to happen behind the scenes, the

better is the user experience which is the aim of usability in the first place.

4. Strive for feature exposure

Modern web designs are usually criticized due to their approach of guiding users with visually appealing 1-2-3-

done-steps, large buttons with visual effects etc. But from the design perspective these elements actually aren’t a

bad thing. On the contrary, such guidelines are extremely effective as they lead the visitors through the site

content in a very simple and user-friendly way.

Dibusoft.com combines visual appeal with clear site structure. The site has 9 main navigation options which are

visible at the first glance. The choice of colors might be too light, though.

Letting the user see clearly what functions are available is a fundamental principle of successful user interface

design. It doesn’t really matter how this is achieved. What matters is that the content is well-understood and

visitors feel comfortable with the way they interact with the system.

5. Make use of effective writing


24.03.2008 10:28:28 PMopera:8

As the Web is different from print, it’s necessary to adjust the writing style to users’ preferences and browsing

habits. Promotional writing won’t be read. Long text blocks without images and keywords marked in bold or

italics will be skipped. Exaggerated language will be ignored.

Talk business. Avoid cute or clever names, marketing-induced names, company-specific names, and unfamiliar

technical names. For instance, if you describe a service and want users to create an account, “sign up” is better

than “start now!” which is again better than “explore our services”.

Eleven2.com gets directly to the point. No cute words, no exaggerated statements. Instead a price: just what

visitors are looking for.

An optimal solution for effective writing is to

use short and concise phrases (come to the point as quickly as possible),

use scannable layout (categorize the content, use multiple heading levels, use visual elements and bulleted lists

which break the flow of uniform text blocks),

use plain and objective language (a promotion doesn’t need to sound like advertisement; give your users some

reasonable and objective reason why they should use your service or stay on your web-site)

6. Strive for simplicity

The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy

the design; furthermore, in most cases they are looking for the information despite the design. Strive for

simplicity instead of complexity.

Crcbus provides visitors with a clean and simple design. You may have no idea what the site is about as it is in

Italian, however you can directly recognize the navigation, header, content area and the footer. Notice how even

icons manage to communicate the information clearly. Once the icons are hovered, additional information is

provided.

From the visitors’ point of view, the best site design is a pure text, without any advertisements or further content

blocks matching exactly the query visitors used or the content they’ve been looking for. This is one of the

reasons why a user-friendly print-version of web pages is essential for good user experience.

Finch clearly presents the information about the site and gives visitors a choice of options without overcrowding

them with unnecessary content.

7. Don’t be afraid of the white space

Actually it’s really hard to overestimate the importance of white space. Not only does it help to reduce the

cognitive load for the visitors, but it makes it possible to perceive the information presented on the screen. When

a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the

content area into digestible pieces of information.

Complex structures are harder to read, scan, analyze and work with. If you have the choice between separating

two design segments by a visible line or by some whitespace, it’s usually better to use the whitespace solution.

Hierarchical structures reduce complexity (Simon’s Law): the better you manage to provide users with a sense of

visual hierarchy, the easier your content will be to perceive.


24.03.2008 10:28:28 PMopera:8

White space is good. Cameron.io uses white space as a primary design element. The result is a well-scannable

layout which gives the content a dominating position it deserves.

8. Communicate effectively with a “visible language”

In his papers on effective visual communication, Aaron Marcus states three fundamental principles involved in

the use of the so-called “visible language” — the content users see on a screen.

Organize: provide the user with a clear and consistent conceptual structure. Consistency, screen layout,

relationships and navigability are important concepts of organization. The same conventions and rules should be

applied to all elements.

Economize: do the most with the least amount of cues and visual elements. Four major points to be considered:

simplicity, clarity, distinctiveness, and emphasis. Simplicity includes only the elements that are most important

for communication. Clarity: all components should be designed so their meaning is not ambiguous.

Distinctiveness: the important properties of the necessary elements should be distinguishable. Emphasis: the

most important elements should be easily perceived.

Communicate: match the presentation to the capabilities of the user. The user interface must keep in balance

legibility, readability, typography, symbolism, multiple views, and color or texture in order to communicate

successfully. Use max. 3 typefaces in a maximum of 3 point sizes — a maximum of 18 words or 50-80 characters

per line of text.

9. Conventions are our friends

Conventional design of site elements doesn’t result in a boring web site. In fact, conventions are very useful as

they reduce the learning curve, the need to figure out how things work. For instance, it would be a usability

nightmare if all web-sites had different visual presentation of RSS-feeds. That’s not that different from our

regular life where we tend to get used to basic principles of how we organize data (folders) or do shopping

(placement of products).

With conventions you can gain users’ confidence, trust, reliability and prove your credibility. Follow users’

expectations — understand what they’re expecting from a site navigation, text structure, search placement etc.

(see Nielsen’s Usability Alertbox for more information)

BabelFish in use: Amazon.com in Russian.

A typical example from usability sessions is to translate the page in Japanese (assuming your web users don’t

know Japanese, e.g. with Babelfish) and provide your usability testers with a task to find something in the page

of different language. If conventions are well-applied, users will be able to achieve a not-too-specific objective,

even if they can’t understand a word of it.

Steve Krug suggests that it’s better to innovate only when you know you really have a better idea, but take

advantages of conventions when you don’t.

10. Test early, test often

This so-called TETO-principle should be applied to every web design project as usability tests often provide

crucial insights into significant problems and issues related to a given layout.

Test not too late, not too little and not for the wrong reasons. In the latter case it’s necessary to understand that

most design decisions are local; that means that you can’t universally answer whether some layout is better than

the other one as you need to analyze it from a very specific point of view (considering requirements,

stakeholders, budget etc.).


24.03.2008 10:28:28 PMopera:8

Some important points to keep in mind:

according to Steve Krug, testing one user is 100% better than testing none and testing one user early in the

project is better than testing 50 near the end. Accoring to Boehm’s first law, errors are most frequent during

requirements and design activities and are the more expensive the later they are removed.

testing is an iterative process. That means that you design something, test it, fix it and then test it again. There

might be problems which haven’t been found during the first round as users were practically blocked by other

problems.

usability tests always produce useful results. Either you’ll be pointed to the problems you have or you’ll be

pointed to the absence of major design flaws which is in both cases a useful insight for your project.

according to Weinberg’s law, a developer is unsuited to test his or her code. This holds for designers as well.

After you’ve worked on a site for few weeks, you can’t observe it from a fresh perspective anymore. You know

how it is built and therefore you know exactly how it works — you have the wisdom independent testers and

visitors of your site wouldn’t have.

Bottom line: if you want a great site, you’ve got to test.

References

Designing Effective User Interfaces by Suzanne Martin

Summary on Web Design

UID presentation (Flash)

Research-Based Web Design & Usability Guidelines

“The psychology of computer programming” by Gerald Weinberg

“Designing Web Usability” by Jakob Nielsen [JN / DWU]

“Prioritizing Web Usability” by Jakob Nielsen

“Don’t Make Me Think” by Steve Krug

“Usability for the Web: Designing Web Sites that Work” by Tom Brinck, Darren Gergle, Scott Wood

A Summary of Principles for User-Interface Design

Published in How-To, January 31st, 2008

Tags: design, development, guidelines, interface, usability

Advertisement

Comments

Trackbacks/Pings

1.

Grady (January 31st, 2008, 8:23 am)

Great Article!

Comment

2.

Daniel (January 31st, 2008, 8:37 am)

10. Test early, test often

This has to be the best tip!


24.03.2008 10:28:28 PMopera:8

Thank you for this smashing-roundup!

Comment

3.

Raj from BlogHash.com (January 31st, 2008, 8:42 am)

Wonderful. Bookmarked to use it for my next website design.

Comment

4.

Matthew J (January 31st, 2008, 8:45 am)

Super article. I really think that we as web developers must focus on keeping things simple. Remember the

acronym KISS (Keep It Simple Stupid)!

Comment

5.

Jeff (January 31st, 2008, 8:51 am)

A bit unrelated, but it’s a shame Stikkit is Link [www.kickflop.net].

Comment

6.

Barend (January 31st, 2008, 8:55 am)

Nice Article! Love the usability stuff!

Comment

7.

Chris (January 31st, 2008, 9:00 am)

Love the article, hits on some very important parts. Made may sit back and think of the things i’ve done in the

past and how it affects things i do now. These type of articles makes a developer rethink the whole process of

building a website. Which i think keeps your mind open to new methods.

Comment

8.

Creativepayne (January 31st, 2008, 9:04 am)

Good advise. It’s always good to take a step back from design, personal taste etc to make sure that it is easy to

use for the audience. My toughest critic is my dad ie someone who is not all that web saavy. But a lot of the time

this is our audience, someone who is not all that good with computers.

Thanks for the article

Comment

9.

mcm69 (January 31st, 2008, 9:10 am)


24.03.2008 10:28:28 PMopera:8

I’m still amazed I wasn’t reading your website before. Thanks a lot.

Comment

10.

deniar (January 31st, 2008, 9:29 am)

Wow nice article. I didn’t think so much about these. Thanks for the article

Comment

11.

Thomassl (January 31st, 2008, 9:41 am)

Really helpful article.

Comment

12.

Juanma (January 31st, 2008, 10:18 am)

GREAT STUFF.

This is definitively going on my Link [www.ttthings.com] post.

Comment

13.

theSupermarket (January 31st, 2008, 10:19 am)

This article is frustrating for 10 + 1 reasons almost:

-1 “Usability and the utility, not the design, determine the success or failure of a web-site.”

Usability and the utility are the design. If by design you mean decoration, that too has a rich history filled with

meaning.

0 How do users think?

That’s like asking “How do people think?”. they think in all kinds of ways, rational, irrational, quickly, slowly,

etc. There is no point in asking this question because the answers are infinite. I agree with this statement “users

follow their intuition”, which is totally unpredictable.

1 “Don’t make users think”

That’s right people. Strive for the status quo and the familiar. Do what has been done before and make sure

people are comfortable. Wear your khakis and polo shirts.

Making something “obvious and self-explanatory” doesn’t hinge on simplicity or how much someone has to

‘think’.

2 “Don’t squander users’ patience”

Okay. How will you know what will make them impatient?

3 “Manage to focus users’ attention”

This is all adding up to a Target commercial.


24.03.2008 10:28:28 PMopera:8

4 “Strive for feature exposure”

What?

5 “Make use of effective writing”

Even if it us unnecessary. Just put it in somewhere.

6 “Strive for simplicity”

Strive for whatever you want. Do something crazy. Do something dumb. Do something elegant. Do something

messy. They are all valuable.

7 “Don’t be afraid of the white space”

Don’t be afraid to dump everything you own into a pile on your living-room floor. It will probably be more

interesting than lots of white space.

8 “Communicate effectively with a “visible language” ”

9 “Conventions are our friends”

Here, Here, for mediocrity!

10 “Test early, test often”

Just wing it. It will force you to be creative and maybe do something you’ve never done before.

Comment

14.

ak (January 31st, 2008, 10:52 am)

@theSupermarket: you have no idea what you are talking about.

Comment

15.

WebGuyGary (January 31st, 2008, 10:59 am)

The above poster proves the point that you can never make EVERYONE happy….but atleast they were able to

get out their frustrations by posting that lengthy list.

Hope you feel better now.

:)

Comment

16.

Ignacio (January 31st, 2008, 11:28 am)

I agree with Thomassl

Comment

17.

Therapix (January 31st, 2008, 11:30 am)


24.03.2008 10:28:28 PMopera:8

Great article even if the first part was featured in another article (that I actually printed in COLOR with my

expensive HP printer, but I don’t care, totally worth it).

Comment

18.

Fazai38 (January 31st, 2008, 11:32 am)

Amazing.. !! this is a real good reference for my upcoming projects !

Comment

19.

Artofid (January 31st, 2008, 11:39 am)

I really love this stuff :)

Comment

20.

moritzpeuser (January 31st, 2008, 11:48 am)

Thank you for this post article!

It’s really useful for new webdesigners!

Comment

21.

moritzpeuser (January 31st, 2008, 11:49 am)

Thank you for this article!

It’s really useful for new webdesigners!

Comment

22.

BeroFX (January 31st, 2008, 12:07 pm)

Great stuff, keep on the good work! :)

Comment

23.

Erika (January 31st, 2008, 12:27 pm)

If you would like an excellent example for #6, you should use kokokaka.com as opposed to the crcbus…

especially since crcbus ripped off kokokaka, and kokokaka documented it in the “style of the day” section of

their site. :)

Comment

24.

Aaron Riddle (January 31st, 2008, 12:29 pm)


24.03.2008 10:28:28 PMopera:8

Wonderful article…best one I have read this week (and I read a lot of them). Thank you for sharing such great

information.

Comment

25.

Erika (January 31st, 2008, 12:29 pm)

If you need a good sample website for #6, you should use kokokaka.com as opposed to crcbus… especially

considering when crcbus ripped off kokokaka, they documented it in their ’style of the day’ area. :)

Comment

26.

Stefan (January 31st, 2008, 12:58 pm)

I don’t agree with you in that first point. Sometimes users have to think about websites. It’s about content that

matters. And about development of our work. There has been a basic article by Link [www.devlounge.net]. I

really didn’t like it when i read it the first time. But actually i do think that we have to think about it. Maybe it’s

up for transcending designs? How can we bring the web one step further without changing ourselves and our

work?

Stefan

Comment

27.

Igor Jovic (January 31st, 2008, 1:36 pm)

This is what I call a Qualitative Post .

Great Job!

Comment

28.

Marcio Okabe (January 31st, 2008, 2:28 pm)

Very good article! All communication professionals should read it.

Comment

29.

Matty (January 31st, 2008, 3:00 pm)

Outstanding article!

I try following these principles in web design and they seem to work great.

I tried to making the following website Link [], applying these principles. I don’t know what to make of it,

feedback would be great :)


24.03.2008 10:28:28 PMopera:8

I don’t know what to make of it :S

Comment

30.

Mat (January 31st, 2008, 3:01 pm)

Great article except I read #7 (don’t be afraid of whitespace) and I wonder whatever happened to the nice flow

that SM used to be. The damn column is so narrow now that there’s either too much whitespace (on the right) or

not enough (on the left).

Comment

31.

shirley (January 31st, 2008, 3:34 pm)

I’m sorry, I couldn’t possibly follow any web design suggestions from a site as poorly designed as this one. One

narrow column and a page full of ads? You’ve got to be kidding me!

Comment

32.

Paul (January 31st, 2008, 3:36 pm)

Surely, usability is objective. What works for some people might not for others..and unless your data sample is

huge, you cant make statements as such. That said, the trends above are a damn good basis to work from.

Comment

33.

sumeet wadhwa (January 31st, 2008, 3:54 pm)

nice!!

Comment

34.

marko (January 31st, 2008, 4:06 pm)

Great, really great,

I’m especially amazed with the “don’t be afraid of the white space-part”; in the 11th and 12th century architects

and artist put many paintings and sculptures in the interior of churches, not only to teach the illiterate folk, but

also to avert the “HORROR VACUUI”, the fear of empty space, empty walls…. many centuries later Malevich

did the complete opposite. The white square on white.

It’s obvious this article is made by a proffesional!!!

Marko, BA in arts+web designer

Croatia

Comment

35.

chris (January 31st, 2008, 4:35 pm)


24.03.2008 10:28:28 PMopera:8

nice article, does anyone know the font used for the finch logo fresh creative? Its pretty sweet. I wanna buy it.

Comment

36.

Norbert (January 31st, 2008, 4:36 pm)

“Don’t Make Me Think” by Steve Krug is a great book. Worth reading!

Comment

37.

Braintrove.com (January 31st, 2008, 4:42 pm)

Great resource! Really useful stuff.

Comment

38.

Steven Snell (January 31st, 2008, 4:45 pm)

I like the advice to strive for simplicity. I enjoy visiting sites that don’t over complicate things. Thanks for

another great article.

Comment

39.

extreme webmaster (January 31st, 2008, 4:54 pm)

Useful stuff. Applicable in all areas where there is any human-machine interaction involved. And Steve Krug’s

book rules. He is a master - he explained these concepts in a way so simple, entertaining and clear, that his book

is really a classic.

Comment

40.

Edi (January 31st, 2008, 5:00 pm)

10 point you have to follow

Comment

41.

Tom (January 31st, 2008, 8:41 pm)

a great and comprehensive article, I’ve to keep in mind with my further designs

Comment

42.

.NET Randz (January 31st, 2008, 10:49 pm)

Great article. Thanks for sharing. I have been a web developer for quite some time and ideas presented here are

very much welcome.

Comment

43.


24.03.2008 10:28:28 PMopera:8

Jan (January 31st, 2008, 11:11 pm)

Nice Article!.. i really do find some sites that looks nice and eyecandies but its usability specially rule no.”1″..

many of them leaves questions like “what the hell does that mean?” and “what’s this site really do?”, this article

is really a big help for me to understand more about usability. Thanks!

Comment

44.

bakazero (February 1st, 2008, 12:39 am)

Yes, the people were impatient…

When see a site with great content, they wants to get a lot of information site fast…

So, it’s good to structured the navigation to help the people…

This is really great explanation about web-design principle.

Comment

45.

Shycon (February 1st, 2008, 1:05 am)

Great, all-around tips for designers!

Comment

46.

Micah (February 1st, 2008, 1:08 am)

The 4th bullet under the “How do users think?” headline reads:

“As soon as they find a link that seems like it might lead to the goal, there is a very good change that it will be

immediately clicked.”

Is it me or doesn’t it seem it should read: “… there is a very good chance that it will be immediately clicked.” ???

Great article though, Just wish authors would catch this kind of thing, it’s starting to get old.

– Micah

Comment

47.

Rod (February 1st, 2008, 1:28 am)

err… ok, so.. how you can have a note like this,, and not a “share it” link?.. i want to send this note to someone…

didnt find the “share it” feature…..??!!!!

this is a “do what i say must not what i do” sample =P

Comment

48.

Spyros Papaspyropoulos (February 1st, 2008, 1:38 am)


24.03.2008 10:28:28 PMopera:8

Great article! Some things written in it had never crossed my mind.

Many thanks for this!

Comment

49.

Abhijit (February 1st, 2008, 1:48 am)

I mean its simply great… really loved the article..

Comment

50.

Jseen (February 1st, 2008, 1:51 am)

Superb Article.

Provides great insights into a subject which is usually not given much consideration.

Comment

51.

Jim (February 1st, 2008, 1:51 am)

Good points! I’ve have a look to my site from this perspective! Thx

Comment

52.

Claire (February 1st, 2008, 1:52 am)

Good work! Interesting and complete.

Comment

53.

Felix (February 1st, 2008, 2:02 am)

I definetly will save this for future reference. Great writing guys! Thanks.

Comment

54.

郑永挺 (February 1st, 2008, 2:08 am)

cool work! i enjoy it!

Comment

55.

Bughy (February 1st, 2008, 2:11 am)

Awesome article! Comes right when i need it the most. Thanks SM!

Comment

56.

ronnie (February 1st, 2008, 2:32 am)


24.03.2008 10:28:28 PMopera:8

Great post, many useful tips in here.

Comment

57.

Doi Lei (February 1st, 2008, 2:45 am)

Beautiful stuff. Your articles are all starry in my Google Reader ;)

Comment

58.

Richard Francis Kay (February 1st, 2008, 3:19 am)

Good to point this out! Especially ”cos it’s tempting to create websites “flooded” by design. The websites

nowadays are really appealing, but they lean more towards an experience. And that’s not the main point, if you

are searching/browsing. Websites should be serving the main goal: giving information. Design shouldn’t cover it

up. And therefore should be used effectively - usability and focus are key - design is in a supporting role

(depending ofcourse - or just only make a sitemap without any design - just fonts - or is that design too?) :-P

Comment

59.

Leo (February 1st, 2008, 3:35 am)

I like this article, some very valid pointers, which, if followed can result in a well ‘designed’ project.

I also like the Supermarket’s comments from a ‘creative’ point of view….a messy unpredictable palette of ideas

can always be good, to push the boundaries - but this articles lays foundations to ensure that however creative

you feel, your user’s will still be able to easily use the machine you build.

Comment

60.

tewoos (February 1st, 2008, 3:39 am)

great article for web designers… thanks…

Comment

61.

anielpep (February 1st, 2008, 4:49 am)

Good principles in theory, but in real situations where the customer satisfaction is the goal of the design, some of

this principles are not used.

Comment

62.

Daniel (February 1st, 2008, 4:56 am)

Nice Article. Every web designer/developer must know this.

Comment

63.


24.03.2008 10:28:28 PMopera:8

Michael Hughes (February 1st, 2008, 5:12 am)

“Web users are inpatient and insist on instant gratification. ” Goes along with “Web gurus don’t edit themselves

well.” Unless you meant to say that patients in the hospital want instant gratification while those on outpatient

status are content to wait.

Comment

64.

rich (February 1st, 2008, 5:43 am)

Thanks, the heat maps are really interesting, and useful tip about the F pattern, as for printed stuff a typical scan

is a Z.

Comment

65.

Kary (February 1st, 2008, 7:17 am)

Great post! =]

Comment

66.

ptamaro (February 1st, 2008, 7:50 am)

Another poignant article — thanks! Regarding Principle #1, Steve Krug’s book is fantastic, and I strongly

recommend reading it… Link [www.dontmakemethink.com]

Comment

67.

Mouton (February 1st, 2008, 9:44 am)

Really good article even if some of the points can be discussed… Really good sum-up for great designs!

Comment

68.

syung (February 1st, 2008, 10:31 am)

“f you have the choice between separating two design segments by a visible line or by some whitespace, it’s

usually better to use the whitespace solution”Good article, but I disagree with the above statement. Whitespace

could be used to separate two design segments for sites with minimal content, but for sites with an abundant

amount of content, lines are better because lines are visual cues of separation. Having whitespace to separate

segments is like throwing a pile of clothes in a room. It just looks disorganized. Look at www.nytimes.com Can

you imagine this site without lines?

Comment

69.

PeterMQ (February 1st, 2008, 10:37 am)


24.03.2008 10:28:28 PMopera:8

Great article as always.

Comment

70.

kl3tte (February 1st, 2008, 12:40 pm)

This is a great summery. I also recommend “Designing Web Usability” and “Don’t make me think”. I guess your

post is a great summary of boths books.

Comment

71.

dblr (February 1st, 2008, 1:06 pm)

Always a pleasure to read your articles, thanx for the amazing contributions to the web community.

Comment

72.

Ady (February 1st, 2008, 2:52 pm)

ThanX for this Article … it`s very useful for web designers. I`m new in this area of web design and I had really

need this. Thank YOU Again

Comment

73.

Howleykook (February 1st, 2008, 3:35 pm)

Nice article. Good fundamentals matched with great grafix, who would have thought that could work?

Thanks, bookmarked!

Comment

74.

Bob (February 1st, 2008, 5:29 pm)

Another great article. I wish I could convince all of the departments at my office that insist on being on the

homepage of this.

To add on to this article, there are 5 things that I would consider are essential to a website;

1. Site logo - distinguishing feature across all pages of the site. Seems like a no-brainer, but you’d be suprised

2. Search Function - some users are search heavy, others are scanners. In addition, check your internal search just

as you would with your external search. It will do wonders for your conversion rate.

3. Sections - Permanent navigation that corresponds and links to the main sections of your site. Navigation

should be consistent and prevelent on all pages of your site.

4. Utilities - Utilities are those critical elements to a web site’s functionality that don’t necessarily add to the site’s

content or sections. Examples include sitemap, about us, contact us and help.

5.Home Button and “You are Here” indicators - let the user know where they are in relation to the rest of the site.

If they feel they are getting in over their head they will usually just leave.


24.03.2008 10:28:28 PMopera:8

Good work again,

Bob

Link [www.onehalfamazing.com]

Comment

75.

Leo Klein (February 1st, 2008, 9:56 pm)

Great post. I wish I could brand the points on the behinds of a couple of clients I’ve had.

My only small quibble is with the statement, “the best site design is a pure text”.

This of course is not true and is easy enough to demonstrate. There are design elements that go beyond “pure

text” and people expect and require them. Indeed, it’s be strange if they didn’t.

Comment

76.

Vitaly Friedman & Sven Lennartz (February 2nd, 2008, 3:33 am)

@Leo Klein: it wasn’t meant to sound like this. What it means is that in the best case users who are searching for

information would like to see the contet with exactly the kind of data they’re looking for. Not more, not less. But,

of course, there is no such thing as “best site design” or something similar.

Comment

77.

Jason Reed (February 2nd, 2008, 12:33 pm)

The comments about the white space are a great reference, I don’t think they are used enough. Check out A List

Apart for another good white space article.

Comment

78.

Website Design (February 3rd, 2008, 9:52 am)

I really appreciate the point of keeping things simple. Often clients want to slam as much content as humanly

possible into every space of their pages. This is aggravating and most people do not wish to see this when visiting

a website. Well spaced thoughtful layouts are always the best idea. Make use of your users screen real estate

regardless of what resolution their at. Cluttered websites definitely aid to fickle traffic.

Comment

79.

Sharp (February 3rd, 2008, 2:59 pm)

First of all, the website shouldn’t be displayed in a narrow column. This page layout is awful and makes the

article painful to read…

Comment

80.


24.03.2008 10:28:28 PMopera:8

Ananda Rizki (February 3rd, 2008, 11:52 pm)

your article remembering me with a book with the title “Dont Make me Think!” (author: Steve Kurg)

Comment

81.

rebeka dremelj (February 4th, 2008, 12:08 am)

Good guidelines with great examples! Will sure keep them in mind when designing my next website.

Comment

82.

taxa inmatriculare (February 4th, 2008, 12:51 am)

Great stuff, article #7 sounds very interesting, good work guys!

Comment

83.

Klaus (February 4th, 2008, 2:08 am)

Great! Usability in a Nutshell.

Rock on!

Comment

84.

Owen Cutajar (February 4th, 2008, 7:43 am)

Great post … I love the heat maps!

But when you say “Don’t be afraid of white space” I hope you’re not recommending people use only the left-

most 20% of their page for content .. (bit like this page looks to me at the moment). Can’t you make your main

content area a bit wider?

Comment

85.

Reynder Bruyns (February 4th, 2008, 7:57 am)

The first sentence is a bit off I think. Via good visual design you get good usability.

Comment

86.

Vitaly Friedman & Sven Lennartz (February 4th, 2008, 8:07 am)

@Owen Cutajar: we use a fluid layout. The layout will expand if the window size is bigger. You have the full

freedom to see the site as you wish as it dynamically fits to the size of your browser window.

Comment

87.

Steve (February 4th, 2008, 8:35 am)


24.03.2008 10:28:28 PMopera:8

Quote:

I conducted a survey not so long ago (1500+ respondents) and about 80% said they want external links and

documents (PDF, Word docs) open in a pop-up window, so they don’t go back to a page they were on through 10

“back” clicks.

Should I follow design advise on this page or what my users are asking?

Comment

88.

Angstrom (February 4th, 2008, 10:02 am)

I have to agree that the layout of Smashing seems to be unpleasant now, the right hand column is way too

dominant. It takes at least 50% of the screen at my normal browser window size.

Have you changed layouts?

I am forced to fullsize my browser window up to 1280×1024 before it becomes less unpleasant. At 1024×768 it

must be unbearable.

I am actually considering writing my own custom CSS just so I can look at your site without wincing. I have

already had to adblock your sponsors to try and balance the page up a bit.

Comment

89.

Angstrom (February 4th, 2008, 10:22 am)

Oh man I hate the 50/50 layout of Smashing magazine.

sure I could re-size my browser up to fill my whole screen in an attempt to get the right balance, but that still isn’t

enough. I have to drag the browser window across two screens before the layout looks right. By that I mean , the

right column is between 30% and 25% of the window width. 50% - 45% is ugly as hell.

Please, please, please reduce the width of your right column, it dominates the actual content.

I commented on this earlier but that one vanished .

Comment

90.

gnuys (February 4th, 2008, 4:00 pm)

Good post, but I disagree with “If you have the choice between separating two design segments by a visible line

or by some whitespace, it’s usually better to use the whitespace solution.” A line is a visual cue for separation.

Using whitespace to separate segments with very little content is ok (still better to use a line), but not using a line

to separate segments with abundant amount of content is like looking at a pile of clothes in my room. Can you

imagine nytimes.com without lines?

Comment

91.

gsuez (February 4th, 2008, 8:30 pm)


24.03.2008 10:28:28 PMopera:8

Dont make me think!!!!

this is the great book for a good web design!

very nice summary.

Comment

92.

LiquidGeneration (February 5th, 2008, 12:46 pm)

Regarding comment number 13 and 9 “’Conventions are our friends’

Here, Here, for mediocrity!” Conventions (”a collection of accepted knowledge”), a noun, are not the same thing

as conventional (”unimaginative and conformist”), an adjective. It’s what the conventions are applied to that

dictates whether the end result is mediocrity.

Comment

93.

Tippo (February 5th, 2008, 7:20 pm)

I liked point number 5 and I will have to consider changing one of my sites as a result.

Thanks a lot.

Comment

94.

siddharth from rapfodet (February 6th, 2008, 9:49 am)

Like the first point very much.

User will go to some other site for sure if the interface is not user friendly.

Thanks for the great article buddy.

Comment

95.

chrissy (February 6th, 2008, 10:07 am)

Hehe, I feel like people at my work should read this list over and over again every morning before they start

doing anything! Thanks for gr8 article.

Comment

96.

Indian (February 7th, 2008, 11:08 pm)

This was by far the best article smashing magazine added in 2008, anyways, we also need to think the lives of the

millions of graphic artists who survive because of the web as a medium. What I feel is the new trend is to make

those Graphic artists get out of the web.

CSS started the trend and 3/4th of the people who were doing web sites have gone out of the same because of the

big learning curve…


24.03.2008 10:28:28 PMopera:8

Comment

97.

aryan (February 8th, 2008, 2:05 pm)

awesome article. :)

Comment

98.

David Jacques-Louis (February 9th, 2008, 1:53 pm)

It’s all here, amazing.

Comment

99.

Adriaan Nel (February 11th, 2008, 1:50 am)

Great article, I always try to apply these principles - if only clients always agreed ;)

Comment

100.

Detlev (February 11th, 2008, 2:11 am)

“Don’t make users think”… You guys are dumbasses.

Comment

101.

Sergei Filippov (February 11th, 2008, 2:49 am)

Excellent article as always. =]. Great help.

Comment

102.

pubed (February 11th, 2008, 3:18 am)

Ditto, great tips!

Comment

103.

daniel (February 11th, 2008, 3:51 am)

@Vitaly Friedman & Sven Lennartz

still it doesn’t change the fact that in each window resolution you have the right side of the page full white with

no content

Comment

104.

Acronyms (February 11th, 2008, 3:54 am)


24.03.2008 10:28:28 PMopera:8

Good intro. Would be great to see more detailed article as well.

Comment

105.

Anoop Kumar (February 11th, 2008, 4:10 am)

Really very good article…. going to help me alot…. to make my websites more popular

Thanks

:)

Comment

106.

Sam (February 11th, 2008, 5:48 am)

Thanks this will help me!

Comment

107.

Lynne Foster (February 11th, 2008, 5:57 am)

I love pointseven but I think it’s also the hardest point to stick to!

Comment

108.

Stephane Grenier (February 11th, 2008, 8:04 am)

What I really appreciated is that you used pretty much every technique you talked about in this article. Great

examples!

Comment

109.

Denise (February 11th, 2008, 8:30 am)

You should consider taking your own advice. At 1024×768 the only thing about this article you see on the page

is the headline. Other than that it’s just ads and a serious turn-off. Even at much higher resolutions it just looks

awful and you’re lucky to see the first paragraph. You said you are using a liquid layout but if that’s true then

you certainly aren’t looking at your site in all browsers.

Comment

110.

David Benson (February 11th, 2008, 8:41 am)

Reasonable article, but when I find these articles on these sorts of sites I always ask myself “Why should anyone

listen to advice from a designer who plasters his website with gigantic blinking ads?”

Comment

111.

Tom (February 11th, 2008, 8:52 am)


24.03.2008 10:28:28 PMopera:8

Many of these design ideas target first time users and are quite effective with that audience.

However, if you have a site with regular visitors, oversimplifying the design and having too few options wastes

peoples’ time and annoys them. For regular visitors, feature-rich interfaces and more content is very important

and helpful.

This is one of those cases where you need to consider one’s audience before choosing the design emphasis.

Comment

112.

dolugen (February 11th, 2008, 10:38 am)

thanx for this great article. But I actually think you can omit your beginning google ad sometime

Comment

113.

pixelninja (February 11th, 2008, 10:58 am)

All in all a good article with lots of good info. However, I take exception to the first sentence, “Usability and the

utility, not the visual design, determine the success or failure of a web-site.”

A study done by Gitte Lindgaard of Carleton University shows that Web users form first impressions of web

pages in as little as 50 milliseconds (1/20th of a second). Through the “halo effect”, first impressions can color

subsequent judgments of perceived credibility, usability, and ultimately influence our purchasing decisions.

I’m not arguing that usability is not important. It is. But so is the visual design of your site. You may have the

best usability in the web, but if your site looks like it was designed by a 6th grader using FrontPage, then your

credibility is going to be shot from the get-go.

Comment

114.

VW (February 11th, 2008, 11:00 am)

well your right about content i dont like your site at all but the content keept me here.

Comment

115.

GuM (February 11th, 2008, 11:03 am)

This article features some great advice. However, I do have to agree with some previous posters about the layout

of THIS site. My first impression was not the best: I’m finding it very hard to read this article on my 1600 x 1050

monitor: the text-rows are far too long. I much prefer a fixed column width (thats why print media use multiple

columns). Of course I could resize the browser, but that surely isn’t very user friendly…?

Comment

116.

Rob (February 11th, 2008, 11:06 am)


24.03.2008 10:28:28 PMopera:8

They should have used a bullet list instead of a number list if items listed have equal value, or are not ordered by

importance.

Comment

117.

Joe Smith (February 11th, 2008, 12:19 pm)

I appreciate the eye path images. That’s a really interesting usability issue to consider.

Comment

118.

~Gildas (February 11th, 2008, 1:04 pm)

What blinking ads?

Comment

119.

Ben (February 11th, 2008, 5:50 pm)

This is a joke right?

Comment

120.

Dodgyc (February 11th, 2008, 9:56 pm)

Excellent article. Now if only your website could follow most of the Principles. What is that crap cluttering the

right hand side of the page?

Even on my Widescreen monitor it’s a mess. I really don’t see the need of a list of the top 50 Popular posts, it’s

just clutter.

Thankfully I see no ads around because of some blockers.

Comment

121.

Steve (February 11th, 2008, 11:15 pm)

Interesting ideas but, ironically, I found your layout and presentation made me want to read less not more!

Comment

122.

Christophe (February 12th, 2008, 1:43 am)

Well Steve, I was thinking the exact same here… :-)

Comment

123.

John (February 12th, 2008, 3:30 am)

Kind of useless I would say, on EVERY point you can find NUMEROUS and VERY SUCCESSFUL example

for doing exactly the opposite, actually theSupermarket is very very right about what he said. The most absurd


24.03.2008 10:28:28 PMopera:8

think is dividing content and design. First, the content don’t depend from the designer - if the client say “ok, I

will put only this and this” you can’t do much in that direction. Second, and most important, please, write it

somewhere: web design is about putting CONTENT online. Your content could be a single image, but this is

your content. And it’s your job to design the visualization of THAT content instead of saying “crap, I need more

content, I’ve read somewhere that content is more important than the design”. Third, the designing the content

appearance is the differences between good and mediocre designers. Fourth, there are DIFFERENT type of web

sites with DIFFERENT goals. And Fifth - THERE IS NO A BRILLIANT IDEA IN THE HUMAN HISTORY

THAT COMES FROM FOLLOWING THE RULES.

In brief - crappy article for mediocre designers

Comment

124.

Deb Web Designer (February 12th, 2008, 5:11 am)

Hi

Fantastic post, I really enjoy it, one my friend said to read and I am so happy to read it specially this section -

”How do users think?”

Thanks

Deb

Comment

125.

Benny (February 12th, 2008, 10:14 am)

A very thoughtful and nicely presented article. Thank you.

Comment

126.

Rob @ CSSnewbie (February 12th, 2008, 12:25 pm)

This is a fantastic article! Content like this is what has finally convinced me to subscribe to Smashing Magazine

feed after more than a year of occasional readership. Great work!

Comment

127.

Scott (February 12th, 2008, 1:45 pm)

What the hell is the product in #3? Lack of questions marks, you must be joking!!

Comment

128.

NJ WebGuy (February 12th, 2008, 9:23 pm)

Helpful words, you make it sound easier than it is in practice.

Comment

129.


24.03.2008 10:28:28 PMopera:8

Francois Harris (February 13th, 2008, 9:44 am)

Nice points, all the things we tend to forget over time….

Comment

130.

jonathan (February 13th, 2008, 1:44 pm)

Good article I completely agree with the principal that useabilty not visual design makes a website. Combing

both is an obvious bonus. For example these Link [www.uniquews.com]follow the same pricipals. great article.

Comment

131.

web design cheltenham (February 13th, 2008, 1:48 pm)

Good article although most great designers should design from the aspect of the end user. One of my biggest

greivances with web sites are the fact that finding a companies contact details can be a real pain,

Comment

132.

Lancashire web design (February 14th, 2008, 5:34 am)

Glad to see The Supermarket website places such a huge emphasis on usability…

Good primer, thanks.

Comment

133.

Jack (February 15th, 2008, 11:12 am)

An article from which many could learn.

Comment

134.

Peter (February 16th, 2008, 6:50 pm)

Enjoyed reading through this article. Good job.

Comment

135.

loretta (February 17th, 2008, 8:21 am)

i would add another point here - links to external sites should open in new window

Comment

136.

Michael Ott (February 18th, 2008, 7:38 pm)

Kudos on you for a fantastic article. I have to disagree on one thing though:


24.03.2008 10:28:28 PMopera:8

“Once the icons are hovered, additional information is provided.”

‘Mystery meat’ navigation is never excusable, and I find it quite surprising you would ‘endorse’ it. Otherwise,

nice work.

Comment

137.

Snowflake (February 21st, 2008, 3:34 am)

wow…thanx a lot

Comment

138.

Junni (February 21st, 2008, 5:11 am)

Some amazing tips! Very nice article…one I will send immediatly to my gfx-co-worker.

Comment

139.

sleahcim (February 21st, 2008, 3:25 pm)

Hey theSupermarket,

It’s obvious you design for yourself. Your satisfaction; your ego; your creative urges.

If you have spent any time with actual users you would endorse these “rules” (oh, no, not that word) and help

your audience and client to have a good experience while visiting one of your sites.

Nah, you should keep doing what you’re doing and piss off your users (see Web Credibility Report by B.J. Fogg

at Stanford University).

Comment

140.

Abi (February 22nd, 2008, 10:57 pm)

I really like the article. Thanks a lot!

Comment

141.

mohammad (February 24th, 2008, 12:31 am)

interesting and useful

Comment

142.

Marvin Dreyer (February 26th, 2008, 8:43 am)


24.03.2008 10:28:28 PMopera:8

Hi Great and intresting article.

Comment

143.

Keith Johnson (February 29th, 2008, 9:02 am)

OUTSTANDING article. Indeed, the user wants the best possible experience, so we must be careful, as

webmasters, to provide them with an interface that is not overloaded with junk that might spoil their visit. Good

observations here! Regards, Keith Johnson, Webmaster “FreeMathRescue.com”.

Comment

144.

gdp2 (March 6th, 2008, 9:37 am)

nice!!Helped Gett the teacher of my back its great!!

Comment

145.

Miranda Larsen (March 10th, 2008, 5:59 am)

Thanks for posting such valuable information. We talk about these same ideas in our blog, check it out: Link

[www.ardis-creative.com]

Comment

146.

sandie sørensen (March 11th, 2008, 12:31 am)

Ia have to disagree a little bit with this statement… Sometimes- if the user is browsing through a large website,

they tend to like it if a link to an external website opens in a new window. In this case it will be possible to

browse around on the new website and close it if the user didn’t find what he or she was looking for. And they

are happy that the original webpage isn’t gone…

Am I right?

Comment

147.

Amber Gordon (March 16th, 2008, 11:14 am)

Awesome article. I’ve learned a lot.

Comment

148.

bLaze (March 17th, 2008, 2:36 am)

this is cool guys!

Comment

149.

webdesignings (March 20th, 2008, 1:37 am)


24.03.2008 10:28:28 PMopera:8

i’d like the 3rd point that Manage to focus users’ attention. its good blog to know more on SEO marketing. i

would like to suggest to create some more points…

Good Luck Iam impressed good work

Comment

150.

just another guy (March 22nd, 2008, 5:34 pm)

how can one possibily consider the article crediable from a page designed this poorly… I guess it’s a matter of do

what I say not what I do….

10 principles of effective web design _ how-to _ smashing magazine.pdf

Documents

web users

users dont

users habits

users expectations

web arent

principles of effective

profitoriented web design

website andsearch