Home Graphics Inspiration Coding Design Email Newsletter Search

Shop Wallpapers, Icons Photos, Show cases CSS, JS, WordPress PSD, Fonts, Freebies mail@example.com Go! Go!

Magazine RSS Feed

206,572 readers
Follow us on Twitter
257,315 followers

Advertisement Advertise with us!

Smashing Magazine Smashing Network

10 Principles Of Effective Web

Design MailC himp E-Mail Marketing PSD to HTML Services
By Vitaly Friedman January 31st, 2008 Design 284 Comments Publishing Policy

Advertisement

PSD to HTML C reate free stunning flash websites!

FlippingBook Photographer A new service from Adobe.

Usability and the utility, not the visual design, determine the success or failure of a
w eb-site. Since the visitor of the page is the only person w ho clicks the mouse and
therefore decides everything, user-centric design has become a standard approach
for successful and profit-oriented w eb design. After all, if users can’t use a feature, it
might as w ell not exist.
Newsletter Design & C oding Online Project Management
We aren’t going to discuss the implementation details (e.g. w here the search box
should be placed) as it has already been done in a number of articles; instead w e
focus on the main principles, heuristics and approaches for effective web design
— approaches w hich, used properly, can lead to more sophisticated design decisions
and simplify the process of perceiving presented information.

Please notice that

White-Label SEO Services Premium Blog Themes
you might be interested in the usability-related articles about 10 Usability
Nightmares and 30 Usability Issues w e’ve published before,
w e’ll cover more principles of effective design in our follow ing posts. Therefore Network Jobs
you might w ant to subscribe to our RSS-feed.

This article has been translated to Hebrew . Smashing Network

[By the w ay, did you know w e have a free Email New sletter? Subscribe now and get
fresh short tips and tricks in your inbox!] Useful Adobe Photoshop Techniques, Tutorials and Tools
smashingmagazine.com

Blockquote Bulge
Principles Of Effective Web Design css-tricks.com

In order to use the principles properly w e first need to understand how users Free 960.GS CSS Photography Template and Tutorial
interact w ith w eb-sites, how they think and w hat are the basic patterns of users’ designshack.co.uk
behavior.
Quitting Your Job to Become a Freelancer
freelancefolder.com

How do users think? Beyond Visible: 100 Years Of Infrared Photographs

noupe.com
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 50 Awesome Speed Paintings for Your Inspiration
link that catches their interest or vaguely resembles the thing they’re looking for. In onextrapixel.com
fact, there are large parts of the page they don’t even look at.

converted by Web2PDFConvert.com
 Accessibility Principles for the Modern Designer
Most users search for something interesting (or useful) and clickable; as soon as speckyboy.com
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. 10 Professional WordPress Themes for Business Websites
webdesignledger.com
Users appreciate quality and credibility. If a page provides users w ith high-
quality content, they are w illing to compromise the content w ith
Add this widget to your site!
advertisements and the design of the site. This is the reason w hy not-that-
w ell-designed w eb-sites w ith high-quality content gain a lot of traffic over
years. Content is more important than the design w hich supports it. Advertisement

Users don’t read, they scan. Analyzing a w eb-page, users search for some Interact
fixed points or anchors w hich w ould guide them through the content of the
About
page.
C ontact

Regular Authors

Become an Author

Publishing Policy

List of Tags

Smashing Jobs

Smashing Newsletter

Smashing Network

Smashing Shop

Follow us on Twitter

Subscribe to RSS-Feed

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

Web users are impatient and insist on instant gratification. Very simple Cartoons
principle: If a w eb-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 Twitter
the cognitive load and the less intuitive is the navigation, the more w illing are
users to leave the w eb-site and search for alternatives. [JN / DW U] Follow Us

Users don’t make optimal choices. Users don’t search for the quickest w ay to
find the information they’re looking for. Neither do they scan w eb-page in a
@trishawebs it's our
linear fashion, going sequentially from one site section to another one. Instead
pleasure! Thanks for
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
following us, Trisha!
about an hour ago
w ill be immediately clicked. Optimizing is hard, and it takes a long time.
Satisficing is more efficient. [video]

New on SmashingMag:
Useful Adobe
Photoshop Techniques,
Tutorials and Tools -
http://su.pr/2lxbW8
More cartoons (please RT)
about an hour ago

Advertisement
Join in: Group Design
Project: List with
Functions -
http://bit.ly/a84b8L
about an hour ago

Entitifier: paste some

HTML and it will escape
nasty characters that
should be entities -
http://bit.ly/cq2N5B
about 2 hours ago

@Murenamax thank you

:-)
about 3 hours ago
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.

converted by Web2PDFConvert.com
 Users follow their intuition. In most cases users muddle through instead of What are your most
