The 4-Point Minimalist Guide to Web Design
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”:
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.
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?
What is this app about?
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.
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.
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.
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:
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:
Here’s a great example of a web page that is making good use of whitespace:
Although the following page has a lot of information on it, due to the use of whitespace and grouping, the information is not overwhelming:
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.
Here’s another that has only five words on the page. Looks boring, eh? :
Then, you hover your mouse over the words:
Almost magically the user is allowed to discover the meaning of each word and the sources they link to.
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.