The Best UX Way to Display Products on Mobile Devices

Mobile is a totally distinct entity from desktop. That’s why mobile product displays have to be adapted to the user-experience considerations of the device. When you display products on mobile in an optimized way, you raise conversions, too, providing another reason to adapt product displays to mobile.

According to Pew’s research on 2015 smartphone use, the top three places people use smartphones are at home, in transit, and at work. And, the top three reasons of mobile use is to meet somebody, avoid boredom, and to set reminders.

According to eMarketer, most shoppers consistently browse on their smartphones, but the number of shoppers who make a purchase on their smartphones is at a tipping point.

In 2016, just less than half (49.1%) of digital buyers will complete a purchase on their phones. Next year, though, the number is expected to jump to 51.2%, signaling more comfort than ever in completing purchases on mobile.

One of the best ways to get shoppers to complete more mobile purchases of products is to ensure a seamless UX, and the grid view happens to be the best UX approach.

What’s a Grid Pattern?

The grid pattern is a layout that displays content on a page in two or more cell columns that are arranged in a vertical and horizontal layout. It’s generally an alternative to a standard list view on mobile devices, which display products in a list-like fashion.

A grid view is ideal for displaying products on mobile devices because it tends to focus more on emphasizing the images to the consumer. It’s common, however, to include very basic information such as the product’s name and price in the grid view display.

The advantage to using a grid system for mobile product displays is the clean and minimalistic presentation of the content. It helps to ensure visitors find important product information in a quick and easy way.

How the Grid Pattern Helps With Mobile eCommerce Scanning

The grid pattern places usability at the forefront.. When it comes to mobile shopping, your customers need to be be able to scan products in the most efficient way. This is why the grid pattern is so helpful.

One of the most common reading patterns on the web is the F-shaped pattern. This involves the user or shopper starting on the left side of a webpage and then vertically looking down until they find something of interest, at which point they start scanning from left to right on the page.

This process repeats itself until they’ve made their way down the page, which results in an F shape pattern of reading.

On Amazon’s mobile site, you can see how this content organization makes for easy scanning of book displays.

Make a Fast Decision and Compare Products Easily on Mobile eCommerce

Comparison shopping is an integral part of the consumer’s decision-making process, so your mobile experience should provide them with clear comparisons. One of the best ways to accomplish this is by including many images in your grid view, which we already established as being a great facilitator of effective eye scanning.

According to Referral Candy, consumers are more likely to engage with branded content than features images. When people see high-quality product images, it’s the next best thing to grasping it in their own hands, and this informs their buying decision.

Humans are visual creatures, so having sharp images, especially on small mobile screens, allows them to see the tiniest of details to get a feel for the products they’re considering buying.

Ideal for Showcasing Product Images

Grid patterns take advantage of a shopper’s natural eye-scanning behaviors to provide a brilliant display for showcasing items on a mobile site.

When you utilize the grid-view to display products on mobile, you’re allowing your customers to quickly compare one product to the next, as their eyes efficiently scan back and forth between the offerings, as well as up and down between categories.

In the video games section of Amazon’s mobile store, notice how the mobile site’s sharp, clear images in the grid-view make it a cinch for shoppers to understand what game they’re looking at.

This user-interface layout is almost akin to having a selection of products in a physical, brick-and-mortar store’s shelves. Think about it: Like physical products on a shelf in a “real” store, the product displays on a mobile screen can also be picked up and examined—but instead, by allowing customers to click on the image for more information.

Vertical and Horizontal Scrolling

On mobile, vertical and horizontal scrolling are equally intuitive for users, but which is more appropriate at a given time depends on the reason for scrolling. Using a grid pattern makes it easier for your online customers to use either type of scrolling for specific purposes.

Back to the Amazon example: On this page for PlayStation 4 games, there are different categories (best sellers and hot new releases) organized into the grid structure.

When consumers use their thumb to scroll down a page (vertical scrolling), they’ll end up seeing a variety of categories beyond what’s displayed on the screenshot above. When they scroll left to right with their thumb, they’ll see more games in each category.

The image of the game is cut off at the far right end of the page is also a visual cue of sorts, indicating that horizontal scrolling is acceptable as well.

Thanks to the grid view, your customers can easily follow the columns and rows when they scroll; uncovering essential information.

Mobile eCommerce Font Size

Mobile screens are small, so you have to compensate by increasing the font size. According to UXmatters analysis, font sizes have to be a minimum size on all mobile devices to ensure basic readability.

For small phones, font sizes should be:

4-point minimum 5.5-point for basic content 7.2-point for enhanced content

For large phones, font sizes should be:

6-point minimum 8.5-point for basic content 10.8-point for enhanced content

For phablets, font sizes should be:

7-point minimum 9.8-point for basic content 12.6-point for enhanced content

For smaller tablets, font sizes should be:

8-point minimum 11.2-point for basic content 14.4-point for enhanced content

Displaying Products Right on Mobile Devices

Displaying products correctly on mobile is crucial to a pleasant user experience and, consequently, your conversions and sales. The grid pattern provides the best opportunity to show off products to online shoppers across a very small piece of screen real estate.

Grid view is usable, functional and very practical, allowing consumers to interact, absorb, view and retain content in an easy and efficient way.