Highlights

• There aren’t 2 webs (mobile and desktop), rather, there’s multiple devices used to access 1 web.
• Mobile strategies centered around one device neglect most visitors.

Responsive cheat-sheet:

Mobile websites

Pros

• Specialized website for one device
• Straight-forward to create
• Less code=”lighter”

Cons

• Doesn’t address spectrum of devices in use today
• Duplicated content
• Not aligned with SEO best practices*

Mobile apps

Pros

• Very specialized and optimized task-focused experience
• Device-specific capabilities (geo-location, notifications)
• Constant reminder of your brand/site

Cons

• Difficult to create and must be created for multiple platforms
• Must pre-package for multiple app stores
• Sits outside the CMS

I’ll add that app stores take a cut of in-app transactions that could be avoided through an HTML5 or responsive site, and development talent and time can be expensive, especially when you want to serve beyond Apple and Google environments.

Responsive design

Pros

• One website for all devices
• Naturally SEO friendly
• Aligned with best practices
• Coexists with other mobile strategies

Cons

• Challenging to set-up, maintain and test
• Difficult to apply to large existing sites
• No unique device experiences

Today’s post zooms in on 3 best practices when going responsive.

1. Cut content in context

The Boston Globe has a footer call-to-action to subscribe, which changes depending on the size of screen being viewed. It also stays anchored to the bottom of the screen as you scroll up and down each page.

Compare the desktop version (shown above expanded to display additional content) to the mobile CTA which skips the detailed content and gets straight to the point – Get Access Now.

This is the perfect example of removing content depending on user context. If you’re going to convert a mobile user, the more words you throw on the tiny screen, the more friction it creates.

The Globe also simplifies its subscription page, focusing like a laser on the value proposition and a strong CTA button — though I do feel the value prop on this one is a bit comical!

Don’t be afraid to strip your responsive mobile designs to MVC: Minimum Viable Content.

2. Mind your menu manners

I’ve recommended against using the triple-line menu icon on mobile designs, at least for now until the convention becomes entrenched with users.

Sony labels its menu button as such, clearly indicating it’s an expand/collapse menu (avoiding drop-downs for longer lists).

3. Scale thumbnail images with usability in mind

Image resizing is a major part of responsive design, both for screen size and orientation. But keep in mind that users need to connect product names and pricing with thumbnail images on category pages. Bigger images are not necessarily better if they’re large enough that the user has to scroll up and down to connect text links / pricing with products.

Indochino does a good job sizing thumbnails, even in landscape view. The user can easily connect product with price and link in one screen.

We’ll be covering more tips on responsive design for ecommerce in the coming weeks on Get Elastic, leading up to the Shop.org Merchandising Workshop July 15-17. I’ll be speaking on Mobile Commerce: Is Responsive Right for Retail? Join me!

An emerging trend on mobile commerce sites is to use a 3-bar icon to represent a category menu, which may be expandable or jump down to a menu on the home page.

Actionable menu buttons are a fantastic way to bake navigation into every page. Considering the growth in mobile search and that 43% of email is now opened on a mobile device (Litmus), supporting users who land deep and are unfamiliar with your mobile site is critical. The 3-bar icon is a good idea — and may be approaching convention status — but it matters how you apply it to your design.

Do: Tell the visitor where to start

Buckle identifies first-time visitors and calls attention to the menu button. Even if visitors have no clue what the 3-bar does, they know it’s a good place to start, and will soon find out it controls category navigation.

Don’t: Confuse it with your logo

Despite mobile’s growing popularity, Internet users have been trained by desktop sites that top left is logo territory. Showing 3-bar to the left of your logo is a big no-no.

How would first time, search-referred visitors to Discount Dance supply know this is navigation, not branding?

Forever 21′s right-of-logo navigation is easy to understand, but the 3-bar isn’t an obviously clickable element.

Ditto Spanx. You get the idea.

Don’t: Give it too much room to breathe

I bet you a Double Tall Caramel Macchiato that eye-tracking studies would show heavy fixations on the image, not the floating mystery 3-bar. Placing it on the far right is just as dangerous as left-of-logo.

Do: Group your category icon with other navigation elements

Softchoice’s 3-bar appears as part of a navigation menu, which is easier identified as actionable.

Alternatively, Lowe’s pairs 3-bar with its search icon.

Remember desktop Web conventions when determining the order of your icons. eBags’ 3-bar sits top-right, which traditionally is where site login or shopping cart icons are found. eBags may get more mileage from its menu by moving it to the left of Account and Cart, or grouping it with Search.

Green Mountain pairs 3-bar with Search, but a left-of-Search placement may be more intuitive, as conventionally, vertical category menus appear on the left side of a page, and “Go” buttons to the right of search fields.

Do: Label your icon

