Shopping cart in a modern online store

Hello, I want to write a series of articles about the usability of web interfaces, and I will start, if not strange, from a shopping basket .

In this article I will try to consider what most baskets look like now, analyze their advantages and disadvantages, and also try to create something more modern and convenient.

I warn you right away - I am writing for the first time, so much can be stated far from the best way.

So, let's begin!

Why a basket?

“So why exactly the basket?” - you ask.
“What unites all online stores?” - I will ask you.

When shopping at the next online store, you can not pay attention to the delights of design, the convenience of the catalog or navigation, most likely you will not even know about all the services provided, but you can’t get past the basket.

Standard basket

Let's look at a few baskets from randomly selected sites.



What do we see? It’s nice when the basket has an intuitive icon and its name - for some it is “Basket” for others “My Basket” or “Your Basket”. I note that in all the baskets there is a product, but unfortunately this is not clear for everyone. Near some baskets the total amount of the selected goods is written, which is very convenient for large purchases.

Perfect basket

So, having seen all the variety of baskets, let's try to understand how an ideal basket should look like?

An ideal basket should look like a basket , according to which it is easy to understand an empty basket or a full one , it should not look like a banner , located in a familiar place , as well as giving basic information about your purchases.

Consider the main points in more detail:

• “Look like a basket” - the icon should not be a bucket or box, the more familiar it is, the easier it is to find it;
• “Empty or full basket” - change the icon depending on the quantity of goods, this is very convenient;
• “Not like a banner” - I think everyone knows the term “banner blindness”;
• “In a familiar place” - usually baskets are placed on the left side of the site (usually above or below the menu), or in the upper right corner;
• “Giving basic information” - looking at the basket, the buyer should immediately see how much product he has already chosen and for what amount;

The first figure shows that there are similar baskets, but what happens if you add interactive? We do not see what kind of product is in the basket and it is not convenient. Let's make a list of products appear when you hover .

Modern basket

Now that we have seen the ideal, imagine yourself in a supermarket with a “perfect basket” in which you can’t see the goods, but only the quantity and the total amount, and to see what is in it, you need to remove the cloak and open the lock. Conveniently?

A modern basket is a “perfect basket” on the modern web. Part of the modern web are high-resolution monitors and interactive user interfaces. Let's try to put everything together and see what happens.



The picture shows that the ideal basket has become even more perfect - now at any time we can see the entire list of goods with its image and a brief description. We can easily change the order and, if desired, the quantity of goods (this is not shown in the figure). You can add goods to the basket by simply “dragging” their image onto the panel. If we do not want to see the selected product at the moment, we just hide the panel, but still we will have quick access to it. The panel is located on the right side of the page, making it easier to read texts in the center.

Imagine how convenient it will be to assemble a computer from components, seeing what is already in the basket, or how pleasant it is to choose furniture with appliances in your new kitchen, remembering what style the refrigerator with the table is chosen.

Dream

Let's look at a few sites for example (sites selected for guessing):

• Oldie - we see a fixed-width site, and on the right is an ominous void ...
• Photo.ru is again a fixed site and again emptiness at high resolution.
• Offo.ru - we see a rubber site, but is it convenient to read the product description?

Now just imagine how these sites will look with a new basket. Beauty!

Nuances

Of course, the basket that we got at the end is not a standard and it all depends on the specific site, but for most this solution will be very acceptable.

If your online store supports “deferred goods” (goods which are currently out of stock but which you promise to deliver), then perhaps there should be information about them next to the basket.

There are also stores that are not designed to buy a large number of goods at a time (for example, vip-gift salons), then there is no particular sense in the list of goods, but still do not forget about the “ideal basket”.

P.S

Exploring the open spaces, habrahabr stumbled upon the online gifts of Kamchatka shop in which the basket was made quite nicely, but its minus is that it is at the bottom of the page - it’s not always before your eyes and dragging goods into it is not very convenient ... but how nice!

That's all, I hope you enjoy my first work.

In the near future I plan to talk about the basket from the inside, about the process of placing an order, about catalogs and other equally important elements of online stores ... and then we will go further.

And yet - I'm not a designer, and I don’t answer for the beauty of the sketches, the main idea;)

UPD: Unfortunately, with a series of articles it does not work out yet, but still the desire remains :)