Mobile Commerce: Category Page Design Tips
|
| ||||||||
| Compare: | Web Design Calculator | Web Design Cost Guidelines |
Are you an E-Commerce Web Designer? Add a Free Listing
Last post we covered tips for home page design for mobile web sites and, as promised, today’s post will explore category pages. The goal of category pages is ultimately to keep the customer on-track to locating a product for purchase, thus usability and clarity of menu options and product results is key. Page layouts, sort and refine tools and navigation options all work in tandem to support this user goal. *Note: These tips can be applied to search results pages as well.
Category Listing Results
There are 2 types of category pages – top level categories, which list sub-category menus, and sub-categories, which list available items within the category. Top-level categories are most often a link-menu, but using thumbnail images can also be helpful, provided they are large enough to decipher and click. Remember, thumbnail images scaled down for mobile may not show the detail / size required to be helpful.
Left: Crate and Barrel top-level category page. Right: Crate and Barrel sub-category page.
When displaying product results, price, star rating, color/size availability, stock availability, shipping offers, promotions and even short product description details help “sell” the products. Including these attributes on mobile is as important as on the web. But when it comes to call to action placement, be careful that “Add to Cart” buttons, if you choose to use them, should be clearly associated with the correct product to avoid confusion on the “small screen.”
Make Attribute Differentiators Clear
When products may have various formats or attributes (for example, hard cover, soft cover, movie DVD, soundtrack or e-book), it’s important to make these attributes very clear in category results. There are 50 results for “Goodnight Moon” from Barnes and Noble, including games, puzzles and Spanish translations, but this is not obvious. Don’t rely on category filters, not all customers take advantage of them.
Refinement Tools (Sort / Filter)
Refinement tools greatly assist users in winnowing down the number of products in your catalog, and support the goal of leading customers to the right product. Filters narrow results by product attribute, and may vary depending on the product type. For example your camera department may refine by Brand, Color, Mega-pixel, Optical Zoom and Price, while your camcorders would include Display Size and Sensor Technology. Sort tools should remain the same across your site (Price, A-Z, Bestsellers, Product Rating, Newest, etc). Your filters and sort tools should mirror your www site on your mobile site.
Design and Usability
Usability of sort and refinement tools is important, but the “visibility” of these tools is even more important. Sort/filter links and buttons can easily fade into the background of your site design, especially on small screens where navigation options must be clumped close together.
Left: Barnes and Noble’s text links are small touch targets, and are placed on a darker background. Eye-tracking studies have shown eyes tend to jump from white space to white space. This method may create “banner blindness” on small screens. Right: The low contrast between text color and the background, combined with the small text size, may make this menu difficult to read on the small screen or in low light areas.
Left: ASOS’ refine and sort tools are easy to spot on the white background. Secondary tools like the number of results on one page are faded as to not compete for attention. Right: A larger menu may be more user friendly.
Expand / collapse menus decrease page load speed and conserve space. eBags does a nice job with its design:
Treat your refine / sort links like a call to action – make them very noticeable and easy to “click” with a finger.
Navigation
Breadcrumbs
Breadcrumb links should be large and easy to “click,” but like refinement tools, your design may camouflage larger buttons. User testing is a good idea to find out what works best.
Left: Small link targets may be difficult to click with fingers. Right: Large breadcrumb links may fade into the background.
Pagination
Pagination is painful enough on the large screen, how much worse on the mobile web? Walgreens’ tiny targets are terribly tough to tap.
Auto-appending results (page loads more products automatically when user hits the bottom of the page) is a double-edged sword — scrolling to the top of a mobile device can be a nightmare. Providing controls for the number of results per page (ASOS, above) and a larger target for page links (ASOS, below) is a decent compromise.
Back Button
A back button is very helpful to return to the top-level category and try another sub-category. Showing clear buttons at the top of results and at the bottom helps both “oops I this isn’t the category I want” and “I can’t find the right selection here” situations.
Advanced: Comparison Matrix
Comparison tools are critical to successful product selection for consumer electronics, and Crutchfield innovates by achieving this functionality for mobile devices. Clicking “Compare” enables the functionality right from category results:
Of course, there’s limitations for mobile phones in the number of columns that will display nicely, but even comparing 2 options looks fine on a smartphone.
Testing ideas for mobile category pages
Remember, the main goal is to get your visitor clicking to a product page. Any testing you do should center around optimizing the calls to action to access the Refine / Sort tools and to view product and/or add directly to cart. When you’re just starting out, it may be tempting to start to tweak elements within the existing design, for example, changing the color of your buttons or font sizes, rather than testing the design itself. Challenge yourself to break your existing design and test a different approach. If you use images for navigation, test it against a text-link or button menu. If you include “Buy Now” buttons in search results, test without the call to action. If you paginate, experiment with different numbers of loaded results or against an auto-append feature. Think “radical redesign,” and base your A/B tests on initial rounds of user testing to know you’re optimizing for problems customers are truly having, not just for the sake of testing.
Next installment: Product pages. Back on Friday.
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=9216Wed, 21 Sep 2011 08:02:11 GMT
Tags: Mobile Commerce, Web Design and Usability,
Santa Clarita E-Commerce | Cambridge E-Commerce | Ankeny E-Commerce | Austin E-Commerce | Sherman Oaks E-Commerce | Randolph E-Commerce | Alphen aan den Rijn E-Commerce | New Port Richey E-Commerce | Clarkston E-Commerce | Shelby 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:
High quality Los Angeles website design and graphic designers in the san fernando valley L.A.
Los Angeles, California US
ADrenaLize Graphics can develop your concepts into reality. With our knowledge of design, creativity, and experience - we can deliver thrilling designs to jump start your business!
Grand Forks, North Dakota US
WebStack designs, hosts and administers web sites which enable small/medium sized businesses to succeed in the world of e-commerce.
Cuba, Missouri US
Fully customized web design. Original designs to meet all your needs.
Sherman Oaks, California US
Check out our portfolio at www.NebWebsites.com. Based out of Imperial we serve businesses all over the world. Take your revenues to the next level!
Imperial, Nebraska US
Clarity Ventures is an Austin, TX based consulting company committed to building innovative web based solutions for our clients (e-commerce, content management, design, and SEO / marketing).
Austin, Texas US
Microsoft Word Bug Linked To Duqu Virus [News]
A new virus is making the rounds and this one has the potential to be very serious The Duqu virus
How To Use Apple’s Lesser Known Podcast Producer [Mac]
Podcasting has already proven to be an effective way to communicate or entertain and thus for basic
10 Of The Best Viral Video Ad Campaigns
Advertising is a very different ballgame now compared to the past The Web has changed everything a
10+ Emulators To Play Old-School 16- And 32-bit Consoles On Your PC (1987-1993)
As part of a series on emulating the classic consoles of days gone by we 8217 ve already had two s
Download Web Videos With The Command Line Using Movgrab [Linux]
Use the command line to quickly download videos from YouTube Vimeo Ted Discovery and over 40 othe
Latest Hilarious Picks [MakeUseOf Geeky Fun]
Check out the top picks from MakeUseOf Geeky Fun during the last couple of days How I Spend The Hol
Cool Websites and Tools [April 3rd]
Check out some of the latest MakeUseOf discoveries All listed websites are FREE or come with a dece
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
