Show product face

In this article, on the example of the redesign of the main page cplaza.ru, I will talk about one of the principles of website development: “show the product face”.

In general terms, this principle can be formulated as follows: "It is necessary to immediately make clear to the visitor where he got and what interesting can be found here." In the case of an online store, the principle will turn into something like: "Show your product and why you need to buy it from you." But despite the simplicity of this principle, it is often unreasonably violated.

Under the cut you will find harmful tips about website design, analysis of the existing design of the cplaza.ru main page, a story about which blocks may be more useful for this page, and in the end I will show an example of a revised main one.

Introduction

Cplaza is an online store that sells Apple appliances. He was often advertised on Habré, so, I think, many know him.

The main message of all their advertising banners has always been something like: "We have Apple equipment at incredibly low prices." But, by going through the banner to the main page of the site, the visitor saw anything, but not what was mentioned in the advertisement.

At the same time, rummaging through the site, you can find out that they still have the claimed equipment, and that it is cheaper than in many places. That is, the owners of the site simply hide the information that the visitor was talking about in advertising and which he rightly expects to see. And this can lead to a lightning refusal to visit.

Let's try to redraw the main page and, following the principle of “product face”, show on it the merits of this online store.

But before you get a scalpel and start plastic surgery, you need to determine the wishes of the patient. I will proceed from the assumption that the main task of the site owners is to sell as much of the main product as possible - Apple equipment and accessories. Perhaps there are some other goals, or even my assumption is wrong. But in order to reveal all this, you need to communicate directly with the owners.

What's wrong with the existing main

In a nutshell, it does not make it clear that this is a site about Apple technology, and that it costs less on it. When you go to the site, you get the impression that you’ve got to some flea market of motley goods. That is, the visitor is not immediately shown the goods by face (Apple appliances at low prices), but they offer to see news, a catalog of all sorts of bells and whistles, promotions, etc.

In this section I will criticize the different blocks that make up the main page of the current site. Everyone can criticize, so if you are not interested, go straight to the next section.

I expressed part of the comments in the captions to the  screenshot of the site with the help of bad advice. They turned out to be somewhat acerbic, but not as dry as a simple analysis of errors. :)

Cap

In a hat, rather, all the nit-picking on trifles.

The phone is for some reason broken in a non-standard way to show three identical digits at its end. Such a move (and indeed a beautiful phone) may be relevant for taxis, pizzerias, support services and other institutions whose phone is often required, but it is not always entered in the notebook.



In the case of this store, I can hardly imagine a situation when a person suddenly for no reason decides: “Oh! I urgently need to buy iMac! ” - and, without going to the site, decides to immediately call the store.

At the same time, the non-standard breakdown of the phone into groups of numbers worsens its mnemonic short-term memorization, useful for dialing from the screen (well, I’m already picking on little things). In addition, they very vainly made the phone a picture, since any dialers (Skype plugins, communicators browsers) will not be able to automatically recognize it.

For some reason, the operating time has been transferred in small print under the logo, although it has the place under the phone, since it is needed only when you decide to call the store and think whether it still works.



The basket was made so small that you can find its figs. Next to it some sort of “deferred” block was placed, which, I am sure, does not work in this context.



What products are in the basket can be found only by going into it - this is one of the varieties of the violation of the principle of "product by person", which is often found in stores.

The search is also made by a barely noticeable frame. The user must be observant in order to find him.

The main menu for some reason faded gray on a gray background and consists of items that are of little interest to the main one.

Product Catalog →

The list of categories is made by a lengthy, shapeless footcloth, which can be found in something only with due diligence, a good combination of circumstances, or via Ctrl / ⌘ + F.

There are no pictures in the list. To understand what it is about - it needs to be read. Among other things, for the sake of seoshnikov, the battery formed from the words “buy” in the list, which even more prevents the eye from catching on the desired product name.

Registration block

Registration is hidden at the bottom of the page for several scroll screens. The fact that it is not needed at all is a separate issue .

Introducing

Stocks are a useful tool. But such a leaflet is no good. No one will wait 30 seconds to see all the frames in turn, and even more so to take some actions in order to view them faster. So this is a waste of valuable space.

news

This is another block with stocks, but this time gray in white and small size. Who will read them is not clear.

New items

A random selection of items recently sold at this store. Moreover, it is not a fact that the goods are really new. It just might have recently appeared in the range (for example, iPhone 4, which can hardly be called a novelty).



I have nothing against the lists of goods - impulse sales and all that. But it seems strange to me to show them on the basis of the recent appearance in the assortment of the store. Since if the visitor regularly monitors the main thing, then we already know a lot of things about him, and we can offer something in this place taking into account his interests.

Stocks

Those who overcome the footcloth of new products receive a prize - another block with shares (in addition to “Present” and “News”). Of course, only very corrosive visitors will reach them. But why not show them something more useful?

Customer reviews

Near the block of shares is a block of reviews. Correspondence from orders is broadcasted in it. Why - I do not understand. If the review is positive - it seems to be cheating; if it is negative - it only scares away buyers.

