Cloud View List View
 Email
Hierarchy of Design
Posted September 17, 2010  |  By: Eric Yonge
Hierarchy of Design
According to the Web Style Guide 2.0, "Graphic design is visual information management, using the tools of page layout, typography, and illustration to lead the reader's eye through the page.” In the realm of e-commerce, merchants can implement a well-designed store alongside engaging product offerings and content to yield higher conversion rates. The overall design of an online store can make or break the customer’s shopping experience, making a successful site design crucial to maintaining a high conversion rate.

A well-balanced and visually appealing website is extremely important to a first time customer. Storeowners need to engage the customer successfully within the first few seconds in which they land on the site. What the customer sees in those first few seconds as the page loads can be the determining factor to whether the customer stays on the site. This in mind, it is in the store owner’s best interest to have the most important information appear ‘above the scroll’. ‘Above the scroll’ refers to the area that is initially visible on screen without having to scroll down. This content that appears above the scroll is what determines that split-second decision by the customer. Storeowners want their customers to possess a sense of security and trust as they browse the site. Strategically placed graphics and content will aid in this endeavor.

Contrast is crucial in any website design. According to the Web Style Guide 2.0, the overall graphic balance and organization is crucial in drawing the reader into your content. Stores with a lot of text and minimal graphics tend to appear grey to the customer and will likely yield a negative reaction. There is a balance to be achieved between interesting, engaging graphics and placed copy. The idea is to intentionally lead the eye around the page with the design. A store heavily loaded with graphics can cause confusion, while a store with minimal or poorly designed graphics can appear unprofessional. A well-designed store has graphics intuitively and evenly distributed with sufficient negative space and text areas.

Customers first see pages as large masses of shape and color, with foreground elements contrasting against the background field. There are several elements that are key to every successfully designed e-commerce store. The first and foremost key element is the logo.
This is the store’s identity; the brand. Since the eye naturally reads left-to-right, top-to-bottom, the logo generally goes in the upper left-hand corner of the header. Next, the toll-free number should carry slightly less visual weight than the logo. By having the toll-free number placed on the far-right side, it acts to counterbalance the logo. Displaying the toll-free number boldly and intentionally can aid the customer’s sense of security, which can boost conversion probability. A store owner needs to portray themselves as available and will to help, with a strong consciousness for their customer’s needs.

Perhaps one of the biggest factors in maintaining a customer’s interest upon first arrival to the site is the homepage graphic and kicker graphics. Depending whether or not the site has a left navigation, these graphics typically run the width of the site. The homepage graphic area normally consists of three to five rotating ads that showcase a store's best-selling products. These ads simply fade from one ad to the next. Some stores implement flash animation for their graphics, which can increase the chance of sparking the customer’s interest. Next to (or perhaps even below) the large homepage graphic, reside smaller ads called ‘kicker graphics’. These kicker graphics are ads that usually link to a specific section or category rather than a specific product, yet they generally relate to the product(s) featured in the homepage graphic in some way.

The section below the rotators is a great area to introduce SEO text. SEO stands for Search Engine Optimization; it is non-graphic text that can be read by search engine spiders. This can be a short paragraph that introduces the store or overviews product offerings. The text area makes a great buffer between the homepage graphic and kicker graphics and the featured item rows below. The featured item rows can be used to display specific products the store owner chooses to promote. This area sometimes falls below the scroll, yet it is to the store owner’s advantage to have the first featured item row "peeking" above the scroll to indicate to the customer that there is more content below.

Knowing the key elements of a store design and their best possible placement on a page can be crucial to your store's overall visual appeal, and conversion rate. A store with a well-balanced layout and design can look more professional. The customer’s shopping experience needs to produce security and trust, as well as engage their needs. A thoughtfully design store can do these things, and lead to a higher conversion rate.

Curious as to how a site redesign could benefit your store? Contact us at (888) 429-4803 and speak with one of our Design Consultants for more information!

Blog Categories