Don’t Make These Mobile Web Mistakes


Mobile websites have the challenge of cramming a lot of content into a small space, while presenting it in a way that’s intuitive for a user to navigate.

An emerging trend on mobile commerce sites is to use a three-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 three-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 three-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 to believe that the top left of the web page is logo territory.  Showing three-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 a navigation icon and not branding?


Forever 21’s navigation icons to the right of the logo are easy to understand, but the three-bar on the left 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 fixation on the image, not the floating mystery three-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 three-bar appears as part of the navigation menu, which is easier to identify as actionable.


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


Remember desktop web conventions when determining the order of your icons.  For eBags, the three-bar sits top-right, which is traditionally 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 three-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 you cringing, but labeling your icons clarifies what they do.  CVS adds “Menu” to its three-bar.


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

12Notice 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!”  Its left-of-search position may be more effective than pairing it with the shopping bag icon or placing it 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 or not your design is working.  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.

Reprinted by permission.


About the author: Linda Bustos

As Director of Ecommerce Research at Elastic Path, Linda Bustos works with some of the world’s largest companies to help improve conversion rates and profitability on the Web. In addition to writing the Get Elastic blog since 2007, Linda’s articles have appeared in Mobile Marketer, CMO Magazine, E-Marketing + Commerce, and Search Marketing Standard. She is a frequent speaker at industry events, including XCommerce, Conversion Conference, and Affiliate Management Days.

In 2010, Linda earned a spot on the DMNews Top 30 Direct Marketers Under 30 list. She has served as faculty for the Banff New Media Institute’s Career Accelerator Program and Marketing Profs University, and has appeared as one of the Top 100 Influential Marketers of the year in 2008 and 2009. Prior to joining Elastic Path, Linda worked agency-side, specializing in usability and SEO.

You are seconds away from signing up for the hottest list in New York Tech!

Join the millions and keep up with the stories shaping entrepreneurship. Sign up today.