What Is Product Page

The product page is a page of the e-commerce website that provides a customer with all the needed information about the particular item, allows them to check various options if they exist, and enables a customer to quickly proceed with the purchase process if they decide upon buying the item.

Unlike a real point-of-sale, an e-commerce website doesn’t provide physical contact with an item or assistance from shop staff. Product page becomes the major source of attraction, impression, information, and persuasion. That’s why its design, navigability, and usability play a crucial role in growing sales.

As we mentioned in our guide to the basic web pages, a badly designed product page may waste all the effort (usually massive and complex) taken to bring the buyer to the website and to this particular product. So, besides the attractive product presentation, focus on functionality, clarity, readability, and intuitive navigation.

Product page concept for a gardening e-commerce website

Typical Elements of Product Page

Basically, a product page:

• shows the image of the product
• gives all the needed information about the product
• allows users to check different color/model options (if any)
• enables visitors to see the reviews, comments, and ratings from earlier buyers
• allows for adding the product to the cart or wish list
• shows other relevant options.

Additionally, the product page may include such options as a comparison of different items, especially popular on websites selling different devices and appliances.

Product page interactions for Bennett, a tea brand e-commerce

Based on that, here’s a checklist of basic elements of the product page layout:

• name/title of the item
• photo
• price
• item availability
• add to cart/add to bag/add to basket/buy button
• add to favorites/save to wishlist button
• description
• social proof: rating, reviews, the number of previous buyers, the number of people looking at the item now, etc.
• choice of color
• choice of model
• choice of the number of items to buy
• size guide or calculator (for clothes and footwear)
• extended details (materials, technical specifications, dimensions, weight, special features, etc.)

The list above doesn’t mean that all the points are obligatory for any product page. The choice will depend on analyzing multiple factors, understanding the target audience, and careful prioritization to see which points to include and which may be eliminated from the list for this particular type of goods or kind of customer.

Product page first-screen view on Walmart

Design Practices for Product Pages

Visual Demonstration

Ecommerce platforms are the best place to prove the saying that the picture is worth a thousand words. Not able to contact the item physically, visitors will count on the visuals of the product to make their first impression about the goods. What’s more, images are noticed and decoded faster than words; they will be the first element attracting the visitor’s attention. They present the part of the content which is both informative and emotionally appealing.

That’s why many e-commerce platforms:

• use a set of images to present one item from different points and angles
• apply zoom functionality to enable a visitor to look at some parts of the photo closer, see the textures and small details
• combine the photos of the item with photos of it on a model or in the proper environment to give a better understanding of its looks and sizes

Product page first-screen view on Marks and Spencer: a combination of several photos shows the item separately and on the model

The approaches to photo content can be different and depend on both general brand strategy and particular campaign or collection style. However, what unites them all is:

• originality: special shootings are organized to make custom photos that correspond to the style defined in a brand book or specific campaign guidelines
• high-quality: no doubt, the quality of photos directly influences the impression about the particular item and the brand in general
• optimization for the web: being quality, photos shouldn’t be too big as it can dramatically influence the loading time, which in turn has a great impact on SEO; also, pages loading slowly are the solid reason for high bounce rate – unless the website offers something absolutely unique and super exclusive, people will just go away instead of waiting.

Product page for the niche brand of underwear, using photo demonstration on model

Except for images, other media, more complex or interactive, can also be used. Among them, you can now find:

• product videos, detailed video reviews, and instructions
• 360-degree view of the item
• augmented reality technologies helping people to observe the item in their own environment or try it on virtually

The product page of GNO Blankets website uses video demonstration and graphics with detailed demonstration of product layers.

Obviously, these types of media are often more complicated, time-consuming, and expensive in production than photos. So, the decision on their worthwhileness is usually based on the type and price of the offered item. For example, to sell a 5-dollar T-shirt, photos may be enough, but for buying a massively more expensive fridge, smartphone, computer, or even a car, customers need more convincing in the decision-making way. And in this case, expenses on the more complex but more impressive, persuasive, and informative visuals and media could be a worthy investment.

A creative product page concept for a website selling niche accessories applies special realistic effects to the functionality of a model choice.

The pet shop website uses video demonstrations of the items as a convincing way to see how the product works in the environment and sets the needed emotional connection.

Informative but Simple Description

The saying that people don’t read anymore has nothing in common with the product page: when customers are deciding upon spending their money, they do read what they need to know about the product they are going to buy. Still, it’s not the reason to overload the description, as the attention span is quite limited. The description text should be concise, factual, simple, and talking in the language of the audience. It should answer the basic questions: what the product is, what it looks like, what it does, and how it does it. And better to do it from the first lines, which have the highest chances to be read, instead of filling them with standard marketing hooks shoppers are already sick and tired of.

Another rule of thumb here is connected to the previous point: show, don’t tell. Well, it’s better to say, tell, but also show! Don’t just describe in detail how the bag looks inside – show the photo. Don’t just tell how beautifully this neckerchief matches that jacket – show the photo. Don’t just mention the size of a toy – show the child playing it. Combine the power of words with proper images to make the experience much more effective.

Product page first-screen view on Uniqlo: the page features a concise and informative description of the item and puts the details on materials and care in another tab, both in the pre-scroll area of the page. Another good thing is a clear definition of model size on the photo, allowing the customers to instantly understand the proportions.

The product page for the cosmetics website uncovers the information about the product gradually, with the core data above the fold, supporting the prominent item visualization; the split-screen approach helps to divide visual and text zones to make them easily scanned.

Super Obvious Call to Action

Calls to action (CTA) should be instantly noticeable. In e-commerce interfaces, CTA elements are the core factor of effective interaction with the product; they play a crucial role in usability and navigability and, therefore, in getting profits. When all the path of interaction and transitions is built clearly for users, but the CTA element is not obvious, misplaced, or designed badly, the risk gets higher that users will get confused and need to make an additional effort to achieve their goals – which is annoying. Therefore, the risk of poor conversion rates and bad user experience grows.

ASOS product page first screen: the CTA button differs from everything else on the page due to color contrast and is instantly noticed in the light, airy layout.

Focus on the Item

No doubt, thinking about the layout and content of the product page, both stakeholders and designers feel the urge to fill it with everything possible, and even more, to make the page super informative. However, be careful as this strategy may do a dirty trick: in that flood of information, the focus gets blurred, and visitors can get too distracted to make a decision. How to find the balance?

On the one hand, it’s recommended not to overload the page with a great deal of information that will overwhelm customers and distract their attention from the major goal – to make the purchase. On the other hand, visitors aren’t ready to jump from one page to another to get different information about the item they are interested in. Therefore, the designer has to take the time for thorough research on the issue, prioritize carefully, and find the balance of data that needs to be provided on the product page.

Is there a golden rule for all e-commerce websites? No way, as different customers and markets have different needs, and the type of the product also influences the choice of core and secondary information to show. The analysis of the target audience and user testing can give clues on what information is required for the specific categories of items or services.

