Wed, 28 Dec 2016
Today is the day when we are ready to assume the role of e-commerce myths busters.
We don’t mind to disappoint you, but magical product page that can sell everything you place there due to the secret shade of the “add-to-cart” button simply doesn’t exist. Some rules of eCommerce product page layout design may certainly work for one type of products but they never guarantee the crowds of visitors for some other type of products. Same as with art, music and advertisement, it requires finding approach to different target audiences. Nevertheless, customer behavior surveys and A/B tests show that product page design has serious impact on sales, since it influence numerous factors affecting consumer attitude. This is a major reason why any case needs custom approach.
Fortunately, online shoppers have similar habits that can be crystallized in customer-winning tactics. We highlight these points in anatomy of effective eCommerce page.
As a rule, customer’s journey starts from defining his or her problem. So, when they come to your store are they looking for understanding and support or they are looking for a specific solution and hope to find a product that can fix their problem. It doesn’t matter whether they are looking for a new tablet because their kids have destroyed the previous one or for a dress for a wedding party, they are looking for a way to fulfil their need. And your aim as a seller is to help them with your product, delivering it though flawless purchasing process. It has to be seamless from their first visit to your web store to the moment they start using it (including after-sales services and support). And all this information needs to be placed on the product page or should be easily found via accustomed paths.
79% of folks are scanners (Web Words That Work: Writing Online Copy That Sells), only 16% read crystalline prose. People scan 20-28% of copy looking for relevant words and phrases and leave the page if they don’t find necessary information. So you need to create easily scannable text by highlighted specific points.
80% of people remember what they see and 30% what they read. It’s a strong argument in favor of high-quality images, isn’t it? But make sure your pictures are highly relevant, coz when folks come to your product page they want to learn about key features of a product from the images. Visual information isn’t restricted to with pictures though, since text copy, buttons and navigation work in complex and create general stamp in consumer memory. So keep it clear and concise. Minimize your written text and maximize images, people don’t read – they scan.
Therefore content which is significant for customers should be located in the most visible places of your product page.
As a rule there are two parts of web page in consequence their perception order:
22% of the page-views with a scrolling availability, are scrolled to the bottom. Does it mean that long pages are bad? No, if visitors start scrolling more than 90% are equally likely to scan the entire page no matter the page size. Thus, your aim is to capture the attention of potential customers with the first screen by the most relevant and persuasive information and in the below-the-fold part place content will assure they are making a right choice. But keep in mind that the fold of a web page has no fixed location and users will see it differently due to the screen or window size. To avoid this mess, divide your layout into responsive sections. This trick will also make lives of scrolling lovers easier;)
Let’s start from analyzing the most common eCommerce product page structure.
This layout type is likely to become a “Golden Ratio” in eCommerce product page design. Its structure is pretty comprehensive and its success is proven on numeros stores and it suits different products. Back to the beginning where we deny the myth about universal layout design we have to specify that magic will disappear if you don't consider your product and target audience specifications. Yes, the structure is universal but if you implement the same design template as on the example for automotive tools e-store, it is very likely it won’t boost your conversions. But who knows, who knows;)
Let’s discover this universal structure on mockup for better understanding.
Human eye automatically follows definite trends precepting visual information. Eye tracking studies show that users scan screens in similar, and predictable ways. The most popular are Gutenberg Rule or Z-pattern and F-pattern.
The Gutenberg Rule is used to show a user behavior known as reading gravity. Each sweep begins along an axis of orientation—a horizontal line created by aligned elements, text lines, or explicit segments—and proceeds in a left-to-right direction. The strong and weak fallow areas lie outside this path and receive minimal attention unless visually emphasized.
First, a visitor scans top of the page horizontally. This behaviour is caused by the reading habit - left-to-right from the top. But take in account that not all users read left-to-right, while numeros countries have arabic (right-to-left) writing systems. Such cases need creating right-to-left interfaces. When top content scanning is finished human eyes fall down in the left corner and start horizontal scanning of the bottom part of the screen.
Page layout following the Gutenberg diagram would place key elements at the top left (e.g., headline), middle (e.g., image), and bottom right (e.g., contact information).
For eCommerce home and category pages that are not centered on the text is distinctive Z-pattern. Eyes follow "Z" shape.
Commonly, Z-pattern repeats, creating an endless zigzag structure that continuous as long as content holds the user’s attention.
Mixed content (visual and text):
Commonly people scan the content-heavy pages, where visual and text content is combined in the F-pattern form. This design is typical for news portals, blogs, etc.
In this pattern the eye starts in the top-left and moves across the page to the right before moving down a little and repeating the movement across the page. The general pattern follows the shape of the letter F, but perception of key spots are alike to the Z-pattern.
If you don’t just want people to convert but want them to convert NOW - urgency and scarcity tips that stimulate immediate actions (“order within 5 hours and get free shipping”, “only 1 left in stock”) are need to be placed in the first block around the 4th point.
Feeling natural at the web page is your aim. It makes visitors calm and creates a sense of trust. All you need for this is exemplary design based on user behaviour trends. It allows to to anticipate and influence customers decisions. How it can be possible? How design can make people's minds?
User behaviour patterns helps to place the most important information in areas with the highest user focus. According to Casasanto theory right-handed users have strong association between right-hand content and goodness. He suggests that the majority of us "prefer the product, job applicant, or extraterrestrial positioned to their right". This plays well into the implementation of the Golden Ratio. Most times the Golden Ratio starts from the top left corner and then spirally to a focus on the right.
That’s why combination of Golden Ratio and user behaviour patterns (Gutenberg Rule, F-pattern) helps to build trust and emotional connection between your product and customers. Subconscious sense of goodness impact users’ activity via sidebar or right-hand side of the screen push action. During the day we make a lot of right or wrong choices and most of the time we can’t even explain where they come from. Unexpected things or events that are hard to understand terrify people and we subconsciously relate them as wrong, while predictability is estimated as something right. That’s why placing elements in common, expected areas make people confident in reliability of the seller.
That’s why this Universal Product Page Layout is so effective. The combination of Golden Ratio, F-pattern, right-handed info location and predictability as users has met hundreds or even thousands of pages structured in the same way.