reading the information a designer has provided. According to Steve Krug, the useful and valuable
basic reason for that is that users don’t care. “If w e find something that w orks, Popular 2010 sites with strong focus
w e stick to it. It doesn’t matter to us if w e understand how things w ork, as on usability and user
long as w e can use them. If your audience is going to act like you’re designing Web Design Trends 2010 experience? #smux
billboard, then design great billboards.” 100 iPhone Wallpapers about 3 hours ago
Users want to have control. Users w ant to be able to control their brow ser
100 Wordpress Themes 2010
and rely on the consistent data presentation throughout the site. E.g. they
100 Wordpress Themes 2009
don’t w ant new w indow s popping up unexpectedly and they w ant to be able UX Myths: debunking
to get back w ith a “Back”-button to the site they’ve been before: therefore it’s 45 Useful C hecklists user experience
a good practice to never open links in new browser windows. misconceptions -
30 Free High-Quality Fonts
http://uxmyths.com
More Free High-Quality Fonts
about 3 hours ago

1. Don’t make users think Printable PDF Templates

iPhone App Design

Facebook Fan Page Design

Are CSS Frameworks
According to Krug’s first law of usability, the w eb-page should be obvious and self-
Evil? -
explanatory. W hen you’re creating a site, your job is to get rid of the question marks Beauty-Retouching Tutorials
— the decisions users need to make consciously, considering pros, cons and
http://bit.ly/bOWN2x -
alternatives.
Vintage & Retro Tutorials Well, are they? #smcss
Photoshop Time-Savers about 3 hours ago
If the navigation and site architecture aren’t intuitive, the number of question marks
grow s and makes it harder for users to comprehend how the system w orks and how Bizarre and Funny Websites
to get from point A to point B. A clear structure, moderate visual clues and easily Useful Usability Findings @iA nice one, Oliver,
recognizable links can help users to find their path to their aim.
Business C ard Design Writers looks great!
C olor Theory For Designers
Maybe you would like to
give away a couple of
Photoshop Actions
licenses to our Twitter
Photoshop C ustom Shapes followers / Facebook
Photoshop Text Effects fans?
about 4 hours ago
Photoshop Tutorials: Best of

Glossaries For Web Designers

Free UI and Wireframing Kits @droudable das macht

Desktop Wallpapers I
eigentlich nichts ;-)
Danke für Deine
Desktop Wallpapers II
Retweets, Jürgen!
Dual-Screen Wallpapers about 4 hours ago
Let’s take a look at an example. Beyondis.co.uk claims to be “beyond channels,
Navigation Design Trends
beyond products, beyond distribution”. W hat does it mean? Since users tend to
explore w eb-sites according to the “F”-pattern, these three statements w ould be the Powerful Time-Savers
first elements users w ill see on the page once it is loaded.
Wordpress Themes for 2009
Although the design itself is simple and intuitive, to understand w hat the page is Illustrator Tutorials
about the user needs to search for the answ er. This is w hat an unnecessary question
Free Icon Sets I
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 Free Icon Sets II
blocks w ould increase usability.
Free Icon Sets III

E-Mail Newsletter Design

Free Design Templates

53 C SS Techniques

50 jQuery Techniques

50 C SS Techniques

Graffiti Artworks I

Graffiti Artworks II

Photography: Black & White

Photography Techniques

ExpressionEngine uses the very same structure like Beyondis, but avoids Fantastic HDR Photos
unnecessary question marks. Furthermore, the slogan becomes functional as users Stunning Pictures and Photos
are provided w ith options to try the service and dow nload the free version.
Transparent Screen Photos
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 w hy the system is useful
and how users can benefit from it. People w on’t use your w eb site if they can’t find
their w ay around it.

2. Don’t squander users’ patience

converted by Web2PDFConvert.com
In every project w hen 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
w illing to play with the service, not filling long w eb forms for an account they might
never use in the future. Let users explore the site and discover your services w ithout
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 w ould
probably be eager to provide an email address if they w ere asked for it after they’d
seen the feature w ork, so they had some idea of w hat they w ere going to get in
return.

Stikkit is a perfect example for a user-friendly service w hich requires almost nothing
from the visitor w hich is unobtrusive and comforting. And that’s w hat you w ant your
users to feel on your w eb site.

Apparently, Mite requires more. How ever 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 dow n on
incoming traffic.

3. Manage to focus users’ attention

As w eb-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.

converted by Web2PDFConvert.com
The human eye is a highly non-linear device, and w eb-users can instantly recognize
edges, patterns and motions. This is w hy 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 w hich is
directly visible to the users is the w ord “free” w hich w orks attractive and appealing,
but still calm and purely informative. Subtle hints provide users w ith enough
information of how to find more about the “free” product.