Creative product page design for a niche perfume website focuses on item presentation amplified with an atmospheric video background and special effects.

The more pricey, uncommon, or innovative the product, the more information the customers usually want to get about it. And even for common stuff, there may be tons of questions and hesitations. Sure, all the needed information should be accessible from the product page, and the challenge for UX designers here is to find a way to organize it properly. Technical details, materials, weight and size, size chart or calculator for clothing and footwear, functionality for comparing the item with a similar one, and so on and so forth – any of those details can play the premier violin in a story of a particular item.

Use the principle of the inverted pyramid and uncover information gradually, from the most important and demanded shown first to more and more specific details unveiled further.

Instead of creating intrigue, be open, direct, and clean in content presentation.

Try to put all core information in highly readable form on the above-the-fold part of the page.

And test, test, test again, analyze the time on the page, heatmaps, and clicks, ask and analyze to know what buyers really need and what makes shopping convenient for them.

The product page on Amazon is based on the principle of the inverted pyramid: this above-the-fold view shows the core information and functionality buyers want and need to know about this type of product first of all. Engaging social proof is marked by the label of #1 New Release and shows what other products are often bought together with this one.

The second screen uncovers more about the actions of other customers interested in this theme: two sections, visually attractive due to the focus on product images, uncover other items customers view or buy.

And only after that, when scrolling further, users can find extended information, editorial reviews, etc., based on text without visuals.

Intuitive Navigation

Every button, link, and card design can change the conversion rate significantly. It’s vital always to remember: in the intense competition we observe in e-commerce now, buyers aren’t ready to wait or waste their time on unnecessary operations or efforts to understand where’s what they need. What they do demand from e-commerce is an experience that is faster, easier, and more convenient compared to going to the actual store. If this website doesn’t give it to them, they will look for it somewhere else.

So, adding to obvious CTA, make sure that users can effortlessly do common steps, for example:

• find search field
• use breadcrumbs helping to quickly understand the current position in the website hierarchy and probably take a step or two back instead of just going away
• be totally sure which elements on the page are clickable
• see if the item is already in the cart
• see the number of items in the shopping cart or bag (usually in the website header)
• use the power of visual dividers and common directional cues to perceive the information faster
• find the contact information and navigation links in the website footer

Product page first-screen view on Target: multiple photos of the item, both clean and integrated into the environment, clear and instantly noticeable controls for choice of color, the obvious search field in the header, breadcrumbs creating the secondary navigation level, social proof in the form of ratings and questions, and clear call-to-action element.

Consistency

Consistency means that the product communicates with the user in the same or similar way, whatever point or channel of communication. In terms of user experience, it means that similar elements look and function similarly, this way reducing the cognitive load and making interactions smoother and more intuitive.

In e-commerce interface, it touches both:

Internal consistency is about different parts of your interface or brand that look and behave as one clear system. For example, when you make all the CTA buttons on different pages or screens of your product colored and designed the same way, visitors can learn fast and will be able to quickly distinguish them at any step of their user journey.

External consistency is about parts of your interface that look and behave as typical patterns for most products of this kind. That’s, for example, when you use a shopping cart even on the website selling non-tangible products or underline the text links to give users a hint that they are clickable.

Sephora product page first-screen view: expected navigation in the website header, easily recognizable for e-commerce shoppers, super obvious call-to-action button, arrows used as the clearest directional cues for most users around the web, focus on the item presented in different visuals and highlights important and influencing decision-making for the target audience.

Power of Known Patterns

Adding to the previous point, UX designers would better never underestimate the power of habit. In UI for e-commerce, especially in the red-ocean spheres, the primary goal is not to shock and awe. Basically, UX designers become a friend or at least supportive shop assistant who greets visitor, guides them around the store, takes a right to the items they want, and make the checkout as fast and simple as possible. To make that all possible, designers should base their decisions on how actual customers behave.

There are many articles and videos calling creative people to hear their hearts, trust their guts, and think out of the box. However, design is not just pure creativity striving to show all the power of original solutions. First of all, it’s a way to solve the problem and make users happier. So, it’s vital to look at the interface from the user’s perspective and find a way to make interactions that will provide a smooth and easy way to purchase.

The power of habit plays a big role in the products of this kind. Choosing a layout, menus, or icons that stand too far from the ones users are generally accustomed to often brings confusion and frustration. For a simple example, the usage of any other image instead of a magnifying glass to mark the search field can result in a bad user experience as buyers know that visual symbol and will look for it. If you are ready for such experiments, take time to test them well and ensure that customers are ready for them, too.

H&M product page design is based on a minimalist approach: the first-screen view is designed around prominent images, model choice options, elegant and readable basics (product title, color name, and price), a heart icon as a well-recognized visual trigger of adding the item to favorites and a noticeable CTA button. Even the size options are hidden in the dropdown menu to put the number of controls to a minimum and focus all the attention on the visuals. Sure, it means additional clicks and scrolling; however, the approach may be reasonable and effective if the customers are used to this flow and appreciate this particular style, consistently reflecting the brand image in general.

In the article on home page design strategies, we mentioned that the website is made not for creative contests or galleries of fame but for real users. The positive impact of habit in terms of user experience can be stronger than the wish for revolution. No doubt, the dose of uniqueness is needed, but not so much to knock down the user. In e-commerce UI design, often aimed at quite a diverse target audience, too much of a revolution might scare and provoke hesitations: do I really need to buy this thing, a user may think, if it’s so hard to get it? Study the interaction patterns and typical products for that particular target audience to make their habits their power. And don’t forget to check that all the icons on the screen don’t have a double meaning; support them with text labels where needed. Strive for the balance between innovation and traditions.

Narrowing the focus, we may also talk about the power of habit for a particular e-commerce website. You could have read numerous reviews of the “poor UX design” of this or that e-commerce giant, breathing fire and brimstone into old-fashioned solutions or complex navigation. However, thinking deeper, it’s easy to understand that they activate the power of habit as a major approach of respect to their buyers, as plenty of their customers have been with them for many years. It’s not because they don’t know how to change; it’s because, at some stages of business development, the cost of change may be too high. It doesn’t mean that the changes are never made; they are just not as revolutionary and made in small steps.

Product page above-the-fold view on Etsy marketplace

Scannability and Skimmability

It’s already well-known that when coming to a website or app, users don’t usually read and observe all the content on the page or screen. Instead, they start with quick scanning to understand if it contains something they need or want. Knowing the eye-tracking models, Gestalt principles, and laws of visual hierarchy, designers and information architects can put the core data and interactive elements into the zones of high and natural visibility. Other factors making product pages scannable are readable typography and enough white space.

There are numerous things that have an impact on decision-making, and harmony is one of them. Eye-tensing color combinations, unreadable or not combining fonts, aggressive background, intrusive pop-ups or animations, annoying sounds, or pages loading for ages – any point of that stuff can spoil the experience quickly, distract users, and move them away, sometimes even without a clear explanation what they didn’t like. Details matter; think over them and organize them well.

