E-commerce – design, content, usability

In the follow article you can learn how you, as an online retailer, can increase your purchase rate in the long run by improving your customers” purchase experience on their terminals.

terminal-dependent in e-commerce
Emphasis of the terminal-dependent development in the e-commerce from the base (1) to the top (3)

In this context, many readers will at first think of the neologism “responsive design”. For a good reason, because, without a layout adjusted to the sales platform and thus an increased usability significantly dampens the desire to buy, in particular among users with mobile devices like smartphones and tablets. However, a flexible layout is only one of three columns of terminal-related sale on the internet.

Now it is time and necessary to take one step back to have a look at the platform as one and in doing so, to find the ways how to guide the customer more specifically towards the purchase, by improving the purchase experience for his or her terminal.


Preface regarding efficiency

For you as a decision-maker it is in your estimation, considering the statistics, what effort you would like to invest in order to reach and retain which percentage of potential customers. This depends on the industry and I would like to highlight that as follows:

We assume you need 100% of budget in order to guide 100% potential buyers (hereinafter referred to as PB) to the purchase and you would reach 90% of the PBs by means of 60% oaf the budget available. 1% of the budget would have resulted in 1.5 % of the PBs. It would then be at your discretion, if you will invest the remaining 40% of the budget to reach the remaining 10% of the PBs, as in this case, you would have to invest 1% of the budget to reach 0,25% of the PBs, which would mean 6 times the effort.

In the end, it is at the discretion of the decision-maker to decide, if the investment is worth it and this has to be assessed in any new situation.

If, at this point, you are nodding your head and want to continue dealing with this topic, I am happy to congratulate you, as this decision will contribute to an more complete and more accessible internet.


1. Adaptive and responsive design

Whether “responsive”, for which always the flexible and ideal use of space is paramount, or “adaptive”, for which fixed layout versions are defined for selected display areas, the basic idea of adjusting a design to the display area of a client is almost as old as the intern or exists at least since HTML 2.0 RFC 1842, DOM level 1, and CSS Level 1 and the associated introduction of tables in 1996 as well as the provision of circumferential block elements and the possibility to manipulate the DOM of HTML via Javascript.

At that time, this challenge was not addressed with today”s attention, as you only had to deal with different resolutions of stationary desktop PCs at that time and not at all with the variety of mobile devices with full web browsers, the use of which has significantly increased due the to the release of the first modern smartphones in 2007. Thus, having to deal with layouts across all devices is also also owed the media change.

Today, designers use modern and easier techniques like Media-querys, provided by HTML5 and offering even a further step: We can define CSS-information depending on the corresponding type of device. Therefore, we can distinguish between projectors, printers, screens and further factors influencing the display method and check the layout thoroughly for them.

Mobile devices are not only different from traditional stationary desktop PCs in their display area but also in their performance and the internet speed. This means, we may not only focus on the visible design but have to consider that data to be transferred are only delivered when the mobile device uses it. This reduces the data amount to be transferred and accelerates the loading of the page. In the mobile display area, we should not deliver any graphics of high resolution as well as Javascript content, which are only needed in the display area of desktop PCs.

In order to respond to HTTP requests depending on the device, we can check the “user agent” transferred by the client on the server side. Famous and large sales portals on the internet rely on this technique and deliver, based on this information, a desktop or mobile version of the layout.

Interim conclusion. By means of an accessible design related to display area and device type, we ensure a perfect functionality and readability of the website. In combination with a device and browser check on the server side, we only deliver the data needed by the client”s device and ensure the best loading speed possible. If you observe these rules, you already implemented the most important step.


2. Adaptive and responsive content

In this title, we encounter another anglicsim, taking up the idea of a device-independent design and transferring the content of your sales portal, above all texts and images,y means of a delivery independent from the terminal. In the field of e-commerce, we have to pay particular attention to this idea, in order to display product details and promotional activities at best in order to approach our goal of increasing the purchase rate.

This field needs, more than ever, that we learn from our experiences of user behaviour in sales portals and deliver content to our clients in a way they expect to receive it on their corresponding devices. Use statistics from internal and external sources providing you information on the leave and user behaviour in internet sales portals and observe the results. You should, for example, avoid extensive product descriptions for mobile devices and summarize some important facts for the product instead, with little continuous text only in order to prevent the client from leaving the page on the level of the article. Furthermore, you should not deliver any content that is not compatible, like for example a combination of flash content to devices on a Apple iOS basis, but offer this content to your customers in alternative format.

Hint. The analysis of dynamic content, like for example an overview of the best-selling products, grouped by terminals and to subsequently promote such content, in this example the products, depending on the type of device proves to have an increasing effect on the turnover. Another helpful strategy in this context might be a separate sorting of articles by relevance within these categories, as the best-selling products defer in many industries by mobile devices.

In summary, the term “adaptive and responsive content” can be expressed by means of the following prompt: Consider for the delivery of any perceptible, no matter if texts, images, videos, the mobile devices used by the visitors.


3. Adaptive and responsive usability

The third component completes the best adjustment of your sales portal to the mobile device of the user, by providing complete programme sequences and functions based on the terminal. Although such interventions require extensive flexibility of the platform used, the result in a measurable added value for the customer. Following this idea, you can deliver the complete user guidance, from the search for the product up to the purchase, based on the terminal, in order to facilitate the process of purchase on the customer”s mobile devices as far as possible.

Above all, there is an acronym for mobile devices – KISS, “Keep it simple and stupid.” As a consequence, the checkout process, in traditional sales portals separated in several steps, during which the customer agrees to shipping and payment methods, enters different delivery or billing addresses or gets an overview of the total delivery, should be available more compact for mobile devices to ensure the customer can purchase with as little effort as possible.

The idea of a checkout process based on the terminal can be applied to many other programme sequences of a sales portal. Therefore, you can offer your visitors in the field of mobile devices the opportunity to checkout within one click only and to purchase product bundles with as little effort as possible – the possible applications are manifold.

By means of this third column and the possible complexity of a sales portal, you might think of the idea of operating device-independent sales portals per terminal group in order to utilize the benefits arising from operating “finished” portal solutions. The decision rests with the decision-maker and cannot be made across all industries and online business models in general. Figure out a healthy level between time and financial effort and the budget available and the desired dynamics of the sales portal in terms of the devices used by the customers.


The future in e-commerce

Terminals transfer more and more information on technical characteristics, the current location up to personal preferences regarding the use of the internet and other sensor information available for the terminal, as far as the user agrees to use this data on the corresponding web page. This and other information enables the online retailer in the future to individually adjust the purchase experience to the visitor – more than ever. Technical advancement in known portal solutions will enable more possibilities of individualization and evaluation of offers by mobile device groups.

I hope this article was able to improve your understanding of the three areas of design, content and usability regarding the important topic of terminal-dependent sales on the internet. Many of the strategies presented in this article will probably not assist you in multiplying your turnover, but they are tried and tested methods with a positive influence on existing systems.

Thank you for your interest in this article. I look forward to receiving your questions and suggestions to this and other topics in the field of e-commerce to blog@inconfig.com