Bestsellers

Another footcloth from randomly selected products. Only the most zealous will get to her, and what useful information she will give them is not clear.







You can continue to list the shortcomings, but to criticize is a simple matter. So let's move on to how everything can be improved.

Let’s think about what role the main page should play in the life of an online store. In fact, it is far from the most important. Since all banners of promotions, contextual advertising and links from search engines should lead to the pages of specific products and categories, and visitors will get to the main page only from generalized banners, from a link from a friend, or by typing a domain from memory.

Possible ways to enter the main

Consider some of the ways in which the user can get to the main page. What can he expect to find there, and what would be nice for him to show.

Here are the main scenarios I see:

1. The first time I went to the site (advertisement, link from a friend);
2. Regularly comes to take a look;
3. Returning Buyer;
4. Search for a gift to a friend;
5. Going from search engines when searching for something specific .

Consider each scenario in more detail.

First time visited the site

The first time a visitor can get to the main one out of curiosity by clicking on a banner, contextual advertising of a general nature (for example, the word "Apple") or by receiving a link from a friend. Or he may want to buy something specific, and that is why the banner interested him.

This scenario is characterized by the fact that we do not know anything about the user yet, except that he is probably interested in the Apple technique and is not averse to saving money in case of buying it.

Therefore, the first things you need to show the visitor the product is their face - the entire range of Apple equipment that the company sells and at the same time prove that its prices are lower than those of competitors.

The usual long list of products from all available positions will not be the best option here - as long as the visitor searches for what he is interested in among countless similar options, he may be bored and leave. It can only be worse to show another banner with senseless advertising or a list of random goods after entering the banner.

Therefore, in this case, a compressed catalog with prices, combined with beautiful most advantageous offers, is best suited.

You can quickly cast your eyes around this list, find the product you are interested in, see the seductive price and go to the product category for a more detailed study.

Also on this list are accessories, covers, bags and gifts. Since, even if the visitor does not intend to buy anything serious now, he can make an impulse purchase on trifles. But the main struggle for impulse purchases takes place, of course, not at the main one, but at checkout.

Idle curiosity

Out of curiosity, a visitor can sometimes visit a site (via a bookmark, a visit history, or simply typing a domain in the address bar from memory) just to look at the equipment and its prices - a kind of virtual shopping.

The advantage of this scenario, in contrast to the previous one, is that we already know a lot of interesting things about the user in order to hit exactly on target. For example, we can know that he has already 5 times visited the page with iMacs and looked mainly at the configuration with a screen of 27 ".

Therefore, in the block with large beautiful offers, we will show him these products first. In the block with recommendations, you can show a few more related products that may interest the visitor.

Moreover, if iMacs are now on sale at a lower price than usual, we can show them in the special offer block, as this may push him to buy (this may not be a special offer, but the stars just came together).

You can also show him in the block of recommendations all sorts of things for iMacs, in case he has already managed to buy an iMac elsewhere since the last visit.

Returning Buyer

Once having bought something in the store, the visitor can return. This case is similar to the previous one, except that we now know for sure that the visitor has some equipment and the visitor is already loyal to us (if the store works well). This information should in no case be overlooked and you must immediately invite the visitor to his cow to buy also a stall.

For example, if he bought an iPhone, then you need to offer him covers and other gadgets. For this, again, we need a block of recommendations.

Gift Search

If a visitor is looking for a gift for a friend of eplofil, then you need to help him in this quest. Therefore, a block with gifts must be provided in the cataloguer.

Moreover, you need to separate gifts "in the little things" (covers, etc.) and "expensive", as there are different groups of visitors and, in addition, a person can look for a gift to chip in with friends.

Search for something specific in search engines

It is unlikely that a user typing “MacBook Pro 15” in the search bar should get to the main one. It would be much more correct to send it immediately to the page of a specific product or category. So I do not consider this case in this article.

Blocks

As a result, in order to arouse the interest of as many users acting on the described scenarios as possible, the following blocks will be required:

1. A simple and understandable cataloger that allows you to understand where the visitor went and find the product that interests him;
2. Best offers;
3. A block of recommendations for those users about whom something is already known from the history of visits;
4. Blocks of "shares" and "special offers" as a general enticement and a way to promote promoted goods;
5. Basket (where without it);

In each block we will try to show the goods face, in a winning light.

Apple Technology Catalog

Since the Apple product line is well structured by itself, it remains only to comb it a little, taking into account the copies available in the assortment of the store.



Visitors who are looking for something specific will be able to immediately go from the cataloguer to the desired section (for example, see all MacBooks Pro with a 15 ″ display). And those who came in just to be curious can see that this store is clearly about Apple equipment and get acquainted with the prices for it.

Best offers

This block is seen by visitors as soon as they enter. In it, large beautiful pictures show the most advantageous offers. Like the previous block, it performs the function of showing the goods face. But unlike him, he focuses on specific products, and not on their categories.