First-screen view of the product page on George: due to the light, airy layout, the page looks clean and simple, but at the same time, it’s highly informative even at the stage of fast scanning.  

Dark, elegant, and catchy product page for the neon signs shop, balanced and scannable

Fewer Clicks

If going from page to page or jumping from screen to screen is not a part of the journey into the sales funnel, save every user’s click possible. Too many operations are tiring and annoying, which is a kind of negative emotion. And emotions have a huge impact on user experience and make retaining users much harder. Minimize the number of clicks on the way of choosing and buying whenever it’s possible – this way, you respect the user’s time better than the politest words of thanks. For example, avoid dropdowns for a small number of choices in basic options such as color or model choice.

Product page first-screen view on Sportsdirect website: no information is hidden in dropdown menus, so it’s super easy to scan the availability of models and sizes, the CTA is seen immediately, the number of items is changed easily by typing or manipulating plus/minus controls, arrows show how to see more images, and breadcrumbs help to jump back to choosing other items easily.

Exotic Fruit e-commerce app uses a tab for adding the needed number of products with a simple tap.

The OldNavy product page integrates the section of offered combinations with other items from the website, and it is not just an image to get buyers inspired: on hover, the shopper gets the list of links to items with basic information, which enables them to easily get engaged in further shopping and makes the relevant product accessible quickly.

Social Proof

Social proof is a big factor of impact on the decision-making process in both the physical and digital worlds. It is a psychological and social phenomenon of people copying the actions of others to undertake behavior in a certain situation. This term was introduced by Robert Cialdini in his 1984 book Influence; the concept is also called informational social influence.

In e-commerce, the experience of the previous buyers influences the behavior of the next ones greatly; that’s why ratings, comments, and reviews are needed, especially on mass-market platforms. They help customers feel united with a group of similar buyers, which is easy to feel in the actual store among other shoppers but even more needed in the online shopping experience when you are shopping alone in front of a computer or mobile screen. What’s more, reviews can answer the questions the customer has and, this way, support the positive decision about buying – or prevent from buying the wrong item and having a negative experience.

Here’s the product page on OldNavy: the first screen view, among all other details, includes the social proof showing the rating of the item with the number of people that marked it. Scrolling down, buyers are getting even more engaged: except for relevant products to combine this item with for the perfect outfit, the page uncovers the relevant items other customers looked at and liked, and further customers’ photos and details on reviews.

Interactivity

With more and more buyers online, brands and retailers can analyze more data about their behavior, needs, and wishes and integrate new approaches on that basis. Interactivity that imitates seeing the item from different angles and manipulating it, trying on the clothing or footwear, testing the make-up options on your face, virtually placing the piece of furniture or decor into your room – all that and diversity of other innovations are becoming more and more accessible and affordable due to the creativity, customer experience care, and new technologies. And sure, they help customers to make a decision.

Another vital aspect of interactivity in e-commerce now is personalization and customization, when people can customize their purchase instead of just choosing it from the catalog. Choosing a custom combination of flowers for a bouquet, customizing the burger or pizza with favorite ingredients, collecting a personal outfit or family look instead of just buying ready-made ones – able to add their own personality to the offer, many shoppers feel ready to buy.

Tasty Burger app allowing for creating custom burgers to buy

Mobile Adaptation

Needless to say, there are many daily things people do with their smartphones nowadays, and shopping is becoming one of the top options. Besides, mobile adaptation is among the core web vitals of search engine optimization. If you want an e-commerce website to be googled successfully and let the visitors have a seamless shopping experience from any device, make the product page mobile-friendly and reconsider the layout to make the interface convenient and navigable for mobile devices. Some e-commerce platforms go even further and also invest in creating their native applications for iOS and Android, but for many small businesses, it may appear not affordable or even not reasonable. Anyway, the product page, as well as the rest of the website pages, should be responsive and mobile-friendly, no matter if the native app exists or not.

Minimalistic product page for a fashion brand e-commerce focused on photos, easy choice of color, and responsive to be used on any device

404 Error

With product pages intensively used and often updated, there are different cases of running into an error. People can accidentally mistype a letter in the URL, or the page they saved before may not already exist as the product is already out of stock. Make sure not to let customers come across an empty error page and go away. Connect them to other pages, offer relevant options or categories, and do everything to take advantage of the error page involving a customer to check something else.

404 error page for a fashion e-commerce website

Bottom Line

Sure, the decision on the design practices to choose for a particular e-commerce project is a matter of thorough thinking, and the solutions on what to use and what to leave will be based on many subjective factors, from the type of product and market segment to the company budget, employers’ skills, individual tastes and specific needs of the target audience. The approach to mass-market e-commerce differs from the approach to a narrow niche. The approach to various generations of customers will be different.

Yet, all the practices mentioned above won’t work properly if the major condition of the commercial world is not followed, which is: the product should be good above everything else. All the other steps, investments, and practices make sense if the website sells quality goods and makes a website or app its channel of sales, not the place of lies and tricks.  Anyway, if the products you offer are good and the customer is already on the website, let the product page show the item in its best light and help the shopper to feel it like home, convenient, clear, and friendly.

Useful Articles

Here’s a bunch of articles to dive deeper into the themes of e-commerce, web usability, and user experience design.

UX Design for E-Commerce: Principles and Strategies

11 Profitable Strategies for E-Commerce UI Design

The Role of Branding in UI Design

Business-Oriented Design. Know Your Target

Product Page Design Inspiration: 17 Ecommerce Web Designs

Design for Business: User-Friendly Way to Profits

Two Types of User Motivation: Design to Satisfy

5 Basic Types of Images for Web Content

Web Design: 16 Basic Types of Web Pages

Error Screens and Messages: UX Design Practices

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Product Page Design: Best Practices on UX for Ecommerce появились сначала на Design4Users.

In our today’s collection, you will find a bunch of concepts that demonstrate the results of this creative search. Here you will find a variety of web pages typical for e-commerce websites: home page, catalogs, product pages, landing pages for particular campaigns. Enjoy, consider, and get inspired!

Fashion brand e-commerce website by tubik

Skincare e-commerce website concept by Emy Lascan

Food ecommerce website by Vision Trust

Clothing store website page design by Orizon

Ecommerce website design for craft confectionery by tubik

Online fashion store website concept by OTAKOYI

Bright ecommerce website concept for selling shoes by Shah Alam

Fashion ecommerce web concept by gde.design

Product page concept for a toy shop by Anatoliy

Brutal product page design by Justin Greene

Product page design exploration by Emy Lascan

Ecommerce fashion store concept by Witech Enterprise

Furniture store website concept by Bold Monkey

Balloon e-commerce website by Cuberto

Furniture e-commerce product page concept by RH Agency

Fashion e-commerce web concept by Ariel Jedrzejczak

Cosmetics e-commerce landing page concept by Nickelfox

Furniture e-commerce product page design by Halal Lab

Minimalistic product pages concept by isavelev

Ecommerce theme design by WPDeveloper

Clothing e-commerce website concept by Halal Lab

Light and airy product page concept by Vishnu Prasad

