December 12, 2019
How to Design the Best Mobile Product Detail Page (8 Bullet-Proof Tips)

How to Design the Best Mobile Product Detail Page (8 Bullet-Proof Tips)


Open your Google Analytics data. Which page has the biggest number of entrances
and page views? Of course product detail page. I don’t mean a particular page of a single
product but the whole template. Today, I’m going to show you how to design
a highly-converting mobile product detail page Hi everyone! My name is Pawel Ogonowski and I’m the Ecommerce
Optimization Guy. Imagine you’re looking for a new MacBook
Air on Google. You type that in and what you see are product
ads that lead you straight to a product detail page. And other campaigns do that too: remarking,
PPC, emails, social promos. They more often than not lead directly to
product pages. That’s why today, I’m going to show you
how to create a highly converting product page. We’re going to focus on mobile as sooner
or later most of your traffic will come from our beloved mobile phones. Tip #1: Place foto first We buy with our eyes! We want to see the product straightaway. More often than not we don’t care about
the name of the product. We want to see it. So make as much space for the photo as possible
and place it in the very beginning of your product detail page. Event test pushing the name of the product
below the foto! Tip #2: Support mobile gestures You see a photo on your mobile screen and
you want to see the next one. What do you do? You swipe it! You want to see the details of this beautiful
dress. What do you do? You zoom it! We do that on autopilot because we’re used
to that! That’s why you must support mobile gestures! And by the way, as you can see there is no
need to open photos in toplayers of any sort. Tip #3: Suggest that there is more than just
a single photo In order to explore users have to be given
hints! How are they supposed to know that you’ve
got 4 wonderful shots of this dress? They won’t until you give them a nice little
suggestion. You may do that in two ways with photos. One: show a bit of the next photo next to
the current one. Two: show dots indicating that there is more
to see. Tip #4: Fit add-to-cart section into a single
screen Place all the vital information user needs
when he is about to put that item into his cart close to each other so that they fit
a single screen. These indispensable elements are:
Name of the product Star rating, price Promotions of any sort, size / color select Screen-wide CTA Don’t force users to scroll the product
page up and down to double-check if he is adding the right product in the right size
to the cart. Place every bit of this vital information
in proximity. Tip #5: Spice up add-to-cart section with
nudges If there is anything you can do to push users
to make the final decision, the add-to-cart section is the right place. Build urgency by showing how many items are left. If the item is on sale — strike out the
price and show the discount. If users get free delivery with this product
— this is the place to highlight it in green. Tip #6: Let users easily access additional
information As humans, we are all different. Some users are quick shoppers just like I
am. I see a nice photo and bam it’s ordered. However, there are guys like my father who
are going to read every single piece of info before they decide to place an order. And you need to satisfy both groups. Let users easily dive into the details if
they want. Not only about the product but about shipping and payment options too! Make the information available right at hand
but to keep the product page nice and short, expand only if users want it. Tip #7: Use full-screen toplayers As marketers we all love toplayers. They work pretty well on the desktop because
we are used to windows opening inside other windows. Any idea why the Microsoft’s operating
system was named Windows? Anyway, toplayers do a clumsy job on mobile
devices if they are designed as windows inside other windows because there is no room for that. That’s why, when you have got some additional
information that you want to present on a toplayer, then present it as a full-screen one. This way it’s going to be naturally interpreted as a new screen. In-app like experience. It’s the best if you enable swiping motion
to close / get back and give a clear way to x-out of it. Like an x mark or a „close”
link. Just make sure it’s big enough to be tapped
with our clumsy fingers. Tip #8: Add cross-sells and upsells Product detail page is a perfect place to
present users with other items that they can get in your store. If you sell clothes, you may:
show similar clothes . Show matching accessories and clothes 
. Show full looks Your aim is to either upsell or cross-sells. Placing two lines of suggested products is
a good idea. To get more products in a single line, there
is a good trick to achieve that: show two full pictures of additional items and a part
of the third one. This way you will prompt the user that he
can swipe to see more. Summing it up — 8 tips if you want to come
up with a highly converting mobile product detail page: One: Place foto first
Two: Support mobile gestures Three: Suggest that there is more than just
a single photo Four: Fit add-to-cart section into a single
screen Five: Spice up add-to-cart section with nudges
Six: Let users easily access additional information Seven: Use full-screen toplayers
Eight: Add cross-sells and upsells Follow this tips and you’ll create the best
mobile product page that will convert like crazy! Ok, folks, that’s all for today! Remember to subscribe to Bite-size Ecommerce
Optimization Channel. And don’t forget to like this video! Have a great day and see you in the next episode of Bite-Size Ecommerce Optimization! Ta-ta! Did I forget to mention that mobile product pages have to be blazing fast? It’s mobile. You’ve got just 3 seconds. Otherwise, your users are gone. Never forget about that.

Leave a Reply

Your email address will not be published. Required fields are marked *