Ecommerce Solution News

While most retailers have enough challenge optimizing for the Web, along comes the mobile Web with its own demands, usability challenges and opportunity. Websites designed specifically for mobile devices are not new, but are few and far between when it comes to online retail. And if serving customers wherever they are is important to your e-biz strategy, you cant rely on smartphones to translate your Web store into a Mini-Me mobile version and expect it to be usable. The difference between optimized and non-optimized sites is night and day.

Consider the WWWs usability hiccups of the late 90s some which are still problematic today:

5. Slow loading pages (remember World Wide Wait?)

7. Search tools that cant handle synonyms and misspellings

8. Banner blindness - if something looks too much like an ad, its ignored

Add to these plagues the problems of tiny screens, slow and flaky network connections, lack of support for rich media, cost for data and short battery lives of mobile devices and the headaches of the Web become migraines on mobile.

Yet the industrys bracing for an explosion of mobile commerce - up to $2 Billion by 2010? Are you kidding me?

True, a large chunk of this activity could be for digital downloads like ringtones and wallpapers, but theres a lot of potential for mobile shopping of retail sites if only the experience was tailored to the tiny screen.

There are a handful of retailers whove taken the lead and developed mobile sites. Some are good, some are great, all are better than a non-optimized version. Here are my notes and mobile usability recommendations based on a review of Best Buy, Target, Sephora, Moosejaw, Barnes and Noble, Amazon, Sears2Go, Ralph Lauren and Tickets.com. (Links point to mobile versions of each site)

This is the first of a 4 part series on mobile commerce design and usability:

Note: After my research, Moosejaw re-launched its mobile site on a new platform with a new smokin design. Ive included shots from both the old site and new in this series.

Because input is harder on mobile devices than on the web (especially with the deadly combination of long fingernails and iPhone - I speak from experience), long URLs are a nightmare to type. Though theres no rule for what URL your mobile site will live on, m.site.com is easiest for users to access (easy to remember, least number of characters to key in). Sears is the only site Ive seen so far that has its own branded .com site - Sears2Go.com - which is fine as long as you evangelize the domain name well.

If possible, try to register m.yourdomain.com, yourdomain.mobi and mobile.yourdomain.com and redirect them all to one version. This will help customers find you when they guess your mobile URL.

Heres a mashup of a few meta descriptions and how they appear in search results. Its a good idea to include an explanation of the mobile sites features and functionality in the snippet:

For more information on search engines and mobile websites, check out Should You Have a Mobile Version of Your Ecommerce Website?

Regular sites are often graphic heavy with multiple merchandising zones, Flash banners, AJAX features, multiple styled navigation menus and many calls to action. Regular sites require zooming in on a smartphone, which makes viewing them like looking at a map through a peephole. They may also take a long time to load.

Check out Sephora and Targets regular home pages viewed on the iPhone:

Now see the difference between Tickets.com and Barnes and Nobles Web home pages and their optimized mobile home pages:

To improve usability on a small screen, youll notice most mobile home pages are stripped of graphics and may or may not include regular navigation menus. Best Buy avoids navigation completely, offering just a search box, store locator and customer service number:

Barnes and Nobles mobile home page also features search and store locators without category navigation, but offers links to customer service items and Top 10 lists. The rationale is mobile surfers are hunters rather than browsers, and hunters prefer a search box. But is this a fair assumption - especially on a device where input is more difficult, and for products that may have very long titles and author names?

Another approach is to use stacked navigation menus (rather than horizontal) like Moosejaws old site and Sephora:

Rarely youll find merchandising on a mobile home page. Amazon and Moosejaws new site do so, but the images are small and layout still simple:

Moosejaws original home page was pretty bland and utilitarian not a match to Moosejaws wild and crazy website. The new mobile design incorporates more personality, featuring more entertaining content than just a product catalog, like In Case Youre Bored - which Moosejaws high school and college age customer probably is.

Theres no hard-and-fast rule on what direction to take with your home page (just search and essential customer service links, just menus or merchandising with images etc. But make sure your home page has clear links to essential information and tools that support research, product location and customer service features you deem important to you mobile strategy.

Many mobile devices have poor color contrast and can be hard to see in the glare of daylight or in dark venues, cars and other areas with poor lighting. Be very careful when designing with low contrast colors, and avoid light text on dark backgrounds. Especially white underlined text.

LINKS AND OTHER TEXT WITH ALL CAPS IS HARD TO READ. EVEN WORSE WHEN ITS IN SERIF FONT.

Mobile browsers handle style sheets in different ways. They may or may not cache external style sheets or support the style element and some dont support style sheets at all. If you have mobile specific style sheets, theres no guarantee a given device will pull the right one. Its best to give every non-text element a text equivalent like you would when designing emails for image-off clients.

The best way to show menus on mobile phones is with a vertical stack, rather than horizontal menu bars. Only use the top-level categories on the home page. Youll have to decide whether to show expanded categories and sub-categories in the second level of navigation (after the user has selected a top-level category) or use a linear drill-down, examples:

Sears2Go shows top level categories on the home page (bonus points for promoting its mobile application in the menu):

And chooses to use expanded categories after the first category selection:

Others like Sephora and Moosejaws old version opt to drill-down level by level:

Both methods have their advantage and disadvantage. An expanded menu takes longer to load and requires more scrolling, while drill downs require more page loads with every selection. If youre designing for phones that use numeric keypad input to select, drill-downs are easier to manage - youll need less corresponding numbers.

No matter what you choose, make sure links are large (unlike Moosejaws old site or Target, below) for touch screen users. When links or buttons are too small or too close together its easy to touch the wrong one. Numbered menus are helpful for phones that navigate through a numeric keypad.

Its helpful to have Up or Top links at the end of menus to quickly return to the top of the page, especially for expanded menus with many items.

I dont recommend image navigation for categories. It can be confusing because images dont necessarily look like links unless theyre product thumbnails or buttons. Graphics add to page load time, and their labels can be hard to read - as with Ralph Laurens Shop label (can you find it?). And tiny hero shots add no value, only eye strain.

Clarity is so important when naming calls to action, categories and links. Because each page may load slow or cost money, you want to minimize ambiguity about where a link leads. Ralph Laurens Entertainment (above) is an example of an unclear label.

Remember the old advice make links look like links? Breadcrumbs are links, and they should look like breadcrumbs. Common mistakes I found were hiding the breadcrumbs in the header, too close to the logo, and using ALL CAPS with no underline. Sephoras breadcrumbs are easy to overlook, and its confusing whether Mobile Reviews is a tagline or a link (its not a link).

Moosejaws old breadcrumbs were camouflaged in the brown bar, in all caps, not underlined. Easy to overlook. Especially when they are centered (see Moosejaw screenshot above).

Tickets.com does a nice job with breadcrumbs at the top, and large, clear links at the bottom, Back to Reggae, Back to Concerts and Home.

Because not all devices have a back button, mobile sites dont have room for sidebar navigation on product pages. Breadcrumbs are more important on mobile sites than regular ecommerce sites, especially when your categories and sub-categories/filters drill-down 2 or 3 levels. Remember to make breadcrumbs look like breadcrumbs (underline and use > to separate) and consider placing them at the top and bottom of each page.

For handsets without a pointing device, providing a keyboard short cut (access key) for links that are repeated across pages makes it easier to navigate quickly.

Liked this post? Stay tuned for the next installment Search and Category Pages. If you havent already, consider subscribing to Get Elastic.  

No related posts.