10 Principles Of Effective Web Design

Share this:

Usability and the utility, not the visual design, determine the success or failure of a web-site. Since it’s your visitors who will be trying and viewing everything you lay out, it makes maximizing their experience your ultimate goal.  User-centric design has become a standard approach for successful and profit-oriented web design. No matter how pretty things look, if the usability isn’t there, it may as well not exist.

With that said, let’s get into ten effective principals of web design.

Principles Of Effective Web Design

1. Don’t make users think

According to Krug’s first law of usability, the web-page should be obvious and self-explanatory. It’s your job to know any questions users may have and answer them before they are posed. Otherwise your site could alienate people. After all, why would they take the time to email you a question when they could just find another website that works?

The key here is intuitive navigating. Leave nothing to chance and make things as simple and streamlined as possible.

Beyondis in 10 Principles Of Effective Web Design

Let’s take a look at the above example. Beyondis.co.uk claims to be “beyond channels, beyond products, beyond distribution”. What does that even mean though? Since users tend to explore web-sites according to the “F”-pattern, these three statements would be the first things users see upon entering the page.

Although the design itself is simple enough, to understand what the page is about the user needs to search for the answer. This is an unnecessary question mark. It’s designer’s task to make sure that the number of question marks is close to 0. There is a visual explanation to the right but even that doesn’t make all that much sense. Note, you probably hadn’t heard of this website before this article. There is a reason for that.

Ee in 10 Principles Of Effective Web Design

ExpressionEngine uses the very same structure to Beyondis, but avoids those unnecessary question marks. The slogan also becomes functional as users are provided with options to try the service and download the free version. Not bad.

2. Don’t squander the patience of your users

This one is tied closely to the former. Any number of things can squander the patience of your users, be it cluttery design or popups. Also, 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. Users want to test out your service, not fill out long webforms. Those are annoying.  It’s not reasonable to force users to enter an email address to test the feature. After all, you want them coming back of their own accord.

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 your features at work. They need to have some kind of an idea what they’ll be getting in return for your private information.

Stikkit in 10 Principles Of Effective Web Design

Stikkit is a perfect example for a user-friendly service which requires almost nothing from the visitor. This is rather unobtrusive and comforting. Exactly how you want your users to feel on your web site.

Bemite in 10 Principles Of Effective Web Design

The site above didn’t get the memo. Although it takes only thirty seconds to fill out, that’s thirty seconds that could be used to surf to another site. Remember that.

3. Manage to focus the attention of your users

As web-sites provide both static and dynamic content, some aspects of the interface attract more attention than others. For instance, images are more eye-catching than text(On average.) Corollary, bold sentences catch more attention than plain text.

The human eye is an interesting beast and tends to notice patterns of movement. This is why video-based advertisements are extremely annoying and distracting, however they do capture attention. This is why marketers love them.

Enso in 10 Principles Of Effective Web Design

Humanized.com perfectly uses the principle of focus. Look at how the word “free” sticks out like a beautiful sore thumb. This directs users to a “free” service which will hopefully leading them to purchase the “not free” service.

4. Strive for feature exposure

Modern web sites are usually criticized for holding the user’s hands too often. Simple 1-2-3 directions, large buttons, you know what we mean. However, why is this a bad thing? Whatever gets them to the end goal, right?

Dibusoft in 10 Principles Of Effective Web Design

Dibusoft.com combines visual appeal with clear site structure. Notice the nine simple to read site navigations.

Let the users see what is available to click on. It doesn’t really matter how this is achieved. It matters that the content is fully understood within a second. Remember the zero questions formula from earlier. If this means a little hand holding, so be it. It’s the Internet, not college.

5. Make use of effective writing

As the Web is different from print, it is a must to adjust writing habits to match your users. Promotional writing won’t be read. Long text blocks without images and keywords marked in bold or italics will be skipped. Exaggerated language just may be ignored. Hey wait! That’s no fun.

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”. Just keep things simple. Don’t over “cute” it and you’ll be fine.

Eleven2 in 10 Principles Of Effective Web Design

Eleven2.com gets directly to the point. No cute words, no exaggerated statements. Instead they just throw the price right there in the middle of the screen. What else do you need to know?

6. Strive for simplicity

Keep it simple. Keep it simple. Keep it simple. Users are rarely on a site to enjoy the design.  They are usually suffering through the design in order to find some information. Remember that in all facets of web design.

Crc in 10 Principles Of Effective Web Design

Crcbus provides visitors with a clean and simple design. It’s in Italian, so that’s a slight problem for this example, but be assured, the information is presented accurately and simply. No hunting around for peculiar links here. That should be your goal as well.

Here is another good example:

Simple in 10 Principles Of Effective Web Design

Finch clearly presents information without overcrowding or making users squint their eyes in frustration. Strive for this goal.

7. Don’t be afraid of the white space

It’s really difficult to overestimate the importance of white space. It helps reduce cognitive load, and makes it possible to perceive whatever information you place 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. White space helps them do just that. Maybe your tenth grade art teacher was right after all.

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, go with the white space.

Cameron in 10 Principles Of Effective Web Design

Cameron.io uses white space as a primary design element. The result is a well-scannable layout which places the content front and center. This is always a good thing.

8. Communicate effectively with a “visible language”

In a renowned paper on visual communication, Aaron Marcus states three fundamental principles involved in the use of that mythical “visible language”

  • 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.

9. Conventional design is ok

Conventional design does not always mean boring design. In fact, conventions are useful. They reduce the learning curve to figure out how things work because your users has seen it all before. For instance, it would be a usability nightmare if all web-sites had different visual presentation of RSS-feeds. The brain gravitates toward the familiar.

With conventions you can gain confidence, trust, reliability and prove some credibility. See Nielsen’s Usability Alertbox for more information.

Babelfish in 10 Principles Of Effective Web Design

Look at the above example. It’s Amazon. You know where to click. You know what buttons do what. Now look again. It’s in Russian. The thing is, that doesn’t matter. You can still navigate the site. That’s perfect conventional web design.

10. Test early, test often

This principal should be applied to every web design project. Usability tests tend to provide crucial insight that nothing else seems to catch, until it’s too late. You don’t want your users catching the mistakes.

Some important points to keep in mind:

  • Testing one user is better than testing none. Do whatever you can.
  • if you find a mistake, fix it, then test again.
  • Even if nothing is wrong, the results are usable. You know what to do now.
  • If you can  afford it, or if you know anybody, independent testers can be an invaluable tool.

And that’s it. Do you have any tips for great web design? Drop us a line.

Other Posts

Leave a Reply



April 2015
« Nov