Designers — I can hear your cringing, but labeling your icons clarifies what they do. CVS adds “Menu” to its 3-bar.

If you find this too busy, a simple “Menu” button works until 3-bar becomes a proven convention.

Notice Harry and David’s Search icon may be confused with the PayPal logo resembling a search box.

Ross Simons’ menu button’s plus sign cries out “expand me!” It’s left-of-search position may be more effective than pairing it with the shopping bag icon or placing right-of-search.

But Ross Simons’ shopping bag icon may suffer from blends-too-much-with-logo-itis. In fact, any navigation button can be overlooked if it’s not styled properly.

As always, user testing and A/B or multivariate testing can tell you whether your design is working or not. Testing navigation should be one of your top priorities for a mobile optimization strategy, as balancing efficient use of space competes with clarity of your mobile site architecture.

Today’s post highlights tips from the research findings of recently published m-Commerce Usability: Exploring the Mobile Shopping Experience by Baymard Institute.

Based on usability studies, Baymard Institute identifies 5 guidelines for touch keyboards (the report includes tutorials on how to code each tip properly):

1. Disable auto-correct where dictionary is weak

Auto-correct is helpful on mobile devices, but can also make it easy for customers to submit incorrect information when incorrect auto-correct is applied without customers taking notice. Auto-correct is particularly troublesome for abbreviations, street names, email addresses and similar words not in the dictionary.

In the study, even common address abbreviations like Rd were auto-corrected (for example, to “Ed”).

Auto-correct needs only to be disabled on fields where improper autocorrection is a problem, such as Name, Street, City, User ID and email address, and may be left in tact on fields where it may be helpful.

2. Show appropriate keyboard layouts

Best practice is to show the most appropriate keyboard layout for a given field. For example, pull the numeric keyboard for credit card and phone number fields, and email keyboard for email addresses. This spares the user from toggling between keyboards themselves and reduces the potential for errors.

Many of Baymard’s test users took notice of these optimized keyboards, providing positive comments. And typos were significantly reduced, leading to fewer validation errors (especially for long numbers like credit card input).

Be aware that numeric keyboard layouts don’t always allow for alphabetic characters and may only support select special characters. Ensure that neither the field nor keyboard you select prevents proper entry (for example, a telephone number format that requires dashes combined with a keyboard without the dash character). Also ensure that international form fields do not prevent alphabetical inputs for postal code.

3. Honor ‘Next’ and ‘Previous’ button behavior

Users expect Next and Previous buttons to do what they say. Naturally, test subjects had problems with sites that failed to move the user to the next or previous logical field in the form without requiring other changes or form submissions. Surprisingly, this bug occurred on more than one site in the test group.

Not all users will rely on these buttons (rather, use the tab method), but those that do will experience friction if they do not behave as expected.

4. Disable auto-capitalization where appropriate

This is a problem I’ve encountered many times with CAPTCHAs on mobile forms. Smartphones tend to auto-capitalize the first letter in standard text fields, which is helpful for fields like Name, but not for email addresses and case sensitive password selection. Used with CAPTCHAS, failure is inevitable, and the user may not understand why input is failing each time.

5. Consistently invoke keyboard layouts

When optimizing keyboard layouts, be consistent. FTD, for example, applies the numeric keyboard to the credit card field, but not to the security code field that follows.

“What is even more surprising is just how confused some of the test subjects were by this. They began questioning their initial interpretation of the field, thinking that maybe something else was required. For example, when seeing the standard keyboard layout for the “Card Security Code”, the subjects began wondering if this was the 3-digit code on the back of their VISA card or if perhaps it was one of the many other numbers printed on the card.”

It’s a good idea to test your form fields on a variety of popular devices, as not all touch screens behave alike.

Get Elastic was provided with a review copy of this report, you can get your own copy of m-Commerce Usability: Exploring the Mobile Shopping Experience, which includes 147 actionable guidelines specific to mobile commerce optimization.

)

How long is long?

Web usability guidelines suggest dropdown menus with more than 15 items should be avoided. This guideline is also recommended for mobile.

On iPhone, for example, only 5 selections are visible at a time while scrolling through a long menu. Even when menu options are alphabetized, an aggressive swipe can send the menu spinning like the Price is Right’s Showcase Showdown wheel.

According to Nielsen Norman research, menus of state abbreviations are much faster to type than to select from a drop-down. “Free-form input into fields with restricted options does require data validation on the backend, but from a usability perspective it’s often the best way to go.”

This is, however, much easier on keyboards than touch screens, but is still an option for mobile forms. Input errors are more common on touchscreens as qwerty letters are tiny tap targets. Switching to this form of input is not the perfect solution for mobile. So how can you preserve long drop-downs whilst making them easier to use?

1. Open field autocompletion vs. fixed drop-down menus

