5 Ways How Whitespace Affects The User Experience

Whitespace is becoming an increasingly popular design element for websites. The termwas originally coined in print design and describes “the absence of text and graphics”. At the same time, whitespace is more than an empty space. It’s also “the overall airiness or density of the page including space between lines of type (leading), text offset around graphics, size of margins, and heaviness or lightness of the fonts”.

In web design, whitespace can be defined in a similar way. The only difference is that it doesn’t have to be white. Rather, whitespace comes in forms and colors. Consider it the opposite of your content. Whitespace can create a structure, carry meaning, and guide the user, but it doesn’t attract attention to itself.

There are a lot of resources out there that explain whitespace in more detail, or bring together inspiring designs that use a lot of whitespace. Let’s not get stuck with the same questions.

Instead, let’s take a look at just what it is that makes whitespace so special. Here are 5 key effects that whitespace can have on the user experience of your site:

1. Whitespace makes your design usable

First of all, whitespace is a great design principle to help you make your design more usable. It’s not a secret that good usability is crucial for any successful site. So make sure you pay enough attention to your users and their goals: Who are the people that visit your site? Why do they visit? And what is it they do on your site?

Those are questions you need to answer before you even get started on your design. Once you have a clear design objective, you can use whitespace as effective tool to (1) guide your visitors through your site, (2) help them find what they are looking for, and (3) make interactions stand out.

The clean design with lots of whitespace allows you to effortless navigate the site and focus on the most important content.

The BREE webshop perfectly demonstrates what it means to make a design usable by adding some whitespace. The site is very clean and minimalistic, while using a clear hierarchy for the presented content.

On this detail view, clearly, the picture of the purse is most important to the user, followed by the name, description, price, and other product descriptions. Elements like the main site navigation are available, but stay in the background.

2. Whitespace makes your content readable

A key aspect of good usability is the readability of your content. The readability is even so critical that it deserves to be mentioned separately.

Whether your content is readable or not depends on many different factors. For example, it depends on the font you choose, the font size and color, the structure of your text, and whether or not you use highlights, images, and subheadings to make it scannable.

At the same time, whitespace plays an important role for the readability. Whitespace defines how you arrange and align different text elements – from entire paragraphs down to the single letter. For example, aligned elements look much cleaner and are easier to digest. Also, let your content breathe and mind spaces between paragraphs, line heights, and even your letter spacing.

This text is highly readable, because it follows all the rules there are for readability.

Like mentioned before, whitespace doesn’t have to be white. Rather, it describes the spaces between your content on multiple levels. The site of WWF offers us a very positive example of how whitespace – or in this case ‘negative space’, because it’s black – possitively affect your readability.

Even though, there is quite a lot of text to read, the page doesn’t look packed. There is lot’s of space to the left and to the right of the content. Also, paragraphs are clearly separated from each other, and there is a generous space between the two columns. Besides, the line height is very user friendly, allowing you to quickly read through the text.

Of course, whitespace is not everything. Other aspects of good readability, such as a readable font, high contrast, and a well-structured text are also in place here.

3. Whitespace gives your visitors a break

The web – like most other aspects in life – become more and more advanced. We are dealing with a constant overload of information and the choices that come with it. Sometimes, this can get overwhelming. Then, all we want is silence and a mental break.

In case you haven’t noticed, the buzzword here is simplicity. There are countless websites out there and probably some of them are similar to yours. Why not stand out by spoiling your users with a break? Keep your design simple. Help your users make choices – or even better, make some of the choices for them.

Whitespace is the perfect design element to focus on what’s most important. Don’t confuse your visitors, but present them with what matters most. Don’t distract them with unnecessary clutter, but help them focus on their goals.

Whitespace allows for a design no clutter, no distraction, no choices to make.

Whitespace can have a calming effect, drawing attention to a few key elements. Dropboxhas chosen for a very minimalistic landing page with looooots of whitespace. There is no clutter, no distraction, no choices to make.

