30% of all online shopping purchases now happen on mobile phones. And when it comes to shopping, users want immediate, relevant, and frictionless mobile experiences. Therefore it’s simply essential to help users progress through each stage of this process with minimal effort.
There is no section in mobile app that is more critical for conversion than the product screen because customers need adequate information about a product before they will buy it online. In this article, I’ll talk about product screens and highlight a few important elements of each product screen — product images, description and “add to cart” CTA button.
Product screens are where users make key conversion decisions, such as add to basket, add to wish list, book now, call now, complete form, etc. Effective product pages use a combination of text and images to show product information, availability, price, and a clear way to purchase the item.
The product images sells the item. As the saying goes, a picture is worth a thousand words. Regardless of your product, whether it be headphones or toys, it’s the most important element on the page. Images can be a powerful way to capture users’ attention and differentiate your product— be both emotional “feel” and rational “utility” part of the product.
A good hero image does all the hard work for you. The main product image should be above the fold in order to merchandise your priority offerings. Don’t make users scroll in order to see the hero image for a product.
Images are used to get a feel for the product in a way that a product description never can. Thus, the more product images you have within your product screen layout the better:
Users should be able to quickly swipe through an items images horizontally, and not have to scroll down to view a series of images.
You should provide only high-quality product images, videos, and other assets in order to capture the attention of app users. Make sure your images are appropriately sized for displays and across platforms:
Users should be able to easily zoom into a product image to inspect it in more detail, by double clicking or selecting a zoom button. This is especially important for clothing stores where consumers are more concerned with detail. The zoomed-in images also need to maintain high quality.
Product description needs to cover what the product does, how it makes your user feel and how it will make life better for your user. It should be easy to skim (get a general overview) and scan (find a specific info).
Product description should have a clear format, such as in list or bulletpoint format, so that it is easy to speed read. The key features of the product should be in focus, to encourage users’ to add it to the basket.
The size and layout of your text can make a huge impact on the experience of reading something on screen. It takes the user much longer to process smaller text, small leading and paddings. As result, the users are skipping most of the information. Whether you’re designing a layout, consider approaching the job in this way:
Users should never have to look for call-to-actions — the primary CTA (e.g. “Add To Basket”, “Book Now”) should be the most prominent button on screen, and users eyes should naturally be drawn to it. Secondary CTAs (e.g. “Share It”, “Add to Wish List”) should be in close proximity to the primary CTA.
Use the squint test to see how prominent the button is. Simply squint and blur the page. Does the button stand out more than any other element? If the answer is no, then make it stand out by giving it a unique colour not used anywhere else on the page or make it larger and the text bolder.
It is good practice to have a call-to-action button above the fold. You should design primary call-to-action button to be persistently visible even when the screen is scrolled, by having it attached at the bottom of the screen. This makes possible to users to act at any given moment.
Make it easy for users to interact with controls by making all elements for controls (not only CTAs!) easily tappable:
When users add an item to the cart, lack of feedback can cause them to question whether the action has been processed.
Feedback acknowledges people’s actions. Apps that provide a subtle animation or another type of visual feedback eliminate this guesswork for the user.
Each element on the product screen should be design in order to benefit the user. Keep in mind, when making a buying decision, users assess a product on both an emotional and a rational basis. Successful product screens speak to both — they are excite and reassure the user.
About the Author: Nick Babich is a software developer and author of a blog dedicated to usability
Want to stand out on Halloween? Go 3D! 3D pumpkins, ghosts, zombies, and other spooky…
Animation adds dynamics and variety to the design. Designers often animate details in their projects,…
If seasons were brands, autumn for sure would have one of the most outstanding style…