More thematic design collections are coming soon, don’t miss.

You may also like the collections of ecommerce app designs, neumorphic UI designs, web designs for events, user interfaces for finance management, creative logo designs, UI concepts for education, and other D4U Inspiration posts

Сообщение UI Inspiration: 20+ Web Design Concepts for E-Commerce появились сначала на Design4Users.

Just as a front window display entices customers to enter a physical store and check out the merchandise, the way that your online boutique’s landing and product pages look will either encourage people to make a purchase or go to your competitors.

To be more precise, it takes only about 50 milliseconds for users to form an opinion about your site that determines whether they like it or not, whether they will stay or leave. And if they leave, they’ll probably never come back – more than 85% of online consumers said they’re less likely to return to a website after a bad experience.

In ecommerce, visual appearance is everything. When shopping online, people can’t touch or feel the products, which means they will judge your boutique’s quality by what they see. In fact, studies have found that more than 45% of consumers base their decisions on the credibility of websites on their aesthetics and visual appeal. That includes website layout, color and color schemes, typography, and font size.

So, if you’re looking to have a successful online boutique, get rid of the ‘if you build it, they will come’ mindset and start thinking about how you can make it more visually appealing. To help you out, we’ve put together this 7-item checklist that will help you create a sleek online boutique in no time.

Designed by Tubik

Decide Which Platform You’re Going to Use

Where do you want to start an online boutique? Do you want to take advantage of Etsy’s organic traffic? Or maybe you’d prefer to have more control over your site, layout, and the overall shopping experience? There are upsides and downsides to both options and, ultimately, it will come down to what type of products you’re selling, as well as how much control you want in customizing your online store.

Platforms like BigCommerce offer a wide range of built-in tools and features to support your online boutique’s growth. They also provide powerful reporting to help you keep track of your store’s improvements and success. Moreover, if your budget allows it, you might hire a professional BigCommerce design company to make your e-boutique look as sleek as possible.

Natori

Think Clean and Organized

One study found that nearly 95% of the website first impressions are design-related. The study participants noted that they often found websites to be too complex and lacking navigation aids. They also commented on an ineffective search feature, excessive pop-ups, improper use of color, too much text, small print, and a corporate look and feel.

Just as people like shopping in clean and organized physical stores, they also like websites that are sleek and free from clutter. A messy design can easily dissuade customers from spending time in your online boutique or interacting with your site, which means they won’t be buying anything either.

DressUp

Even though it doesn’t hurt to include additional info on your brand’s story, an option to sign up for an email newsletter, or a blog, you need to ensure that these don’t distract customers from making a purchase. For instance, a form at the bottom of your homepage that visitors can fill out to subscribe to your email list is ok, but a pop-up might have the opposite effect of what you want. It could distract people from making a purchase and annoy them and make them less likely to want to give you their email.

In addition, make sure your navigation plan is cohesive and straightforward. As with any site, you should focus on ease of navigation, accessibility, legibility, and above all, optimization of the user’s experience. Once users land on your homepage, they should be able to find what they’re looking for quickly and easily, and make their way to your target zones, be it a contact form or checkout.

Bohemian Traders

Keep navigation choices to under 6 of your most important pages and use subpages to order a website with more than 5 pages. Create a hierarchy of what information is most important on the page, and don’t be afraid of white space and varied sizing to create contrast. If you have a lot of different categories and pages on your website, you can use a drop-down menu to organize them more easily without causing a sensory overload.

Use Colors to Your Advantage

Color can be a very powerful tool, and if you understand the psychology behind it, you can use it to your advantage.

Jackie Smith

Different colors inspire different feelings and actions from people, so if you want your ecommerce website to convert, you need to leverage them. For instance, according to color psychology, red inspires feelings of passion and excitement, which are driving factors behind spending, and studies show that making a CTA button red can increase conversions by more than 35%. On the other hand, blue has been shown to increase feelings of trust, which is why it appears in more than half of all logos (just think about Facebook, Twitter, American Express, and IBM).

The point is, color is one of the most powerful tools in your web design toolbox, and if you know how to use it, it can have a significant impact on your online boutique’s design.

Truvelle

Pay Attention to Images

In the ecommerce world, to sell your products, you must stimulate your customers’ visual appetite. 75% of online shoppers rely on product images when deciding on a potential purchase. A study by Forbes found that 50% of online shoppers consider large, high-quality product images to be more important than product descriptions or even reviews.

The images you use in your online boutique should be so attractive that customers will be immediately tempted to grab your products and walk around wearing them. High-resolution images are a must. Any pixelation or blurriness can make people think that your products are cheap and turn them away instantly. Consider creating a photo gallery for each product to allow visitors to see the product from multiple angles.

Mulberry

Another popular feature is zoom, which allows them to see the fine details. That is as close as you can get to allowing online shoppers to physically touch a product and examine it more thoroughly.

Whenever possible, use images of people using your products. Clothing looks a lot more attractive when it’s worn by a real-life model rather than on a mannequin or being laid flat.

When curating your images, make sure they represent your online boutique’s style.

Think about who your ideal customer is, what they like, and what they hate. What fabrics, colors, articles of clothing, or kinds of jewelry appeal to them? Answering all these questions will help you create aesthetic cohesion. Your goal is for all of your items to look unified on a screen together and tell a story.

However, you should also make sure that your images are realistic. The average rate at which consumers return products they bought online is about 30%, and more than 20% of those returns occur because the product looks different in person.

Keep Text Minimal

You can spend weeks working on long, detailed descriptions for your products, but we’ve got news for you— nobody is going to read it.

Studies have shown that most website visitors only read about 20% of the text on any page. The average Internet user has a short attention span, so large chunks of text can be quite off-putting. Instead of reading the text word for word, people tend to scan it, looking for crucial information.

Thing Industries

So, if you want to get your point across, you must make your content scannable. Try to keep all the text on your site as short as possible. Break up the content—whether that’s blog posts, an “about us” page, or product descriptions—into an easy-to-scan format. Organize information into short paragraphs, use bullet points, bolding, and even infographics to make it easier to read.

The easier to scan your content, the more likely website visitors will absorb your key messaging—and the more likely they will be to make a purchase.

Develop Your Unique Brand

Whether your online store specializes in toddler clothes or vintage pieces, it should embody a defined style. Create harmony between your boutique’s web design and that style to strengthen your branding and make your target customers feel at home when visiting your boutique.

Is your brand girly and fun, with bright colors and fonts? Or, maybe you’re going for minimalism and clean, sleek lines? Your brand is a combination of your chosen name, product selection, the ideal customer you’re targeting, as well as the overall look and feel of your site and social media platforms.

Toms

Ensure that your logo is visible on every page of your website and keep fonts and color schemes consistent and on-brand. You don’t want your visitors to feel like they’ve landed on an entirely new website every time they click onto a page. Maintaining the same design scheme and navigation menu across all pages displays a consistent and trustworthy image.

Don’t Forget About Mobile

If you’re still hesitant about the importance of mobile for ecommerce, here are a few stats to take into consideration:

