What an Effective Design of a Website Should Look Like
If you needed to boil down any requirements specification for an online shop to the essence of the user’s action, it would sound like “find and buy”. It’s up to the designers, developers and analysts, all of whom have the minimum knowledge of psychology, to decide how this will work. Adapting pages to specific search engines, placing buttons of correct sizes and colors, telling about promotional offers to increase sales, creating two-three-five carts – each of which is important in its way – aren’t these the secrets lying behind the real sales art?
In the first post of our cycle, we talked about the importance and profitability of the online retail segment in 2021. Today, we’re going to tell you about the seven ways of giving your buyers the confidence to click the “Pay” button and increase sales in your online shop.
Give Thought to Your Main Page
Traffic of all kinds is important, be it direct or search traffic, traffic from ads, or Instagram influencers. Direct traffic is brought by the users who start shopping on the main page of your online shop. Surely, it’s not the most typical scenario today. However, each such case may indicate that one of your loyal customers who knows his or her own mind is there, on the other side of the screen.
A visitor who comes to the main page gets a multi-tool where knives, pliers, scissors, and screwdrivers are replaced with product searching and buying tools.
A website header consists of a search box, the product categories opening on hover or click, language selection, clickable telephone number, shop addresses, the user’s My Account, Favorites, and the indispensable shopping cart in the right upper corner that we’ll talk about below.
Asos is laconic – the categories include only men’s and women’s wear. On the other hand, the search field prompts what you can find.
Farfetch suggests digging into the product categories right away – even the search box is squeezed into its place.
The search on Cratejoy, a shop of gift sets, returns search results in several sections at once: subscriptions, collections, categories, and even blog posts.
eBay and Amazon, the pioneers of online shopping, suggest selecting the relevant category in the drop-down menu and looking for the product only within the category.
Product Categories Catalog
The catalog may be stretched along the header or be vertical and hidden in the burger menu.
Amazon hides its vertical catalog in the burger.
The tools shop has taken into account the potential interest of its customers in specific manufacturers, so it offers the search by brands with an alphabetical index.
These ones are intended both for loyal customers and for new buyers looking for reasons to like you. Promos include advertising banners in the header, product blocks with generalized headings (“New”, “Product of the Month”, “Editor's Choice”), special offers, and discounts.
This is a typical promotion block by the example of Amazon.
There is a large variety of music in the world. The editors of Juno, a shop of musical and DJ products, sort the music by styles and genres and place the items they believe to be the most important in promo blocks on the main page.
Amazon analyzes the shopping history of those who previously bought the product you selected, creates a block of personal recommendations and assumes that you are interested in the products. This is the data analytics at work.
Banners of two types exist: static and slider-type banners. Sliders can be scrolled in two modes – either manually or automatically. Though the automatic slider scrolling is criticized, you can find some tips that recommend setting the banner change rate of 5-7 seconds on the admin panel of your online shop.
The banner change rate on Amazon is about 5 seconds. Though this is the optimal time, people may need different time to read the offer closely, that’s why make it possible to put scrolling on pause by hovering the mouse over the banner.
A negative example. The banners on industrybuying.com, a website selling instruments, change automatically every 2-3 seconds, so you don’t have enough time to read the offer.
Loyalty Improvement Solutions
Gain your customers’ confidence using positive reviews and official documents. Keep track of the reviews recency, as reviews 3 or more months old are less credible.
The headers of Juno and MyToolShed assure buyers of the service quality: the average score on Trustpilot is close to five, next-day delivery and delivery slot selection are available, everything is quick, reliable, safe, and tried over the years of experience.
You can see what exactly people are saying about MyToolShed in the footer where designers inserted review snippets. Though the desire to show yourself in the most favorable light and publish only the best reviews is quite understandable, take care that the reviews are real, and respond to negative reviews, which are unavoidable.
According to researches, reviews of your products and services mean too much. If the first comment is negative – and people never have to search for negative words – the subsequent reviews won’t be very good as well, and this will continue for 3 years. 88% of the customers give more credence to product reviews than to their friends, while 81% search for information about the product first and then decide whether or not to buy it.
Amazon created a second footer to show their numerous partners, as if one footer is not enough. The company hints that the lower part of the page is the space you can use as you like.
Let Buy in One Click
In 2000, Amazon invented and patented the one-click purchase under the name of 1-Click. The intent was to allow the service to fill out all required fields with the information the buyer has already provided during the registration after the buyer clicks on “Buy now with 1-Click” button. In 2017, the patent expired and the functions became available on other websites.
Today it has a broader meaning. In addition to jumping to the payment page, the function is designed to sell products to the site visitors who came to the site for the first time and are not registered or those visitors who need only one specific product and wish to avoid the form-filling routine as they don’t plan to spend money here on a regular basis.
Availability of the function is a win-win for both parties as the user is requested to provide the phone number and discuss all details of the order verbally with a manager instead of completing the form, while the shop makes profit from such one-time purchases. And you should know that the forecasts for 2021 promise that 54% of all online purchases will be made on mobile devices, so requesting their owners to fill out tiny fields on the move is out of the question.
The best solution is to place the “One-Click Purchase” button near the “Add to Cart” button.
Do not forget about the relevance of offering this option to your customers. Such products as music media are rarely ordered by the piece (especially if the buyer is in another country and has to pay for the delivery), so it doesn’t make sense to look for the one-click button on the pages of juno.co.uk website when you buy an LP or CD. Nevertheless, they place the phone number on the equipment pages so that you could call the manager on your own, i.e. this is the same one-click purchase with the buyer acting as the initiator. It would be interesting to know what the website analytics has to say about using this function.
The one-click purchase has its drawbacks, too. One error in the telephone number will make the buyer wait for the manager’s call for ever. On the other hand, in an attempt to unload its buyers the shop is loading its personnel by forcing them to deal with the orders.
Today, one-click purchase modules are available in many CMSs. Since here at ADCI Solutions we develop websites built on Drupal, quick purchases on our clients’ website run on Drupal modules. For example, these are Commerce Express Checkout and Commerce Buy One Click.
Level up Your Search
Search is one of the main tools in an online shop which is designed to facilitate the product finding and purchase. The search is used by the most highly motivated buyers. It requires close attention from the shop’s marketing experts, more money infusions, and the best UI. The time and money investments won’t pass unnoticed by the website owners: the traffic created in the shop by those buyers who are looking for a specific product varies between 18 and 30%, and according to the data of REES46, conversion of internal search queries into purchases generate up to 40% of additional profit for the shops.
At the same time, poorly implemented search causes losses for the shop. 8 out of 10 buyers leave the shop if they fail to find what they need, and if the shop doesn’t help them to find the product within 8 seconds, the probability of conversion also decreases.
In recent years, there has been a particular interest in the faceted search. It allows narrowing down the search results and sieving through hundreds of products to find the product with a specific set of characteristics, say, a TV set of a definite brand with a specific type of display, diagonal, and screen refresh rate.
Amazon. We are looking for a Smart TV by Samsung. On the left, there are facets that suggest narrowing the search results. The page is dynamic, so if you tick off any facet, the search result will change automatically.
Let’s narrow the request down to the models with the screen refresh rate of 16 Hz only.
It looks like filter-based search, doesn’t it? These types of searches have the same task, i.e. they must give what the buyer wants quickly, efficiently and without the need to dig through product subcategories. Filters also do a great job on websites selling a small quantity of products with common characteristics. However, the more products there are and the wider the range of their features is, the more likely it is that the buyer will spend several minutes searching, which is an inexcusable time loss for a web service, or even run into the answer “Sorry, we couldn't find what you are looking for”.
With the faceted search available on Pigu. lt shop, a sudden occurrence of “0 products found” is ruled out because the designers just disabled the bicycle brands which don’t have the characteristics the buyer has specified.
The faceted search directly depends on the quantity and details of the product data. The more data is collected, processed and taken into account when creating the facets, the higher the search speed and correctness will be. Don’t forget about the relevance of characteristics to the products, if your website sells products varying from beauty products to cars – a hand cream is not characterized by the body style.
Search improvement has no limits. The improvement is inspired by the flexible functionality of such services as Solr: the ability to correct errors, understand transliteration, decipher requests written using an incorrect keyboard layout, and even read synonyms are the reasons why such search is justly called smart. We develop websites on Drupal integrating Solr into the website using such modules as Search API Solr and Apache Solr Search. Solr is a fast search system with flexibly configured parameters that don’t load the server and simplifies the online shop scaling.
Let Users Compare the Items
This is a standard scenario associated with the purchase of any product – from food to home appliances and cars. If the product reviews don’t look credible enough, we cannot afford to buy the first laptop or refrigerator we come across, as the product range is too wide and we are interested in selecting the equipment meeting our needs. Since it is possible to compare two similar product types visually, it’s even easier to compare the products online than offline. All that is left to do is to present this functionality correctly. Let’s consider the examples of successful and unsuccessful implementation of the function by two shops.
Function Add to Compare on toolbarn.co.uk, a tool shop, is located under the Add to Cart button. The products selected for comparison are displayed in the widget in the right lower corner. Honestly, sometimes you have to scan the screen to find this function because it’s far from the top of the flypage features hierarchy.
Here is the product comparison page on toolbarn.co.uk.
Actually, it’s possible to compare several products from various categories. This is a bit confusing. What can be concluded from the comparison of, say, a drill and staple guns?
On Weighmyrack, it’s not possible to compare a helmet and a carabiner, because there is no page that stores the products added for comparison. Everything is clear – you can compare the products in one product group.
Decide for yourself, how this or that function, including the comparison function, should be emphasized but, ideally, the solution should be based on the data obtained from the heat map, A/B testing, other analytics tools and simply common sense.
Give Thought to the Shopping Cart
This is the last milestone the buyer has to pass – and do this easily and gratefully. Buyers often drop their carts causing huge losses for eCommerce (in 2016, the losses amounted to 4.6 billion US dollars).
All online shops realized long ago that it’s not acceptable to distract buyers from shopping with the request to register, which is why not only do they allow just adding products to the cart but also save its contents after the browser tab is closed. Websites store cookies for this purpose, too.
Optimize your shopping cart for mobile devices. Remove all inessential items and make it convenient to pay from the mobile phone.
The mobile version of iRobot.com, the home robots manufacturer, has a sticky Add to Cart button: you scroll the flypage as you like but the button – which is large, attractive and boosting up conversion by 8% – stays in the same place.
That’s where you need to turn up your focus on service full blast, because the cart page is the breeding ground for additional sales. Give incentives to the buyer for selecting your shop and emphasize the benefits the buyer will get from this purchase – the way he/she can save money, what this product can be bundled with, where the promo code can be entered and how quickly the product will be delivered.
A flypage in Juno shop. Before buying an LP, you can listen to a fragment. Besides, there is time to think – the next delivery to Russia will be in 12 hours.
And while there’s still time left you can explore the music bought by other people who chose this LP, as well as find other interesting items issued by the sound-recording firm.
Offer several payment options (card payment, QR code, cash, by installments) and delivery options (first class, by courier, pickup). Show the final amount including all discounts and extra charges for delivery.
Implement video shopping
The realities of 2020 urge online shops to provide the tools that allow examining the product remotely. Video content and shopping assisted by this content have been developing and coming into common use for many years – this can be proved by Amazon Live and shopping in Instagram stories. However, video shopping is now offered as an individual service. Bambuser can be used as an example. A visitor of the online shop Bambuser is integrated in can request to provide real time video recording of the product, chat, like and place the product in the cart without interrupting the stream.
There are users who like various activities encouraged by the shop. On the other hand, some of them are encouraged by the mere fact that their opinion and content will be of decisive importance for another buyer. Shoploop application created by Area 120, the Google’s experimental research division, plays on this. Its users can shoot 90-second videos, including video reviews of purchased products. However, this is essentially the influence marketing we are going to talk about in another post.
Keep Voice Assistant in Mind
Though voice assistants are not exactly related to web design, it’s hard to ignore them. If you need to buy flowers, a book, or an angle grinder somewhere nearby, if you are too lazy or short of time to read the product description, if your order got stuck somewhere, voice assistants come to the rescue. Alice by Yandex, Alexa by Google, Siri by Apple, Marusia by Mail.Group – the robots are already in the midst of us. They unload call centers in the times of crisis, help us to find gifts on the holiday eve, resume shopping if the buyer’s activity on the site was suddenly interrupted, ask clarification questions if the buyer’s request turns out to be too complicated, turn a conversation into written communication using the voice-recognition technology and provide this information to the human operator.
The above mentioned assistants are the most popular. These third-party applications of major companies may become a link between your website and the buyer on the condition that the site is correctly adapted for operation with this technology.
Perform technical optimization. First of all, provide an adaptive design for all standard screen sizes, high download speed (AMP pages will be of use), correct robots.txt, and a detailed product snippet.
Optimize the content for voice search. Add interrogative sentences and colloquial speech to your website texts because people use questions in the plain everyday language to ask the assistant and search for what they need.
As predicted by specialists, the volume of the global eCommerce market in 2021 will be about 5 billion US dollars. Just imagine the scope of competition for buyers, especially considering that the major traffic and the largest portion of this amount are taken by such companies as Amazon and Aliexpress. You have no room for errors here: if you are going to use somebody’s practices, make sure that they are time-proven and best-in-class, and if you want to implement new original practices, rely on the audience behavior analysis, specific use cases and thought-out marketing support. We hope our post has given you the understanding of what a competitive and efficient online shop should look like.