The 6 piece puzzle of the mobile product page

Marketers are making such a big fuss about this entire mobile world affair. At first, you might doubt their initiative and enthusiasm. However, after a while, after the information starts sinking in, you realize that they are not being eager, or enthusiastic about anything really.
They are just getting in line with the world we are living in.
Because, whether we like it or not, smartphones are becoming our world and it’s only natural to offer them the attention they deserve.

In return, these gadgets offer us what we want the most, profit as a result of an increased visibility. So, maybe it’s best to treat our mobile product pages, the place that matters the most, right after check out page,, with the attention they deserve.

Just a quick mention here to show just how serious we really are. You might not know this, but according to Baynard Institute and their report on mobile ecommerce¹, mobile traffic has almost reached half of the entire online traffic. This is huge. Imagine the kind of exposure, which evidently leads to positive impressions and ultimately, profit, you could obtain from an adequately designed mobile product page. So, enough talk, let’s get this game started.

¹M-commerce Usability Report, Baymard Institute, available at https://baymard.com/pro/mcommerce

Fact 1: Keeping it simple and clean

You might have heard this before, but we kinda mean it this time. You have to be practical about the manner in which you approach your mobile product page, because honestly, there’s not much room you can dance in. It’s not about shrinking desktop product presentations.

That’s a NO SIR approach, a true recipe for complete and utter failure. On your regular desktop product page, you most likely have subpages or subcategories, which make sense there, but can create real havoc on the mobile display.

So, simple, clear and nice, one main page larger view. Use everything you’ve got on that main page, images, product description, detailed specs and eliminate the need for subpages and subcategories. It’s quite confusing for the regular customer and the purpose is lost along the way. Instead of having your audience focus on the product, you force them to focus on the process.

Fact 2: Collapsing content: Handle with caution

Having a well groomed mobile product page doesn’t always mean cutting as much as possible from your content. In fact, content is good, content is a friend. Whether your customers buy from their desktops or from their smartphones, they need to get acquainted with the product. That’s when you play the friend card and add content to the scenery. However, you need to take great care of the manner in which that content is displayed. Once again lack of space is working against you. Collapsing content helps you keep the mobile product page clean, just as it should be, but in essence, all it does is hides content from the customer.

Mystery, in small doses, is always welcomed. Exaggerate and your product page might just get into trouble. Handle collapsing content with care. Here are a few pointers you might find useful. Divide your content into several categories, which should be outlined using 2-3 noticeable lines, which can inform the reader that content is available and what it is actually about. It is very important to offer concrete pieces of information, which help the customer make up his mind on whether or not he should invest in your product.

Fact 3: Text & Image: the Fantastic Duo

Mobile makes use of information in all shapes and sizes, so let’s have a closer look at both the correct use of images and content. First off, give your images the opportunity to serve their purpose. Images are worth a thousands words, so scale them proportionally when switching to landscape mode.You are fighting lack of space, try not to forget it. Your customers will be tempted to switch to landscape, so humor them. Also, there is this one more thing.

And this time, it doesn’t even have a practical scope, but rather one meant to raise the enthusiasm levels. Since smartphones have all these special features, allowing users to tap, swipe and pinch, you need to equip your mobile product page to allow such gestures. It’s all about trying to make the customer smile and not just inform him about the product. Build a connection.

As for content, you need lots of it and in small quantities. Strange right? Well, you want a lot of content because you want customers to have a clear idea of the product you are selling. At the same time, you want these details, which will most likely be of a technical nature, to be easily followed.

Break the information into categories, make the descriptions bite-sized, use headers to define sections and don’t forget to have sufficient whitespace between these sections. Maintaining a clean mobile product page is crucial.

Fact 4: Reinterpreting the word of mouth: Power to reviews

Most likely, by now we’ve all gotten very well acquainted with the idea of reviews, not to mention their strength. So, this little tool should be handled attentively. Use it, but not at the expense of the clarity of your product page. How can you do this? By means of a summary. Still, remember that this functions effectively when you have more than a handful of reviews. For less, keep it traditional. It’ll be much better, trust us!

With review summaries, the customer gets to see your ratings, and disregard the text. We’re not pointing fingers here, but messing about with reviews is an old (rather effective) strategy. The only problem is that some customers have gotten the idea and started analysing reviews, building up a low-trust attitude. For this reason, even if we are talking about 100% authentic reviews, when these come in a greater number, hiding them behind a summary sounds like a more effective strategy. Leave no room for doubt and make room for trust.

Fact 5: The breadcrumb situation

When things shrink, a magnifying glass always helps. Only in the mobile world, magnifying glasses are replaced by breadcrumbs. Your customer needs to be reminded at all times where he is. And while that might seem simple, it’s really a bit confusing on small screens. Help your customers understand where they are in the site’s hierarchy.

Providing your customers with product page breadcrumbs is a valid solution. However, for whatever reason which completely escapes us, the mobile design process actually kills breadcrumbs, even though these are of a great importance. If there is no room for breadcrumbs at the top of the page, you should consider displaying them at the end of the product page.

Fact 6: Pushing buttons, the right ones

Buttons are always a complicated story. They are as far as the desktop version is concerned and they certainly are on mobile. While the color, shape and text can be regarded as a personal affair, their existence on your mobile product page is in no way debatable. And yet, there is a considerably large number of marketers who fail at this chapter.

Because customers tend to misinterpret the cart button, usually placed on the footer of the product page, a second Add to Cart button of all product pages really comes in handy. Now, there is a secret weapon some marketers decided to use. Sticky buttons are attached to the viewport on the product page, top or bottom, your choice. However, a word of caution here. You might want to monitor sticky buttons, because according to Baymard Institute, testing on this feature has not yet been done.

Hopefully, we’ve covered everything or at least, everything we know today. Since there is no better way to finish this unending story than with a cliche, here it goes. Considering the speed with which the tech world is evolving, it’s safe to say that changes will undoubtedly appear, quite soon, actually. So, we’ll be hearing each other pretty soon.