Polish m-commerce keeps growing, but there’s room for improvement
- 1. Allow adding to favorites without registration
Being able to add products to favorites is a great benefit while browsing the product catalog – it lets the user save the product for later reference without adding it to the cart, which always implies a purchase intent. The "Add to favorites" option should also be available to clients who are not logged in. This allows the user to smoothly browse the store without registration, which may have a positive effect particularly during the first longer visit.
- 2. Important actions should be visible above the fold
Because of the small size of smartphone screens, all important information and actions should be clearly visible above the fold (i.e. immediately visible, without forcing the user to scroll) after the website opens. On a product site, this will be the product price and the "Add to cart" button. For a product category view, users should see at least a major part of the first product on the list.
- 3. Provide the right keyboard for the task
On touchscreen devices, users enter data using a keyboard displayed on the screen. Modern browsers adjust the displayed keyboard to the nature of the data entered – e.g. in the telephone number box, the presented keyboard should be numerical and have large digits; in the address box, an alphabetical keyboard is needed.
Putting an alphabetical keyboard with small digit buttons in a number input field causes user frustration and increases the risk of entering a wrong telephone number, address, postal code, or PIN number. This may become the source of unnecessary problems and costs in order processing. It is highly recommended to adjust the type of screen keyboard to the expected contents of the form. This will make form completion a lot more friendly and error free.
- 4. Errors should be indicated by more than color
During the completion of the order form (i.e. immediately before checkout), errors should be clearly marked, with a distinct icon next to the incorrectly completed box and a clear description of the problem.
Marking with color (e.g. turning an empty field red) may be a useful supplement and a way of drawing attention. Yet, on its own, it is not sufficient to clearly indicate the error. This is particularly vital to users who do not distinguish colors; they need an additional indication of the wrongly completed form boxes.
- 5. Visible filter status
Using filters is a fundamental way of searching relevant products in a category. In the course of one session, users may frequently switch their applied parameters. The filter setup should be visible to the user without any further interaction (e.g. opening the filter panel). Thanks to this, users can avoid mistakes and better understand the presented content.
- 2. Optimize the cache policy
When a browser requests a resource, the providing server will tell the browser how long it may temporarily store or cache the resource. For each consecutive request of this resource, the browser will use its local copy instead of downloading it from the Web. Thus, HTTP cache optimization can significantly reduce the time of downloading during multiple visits.
- 3. Upgrade graphics and images to next-gen formats
WebP is an image format that has better compression and quality (as compared to the older equivalents of JPEG and PNG). Using newer formats means images will load faster and use less mobile data.
- 4. Optimize the size and structure of the DOM tree
A large DOM tree (Document Object Model, a common model of website structure) may in many ways slow down the website efficiency.
In terms of the Web and capacity efficiency, a large DOM tree usually contains many nodes. These nodes are not visible when a user loads the site for the first time, but they contribute to unnecessarily high data costs and slow downloading times.
This also affects the efficiency of the mobile website. The more interaction users and scripts have with the website, the more the browser must keep recompiling node positions and styles.
- 5. Review CSS styles, sizes, and service
Unused CSS may also slow down the browser’s construction of the rendering tree. A rendering tree is similar to the DOM tree, but it also contains styles for each knot. To build a rendering tree, the browser must go through the entire DOM tree and check which CSS rules apply to each node. The more unused CSS there is, the more time the browser will potentially need to calculate styles.
Good CSS file minification may improve the website loading efficiency. CSS files are usually larger than they should be.