Open field autocompletion is just like a search box autocompletion – suggestions appear (in drop-down format) as the user types, and the menu shrinks as letters filter menu options. A user may ignore the drop-down and keep typing, but it serves to speed the process and reduce errors for those that take advantage of it.

One example of this in action is Brooks Brothers:

It’s important to test, not just multiple mobile browsers, but also orientations. In landscape mode, the overlay covers up the touchable selection area of the dropdown.

2. Present most common countries first

If the majority of your customers order from a handful of countries, presenting them at the top of them menu eliminates the need to scroll — especially for United States and United Kingdom customers.

3. Narrow to most common countries

Eurocar narrows its menu to its top 40 countries (for its mobile site, only). This is still beyond 15 menu item guideline, and risks making life much more difficult for customers outside of the 40. Use this option cautiously.

Image source: UX Booth

4. Use GPS detection to suggest country

Redeeming itself, Eurocar taps into the GPS capabilities of mobile devices, requesting geolocation permission from mobile users.

An alternative to client-side permission is server-side paid geolocation tools like Akamai and Maxmind, which removes a layer of friction — user permission is not required (asking for geolocation may provoke FUD anxiety). There’s a slight trade-off on accuracy vs. GPS location, but for country selection, pin-point accuracy is not as important as city or exact location.

5. Ask for ZIP code first

While this won’t solve international selection issues, asking for ZIP or postal code before city / state allows you to prefill or narrow down the selection options for these fields.

Bonus: Other Mobile Drop-down Issues

If you don’t absolutely need to ask for information in any form, don’t — especially on mobile. Financial Times may have its reasons for asking profession, role and industry, but it’s safer to make these optional, post-conversion requests.

Menus like the above also pose a problem that they are not as straightforward as Country or State. The user really has to read each option and mentally process what is the correct option (unless they cheat and select one at random).

Another problem is when menu options don’t fully display on mobile devices. In the case of delivery date selection below, this input is better served by a calendar or abbreviated text (Fri 5/24 – $9.99, for example).

Take a moment today to test your site’s conversion funnel forms on at least one mobile device (multiple devices and multiple mobile browsers, if possible) in portrait and landscape mode. Do you encounter any problems?

When thinking about your website’s user experience and conversion optimization focused design, it’s important to consider the variations in screen size your visitors may be coming from. This infographic from Mobify puts the sizes into context. When you step back and see it at a glance, you’ll see the vast difference in screen real estate between smartphones, tablets and traditional screens.

Click to enlarge infographic

Subscribers: Can’t see infographic? View this post on the blog

Tweetables

• The average shopping cart abandonment rate is 65.23% Tweet this
• The average ecommerce conversion rate is only 2.13% Tweet this
• The higher the AOV for an ecommerce site, the lower the “product page effectiveness” rate Tweet this
• For ecom sites with AOV <$50, product page effectiveness is 25% Tweet this
• For ecom sites with AOV >$2000, product page effectiveness is 4-5% Tweet this
• 73% of consumers say free shipping influences them to purchase Tweet this
• 70% of consumers say free returns influences them to purchase Tweet this
• 62% of consumers say sales and discounts influence them to purchase Tweet this
• 56% of consumers say discount coupons them to purchase Tweet this
• 46% of consumers say rewards and loyalty points influence them to purchase Tweet this
• 43% of consumers say time-limited deals influence them to purchase Tweet this
• 31% of consumers say free gifts influence them to purchase Tweet this

These ecommerce navigation menu best practices are just 12 of the over 170 tips in the report.

Tips for improving drop-down usability

1. Use clear headings

One of the main reasons for using a mega menu is to present a large range of links in related sets. To show users which links fall into related sets, you can use headings to group them together.

2. Use columns

Most sites already group related sets into their own columns and often use a single pixel column border to help with demarcation.

3. Showcase your best sellers

Save time for customers by placing your best-selling products on the mega menu. This means that users can click directly to them without the need to visit a sub-category and then locate the product.

4. Keep it short

Be cautious of making your mega menu too tall. It might extend off the page if they are browsing from a small screen, such as a netbook or mobile device. You can check how many of your customers have such screens by using Google Analytics. Try to make the menu fit the majority of screen sizes.

5. Add a border or shadow

Help the menu to stand out from the page content better by using a drop shadow or subtle border. This is particularly important if you’re using a white menu on a white background.

6. Test it in a range of browsers

Make sure the menu works in all browsers by undertaking plenty of cross-browser testing to ensure it’s easily navigable for everyone.

7. Consider using the full width of the page

Some of the clearest and most effective mega menus are the ones which span the entire width of the page, or a significant proportion of it. They allow the site to include clearer headings, supporting images and promotions for offers and best-selling products, which aids usability and helps drive sales.