The website is very simple and refreshing. Only when scrolling down the page, you get some extra information. Basically, once the user is looking for more info, when they are willing to engage further with the site, they can. If they don’t want to, they don’t.

4. Whitespace comes with a modern look & feel

A simple design with lots of whitespace does not only add to the usability of your site, but also to its visual appeal. Minimalism is considered a modern style and sites that work with a lot of whitespace often look very professional and trustworthy – if well-designed, of course.

Especially in e-commerce, giving products some extra space makes them look more exquisite. Not only do they get more screen real-estate, they also draw more attention, due to the lack of tangent elements.

Whitespace can put a single element into the focus of your users, making it more special than the rest of your content.

The Rolex website has a very exquisit look & feel. Of course, this didn’t happen by chance. The brand itself is very expensive and special. Using a lot of whitespace to design the website was therefore a smart choice.

Once you open the homepage, the product is put right to the center of your attention. There is some text to accompany the image, but other than that, the page is very quiet – almost mysterious. Yet, the design is very well balanced and does not at all look empty.

The shadow of the watch adds a small 3D effect to the site, creating a sense of depth. This subtle detail gives the product even more room, making it look even more important.

5. Whitespace makes your design emotional

Last but not least, whitespace can add an emotional touch to your design. Again, it doesn’t have to be white, but can be any color, shape, or pattern you want. Just like background images, background colors can have a big emotional effect on us.

You can also use effects, such as parallax scrolling to make your whitespace interactive and more fun, or you simply use gradients or patterns to add some excitement. The tone you set with your whitespace – and that can be through the amount, or the design of it – affects how people will receive your content.

Instead of seeing whitespace as the leftovers of your screen real estate after you have placed your content, you should see it as an autonomous design element. You decide where to put it and what effect it has on the rest of your design.

Whitespace can appeal to our emotions, and trigger us to think or feel certain things.

Cirque du soleil creates a magical and very inviting sphere on their international site – using a lot of whitespace and integrating that space with the main visual element of the site. The visual is appealing and very interesting, drawing your immediate attention.

The design creates a very comfortable feeling of unity. At the same time, it makes you curious of what to expect once you have selected your continent. The quiet and warm background color invites you to dream away and leave room for a lot of own ideas and your own phantasy.

Original : http://blog.usabilla.com/5-ways-how-whitespace-affects-the-user-experience/?utm_source=buffer&utm_campaign=Buffer&utm_content=bufferd6f1e&utm_medium=twitter

3 user experience resolutions for 2013

1. Refresh your understanding

People change and businesses and brands change too, so refreshing your research to make sure you really do understand your current and future customers is a great place to start!

Try to make sure you know their habits so you can match your brand to people’s underlying tendencies and wants. Analytics are good at showing you what is happening, but not why. We find that looking at the stories behind decisions and interactions can help you spot something key, giving you that extra edge this year!

Good qualitative research bolstered by quantitative statistics and analytics will validate the decisions you are making, boost success and encourage innovation. We find diary studies give great insights, and are a good qualitative research method to start with.

2. Moving online offline (and vice-versa)

Last year, we did a lot of research into the merits of an omni-channel approach to business and customer experience. We found it to be extremely insightful -  the things we took away from it in terms of quick wins and innovations is to look past the technology and observe the behaviours behind them is integral to omni-channel success.

For instance, taking the drivers and benefits that customers really appreciate when shopping online at home and bringing similar conveniences and experiences in-store will support your customers needs much better. (Take a look at the Burberry flagship store for some inspiration!) I’m looking forward to seeing how brands continue to move the online experience offline and the offline experience online as the customer experience becomes smoother, easier and ultimately much more satisfying.

3. Get lean get agile

Two important approaches to user experience that have been gaining traction in recent years are agile and lean UX. Essentially, agile UX speeds up software development whereas Lean UX is an approach which speeds up the design process of new digital products.

