White Space
Yesterday I tweeted a few words about "white space", it got some attention and I received emails asking more about it, so I decided to write this short post as an answer.
"White space" is not literally a space with white colour. It's a blank space surrounding a given element. This "blank space" sounds like a waste of space to some out there, which I totally disagree. Here is why;
At the example above (using same number of dots), there are lot of information (dots) to present, but one of them is the key information and it needs instant focus to give a quick answer to the question; "What is this thing about?".
In the first example, as much information as possible is given in the very smallest space. You may think that you did well because you gave more in a small space. Well, you are wrong. It causes chaos, the user (she) has no clue where to look, or where to get the key information. So she spends seconds/minutes to make sense of it, eventually gets frustrated and goes away. Here you lost a person who might be a potential customer or a reader or anyone else important!
In the second example, white space is given to the key information in the centre. Yes, you are giving less information in the same space, but nothing wrong with it since you are giving the key information which the user catches instantly without any effort. She has a clear idea about what it's telling, and what it's for, now she can take instant action and explore the information given around if interested. All other dots around make more sense to her because she knows the main subject from the well-spaced middle dot.
The middle dot could be a primary button on a remote control device, or an important line in an article, or a key visual in a poster hung along with many others around... This is an important matter for any possible thing you can think of.
Let’s look at some real-life examples. Here are 2 search engines. The key element (our middle dot) is search input which the user needs to be focused on instantly. In the first example (Bing), it is off-centred and has lots of messy elements (popups, unrelated information, heavy images, and so on) around with inconsistent spacing. It is not doing terrible but still user spends a minimum 5-6 seconds, and mostly likely more for unexperienced user group, to eliminate useless information around and focus on the key feature. At the second example (Google) the input is well centred with lots of white space around. The open space around gives user an instant focus to middle point. No distractions, no frustration, no time waste, it is an instant experience, it is a success.
In today's fast moving life, every second is precious for all of us. So let’s pay attention to make our products easier to use and understandable in the minimum possible time. Let's give our key information in well spaced format. Let's keep it simple and use white space efficiently. You will see the benefits in no time...
Note: This subject is highly related to "simplicity" which I'm going to write as a different article.
