Anatomy of an e-commerce page
Anatomy of an e-commerce page
- Posted by: Admin
E-Commerce – is an area of the economy that includes all financial and trade transactions carried out through the computer networks and business processes related to such transactions. E-Commerce sites are designed to sell a variety of products over the Internet. These websites have a number of features that are determined by their purpose. The main ones are:
- full-fledged personal account (personal data, order history, status of current orders, the ability to make deferred purchases, payment information and delivery information, loyalty programs);
- connection to payment systems;
- integration with delivery services;
- the ability to manage discounts and markups on goods, to form different types of prices for different types of buyers, to set discounts on reaching a certain amount of goods, to create discount coupons;
- integration with warehouse accounting systems.
B. Product TitleEvery visitor pays special attention to the name of the product. What should it be like? Good name:
- does not contain abbreviations, except clear to all (kg, m, cm);
- does not contain professional terms that can be replaced by commonly used words;
- corresponds to the only standard formula adopted in a particular online store, for example, product type - smartphone, brand - Xiaomi, model - Redmi 4A, model article - 3614288;
- contains important characteristics that will help the visitor to make a choice, for example, for a smartphone it can be the amount of memory and color;
- helps to navigate the range easily and find the correct product among the entire list.
C. RatingThe main purpose of the rating is to increase consumer confidence. The potential customer trusts real buyers, those who have already tried this product more, than advertising tales about the features of this product.
D. VideoThe product page often, in addition to images, also has demonstration videos that facilitate perception, allow you to see the product in action. It can also be 3D videos that allow you to view the product from any angle.
E. ThumbnailsA thumbnail is a small copy of an image for compact presentation to the user. Thumbnails are often embedded in slides. Once the thumbnail is clicked, the corresponding image opens in its original size. Thumbnails save space while maintaining information.
F. Related Products/Similar ProductsChoosing a phone, the buyer can look at the accessories that come with it (protective glass, case, memory card, etc.). The ability to buy the product in the kit increases the average check and the profit of the online store. The buyer can also get acquainted with goods similar to the interested ones.
G. Product InformationThe product description can consist of several tabs. These can be tabs with specifications, accessories, delivery and payment methods, questions, reviews, and other product information.
H. Sharing LinksIn order for people to buy the offered product or service, they must first trust its provider (web resource). In addition to excellent design, content, and UX (User eXperience), you can increase user trust by including trust signals, such as chat with a company representative, detailed contacts of the organization, customer feedback, social media pages, and more. Most trust signals are aimed at convincing the user that the website is run by real people, it is quite large in its business and it is trusted by other users.
I. PriceNot one price, but several can be specified here. For example, an old (crossed out) price or a discounted/promotional price may also be provided.
J. Order InformationThe user must know everything about the terms of payment, delivery of current goods. This block provides all the necessary information.
K. OptionsThese can be radio buttons, checkboxes, or icons that allow you to select the characteristics of a product to buy it. For example, buying a smartphone, you can choose its color and amount of memory.
L. The «Add to Cart» buttonSometimes you can find another definition of this button: Call to Action. Call to action (abbreviated CTA) - a user's call to certain actions on the web portal. There are different types of CTA. Awareness CTA – a type of call to action associated with a proposal on the main page of content, through which the visitor can get more information on a particular topic. Consideration CTA – calls to action are related to content that helps solve the problems or tasks that the user has entered the web portal. Decision CTA – a call to action associated with an offer to try a product, such as a demo version or a free trial. The most important CTA should be shown at the top of the site, without having to scroll down the page. On average, a CTA button raises a conversion 2.75 times, and a large color button can increase it 5 times. From the point of view of testing the first «Add to Cart» option is more practical. The button allows you to add the product to the cart. On some sites, after clicking the button, the user is automatically redirected to the cart, where this product has already been added. But in terms of usability - this is not quite the right approach, because the user must be given the opportunity to choose other products to buy. It is better to implement such a function for the «Buy It Now» button, in the diagram, it is marked W.
M. QuantityWith such a counter you can specify the number of items to buy. The limit values of the meter must be limited by the available quantity of goods in the warehouse and the value must not be negative or equal to 0.
N. WishlistVisitors to the site should be able to add store products that they like to the wish list page. This will create a special page where products will be added. In the future, users can add these products to the cart or delete them. This feature helps the user to remember the liked products, and then quickly find them.
O. Add to compare/CompareThis is a particularly useful feature when choosing equipment. For example, choosing a smartphone, the user wants to compare several models to choose the best combination of price-quality equipment. In this case, the user can add several products to compare and in a convenient tabular form to compare all these products.
P. Price watchAlso, a convenient feature for the visitors, with which they always learn about price changes for products of interest to them. The user forms the list of such goods independently.
Q. AvailabilityThis icon will notify you if the item is in stock or out of stock.
R. Special offersThis block can display additional products with a discount or accessories for the current product with favorable terms of purchase.
S. ReviewsThis is a link that provides a link to the tab with customer reviews. This allows you to assess the quality of service and product quality first hand.
T. Product IDThe product code is useful for online stores that sell in catalogs. The description, image, and name of the product may change, so the product code in the catalog is the most accurate way to determine a specific product model.
U. Zoom InIt is very convenient when you need to view the details of the product. The enlarged image is usually displayed in a separate pop-up window.
V. Product photoImages are much better remembered than text and many shoppers on the Internet will view products (posts, articles), looking only at the image. For the offered products it is necessary to use clear images and to allocate the maximum possible space for images. You should also consider including a larger version of the image or zooming out. The default image should be the most appropriate (for example, the color option that sells best) and additional images should be available to cover different color options and so on.
W. The «Buy it Now» buttonThe functionality of the «Buy Now» button is similar to the functionality of the «Buy» button, but the user immediately after clicking goes to the stage of buying goods, while after clicking the «Buy» button, the user can continue to search and add other products to the cart.