• More than 55% of internet users say they won’t recommend a business with a poorly designed website on mobile.
• About 85% of adults think that a company’s site should be as good or even better when viewed on mobile.
• Nearly 80% of Internet users in the US have used a mobile device to shop online.
• 35% of US consumers use only their mobile devices to buy online.
• Experts estimate that US mobile commerce sales will reach over $420 billion by 2021.

Sephora

In today’s digitalized world, you can’t ignore the fact that many people will visit your online store via their mobile devices. So, in order to make sure that it looks great on different screen sizes, you’ll need to optimize the mobile view.

Mobile shopping differs from shopping on a regular PC. Mobile users prefer longer scrolling, so your site’s mobile version has to be designed vertically. Texts and images should be big enough and spaced out, so they don’t look cluttered. You should also organize your options and product collections simply and intuitively, allowing customers to find what they’re looking for quickly and easily.

Final Thoughts

Web design is critical when creating an online boutique. The main goal of good ecommerce web design is to convince visitors to make a purchase by using the right images, colors, graphics, words, and fonts. Your online boutique’s design should attract customers, provide outstanding UX, and present your store in the best light possible.

Designing an online boutique can be tricky, but now you have these 7 tips to help you create a store that not only looks gorgeous but also converts. It may seem like a lot, but with the right plan in place, you can have the online storefront of your dreams in no time.

About Author: this is the guest post by Hazel Pan, a copywriter whose expertise includes Funnel Copywriting & Inbound Marketing.

Сообщение Handy Guide To Designing a Visually Appealing Online Boutique появились сначала на Design4Users.

• 51% of Americans prefer to shop online
• 96% of Americans with internet access have made an online purchase in their life, 80% in the past month alone
• E-commerce is growing 23% year-over-year, yet 46% of American small businesses do not have a website
• Online orders increase 8.9% in Q3 2016, but average order value (AOV) increased only 0.2% — indicating that transactional growth is outpacing total revenue.

The numbers above still haven’t stopped their increase. That wouldn’t be reasonable for any business to ignore such global trends having a great impact on profits and reaching customers. For the last couple of years here in Tubik we see the obvious and logical growth of interest from big and small businesses in establishing their presence online via websites and/or mobile applications. Based on our experience and the research of the sphere, today we offer you the article telling a bit more about strategies and best practices in UI design for e-commerce.

So, let’s start with the 11 points which are important to consider when you are designing e-commerce user interfaces.

1. Make the branding instantly visible

From the business perspective, branding is a crucial thing: it enables to provide a product, company or service with a recognizable face and personality.  In general terms, branding means a sort of image created via a set of distinguishing features and promoting awareness and recognizability of the product or service on the market.

Branding tends to be essential in an e-commerce user interface design, especially if stakeholders want to use the digital product as the additional flow of customer attraction. Moreover, identity integrated thoughtfully into the interface is an effective way to increase brand awareness. The time taken for proper market and user research, target audience definition, competition analysis and development of brand identity on the basis of all that data by a professional designer is a worthy investment. If that’s done before launching the process of UI design, the product gets higher chances of becoming recognizable faster and easier.

In this case, UI designer working on the interface, its color palette, shapes, types and fonts, illustrations and icons, will consider design solutions appropriate and corresponding to the general branding concept of the product that will make them mutually supporting each other. It provides a more natural and harmonic feeling of the brand in general and the particular interface as an integral part of this brand.

There are numerous ways to add branding to the interface, still some layout zones and elements which have the highest potential in this issue:

Headers. In the article about website header design, we showed in detail that headers present the area of high visibility. So putting strategically important elements of branding in it is a good way to strengthen its memorability.

Splash screens. In mobile applications, a splash screen or welcome screen is the first screen seen by a user while the application is loading and starting. It’s a good idea to use a logo, mascot, or any other thing setting the instant visual connection with a brand. Moreover, adding a bit of wow-effect with slight stylish animation, it’s easy to make the sign even more attractive and memorable.

Preloaders and pull-to-refresh indicators. These are the elements that show the flow of the current loading process on the app or website. Branding applied elegantly in them can add much to the consistency of both UI and identity design.

Mascots. Mascots are images, usually personified, which often represent the brand, product, or service identity and can be its symbolic convention in all the applications or websites. Mascots push the limits of personification and give the chance to create unexpected combinations of elements or make fantastic and non-existing characters alive. A mascot becomes the element of identity and inter-connector between the user and the product. In many cases, it is the basic element of communication and interaction delivering the necessary message to the user.

2. Set clear and easy navigation as the core task

In the article on UX design for e-commerce, we stated: whatever an amazing website or app is, whatever the stylish and trendy design and breathtaking images it features, its success will be measured not by the number of «wows». The efficiency is analyzed simply – by the number of complete purchases. If users don’t buy, design means nothing while stakeholders lose their money. Clear intuitive navigation plays the premier violin here. At every step of interaction, users need to understand clearly plenty of simple things, like:

• what company or brand they are dealing with
• what page they are at
• where the menu is
• how they can get back to the home page or catalog
• where the search and filters are
• how long the page-loading process is going to take
• how they can see the detailed information about the item
• how they can choose between the option for the same item (color, size, etc.)
• how they can pay for the item
• how they can save the items they would like to get back to later
• how they can contact the seller
• how they can see the rating and reviews of previous buyers etc.

3. Check the scannability of the page or screen

As it was already mentioned, users don’t usually read and observe all the content on the page or screen from the starting point: instead, they start from quick scanning to understand if it contains something they need or want. Knowing the eye-tracking models, Gestalt principles, and laws of visual hierarchy, designers and information architects can put the core data and interactive elements to the zones of high and natural visibility.

Calls to action (CTA), in particular, should be instantly seen in the first seconds on the page or screen. In the interfaces for e-commerce, CTA elements are the core factor of effective interaction with the product playing a crucial role in usability and navigability and therefore in getting profits. When all the path of interaction and transitions is built clearly for users but CTA element is not thought-out, placed or designed well, users can get confused and will need to take additional effort trying to achieve their goals. That increases the risk of poor conversion rates and general user experience.

4. Minimize user’s efforts whenever it’s possible

The respect to the customer lies not in pouring out your thanks. The real respect is in saving users’ time and effort day in and day out. Here are some design practices which can make the interface effort-saving:

Show related products. Seen on the item page as recommendations close to the features of this particular product can make the process of search and browsing much faster for users. However, it’s vital to check together with developers that this section really works according to the algorithm which shows suitable items, not random ones.

Strive for a minimal number of clicks. If going from page to page or jumping from screen to screen is not a part of the journey into the sales funnel, save every users’ click possible. Too many operations are tiring and annoying which is a kind of negative emotion. And emotions have a huge influence on user experience and make retaining users much harder.  Minimize the number of clicks in the way of choosing and buying whenever it’s possible – this way you respect user’s time better than politest words of thanks.