Focusing users’ attention to specific areas of the site w ith a moderate use of visual
elements can help your visitors to get from point A to point B w ithout 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 tow ards the
company the site represents. In other w ords: the less thinking needs to happen
behind the scenes, the better is the user experience w hich is the aim of usability in
the first place.

4. Strive for feature exposure

Modern w eb designs are usually criticized due to their approach of guiding users w ith
visually appealing 1-2-3-done-steps, large buttons w ith 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 w ay.

Dibusoft.com combines visual appeal w ith clear site structure. The site has 9 main
navigation options w hich 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.
W hat matters is that the content is w ell-understood and visitors feel comfortable
w ith the w ay they interact w ith the system.

5. Make use of effective writing

As the Web is different from print, it’s necessary to adjust the w riting style to users’
preferences and brow sing habits. Promotional w riting w on’t be read. Long text blocks

converted by Web2PDFConvert.com
w ithout images and keyw ords marked in bold or italics w ill be skipped. Exaggerated
language w ill 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 w ant users to create an account, “sign up” is better than “start now !” w hich is
again better than “explore our services”.

Eleven2.com gets directly to the point. No cute w ords, no exaggerated statements.

Instead a price: just w hat visitors are looking for.

An optimal solution for effective w riting 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 w hich 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 w hy
they should use your service or stay on your w eb-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 w ith a clean and simple design. You may have no idea w hat
the site is about as it is in Italian, how ever 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, w ithout 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 w hy a user-friendly
print-version of w eb pages is essential for good user experience.

converted by Web2PDFConvert.com
Finch clearly presents the information about the site and gives visitors a choice of
options w ithout overcrow ding them w ith unnecessary content.

7. Don’t be afraid of the white space

Actually it’s really hard to overestimate the importance of w hite 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. W hen 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 w ork w ith. If you have the
choice betw een separating tw o design segments by a visible line or by some
w hitespace, it’s usually better to use the w hitespace solution. Hierarchical
structures reduce complexity (Simon’s Law ): the better you manage to provide
users w ith a sense of visual hierarchy, the easier your content w ill be to perceive.

W hite space is good. Cameron.io uses w hite space as a primary design element. The
result is a w ell-scannable layout w hich 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 w ith 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 w ith 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,

converted by Web2PDFConvert.com
 multiple view s, and color or texture in order to communicate successfully. Use
max. 3 typefaces in a maximum of 3 point sizes — a maximum of 18 w ords or
50-80 characters per line of text.

9. Conventions are our friends

Conventional design of site elements doesn’t result in a boring w eb site. In fact,
conventions are very useful as they reduce the learning curve, the need to figure
out how things w ork. For instance, it w ould be a usability nightmare if all w eb-sites
had different visual presentation of RSS-feeds. That’s not that different from our
regular life w here w e tend to get used to basic principles of how w e organize data
(folders) or do shopping (placement of products).

W ith conventions you can gain users’ confidence, trust, reliability and prove your
credibility. Follow users’ expectations — understand w hat 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 w eb users don’t know Japanese, e.g. w ith Babelfish) and provide
your usability testers w ith a task to find something in the page of different language.
If conventions are w ell-applied, users w ill be able to achieve a not-too-specific
objective, even if they can’t understand a w ord 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 w hen you don’t.

10. Test early, test often

This so-called TETO-principle should be applied to every w eb 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 w rong reasons. In the latter case it’s
necessary to understand that most design decisions are local; that means that you
can’t universally answ er w hether 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.).

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 w hich haven’t been found
during the first round as users w ere 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 flaw s
w hich 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 w ell. After you’ve w orked on a site for few w eeks,
you can’t observe it from a fresh perspective anymore. You know how it is built
and therefore you know exactly how it w orks — you have the w isdom
independent testers and visitors of your site w ouldn’t have.

converted by Web2PDFConvert.com
Bottom line: if you w ant 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 / DW U]
“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

Like 129 people like this.

Vitaly Friedman
Vitaly Friedman, editor-in-chief of Smashing Magazine, an
online magazine dedicated to designers and developers.
Homepage Twitter Page

26
Tags: development, guidelines, interfaces, usability, webdesign

Bookmark Vote up Retweet Share

Advertising

284 Comments

Cezar March 3rd, 2010 5:12 am

251
GOLD!!!!!!!!! Awesome! Thank you!

Reply

Louise Bayne March 3rd, 2010 10:31 am

252
I love your web site

Reply

denzil March 4th, 2010 2:39 pm

253
good post serves as a good guide for website development

Reply

usabiliadades March 7th, 2010 6:49 am

254
Hmmm… In the point (2)…..the action button is to far from the last input
of the form. Maybe it was good practice, position the primary action
button below the checkbox….just an opinion based on the heat map
experience.

Reply

converted by Web2PDFConvert.com
jhen March 8th, 2010 8:52 pm
255
ITS OK

Reply

