The 4-Point Minimalist Guide to Web Design

by 8 02/10/2012

A typical webpage has images sliders, videos, social media widgets, blog summaries and advertisements vying for our attention.

But more is not always better.  Sometimes, more is just more.

Why is excessive choice a bad idea?

Having too many choices can lead to analysis paralysis.  Analysis paralysis isn’t just a clever word pairing.  It is actually a state of confusion and inaction that one experiences when they are confronted with too many alternatives.

Should they watch the video or read the Twitter feed?  Read the blog or watch 3 minutes of image slides?

Having too much to focus on leads to people making less choices.

How can minimalism help?

Minimalism is about reducing concepts to their essence. It is focused. Through this focus we can ensure we provide clients (and our client’s clients) with information and choices that are easy and enjoyable to make.

Here are four ways to apply minimalism to your design and improve your customer’s user experience.

1. Have a focal point

A well designed site guides you to the focal point.  The point where the visitor should focus their attention first.

Without a focal point, the site visitor will quickly become confused.  And a confused mind always says no.

In the following example, I’ve queried a site for the antonym of the word “design”:

Searching on Synonym.com

Can you see the answer to the search?

The site didn’t have the antonym to the word “design” but still bombarded me with questions and choices and buttons to press.  A simple error message would have been helpful.  Instead, I became confused and headed back to Google search.

A focal point gives the user a central area on the page to focus on when viewing the page. This should be the most important information you need to share with the user.

In the following example you can clearly see what services the company provides.

Spigot Design Home Page

Five seconds on this page gets you a perfect understanding of this business and the services it provides.

Spend 5 seconds looking at each of the following web pages and see if you can figure out what they do.

What do kinds of applications do these guys provide?

CodeKit

What is this app about?

On This Day App

What captured your focus on each of the above sites? What distracted you?

With an ever-decreasing period of time within which to make an impression on a user, having a focal point is critical. Centering your design around a focal point also ensures that you have the most important information on the page first and all elements subsequently added serve to strengthen the focal point.

If you could only have one piece of information on the page, what would it be?

2. Give the user control

Most people like being in control of their environment – roller coasters and other theme park rides are the exception! The same is true on a web page. Lack of control leads to stress which leads to poor user experience.

In the following site, the list of services they provide (over 10) keep zooming across the screen. After a few seconds it starts to become disorienting as there is no way stop it except for leaving the site.

rtraction home page

This is a shame because the site is very nice to use once you get past the whole “zooming services” portion. It would have been nice if there was a way to stop the animation and go straight to the information.

UPDATE: I think the guys at rtraction may have ESP! Just prior to publishing this article, I noticed that they had removed the “zoom services” from the home page! Well done guys.

On the following site, the user is left hanging until the page loads. There is no useful information to look at while this happens.

Volkswagen Beetle Home Page

This is true of a lot of websites that have Flash animation. The first experience the customer has is waiting for something to happen. But web surfers are like sharks, always moving.  By the time the page loads, they will likely be elsewhere.

Image sliders which change images very frequently (say every second) can also become quite distracting and unless there is a way to stop the image slider, it can feel a little out of the users control.

This site plays a chime each time the image in the image slider changes. Distracting is the nicest word I can use to describe this feature.

Red Chilli Thai Home Page

If there is animation on the page, allow the user to stop it or skip past it. Doubly so with music and sound effects.

Here’s a great example of a page where the user is in complete control:

Four Square Home Page

Nothing on the page moves without the user deciding it should.

What parts of your web page are out of the users control?

3. Use whitespace

Whitespace helps define your focal point, but it also makes every piece of information on the page more readable. Whitespace is a “clutter-buster”!

Here’s an example of a web page that could use more whitespace:

Noodle Play Home Page

Here’s a great example of a web page that is making good use of whitespace:

Wunderlist Home Page

Although the following page has a lot of information on it, due to the use of whitespace and grouping, the information is not overwhelming:

nGen Works Team Page

Could adding whitespace around text and your images and other components on your pages make it easier understand?

4. Don’t confuse minimalism with boring-ism

Minimalism doesn’t have to be the web design equivalent to Calculus.  You can apply minimalism to your design and still stand out.  In fact, reducing all of the distracting and ho-hum clutter in your design will allow your site visitor to focus on the “wow factor.”

Visiting this web design studio website is like going on an Easter egg hunt.  It’s fun.  Every element on the page offers value in some way.

Good Minimalist Design Example

Here’s another that has only five words on the page.  Looks boring, eh?  :

Laurent Baumann Home Page

Then, you hover your mouse over the words:

Laurent Baumann Twitter Link

Almost magically the user is allowed to discover the meaning of each word and the sources they link to.

Laurent Baumann Flikr

 

What could you add (or subtract) to make your website more memorable?

Minimalism is a tool just like any other. It may not work for every situation.

But before you add that Twitter sidebar widget and Flash intro, consider the possibility of creating something minimal and simple that is focused, memorable and easy to use.

Print Friendly

About 

I am a co-founder of Unique Imprints, a web design company that focusses on getting small businesses on the web. When I'm not designing web pages you can find me learning programming languages or debating on usability.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

8 COMMENTS

Pj Schott

Your blog is one of my all time faves. Loved this one. Only one issue … I wanted to share it with a friend and couldn’t find a way. I looked in the upper RH corner near search and signup hoping it would be featured prominently like the Apple app store does.

February 10, 2012 Reply

    Tim

    Here’s a trick I learned before Social media exploded that allowed me to share things with my friends. You highlight the URL in the navigation bar and copy it, then paste it into an email, tweet, facebook status message or any form of communication, hell even writing it on a post it note will do. Then bam, send it to your friend.

    February 10, 2012 Reply

    Russ Henneberry

    @PJ Schott — Thanks for the feedback PJ. We are actually working on a redesign of this blog and I will pass this along to the design team. Your feedback is much appreciated.

    February 10, 2012 Reply

DarkFlib

The sites that don’t label what the nav buttons do are a pet hate of mine and there is an industry term for them: ‘mystery meat navigation’

A user shouldn’t need to visit every possible link on your page just to find out what each of them do, they want to be able to quickly scan the page and see a link to ‘Support’ that actually goes to support…

February 11, 2012 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>