Simplify the sign-in process. Imagine the situation when you got to the amazing website selling the goods of your dream, and they are presented in such a stylish way that you want to buy them at once. But when you click the button “Buy”, you are taken to the huge long from which you have to fill in to register on that website. That will cool down your hot wish to buy everything right here, right now, isn’t it? You change from the state “Take my money, give me that” to “Really? 20 points to fill in before I can buy?” in split seconds. Not all the users will survive that transformation and the website or app will lose a part of buyers. So, it’s necessary to make the sign-in/log-in process as simple as possible.

User shape and color marking to group the items or types of content. Color and shape codes enable designers to apply Gestalt principle of similarity not only on one screen or page but on the whole app or website. Color or shape markers simplify navigation and keep the consistency of design enabling users to remember the prompts and find the content they want easily. For e-commerce platforms which are usually full of numerous items, it can make the interface much more user-friendly.

Check that perception of the layout is natural and harmonic for the human eye. There are numerous things that have an impact on decision-making, and harmony is one of them. Eye-tensing color combinations, unreadable or not combining fonts, aggressive background, intrusive pop-ups or animations, annoying sounds or pages loading for ages – any point of that stuff can spoil the experience quickly and move users away.

5. Don’t go too far experimenting

There are many articles and videos calling creative people to hear their hearts, trust their guts, and think out-of-the-box. However, design is not just pure creativity striving to show all the power of original solutions. First of all, it a way to solve the problem and make users happier. So, it’s vital to look at the interface from the user’s perspective and find a way to make interactions that will provide a smooth and easy way to conversion. In the article on home page design strategies we mentioned: the website is made not for creative contests or gallery of fame but for real users. The positive impact of habit in terms of user experience can be stronger than the wish of revolution. Surely, the dose of uniqueness is needed, but not so much to knock down the user. In e-commerce UI design, often aimed at quite a diverse target audience, too much of revolution might confuse and scare: do I really need to buy this thing, a user may think if it’s so hard to get it? Study the interaction patterns and typical products for that particular target audience to make their habits their power. And don’t forget to check that all the icons on the screen don’t have a double meaning. Strive for the balance between innovation and traditions.

6. Use landing pages for specific purposes

For business aims and profits rate, this tip may bring crucial changes. E-commerce UI design principles are usually based on dealing with complex websites or apps which are filled in with a variety of information. So, the approach of directing all the traffic from outer sources to the home page can be a step in killing profitability and reducing conversion rates. Users might get overwhelmed, distracted, or even annoyed with the amount of data they have to process finding what they need, especially if they are focused on a particular narrow goal presented in the source they come from. Using landing pages when you need to concentrate the user’s attention on something specific can solve this problem efficiently. Landing page is focused on one item, to make it quickly found and reduce delays when a target user seeks specific operations, services, or items. This is the issue of especially high importance in the case of e-commerce websites when unwise design solutions bring to poor user experience and financial losses.

7. Make the homepage informative

Home page can satisfy multiple functions: it’s a card of invitation, a starting point of the journey around the website, storage of the vital links and data, and a strategic asset for marketing goals. In the majority of cases, it is the first visual and emotional touch to the website. Certainly, design is one of the core ways to make this touch gentle, smart, and helpful. With all the progress the World Wide Web has witnessed, this position doesn’t change: home page often defines if a user goes further around the website, not only by beauty and style but first of all by information which is looked for. Making it accessible, noticeable, and clear, designers grow the chances of positive user experience.

In general, the home page can include the following data:

• the nature of the website
• brand or company identity elements
• internal search
• links to the core interaction zones
• contact data and links to social networks
• signs of trust (testimonials, reviews, big numbers of presence in social networks, etc)
• for e-commerce websites, it can be a visual presentation of bestselling and/or exclusive items, for example, specific books, toys, clothing, equipment, etc.

The solution which of the mentioned points are going to be included and how they are going to be spread on the layout should depend on the goals set for the website and the research of the target audience.

8. Apply high-quality images giving the message

Images take a big part in usability: as the vast majority of users are visually driven, images become the hook points of getting basic data about the website or app. They present the part of the content which is both informative and emotionally appealing. The level of detail and functionality allow classifying the images in user interfaces into types, among which:

— photos: theme photos creating the appropriate mood and setting the message, demonstration photos, photos of the items, title photos for blog articles and pages of special offers, etc.
— illustrations: custom illustrations in graphic interface design can look both informative and original allowing the design to stand out of the competition.
— hero banners: applied mostly in web design, they are big images which are usually the first visual element catching user’s attention in the initial seconds of interaction; they usually give the attractive visual presentation of the main content of the resource.
— icons: these are small but meaningful pictograms that are informative and support data exchange between the informer and addressee. Icons play a key role in providing clear and intuitive navigation, but they should be checked on proper clarity and the absence of double meanings.
— mascots: images, usually personified, representing the brand, product, or service identity.
— visual identity elements: various visual signs of branding like logos, custom lettering for brand name and/or slogan, etc.

9. Think about promotional videos of different kinds

There are several common types of promotional videos:

• introduction video (the first insights on the company, product, or brand showing its benefits for users)
• product presentation videos (details about the product’s features and advantages, special steps of interactions and the problem-solving potential of the product)
• landing page videos (strengthening the message driving users to a particular call-to-action offered on the page)
• video testimonials (the reasons and signs of trust and loyalty to the company, brand or product)
• entertaining and educational videos (rising emotional appeal and often presenting the material for viral marketing).

All the mentioned types can serve efficiently for marketing goals and increase brand awareness. A creative and catchy video is a good way of attracting customers’ attention and the proven method of informing them quickly and brightly. A video activates several channels of perception — audio, visual, sound — simultaneously and usually do it in a way of telling a story. People are daily overloaded with tons of information of all kinds, so most of them aren’t ready to devote much time to learning about products or services, especially the new ones. In these conditions, video can become the way of communication which is dynamic, informative, and attractive. However, the technical side should be double-checked so that the video was integrated correctly and didn’t overload the page.

10. Let the user contact the duty holders from any point of interaction

The most popular placement for contact information is a footer, the bottom part of the page. However, if any kind of contact data is core for conversion, it’s logical to put in the pre-scroll area or even a header. For example, on an e-commerce website, presents the online shop, users may want to call more frequently and this ability will have a direct impact on conversion rate. Anyway, the contact data should be available at any point users may need it. Among others, it is one of the factors influencing the level of trust to the website.

Contacts can be presented in various formats. They can reveal the data such as a phone number and location, emails, links to messengers, contact forms and an instant chat window. Making the phone numbers clickable is supportive as many users now browse from their smartphones and may want to call right from there. The address can be also clickable opening the screenshot or map showing how to find the location. The solutions have to be based on thoughtful user research setting target audience’s expectations, level of tech literacy, and ways of contact which are the most convenient for them. For instance, if your target audience is teenagers, just giving the phone number may be not effective as they really stick to messengers and social networks. At the same time, if your users are elderly people, social networks may not work in comparison to a phone number.

11. Add gamification