If you’re fighting for a user centered approach in your organisation and it isn’t moving as fast as you would like, then maybe adopting parts of these approaches will help – agile and lean UX promise quick sprint development, faster research, and overall less waste to get digital assets to market in a faster, more competitive time frame.

There are a few steps to follow to get this going in your organisation:

• First, you need a good customer experience strategy to help guide the direction of faster developments, so get your vision together and documented with targets and objectives for your brand or business in relation to customer experience. (In true agile and lean style, this strategy can change along the way with new findings, but it is key to have it there at the beginning.)
• Next instil the agile culture in your teams. Get them to think about processes and break them down into outcomes and resources, rearrange them to see how agile or lean UX could look. Physically doing this with post-its or cutting up printed process diagrams might work best.
• Finally, get going. You need to try it and then adapt to make it work for your business. This is about streamlining the user experience design processes and making it faster and adaptable – so don’t take too long contemplating it when you could be designing something!

What are your 2013 UX resolutions? We would love to know so please leave a comment below. If you are looking to give your customer experience new lease of life in 2013 but aren’t sure where to start, get in touch and we can help you have a great year!

Redesign Trend in Tech News Sites: Big, Responsive and Content Heavy

Redesign Trend in Tech News Sites: Big, Responsive and Content Heavy

There’s a new trend in the redesign of technology news sites, which has emerged with the move towards responsive designs. The new wave of redesigns sees the old blog format being transformed into a full-screen, app-like experience, with multiple columns, fixed position elements and a global navigation bar at the top of the page.

So let’s see some examples. Here is The Next Web:

Here’s Mashable:

And here’s ReadWrite:

Here are some of the shared attributes of these designs:
Responsive design taking up the whole or most of the screen Wide, simplified navigation bar at the top of the page Navigation bar drop down menus on mouse hover Fixed sidebar columns, or columns that scroll independently Big typography, especially for headlines
Most headlines coupled with images Flat style, and flat, single color icons

There’s a lot to like. The new designs are responsive, meaning that they adapt to the device that you happen to be using to view them, showing more content on larger screens, and collapsing the columns one by one for smaller devices. On a smaller screen the content is still there, it just gets moved down or gets put away in a drop down menu. The typography centered style is also a good change, pacifying the aesthetic eagerness of the early Web with the restrained elegance of print.

But there are also things about this trend that I dislike. I don’t mean the concept of responsive websites, which is good, but rather the certain characteristics of the implementation that we see in the examples above.

My main issue with these redesigns is that instead of building the site like a physical page, they treat it like a canvas for an app. Scrolling the page up or down does not guarantee that the whole of the page will move. Some columns are fixed and will remain where they are no matter how far you scroll. Some columns scroll independently, forcing you to move your cursor over them to scroll the content within them. It feels like the solid page that we’re all used to has been shattered into little pieces that may or may not behave the way you think they will.

There are other annoyances. For whatever reason, scrolling is often laggy, which is made much worse on sites that load content as you scroll down. Most of these sites also choose to show up pop up menus on mouse hover, which are oftentimes fairly large. Should you accidentally move your mouse over the area you’ll see a portion of the page blocked by a menu item you never wanted to see. To fix the situation you’re forced to move the cursor outside the menu, all the while making sure you don’t accidentally move it over something else that will generate another pop up. It’s just plain annoying.

While I like the style direction, I think these sites are trying a little too hard to work like apps, and in doing so, they surrender the strengths of the plain website, namely: simple, responsive navigation mechanisms. Simple sites don’t lag and don’t have any ambiguous navigation elements. They behave like a page, which, while being a constraint, is not necessarily a bad thing. The new wave of responsive redesigns in tech news sites certainly look good with their nice typography and healthy use of whitespace, but they feel heavy, they don’t feel right in the browser. They look more like apps but the speed and responsiveness of a native app just isn’t there.

What do you think? Do you like these new designs, or do you agree with me that they’re trying a little too hard to break away from the physical page metaphor? Leave your comment below.

by: Dmitry Fadeyev