For optimal user experience, please upgrade your browser.
Mobile

Mobile Design: Where Failure is not an Option

Floating Widget

Floating Item Container

Floating Rate Widget

0
RATING

RATE THIS ARTICLE

BE THE FIRST TO RATE THIS ARTICLE

Please Select
Your Rating

Sometimes the biggest design fails aren’t obvious — until they suddenly are.

A couple of back-to-back sessions on mobile redesign at the Digital Experience Workshop explored numerous ways that retailers unwittingly complicate the shopping journey, as well as highlighted one company that has made significant strides in the right direction.

Linda Bustos, cofounder of e-commerce advisory firm Edgacent, kicked things off with “Hacking the Top 5 Mobile Commerce Design Challenges.”

Menu fails

The three-bar “hamburger” icon is increasingly recognized as the button for the menu. But that doesn’t mean what lives behind it is consistent. Bustos displayed several examples that were redundant, misplaced (such as next to a search box) and/or downright confusing.

More from the Shop.org Digital Experience Workshop

Read the stories, watch the presentations, see the sketchnotes and more from the recent event, held July 18-20 in California. See all the content.

Image fails

Optimization of pictures is particularly important for mobile. When images are reduced in size from a desktop, they can lose context and be harder to read, she said. It’s also important to take retina displays versus standard screens into account; fuzzy images can impact the brand.

Pagination and infinite scroll fails

Automatic loading works fine for social networks when the user is browsing through a feed, Bustos said, but can be problematic in shopping. “Shoppers might like something but are not ready to commit to that click,” she said. “‘Let’s see what else is there.’ And before you know it, the more products that are in that category or subcategory, they can quickly lose control and get lost in that experience.”

A practice she advocates, on the other hand, is use of graphic tiles that take the user to subcategories of interest. Also good: a “load more” option. It’s loved by customers, she said, because it helps them feel in control, and helps them access footer content.

Drop-down menu fails

Of the sites Bustos tests, half have a coding issue that blows up a background image after a selection is made, forcing the user to pinch and zoom to resize the window. On the other hand, easily tappable targets, such as plus and minus signs for quantity selection, simplify the experience.

Mobile checkout fails

Forrester has reported that 24 percent of shoppers will abandon a cart if they don’t see a guest checkout option. It’s rare to find a site without one now, but improvements can often be made in how they’re displayed. Consider, for example, making the first option guest checkout and then the second, sign in. Don’t call the checkout step “sign in.” And think about a flow that has the guest enter an email address first, so it’s captured no matter what the consumer decides to do next. In addition, in terms of mobile checkout, disable autocorrect for names and email addresses, and when a keyboard is pulled up, ensure it is the numeric one for ease of use in entering credit card numbers.

Cornerstone Brands’ Bryon Colby, SVP of digital commerce, and Chad Haas, mobile business and technologies manager, presented at the Shop.org Digital Experience Workshop.

Reducing friction at Cornerstone Brands

Next up, Bryon Colby, SVP of digital commerce, and Chad Haas, mobile business and technologies manager, both of Cornerstone Brands Inc., offered a side-by-side comparison from the company’s recent mobile relaunch. Cornerstone Brands is part of the HSNi family, made up of eight leading lifestyle brands; the relaunch included seven full sites over an intensive seven-month period.

The overall effort with one site, which reduced friction in numerous ways, was so good that it actually went too far; early testing showed that shoppers were adding to a cart, but then disappeared. There was a need to keep the “added to cart” and “view cart/checkout” visible parts of the process. After 90 days, sales per session on the mobile site rose 12 percent and average order value was up 13.2 percent.

A crucial takeaway, however, especially for multi-brand structures: Know what you’re getting into — redesign can be a lot of work. Further, establishing key business and tech partners and metric tracking upfront is essential, as is remembering that optimization is an ongoing process.

comments

1
Jordan G.
Getting inside your customers' heads isn't an easy thing, but providing an enjoyable user experience on mobile is a must if you want to thrive in 2016. The design team at Mobify put together some best practices to help retailers think about the buying journey through the eyes of their customers. Definitely worth checking out for anyone with an m-commerce site. https://www.mobify.com/insights/improve-conversion-rates-8-simple-checkout-flow-best-practices/
Retail Playbooks

Retailers that want to stay relevant to modern consumers are rethinking every aspect of the shopping experience, and NRF’s playbooks offer a quick summary of ideas and tactics that can inspire innovation. 

Featured News

Retail Trends
Episode 77: Jason "Retailgeek" Goldberg on two technologies for the coming year.