Gamification integrated into digital products is a great way to stimulate users’ extrinsic motivation, which is mostly a seek of reward, which can be tangible (money, prizes, diplomas, certificates, trophies, medals, etc.) and intangible (praise, support, recognition, etc.). So, challenges, leaderboards, rewards for loyalty and big orders, discounts, badges, coupons, stickers, and all the other stuff of that kind can become great stimuli for users to not only start an interaction with a website or app but also stay there and buy regularly.

The offered e-commerce UI design examples and strategies, for sure, do not cover the whole scope of issues to consider in this field. However, they can serve as a useful checklist or a source of UI design inspiration for those who aim at creating user-friendly platforms supporting business goals. No doubt, the best UI design for an e-commerce website is the one that leaves a buyer happy and brings profits to the stakeholders.

Recommended reading

UX Design for E-Commerce: Principles and Strategies
The Role of Branding in UI Design
Business-Oriented Design. Know Your Target
Business Terms in Design for E-Commerce
Two Types of User Motivation: Design to Satisfy Users
Sell Like Hotcakes: UI Designs for E-Commerce
Handy Tips for Home Page Design.
Landing Page. Direct Flight to High Conversion

Originally written for Tubik Blog

Сообщение 11 Rewarding Design Practices for E-Commerce Interfaces появились сначала на Design4Users.

What is landing page?

Landing page in its basic wide meaning is the term used for analytics to describe any page where the user started his or her journey around your site, in other words, where a user lands on the website. However, today the other, more specific meaning is used much more often to define a landing page. Behind this term, people understand the special web page created for presentation of the specific product, service, features, or options so that the visitor could get necessary information quickly and easily not being distracted.

That is why the analysts say a landing page is in most cases much more efficient than the home page. Home page can have too many options and getting through all of them to find the particular product the user can get distracted from making the decision, lose interest or even get annoyed.

Gym Landing Page

What is conversion and why is it important?

Talking about the sphere of design for businesses and products, especially in terms of their marketing and promotion, the word conversion is perhaps the most popular and widely used. In its most general definition, conversion means transformation, and depending on the field these words are applied for, it will be used for different objects.

Initially, in terms of e-commerce, where landing pages have perhaps the widest field of application, the conversion is the index showing how many visitors actually moved to the end of the way they were offered actually buying a product. So, e-commerce conversion transforms visitors (users) into buyers.

However, nowadays landing pages go far beyond e-commerce, therefore understanding of conversion also gets broader. In modern terms of comprehensive and numerous functions and needs, which users are able to fulfill with online resources and digital products, the conversion is the rate of cases when visitors did the action they were called to. And that can be not only buying something.

In terms of the landing page, conversion can be also fixed in case of:

• moving to direct use of a product
• subscription
• transition to the other page
• downloading an app or a file
• providing some information
• answering the question in the survey
• starting free/discounted trial use of a product
• browsing a library
• reading a more detailed description of the product or service etc.

Here we can see the concept of a landing page that presents a website of a rock group. Different blocks of the page provide different calls to action not overloading the user with the information. Therefore, a visitor needs split seconds to scan the page and find the necessary section that enables us to see more about the topic of particular interest.

Conversion means that your page transforms passive users into active. They don’t just observe the information given to them, but also do the action which is offered by this page. So, conversion is one of the most important indices of page efficiency which is vital for business. Landing pages are focused on engaging visitors with data performance and stimulating them to make the action which in the vast majority of cases is a part of a business plan.

Travel Gear Landing Page

Jeff Eisenberg, a successful businessman and head of an advertising agency, gives a brilliant thought about the importance of conversion: “It’s much easier to double your business by doubling your conversion rate than by doubling your traffic”. His words are proved by the practice of numerous businesses that directly target users to landing pages providing specific data and saving their most precious resource – time.

Why is the landing page needed?

As we mentioned in the case study about designing a landing page, it is easy to answer this question with a little metaphor. Imagine, you are going to visit, let’s say, New York, to walk around Manhattan. That is the dream of your life. Finally, you find the service which offers to take you to New York City fast and cheap. Great, isn’t it? You pack your bag, you charge your camera, you get up full of admiration as the dream of your life is going to get real. And then you are taken by those amazing people who offered you the realization of your dream to the entrance point of New York City. They leave you there to find Manhattan or any other place you want by yourself. How do you like it now? Who knows, perhaps you will be not so happy after an exhausting journey around the huge city looking for the place you want. Wouldn’t it feel great to be taken right to the destination, fresh and ready to admire and absorb positive emotions? Wouldn’t you as a customer be happier to reach your goal faster and easier? Sure, yes.

That is actually what a landing page does. When a person obtains the information from the outer source about the specific product, feature, information, or service and clicks through the link to its provider, sure, he or she doesn’t dream to spend a lot of time looking for the desired product or page among all the links and information provided on your homepage. The user wants to «land» directly at that very place which will make possible for him or her to get what they want as fast as possible and getting enough (but not too much) information to support their decision-making process. So, creating a well-thought-out landing page is really vital to strengthen marketing strategy and increase conversion rates.

As a practical example, here is the design concept Museu. It presents a landing page promoting art exhibitions. The idea behind it is to make this sort of promotion aesthetic and unobtrusive for the user as well as highly informative. The balance of minimalism and utility appealing is kept by means of style, color, and motion.

In the book “Landing Page Optimization: The Definitive Guide to Testing and Tuning for Conversions” by Tim Ash, Maura Ginty, and Rich Page, the authors provide a concise set of rules which designers and marketers should remember about creating a digital interactive product. It’s high time to remember them now:

The Rules of Web Awareness:

• If the visitor can’t find something easily, it does not exist.
• If you emphasize too many items, all of them lose importance.
• Any delay increases frustration.

These thoughts make the solid ground for using landing pages in the case when you need to concentrate the user’s attention on something important, to make it noticeable and easily available. A landing page is a tool to emphasize one item, to make it quickly found, and to reduce delays in cases when the target user seeks for specific operations, services, or items. As the author of the highly informative article “The ultimate guide to designing landing pages that convert” Cameron Chapman mentions, “One of the biggest mistakes a marketer can make is sending traffic from any kind of advertising or PR campaign to their home page. Your home page likely has little direction or direct connection to the campaign sending traffic to it. That can leave visitors confused.”

What does a landing page consist of?

Actually, a landing page is a field for broad creativity and depending on the target audience and objectives behind it, it can be very different. There isn’t a single guide for the fixed scheme and construction of a landing page, but there is a basic thing that should be provided by any landing page. It doesn’t matter what size is the page, how many parts it includes, how many visual elements it uses, the most important thing for any page is that it should provide VALUE.

In general, typical landing pages often have:

1) General idea of the presented object (product, service, activity, etc.) with a call-to-action element. Users need to be provided with the basic description of the benefits, preferably not too detailed but concise and useful. The aim of this element is to inform the user and provide a clear and noticeable opportunity to actively use this information via a call to action element which can be presented with a button, link, contact form, subscription field, etc.

