Its not for a tablet. Thats what you should be thinking about when youre designing your tiny little product page, with its tiny real estate to work with on the tiny screen. “Tiny” is relevant here because you have an important internal decision to make, one that many other companies are dealing with right now with budgets, short-term tactical implementation and long-term strategy.
Should you have different product pages for smartphones and tablets?
For sure, some organizations are still grappling with the decision to make different pages for mouse and touch-driven devices. Then theres the problem of differentiating between types of touch devices, which may stretch budgets and create bad user experiences. But leaving smartphone and tablet product pages the same ignores the very different use cases they have. The tablet is a comparable device to the desktop, while the phone is really more its own animal. Its convenient and immediate, where the tablet is focused and deliberate.
Whether you choose to make different pages for tablets and smartphones or go for responsive design (which instantly adapts your website to available screen size), here are some things to keep in mind when creating product pages for mobile:
1. Keep them distraction-free. To a degree, the phone is already the distraction. Its the thing being used to compare item prices between retail sites while the cars in heavy traffic or when there are a few minutes of downtime. Putting another layer of distraction on top of that is a bad idea. The phone allows for tons of bells and whistles, with accelerometer access, location data and all kinds of goodies. Resist the urge to use all of these unless you add tremendous value, like with a click-to-call for orders.
This might sound counterintuitive to the executive looking to mobile for branding pizzazz, but the idea is to make the product page, well, boring. Dry. Focused on the item, price and savings, and with very little text on the page, all engineered to persuade.
2. Give clear and distinct choices right away. Only display a subset of the options you usually show, and make the price available upfront. This is important. If users on desktops, laptops and tablets have short attention spans, here were talking about an even shorter fuse.
Make prioritization decisions when serving the mobile version of your product page. You can use revenue per purchase, user analytics data for behavior on mobile or general traffic data if you dont have the segmentation maturity to go after the first two options, but its important that you prioritize.
By making sure the options are clear, distinct and limited, you stand a better chance of closing that sale. Remember, prioritization includes saying no to many good options.
3. Plan for fat fingers, small screens. On the traditional desktop product page, making the call to action big is about directing attention. On mobile product pages, where youre not supposed to enable as many elements anyway, thats less of a concern. The size of the call to action is about allowing for the finger width to fit into the hotspot rather than just the fingertip width.
The mouse is a precision device; our fingers while were walking or on a train, not so much. Providing margins for finger width goes a long way in ensuring what users need to do can be done with as few hassles as possible.
Again, this is another area where keeping the page Spartan and boring helps. No bells and whistles means more space for stuff that matters, like your call to action.
4. Boring is useful. Your product page isnt an interactive game, its basically an ATM: used for a limited time, targeted, useful and annoying when it tries to do too much. Keeping it Spartan is a good idea, and testing how Spartan you can go is an even better one.
___________________________________________________________________
This article originally appeared in Tims Retail Online Integration column July 23, 2013
