Utilizing Space Effectively in Web Design

Published by Jim McMillen at October 18, 2012

Tags

Have you ever gone to a website and felt lost? Have you ever felt your eyes buzzing over a page, not sure what to look at or where to look? Many web designs, especially corporate based sites, tend to bombard their users with far too much information.

This is a huge design problem for both the user and the designer. This post will outline the issues associated with a cluttered design from a user stand point and try to provide examples of both effective and ineffective use of space.

Let’s start with how a cluttered web design can affect your users. For this post, I am going to specifically focus on watch manufacturers. First up is Timex (www.timex.com). Their site has a nice, large image at the top that is connected to some pertinent information about the product displayed.

However, underneath that, there is a seemingly random selection of products that dominates the lower half of the site, attracts attention, and left me as a user confused as to why I was at the bottom of the site looking at this particular selection of products. They have committed a large amount of space to an unorganized selection of products. Users want to be able to find what they are looking for as quickly as possible. If they can’t, they will quickly move on to another seller who can provide that experience for them.

The opposite end of the spectrum can be just as detrimental to a user. For example, Fossil (www.fossil.com), is organized with one clear, main piece of visual information. However, the site is monopolized by large high-resolution images of their products. While this may look nice, it continually tugged at my eye.

I found myself constantly looking back to the large images instead of navigating the menu system to get to where I really wanted to be. It was a constant distraction from my purpose of being on the site. The internal pages become easier to navigate, but still seem to be dominated by large images. I found it hard to focus on the product information with such a large amount of visual information vying for my attention. This may frustrate the user and leave them feeling uneasy about their potential purchase.

A good example of balancing the visual display of products and availability of pertinent information is the site for Swiss Legend (www.swisslegend.com). It’s a clean design, based around a simple grid. High-resolution product shots are centered on the page and easy to view without being demanding to the eye. The menu system is clean, straight forward and easy to understand. The footer provides easy access to some extra features that support the user’s needs. The internal pages maintain a clean grid layout with simple highlight features. The products, options and information are clearly displayed and easy to access. This site leads me to a product I would want to purchase quickly, easily and effectively.

The nuances of designing a site around products can have a much larger impact on potential customers than you may think. Some of the smallest details may incline or deter customers from making a purchase. Utilizing the space a user first encounters when they visit a site, and displaying the information properly in that space can affect everything from sales to company and brand identity. Clean, clear and precise display of information is critical to a user, and therefore must be critical to the design.