2) Testimonials and signs of trust. People usually tend to trust more to what is already used or tried by other people and recommended as worth attention. Therefore, testimonials from clients, considerable numbers of followers in social networks, awards, and certificates can have a great impact on the conversion rate.

3) Description of the main features. This block of information can be used as additional information supporting the description of basic functionality. It supplies a visitor with more details about the product or service, its abilities and technical characteristics, its influence on life and productivity, and the like. It certainly makes the landing page longer and requires more attention from users so applying this block should be always thoroughly analyzed.

The example provided below is a concept of landing page created for quite a specific purpose and target audience. As you can see, it involves all the elements mentioned above.  The aim of the page is to promote a shop for organic food. It is composed of several blocks presenting the name of the shop, products, highlighting some important aspects of service, call to actions, and testimonials. The designer sets the purpose to make it informative but not overloaded, appealing but not aggressive. To make the experience more attractive and engaging, the process of scrolling the page was livened up with animation, and the visual elements were selected to support the general theme and provide the immediate visual perception of the basic idea.

What are the important aspects of an efficient landing page?

– Target audience analysis

No landing page should be designed without a solid basis of research and analysis. A landing page is not an object of pure art, it is a part of promotion and presentation strategy. Designers working on a landing page should keep in mind that any marketing campaign comes from the definition of the goals and target audience. So, a landing page should be designed as a virtual bridge connecting the target customer with a product or service. For a web page with high conversion rates, design decisions have to be based on the analysis of the target audience’s preferences, abilities, and psychological characteristics. The design of a landing page that will work for everyone is a utopia, standing far from real business achievements and results.

– Market and competition analysis

One more aspect the designer should dedicate time and effort to is the analysis of the competition. Earlier we have already considered the connection between UI/UX design and advertising basics in the article “Advertising Rules to Design Good UX” and one of the points was devoted to the aspect of competition analysis. As far as the landing page is actually an active part of the marketing process, the analysis of the market is inevitable for a good result. Knowing the competitors, you will be able to create original ideas of presentation that will not get lost among other numerous products and services.

– Copy

Famous guru of advertising David Ogilvy said: “Every word in the copy must count.” This is a simple but unavoidable truth if you deal with a landing page. The decision on the amount of copy used on the page should be the aspect of thorough research and testing as it directly and highly influences conversions.

However, it doesn’t mean that every landing page should contain a minimal number of words. If it presents a famous company product or service or informs about special offers, sometimes short and a concentrated copy is enough to encourage users. However, if a new unknown product or service is presented, it is important to provide users with more information persuading them to follow the call to action.

The provided example shows the design concept of a landing page for a non-profit organization. It uses considerable copy blocks and supporting visual elements to set the understanding of the club activity.

– Branding elements

It is obvious that elements of branding such as a logo, corporate colors and typefaces, slogan, and other identity traits should be strongly presented on a landing page. They should provide a strong connection of a presented product, service, or activity with the company or brand visual and verbal identity. This improves the efficiency of the general marketing strategy.

– Visuals
As was explained previously in the post about visual perception in UI, people, in general, have incredibly broad abilities to perceive visual marks, recognize and proceed data even transformed in images of the high level of abstraction. In the vast majority of cases, people fix and perceive pictorial elements like icons and illustrations faster than words. A great proportion of users are visually-driven creatures by nature. As it is shown in all the examples provided higher, using attractive and informative graphics in landing pages enables users to catch the idea and scan the page much faster and saves their time as well as involves their aesthetic perception in the process.

Seafood Recipes Landing Page

– USP and CTA

These are two magic words to make a landing page efficient. USP (Unique Selling Point) is the most important benefit (or set of benefits) people can get with your product. CTA (Call to Action) has to encourage people to realize the conversion. An effective landing page quickly informs a user about unique selling points and provides noticeable, clear, and easily-available calls to action.

– Short loading time

One of the aspects influencing design solutions for landing pages should be a reasonable time of page loading. Users do not like to lose their time, and the landing page is not a piece of unique something that will be an exception. Don’t make the visitors wait. All the design solutions should be thought-out carefully not to overload the page and prolong its time of loading unnecessarily.

– Video Presentation

A video presentation can become a very good way to present a product without making users read long copy blocks. It involves all the senses of perception in the process. Video can make the page active and interesting. However, there is a pitfall to remember: the video has a considerable impact on page loading time. So, it should be really worth watching to become a design element of an efficient landing page.

– Responsive design

Several years ago one of the articles on Think with Google provided interesting facts and statistics about the importance of responsive design for web products. Among them, we can learn that:

• 61% of users said that if they didn’t find what they were looking for right away on a mobile site, they’d quickly move on to another site
• 79% of people who don’t like what they find on one site will go back and search for another site
• 50% of people said that even if they like a business, they will use them less often if the website isn’t mobile-friendly.

Perhaps, today those numbers are even higher as more and more people are using mobile technologies on an everyday basis. Neglecting this aspect may negatively influence conversion rates.

– Absence of distraction

As it was mentioned above, the landing pages should concentrate people’s attention around a particular object. So, it should get rid of any elements that can distract the user’s attention and highlight the parts directly influencing the conversion. The fewer additional links are used, the better. Call to action elements should get the fastest and highest level of attention. In this case, user will get the best navigation to the goal.

Here is a landing page for SwiftyBeaver native Mac application. As we can see it is designed in a minimalistic manner and concentrates users’ attention on a short copy about the product’s functionality and CTA enabling to request free beta access. Although the page provides other important links, they are designed in a way not distracting from the main elements providing conversion.

Why should you test your landing page?

In one of our earlier articles “Basic Grammar for Designers. Must and Mustn’t in Design” as well as in practical case studies, we have already mentioned the importance of testing. Experts in usability say and practice proves that it’s impossible to be fully objective about the project you work on, especially if it’s a long-term one. Moreover, a designer is not a magician turning into anyone who will use the product to understand the best way of doing anything. Therefore, creating an idea is not enough. You should test it to grab the real practical data and improve your product.

Let’s also remember David Ogilvy, who said: “The most important word in the vocabulary of advertising is TEST. Never stop testing, and your advertising will never stop improving.” Testing landing page enables to understand users’ behavior and fix the solutions that are not effective and user-friendly.

Studies based on practical landing pages testing prove that even such a small change as the color of a CTA element or placement of logo on the page, let alone the copy of the headline and CTA or length of general informative copy blocks, have a huge impact on conversion rates. Collecting statistics and analytics data and their careful analysis is a good way to effective design solutions providing high conversions and sales.

Useful Reading

Here are some handy articles to continue plunging into the theme of web design and graphics for user experience.

Web Design: 16 Basic Types of Web Pages

How to Improve Web Scannability

How to Create Original Flat Illustrations

The Role of Branding in UI Design

How To Use the Power of Mascots in UI Design and Branding

Negative Space in Design: Tips and Best Practices

Web Design: The Big Guide into Different Types of Websites

Originally written for Tubik Blog

Сообщение Strategies of Efficient Landing Page Design появились сначала на Design4Users.