8. Use images and icons

The Sunglass Hut example, and this from BMW show how drop-down menus can be more useful, as well as easy on the eye, with the addition of product images.

9. Promote your USPs

Promote offers, guides and unique selling points on your mega menu.

10. Get the timing right

Make sure the menu appears rapidly, stays in place while the user’s mouse is hovering over the top and vanishes when the mouse is moved away. Jakob Nielsen recommends that the menu should wait for half a second before appearing, as this prevents the menu popping up every time a user passes their mouse pointer over the top.

11. Vary the menu size

If you need to If some top-level categories contain dozens of sub-categories while others contain just a few, consider using mega menus containing different numbers of columns. Some sites with small ranges in certain areas use a combination of wide multi-column mega menus and short drop-downs to good effect.

12. Focus on granularity

When you’re planning what to include on your menu, take time to consider your approach.
You don’t want to offer too many groups or include too many sub-categories, otherwise you’ll make the menu too big and overwhelm your visitors with too many options.

The entire Ecommerce Compendium Report is available from Econsultancy.

What not to do

The biggest mistake I see is pop-ups that deploy far too early. My first visit to a site, I need time to look around before I’m ready to join a Facebook page, download an e-book or sign up for a newsletter.

The above blog dropped this request upon my arrival. The box was quickly closed, but not before I could grab a screen shot (the visit inspired this post.)

How to use pop-ups effectively

First rule is don’t tick off your visitor. Visitors get ticked off a lot less when the popup (or lightbox) doesn’t interrupt a task, is relevant and includes a strong what’s-in-it-for-me (value proposition).

Opt-ins

An on-arrival pop-up is okay in the following situation: when it improves the user’s site experience.

There are some cases when you need to get user input in order to continue using the site. This may be for business/personal segments (like for telecom, software, etc) or for geographic segments.

Websites that work with FiftyOne, for example, often announce that they offer international shipping with landed costs shown in cart (no surprise duty or taxes upon delivery). It’s a significant value proposition, and the interruptive pop-up is a great way to communicate this value prop clearly.

In some cases, the pop-up window includes a pre-selected country and currency option that can be overriden.

It’s not recommended to bombard a new visitor with a request for a social follow or share upon arrival, before he or she has had enough time to interact with your site and experience your brand. Even though not all “new visitors” are new to your brand – they may have cleared cookies or have searched your site out after using your product or visiting your shop – it’s safer to ask for social opt-ins or email sign-ups is to ask on a returning visit, or in the case of a content site, after “x” number of page views (you determine the “x”).

Ditto for feedback surveys. Ask users that have viewed at least 2 pages on your site, not upon arrival. The user has 3 seconds to determine if she wants to stay on your site – don’t cover up your site’s value proposition with a lightbox unless it’s essential to guide your visitor to the right content (e.g. geographic content).

If you have a strong brand and detect a visitor has arrived by direct type in of your URL (indicating user is aware of your brand and is seeking you out), an email opt-in request, like OfficeMax’, may be acceptable.

Ensure you split test it and measure both opt-in response and abandonment rate before sticking with it. And remember, use the direct type-in segment and/or returning visitor segments only.

Merchandising

Victoria’s Secret has been using pop-ups on cart pages for years. When a shopper clicks to view the cart, the upsell offer (usually tank tops) appears, and I’ve heard through the grapevine this converts well.

Groupon uses post-purchase pop-ups to ask for a social share and merchandise other deals to get a follow-up purchase.

There will always be customers who find this annoying. But these calls to action are launched at appropriate times. Their in-your-faceness may pay off in higher uptake (test, test, test).

Pop-up best practices

If you dare to display pop-ups, make sure they follow these rules:

1. Clearly communicate your value proposition(s).

Don’t waste your user’s time. If what you’re showing in the pop-up isn’t amazing, you risk sending your customer away from your site. If you’re asking for an email address, state why they should bother. If you’re asking for a social connection, show off some social proof (numbers and faces), and tell them why it’s worth their while.

2. Optimize everything.

Test your headlines, images, offers and copy with your pop-ups. You may test a pop-up against no pop-up and find the no pop-up wins, but your test pop-up may have had an irrelevant or uncompelling offer.

3. Have a clear call to action

This goes without saying, but it never shocks me when marketers neglect this. (Hint: also make the label text explicit on what action the user is taking). Bonus points for including point-of-action assurances, like the KISSmetrics example above (anti-spam statement).

4. Make it easy to close

If you shroud the close icon, users have no choice but to abandon your site. Don’t be tricky.

KISSmetrics’ example hits all of these nails on the head. Kudos.

Finally, A/B testing is great to find out the what (quantitative results of using pop-ups), but user testing can tell you the why – what users hate about your design, offers and implementation.