Uncategorized

A Few Rules for Effective Web Design

Google+ Pinterest LinkedIn Tumblr

Setting up a website is ridiculously simple these days; anyone who can use email can put together a website with a bit of research — but is that enough?

While templates and content management systems may have made designing easy, creating an effective web design that satisfies users, however, is still something that needs a bit of knowledge and experience on part of the designer.

Here are a few principles of effective web design that you can use to instantly make your website more user-friendly:

1. Nobody Reads Text (But…)

One of the most commonly cited and universal principles of web design — users don’t read web pages word-by-word like they would read a book; instead, they jump from one place to another (or “scan”) on the web page in an “F”-pattern to find the information that they came to find.

Your work as a designer or a content strategist is to give them that information as quickly and simply as you can — while this may sound counter-intuitive to your own goals, consider this: If you won’t, someone else will.

via NN/g

2. Users Don’t Want to Think

A concept first popularized by renowned information architect and UX expert Steve Krug in his book Don’t Make Me Think, research shows that generally speaking, users are impatient, want instant gratification, and don’t make optimal choices — instead falling back on easier ones.

In short, users are only interested in what they want and not in how your website works.

“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.” — Steve Krug

It’s important to mention the concept of cognitive load here, which is defined as, “…the total amount of mental activity imposed on working memory in any one instant.” In this context, cognitive load increases with every element on a web page that a user needs to navigate to get to the information they need.
Want a happy outcome? Reduce your users’ cognitive load.

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. — Vitaly Friedman

via Don’t Make Me Think, Steve Krug

3. Embrace the Whitespace

Whitespace is good because it helps reduce cognitive load — it makes it easier for the user to divide the content area into bite-sized pieces of information.

A page without white space, crammed full of text or graphics, runs the risk of appearing busy, cluttered, and is typically difficult to read (people won’t even bother). This is why simple websites are scientifically better.

via ConversionXL

Design layouts with ample whitespace make it easy for the reader to scan, analyze, and process information quickly and easily. This is because hierarchical structures reduce complexity. So if you have to choose between whitespace and a horizontal divider — always go with the whitespace.

First of all, white space doesn’t need to be white. The term simply refers to empty space on a page (or negative space as it’s sometimes called). White space is used to give balance, proportion and contrast to a page. A lot of white space tends to make things seem more elegant and upmarket, so for example if you go to an expensive architect site, you’ll almost always see a lot of space. If you want to learn to use whitespace effectively, go through a magazine and look at how adverts are laid out. Ads for big brands of watches and cars and the like tend to have a lot of empty space used as an element of design.

via Design Tuts+

4. The Three-Click Rule

The ‘three click rule’ states that a user should be able to find any information they’re looking for on your website within three clicks.

This rule is simply a pointer that can guide you into creating better navigation paths for the ease of users. There are many ways to do this:

  • Navigation (primary and secondary)
  • Breadcrumbs on pages
  • Links and CTAs in sidebar
  • Well-crafted footer menu
  • Internal linking within posts

A lot of critics to this rule say that it’s outdated and doesn’t really stand its ground, but again, consider it more an idea about creating paths of least resistance in your website’s navigational flow and not a hard-and-fast rule (…that would be crazy).

via Wikipedia

5. Good Design is the Absence of Bad Design

In his book The Non-Designer’s Web Book, Robin Williams lists elements that can hinder a good design experience. You can click the link at the bottom for the full list and the book.

Here are a few of them:

Text

  • Background does not interrupt the text
  • Text is big enough to read, but not too big
  • The hierarchy of information is perfectly clear
  • Columns of text are narrower than in a book to make reading easier on the screen

Navigation

  • Navigation buttons and bars are easy to understand and use
  • Navigation is consistent throughout web site
  • Navigation buttons and bars provide the visitor with a clue as to where they are, what page of the site they are currently on
  • Frames, if used, are not obtrusive
  • A large site has an index or site map

Links

  • Link colors coordinate with page colors
  • Links are underlined so they are instantly clear to the visitor

Graphics

  • Buttons are not big and dorky
  • Every graphic has an alt label
  • Every graphic link has a matching text link
  • Graphics and backgrounds use browser-safe colors
  • Animated graphics turn off by themselves

General Design

  • Pages download quickly
  • First page and home page fit into 800 x 600 pixel space
  • All of the other pages have the immediate visual impact within 800 x 600 pixels
  • Good use of graphic elements (photos, subheads, pull quotes) to break up large areas of text
  • Every web page in the site looks like it belongs to the same site; there are repetitive elements that carry throughout the pages

via Bad Design Features