Adaptive block: the wider the browser window - the more products you can show. In addition, if some information has been accumulated about the user, then it can be used to sort goods inside this block. For example, a user who has already watched an iPhone 2 times can be shown it first.

Recommendations

This section shows the products that may be of most interest to the visitor, taking into account his visit history. IPhone cases, protective films, gloves for capacitive display, etc.



If nothing is known about the visitor, they simply display the most popular products or randomly make an assumption that the user is interested in some category of goods (the chance to guess is not great, but once If there is no data for analysis, then this option will fit).

Promotions and special offers

In the block of promotions, you can show promoted products or just interesting new items.



The block is adaptive. It can accommodate from 1 to 6 ads. The more announcements - the less space is allocated for each of them, and the more brief information should be in it.

The block can be either large or small in height. It would be very interesting to see the difference in click statistics for this block depending on its size.



The special offers block is intended for a detailed description of one very attractive product. If possible, the unit adjusts to the visitor’s wishes and shows him exactly the product he is looking for.

Basket

While the basket is not needed - it is hidden. But as soon as goods appear in it, it occupies a prominent place at the top of the screen.



If there are more goods than can fit in a single line, it stretches for several.

If the page is scrolled so that the basket is not visible, then when a new product is added to it, it pops up due to the upper border of the screen, the product is added to it, and then the basket returns to its place at the top of the page.

It would be possible to make it simply stick to the top edge of the screen (position: fixed), but I'm not sure of such a solution - it might turn out to be too intrusive.

Basement

In the basement, all contact information and answers to questions that could arise after viewing the main one are briefly collected.



It also has a “blog” section, where you can write useful articles like “How to Clean MacBook Pro”, as well as the bulk of SEO texts, if it’s impossible to refuse them.

Total

As a result of the redesign of the main page of cplaza.ru, we got such a layout: The resulting page meets the slogan "Apple Technique at incredibly low prices" and, having entered it, the user will immediately understand where he got and can easily find the product he is interested in. In this article, I examined the principle of website design: "show the product face." The main meaning of this principle is that the visitor must immediately make it clear where he got to, what you can find here and what advantages to find. This principle applies not only to stores, but also to any other sites. And if you do not know exactly why it is better to refuse this principle in your specific case (and this may be), then it is better to use it by default.








I hope you were interested in reading this article. I will try to answer comments and questions through updating the post, as this reduces the likelihood of duplicates of the same questions and the loss of valuable ideas among them.

UPD: Responses to Comments

How now can I quickly find smartphones from HTC

As I wrote at the beginning of the article, I proceeded from the assumption that this store is aimed specifically at selling Apple equipment. My assumption is based on their advertising and that the range of models from other manufacturers is very weak. Therefore, I did not set the main page to sell HTC smartphones. Since you are unlikely to even get on it if you are interested in these smartphones.

Is this an exercise or a completed project?

I wrote this article to talk about the principle of “product face”. I took cplaza.ru as an illustration, since I periodically visit it myself.

Naturally, if it was a question of combat design, then assumptions would be too expensive a luxury and statistics, results of field observations and other real data taken from the customer’s experience would have acted instead.

The truth is unlikely that customers would then allow me to share such data on Habré. :)

And, since we are talking about statistics, it should be noted that you also need to be careful with it and not blindly believe in numbers. For example, according to the results of an analysis of sales, it may turn out that some product (or category) is at variance. This is not a reason to immediately remove it into the far corner, as, perhaps, it diverges poorly precisely because of errors in the way it is sold. And then you get a vicious circle.

About the basket
A lot of comments about the device basket, I will try to answer most of them in this update. Let me remind you that it is visible only when there is a product in it.

Why is she so much attention, why so bright?

Because as soon as you decide to complete the purchase, you should be able to instantly find the basket. You know that it is at the top, because when making a purchase, goods flew into it (if the basket was behind the screen, then it swam to the visible area, took the goods and flew back). Scrolling up the page, you will immediately find where it is.

Why show products in the basket?

I'll start from afar. Why did the well-known basket in real supermarkets appear at all? Not for the convenience of visitors, but because if you have nowhere to put the goods, then you only buy what you can carry in your hands, and this will negatively affect sales.

Similarly, in the online store, only short-term memory became a limitation instead of the number of hands. You do not need to remember what you have already bought and what not, you can always see it without going anywhere. If necessary, remove the goods directly from the basket. This will overcome the fear of adding something extra there.

Why prices are not shown in the basket and the total amount

In order not to embarrass the buyer ahead of time. If in ordinary supermarkets the trolley automatically calculated the purchase amount, sales would plummet.

The basket will occupy the entire screen

Even if you decide to buy 10 different products in the store, the basket will not grow more than 2 lines. If you want to buy more - I think that then a personal manager should call you and offer to send you a limousine. :)

In addition, the basket is shown only when there is a product in it, it lives neatly at the top of the page, annoying you only then you add something to it. In this case, even if it is 10-line, it may not be displayed on the screen, but on 1-2 lines.

I will see that I scored too much

In order to avoid such a sensation, prices and the total amount of the purchase are not shown in the basket.