The document discusses navigation patterns for mobile optimized retail sites. It summarizes navigation patterns found on over 30 top retail sites, including top nav, priority plus, multi-toggle, skip sub nav, off canvas, mega menu, and targeted browse. It notes that some responsive design patterns can apply to mobile navigation but responsive design may not be the best strategy for retail mobile sites compared to mobile optimized sites or native apps. Examples are provided of popular navigation patterns implemented on sites like Ikea, Gilt, Lowe's, REI, and Sony. The document also outlines some additional mobile retail patterns like streamlined checkout, recommendations, and warns against anti-patterns like paging and modal dialogs.

1. NAVIGATION
PATTERNS
For Mobile Optimized Retail Sites

2. Research
We looked at >30 top retail sites to find the patterns and the
best examples for sharing.
Amazon Best Buy Walmart Target Abercrombie
Ikea Anthropologie Zappos Jared Jewelers
Lowe’s Home Depot REI Gap Think Geek CK
Pottery Barn Crate & Barrel Sony Newegg Gilt
Clinique Nike Sears Overstock Microsoft
Macy’s Bed Bath & Beyond Nordstroms Ben & Jerry’s

3. The Patterns
The patterns are derived from the work of Brad Frost, Luke
Wroblewski, Chris Kobar and myself
‣ Top Nav
‣ Priority Plus
‣ Multi Toggle
‣ Skip the Sub Nav
‣ Off Canvas
‣ Mega Menu
‣ Targeted Browse
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/
https://www.dropbox.com/s/7w3fjpexkepyw9k/Wonderbread.pdf
http://www.lukew.com/ff/entry.asp?1569

4. Caveat
We reused some of the patterns from responsive design
because there are some commonalties between responsive
navigation and mobile optimized site navigation.
However, this does not mean responsive is the right mobile
strategy for the retail space. Mobile Optimized sites and/or
Native apps are a better solution.
http://www.slideshare.net/theresaneil/the-dangers-of-the-wrong-mobile-strategy
http://www.slideshare.net/theresaneil/your-strategy-cant-be-html5

5. Top Nav and Skip the Sub Nav
Ikea offers Top Navigation combined with the Skip the Sub Nav menu. They do a
particularily nice job showing the navigation path.

6. Priority Plus
Gilt shows the high priority navigation items across the top with a more button
to reveal other stores in the Gilt family: Gilt City and Gilt Taste.

7. Skip the Sub Nav
Lowe’s offers a new page of options on each drill down. This may be the most
common pattern in retail navigation (Target, Walmart, Amazon, etc).

8. Multi Toggle then Skip the Sub Nav
REI starts with a Multi Toggle menu, then takes you to a separate Sub Nav page.

9. Skip the Sub Nav then Multi Toggle
Calvin Klein starts with a simple list menu that takes you to the sub nav page on
tap. The sub nav page uses multi-toggle to revel the next level of options.

10. Off Canvas
Originally found in native apps including Path and Facebook, the Off Canvas
menu is rising in popularity in mobile sites.
Note: Ambercrombie also offers a list menu on the home page. But the interaction between the off canvas menu and
list menu is jarring and should be avoided.

11. Mobile Mega Menu
Sony has a sexy mega menu that works well for product category heirarchies.
This is more complicated to immplement and will require additional QA testing.
Note: A bottom docked mega menu like Toys R Us can also work well

12. Targeted Browse
Zappos doesn’t offer a menu, but instead provides a structured search plus a
simple sort and filter features to refine the results.

13. More Mobile
Retail Patterns

14. Streamlined Checkout
1-Click and PayPal express checkout makes it easier to complete the purchase.

15. Recommendations
Increase total purchases with upsells and cross sells: people also viewed,
people also bought, people who viewed this ultimately bought, etc...
Also Viewed Ultimately Bought Also Bought

16. Anti-Pattern: Paging
Paging and mobile don’t mix, use Endless Scroll or View More Items to show the
full product list.
Paging Endless Scroll View More

17. Anti-Pattern: Idiot Box
Don’t break the flow with a modal dialog that has to be dismissed. Show the
cart with an item in it and/or just open the cart for easy checkout.
Modal Go to Cart Go To Cart

18. Follow me on Twitter @theresaneil
Check out my O’Reilly book Mobile Design Pattern Gallery