Amy paul March 9th, 2010 7:51 am

256
I just was on the site for 10 Principles Of Effective Design at
http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-
web-design/ and loved this site so much that I wanted to get a screen
shot of one of the points talked about for my college class in Web
Design I at the University of Phoenix if that is alright? My reason was not
for a comment but to say is a wonderfully easy site but how do I take a
screen shot using a Mac Desktop Computer I am not used to using this
new computer and would really love some help I see the ” fn” button but
do not see a “prt Sc” to do this does Does anyone know how to do this?
I am lost here.
Thanks,
Amy P Omaha NE College Student in IT ,,,

Reply

Sean March 15th, 2010 9:20 am

257
Very helpful info and right on. Thank for the examples!!!

Reply

Benjamin Heng March 19th, 2010 4:34 am

258
Simply amazing

Reply

stewart March 30th, 2010 10:18 pm

259
thanks for your tips, they really helped me, keep it real.

Reply

Kristin June 5th, 2010 11:38 am

260
Great article! Very informative! However, there are a lot of grammatical
errors. It’s a virtual epidemic throughout so many design articles. I
realize many designers may not speak English as a first language, but if
we’re going to discuss usability in the first place, let’s discuss having a
copywriter or editor on hand before we publish written content that may
be hard to read.

Reply

RD SHARIF June 19th, 2010 10:27 pm

261
cheers mate,
great tips and very useful. cheers

Reply

mujib June 22nd, 2010 1:33 am

262
i like cheese…

Reply

John Paul Carlo Uy-Calumpong June 27th, 2010 6:53 pm

263
Rating: 11 of 10. :-bd

Reply

yehey June 27th, 2010 6:55 pm

264
yoro kalbo

Reply

bianca panhatten June 27th, 2010 6:57 pm

265
i agree with john

converted by Web2PDFConvert.com
 Reply

Zaoldyeck June 27th, 2010 6:59 pm

266
FRD <3

Reply

Yoro June 27th, 2010 7:02 pm

267
Yoro kalbo

Reply

urmom June 27th, 2010 7:02 pm

268
ur mom is afraid of white space

Reply

Derek Ramsey June 27th, 2010 7:03 pm

269
Im bald

Reply

j3j3m0n June 28th, 2010 4:46 am

270
0i,aYuzZz n@maN p0whzZz……

Reply

jem garcia June 28th, 2010 7:41 pm

271
chess i like

Reply

Mark June 28th, 2010 7:51 pm

272
I rock :)

Reply

urmom June 29th, 2010 11:33 pm

273
ur mom needs testing

Reply

mark aldaba June 30th, 2010 6:57 pm

274
mahal ko si tantan

Reply

BLaCK EyEd PiSS July 1st, 2010 3:55 am

275
imma bee bee bee imma imma bee

Reply

Guru Tuginmypudha July 1st, 2010 3:59 am

276
G.U.R.U.

Reply

Marc July 11th, 2010 5:31 am

277
Great article. Very help ful tips guys! Keep the good job!
Web Design

Reply

Lina Grebenyuk July 29th, 2010 10:25 am

278
Thank you! Very useful!

converted by Web2PDFConvert.com
 Reply

Gunther August 6th, 2010 10:40 pm

279
Useless, dated information.
I work at a design company that handles many famous firms and clients.
You are way off. Your advise looks like Web design 101, year 1995. Get
a refresher course. I cant believe how little about web design many of
your visitors know.
Guys, this doesn’t work with the big firms. Nor even with the tiny firms.

Reply

donna September 1st, 2010 9:59 pm

280
major major

Reply

JOHN PAULO September 8th, 2010 10:49 pm

281
THANKS FOR THE NOTES!!!!!

Reply

MARK ALEJANDRO S. METIN September 8th, 2010 10:51 pm

282
HEY…….
WEW…..
WEAK SI PAULO.,……..

Reply

Martin Immafake September 21st, 2010 11:58 am

283
W0ah!

Reply

« Older Comments 1 2

Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article
as it will help us decide future content and posts. Comments are moderated – and
rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not
spam, and do not advertise!

Name * Email *

Message *

converted by Web2PDFConvert.com
Categories Information Content Connect
Graphics, Inspiration About Us Smashing Shop Follow us on Twitter
Coding, Design Regular authors Smashing Book Join us on Facebook
Photoshop, Wordpress Become an Author Smashing Network RSS Feed - Magazine
Tutorials, Wallpapers Publishing Policy Mobile Version RSS Feed - Network
Icons, CSS Advertise with us Smashing E-Mail Newsletter Contact us
Smashing Job Board
Smashing Banners and Icons

Smashing Media GmbH. Created by Sven Lennartz & Vitaly Friedman | Back to top Design by Function, Team23 GbR

converted by Web2PDFConvert.com