Mobile Product Page Design Tips
|
| ||||||||
| Compare: | Web Design Calculator | Web Design Cost Guidelines |
Are you an E-Commerce Web Designer? Add a Free Listing
Continuing in our series on mobile design strategy, today’s post focuses on mobile product pages, including product information, calls to action, navigation and merchandising.
Purpose of product pages
Throughout this series, we approach design considering the conversion goal(s) for the page type with the understanding that the conversion goal for most pages is a click through to the next step in the buying process, not a completed sale. Product pages exist to inform and romance the customer into buying a given product from your shop. Top “converting” product pages include enough descriptive content and imagery to assure the customer it is a suitable product, and must be supported by a usable UI and shop-specific value propositions for why your site is the best place to purchase the product.
The challenge with mobile product pages is fitting everything into less space, and this is obviously more challenging on smartphones than tablet devices. Though mobile shopping is likely to be more popular on tablets than smartphones, consumers use their phones to look up product availability, compare reviews and prices in-store and on-the-go, click through mobile email campaigns, web applications or land on product pages through QR code links – oh my! So considering the small space constraints when designing for mobile is very important.
Product Information
Images
Bigger is better for product pages, especially for items with fine detail. Use tight shots (less surrounding background/white space) and try to fill the full width of the screen, or offer “enlarge image” links. Leave enough room below the image for the title to encourage scrolling below the fold to discover additional product information. Crutchfield does this very nicely.
Ralph Lauren makes good use of space with a large image and clear alternate images.
Just remember that images increase page load time. Optimize your images to reduce file size and consider a content delivery network to reduce the impact.
Descriptions
How to squish all your juicy copy into a small screen size? One idea is to use tabbed boxes, which I propose are susceptible to “banner blindness” and should always be user tested before adopted on your mobile site. Did you notice them in the Ralph Lauren screen above? Can you spot them on Crate and Barrel?
Stacked menu buttons may be better noticed, but their styling is very important. I recommend colored menus to draw the eye, rather than the subtle whitish-gray buttons used by Crutchfield and others.
Calls to Action
As with horizontal “bars” in web design, wide call to action buttons like the Crutchfield example above may “stop” the eye from navigating below them. My suggestion would be to test narrower add to cart buttons for this reason. Contrary to web best practice, “bigger” is not necessarily more conspicuous.
Moosejaw’s smaller, jelly bean red buttons are hard to overlook – but their horizontal stacking could be problematic on small touch screens, more vertical spacing or horizontal arrangement could be tested. (However, I appreciate Moosejaw’s use of buttons rather than drop-down configurators for product size/color options.
Contrast the red with the lime green “click to call” button. The low contrast between the button color and white text makes it difficult to read, not to mention its small size. Make sure buttons are large enough to decipher what they are for!
A side note on drop down menus – test how they work on various devices. Proflowers’ delivery scheduling is near impossible to understand the way it renders on the iPhone.
Item Added to Cart
If you don’t take the customer directly to your shopping cart page after an item is added to cart, it’s crucial to make it very obvious the product was indeed added to cart. There are various ways to handle this on the web, but they don’t always port over nicely to small screens.
ASOS and Crate and Barrel choose to notify the customer at the top of the page, but again, these notices may be barely noticeable – make sure you user test or even A/B test taking the visitor directly to the cart vs. keeping them on the product page. Measure exit rates and successful cart initiations.
Navigation
If a given product is not suitable, a secondary goal of the product page is to successfully point users back to your product selection, most likely the category page or the next product in the category.
Breadcrumb navigation is helpful to hone in on the exact location you wish to return to (and showing it at the top and bottom of a page is helpful) – but again, remember link target size! It’s easy to mis-tap a link with tiny text.
The Ralph Lauren example (left) and Crate and Barrel (right) show additional ways to navigate – previous/next arrows and prominent “back to category” buttons.
To save you the scroll-up, here again is the Crutchfield screen shot showing the large product image. The downside of such a gigantic graphic is it dwarfs the “back to category” button, which is unfortunately styled in overlook-me-black. Remember, design variables are often inter-dependent. A best practice on one variable can negatively impact another!
Merchandising
Another way to support navigation and product discovery is to display product recommendations. For mobile product pages, I recommend showing alternative products, rather than cross-sells (unless items can be added to cart concurrently with the product being viewed), unlike Ralph Lauren. Your page goal is a click on the add to cart button or successful navigation to a product category or alternative, suitable product, and cross-sells is a click away from the goal. True “upsells” such as a more expensive item within the product line or a value bundle is okay.
Testing Tips
Once again, the user and business goal of the mobile product page is a click through – either a successful “add to cart” or a click back to a list of alternative products or a substitute. In other words, keep the user on the site! Measure your A/B and usability tests with these metrics in mind.
As for what to test, my suggestion is to first make sure your description content is easy to find. Consider user testing tabbed content vs. vertical menus and back to category / next product navigation. User testing will reveal the “why” behind the “what” of user behavior, and can often be completed in a day or two, whereas mobile traffic may be too low to run a quick A/B test, but you could also test this with an A/B experiment. Next, experiment with value propositions – messaging and placement – with A/B testing. After you’ve nailed down these essentials, look at button styling, secondary calls to action, merchandising and so on.
Next up: cart review pages.
Looking for help with mobile commerce strategy? Contact the Elastic Path consulting team at consulting@elasticpath.com to learn how our ecommerce strategy and mobile strategy services can improve your business results.
Source http://www.getelastic.com/?p=8623Fri, 23 Sep 2011 16:05:47 GMT
Tags: Mobile Commerce, Web Design and Usability,
Christiansted E-Commerce | Oconomowoc E-Commerce | Mint Hill E-Commerce | Manteca E-Commerce | Bluff City E-Commerce | Scottsbluff E-Commerce | Seabrook E-Commerce | Kingston E-Commerce | Shelby E-Commerce | Iowa Park E-Commerce |
Mobile Commerce
Apple Wants 30%? When the Wind Changes – Adjust Your Sales
Apple’s announcement that in-app subscriptions are now available for content publishers and licensed resellers (magazines, newspapers, TV/video, music etc) – at the low-low price of 30% of revenue – has come quite a buzz in the blog-o-sp
Developing Mobile Apps for Multiple Platforms
One of the greatest obstacles for developing mobile apps at this time is the number of different mobile phones that need to be supported. Even though the iPhone is currently the most popular platform for apps, it’s no longer enough to just support t
PPC: Tablet Targeting Strategies
Google Adwords recently launched a new feature that allows you to target tablet devices separately from PCs and mobile phones (or opt out of serving ads to them). This may seem like a minor update, but it has major implications for paid search advertisers
Web Design and Usability
Form Design: 11 Patterns For Accepting User Input
I’m often asked what are good books to read for ecommerce. If you’ve been trekking with us for a while, you know I occasionally review books I receive from publishers – so long as I believe they would be interesting for ecommerce buffs. I receive no other
Showing Products In Context with Animated GIFs
From the Retail Email Blog’s 2010 Design Hall of Fame comes an example of showing a product “in context” (in use) with an animated GIF image: While animated GIFs are not unusual in email, I’ve yet to see one on a product page. In
Hot Hot Heat Maps: 10 Tips for Conducting and Analyzing Eye Tracking Tests
Quantitative site analysis (web analytics and A/B or multivariate testing) is phenomenal for learning about your site’s performance and user behavior. But the drawback is, this data tells you the “what” but not the “why.” To
Need E-commerce Design? Check out our member profiles:
Muse Media specialists are enthusiastic about custom website designing. We look forward to the having the chance to work with your organization.
St Louis, Missouri US
We provide all types of custom design work including: websites, logos, business cards, brochures, advertisements, and pretty much anything else you can imagine.
Cartersville, Georgia US
The Digital Designs Professional Network (DDPN) is a collective of web, digital and print marketing specialists who have joined forces to provide exceptional technology solutions for the digital age.
Northport, New York US
We are one of the Leading providers of top class website development, web designing services, cheap and top quality web hosting in India, SEO services and domain registration services in India.
NOIDA, Uttar Pradesh IN
MAXBURST is a New York website design firm. Our website services include design, development, business identity, hosting, e-commerce solutions, search engine marketing, and website maintenance.
Amityville, New York US
2Heaven Media is a full service Web Development company that focuses on custom Website creation and E-Commerce Site Development.
Los Angeles, California US
NOCHALLENGE TECHNOLOGY is an emerging custom web and desktop application development company based out of Minneapolis, MN. Please contact us for all your eCommerce projects.
Savage, Minnesota US
Atlanta GA, professional web site, Small Business Website Design, eCommerce, SEO, SEM, Website Management, Sell Online, web marketing, lead generation, Web Programming, Search Engine Optimization
Atlanta, Georgia US
Let Wolfram Alpha Create Your Password For You
Wolfram Alpha terrifies me in all honesty It s like SkyNet combined with Google and we know all a
41 Radical Photographs of New-Age Street Artwork
img src http rss buysellads com img php z 1264761 k bb78eac5744533b69852b62261051c57 a 1259
Embed Custom Fonts with Cufón Font Replacement and Google Fonts
Embedding custom fonts on a website has always been a problem but thanks to Javascript and especial
Get Your To-Do List Done In Style With Any.DO For Android
To do lists are not necessarily the most exciting applications ever and the UI for most Android app
9 Websites To Help You Start Brewing You Very Own Beer
Ever since I tried my first home brewed beer which was delicious I ve been mulling over the idea o
My Top 10 Favorite iOS Apps For 2011
As a devout Mac geek I think there should be a People s Magazine devoted solely to app developers
Hot Tech Deals – Lenovo ThinkPad Edge E420 Intel Core i5-2410M 2.3GHz Sandy Bridge 14in Laptop $529.99 & More!
Office Depot has the Lenovo ThinkPad Edge E420 1141A24 Intel Core i5 2410M Dual Core Sandy Bridge
Article Tags
E-commerce Design Articles
Web Apps & Internet (374)
News (291)
Web Apps (129)
Inspiration (128)
Music (119)
iPhone / iPad / iPod (116)
cool web apps (108)
Google Android (101)
Mobile Tips (100)
Announcements (99)
deals (88)
Games & Gaming Tips (84)
Tech Deals (82)
Opinion & Polls (76)
Cool Software Apps (76)
Social Media (66)
iOS (66)
Browser Tips & Tricks (66)
iPhone Apps (59)
Freebies (58)
geeky fun (58)
Photography (58)
iphone (55)
Google (53)
troubleshoot (53)
android (52)
Photoshop (52)
Graphics (51)
facebook (50)
How-To Articles (50)
Friends:
E-Commerce Website Pricing
Web Design Quote
Website Design
Graphic Designers
