Aesthetic: White Space

Balancing Between Creative Design And User Experience

December 21, 2012 by PremiumCoding - No Comments

Ecommerce websites are all about functionality. Customers want to be able to find what they’re looking for online as quickly as possible. Web designers must resist any temptation to fill a website with graphics and features that overpower user experience if they want shoppers to become return visitors.

But functionality doesn’t mean good design should be thrown out the window. If balanced well, creative design can enhance the functionality of a website. Here are some tips for combining the aesthetic with the functional to achieve a balance that leads to a great user experience.

Aesthetic: Intuitive Eye Path

Functional: Calls-to-Action

Eyes tend to follow a specific pattern when scanning a web page. As you can see below, viewers of a Google search examine the page in a vague “F” shape, according to Jakob Nielsen and Kara Pernice.

Use this natural tendency to your advantage by designing the page in a way that ensures that viewers see the most important information. For example, place elements that encourage the customer to take an action along this path.

Amazon effectively integrates the intuitive eye path and calls-to-action. The company logo is prominent in the upper left corner, and is likely to be seen first. Presented horizontally from the logo are: search box, account sign in and shopping cart. Then moving down the left side of the page are special deals on featured items. Viewing all these elements in succession gives the shopper an urge to take an action soon after entering the site.

Aesthetic: White Space

Functional: Simplicity

White space can negate any stress that comes from trying to perceive overwhelming information on an ecommerce site. Adequate space between products allows for shoppers to easily see all items on the page, making them feel calm in their decision to buy.

Hollister’s product pages are appealing because each item is separated consistently on a dark background. Products are presented with additional information, but not too much. Think about the things customers want to know upfront: name, price and color options. Space and simplicity make a beautiful pair.

Tip: There are great resources out there like Amazon’s ecommerce services to implement these principles for you. These can be useful in resisting any temptation to over-complicate your design.

Aesthetic: Emphasis on Products

Functional: Supportive Copy

Because they can’t experience the tactile qualities of an online company’s products, it’s important for customers to be able to view detail. Photos of professional quality and consistent style, crop size and color make a site cohesive and aesthetically pleasing.

The Famous 4th Street Cookie stays coherent in the way it displays its product: quality, detail, size, spacing and color all create a visual identity. Avoid overuse of text on your product pages, as it will not be read line by line. Instead, use only concise and relevant copy to supplement your product photos. Information that customers find important and that points them to an action will help them feel more confident in their purchase and optimize the site’s functionality.

Apply these balancing tips to your ecommerce web design to make your business and your customers happy.

Author Bio

Luke Clum is a Seattle based graphic designer who is crazy about UI design, alpine climbing and earl grey ice cream. You can follow him on Twitter @lukeclum