Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
NAVIGATIONPATTERNSFor Mobile Optimized Retail Sites
ResearchWe looked at >30 top retail sites to find the patterns and thebest examples for sharing. Amazon     Best Buy     Wa...
The PatternsThe patterns are derived from the work of Brad Frost, LukeWroblewski, Chris Kobar and myself‣ Top Nav‣ Priorit...
CaveatWe reused some of the patterns from responsive designbecause there are some commonalties between responsivenavigatio...
Top Nav and Skip the Sub NavIkea offers Top Navigation combined with the Skip the Sub Nav menu. They do aparticularily nice...
Priority PlusGilt shows the high priority navigation items across the top with a more buttonto reveal other stores in the ...
Skip the Sub NavLowe’s offers a new page of options on each drill down. This may be the mostcommon pattern in retail naviga...
Multi Toggle then Skip the Sub NavREI starts with a Multi Toggle menu, then takes you to a separate Sub Nav page.
Skip the Sub Nav then Multi ToggleCalvin Klein starts with a simple list menu that takes you to the sub nav page ontap. Th...
Off Canvas Originally found in native apps including Path and Facebook, the Off Canvas menu is rising in popularity in mobil...
Mobile Mega MenuSony has a sexy mega menu that works well for product category heirarchies.This is more complicated to imm...
Targeted BrowseZappos doesn’t offer a menu, but instead provides a structured search plus asimple sort and filter features t...
More MobileRetail Patterns
Streamlined Checkout1-Click and PayPal express checkout makes it easier to complete the purchase.
RecommendationsIncrease total purchases with upsells and cross sells: people also viewed,people also bought, people who vi...
Anti-Pattern: PagingPaging and mobile don’t mix, use Endless Scroll or View More Items to show thefull product list.      ...
Anti-Pattern: Idiot BoxDon’t break the flow with a modal dialog that has to be dismissed. Show thecart with an item in it a...
Follow me on Twitter @theresaneilCheck out my O’Reilly book Mobile Design Pattern Gallery
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
The Best Windows Phone Apps 2013: A Designers Collection
Next
Download to read offline and view in fullscreen.

80

Share

Download to read offline

Navigation Patterns for Mobile Optimized Retail Sites

Download to read offline

Quick analysis of the mobile navigation patterns in the retail space.

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Navigation Patterns for Mobile Optimized Retail Sites

  1. 1. NAVIGATIONPATTERNSFor Mobile Optimized Retail Sites
  2. 2. ResearchWe looked at >30 top retail sites to find the patterns and thebest 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. 3. The PatternsThe patterns are derived from the work of Brad Frost, LukeWroblewski, Chris Kobar and myself‣ Top Nav‣ Priority Plus‣ Multi Toggle‣ Skip the Sub Nav‣ Off Canvas‣ Mega Menu‣ Targeted Browsehttp://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.pdfhttp://www.lukew.com/ff/entry.asp?1569
  4. 4. CaveatWe reused some of the patterns from responsive designbecause there are some commonalties between responsivenavigation and mobile optimized site navigation.However, this does not mean responsive is the right mobilestrategy for the retail space. Mobile Optimized sites and/orNative apps are a better solution.http://www.slideshare.net/theresaneil/the-dangers-of-the-wrong-mobile-strategyhttp://www.slideshare.net/theresaneil/your-strategy-cant-be-html5
  5. 5. Top Nav and Skip the Sub NavIkea offers Top Navigation combined with the Skip the Sub Nav menu. They do aparticularily nice job showing the navigation path.
  6. 6. Priority PlusGilt shows the high priority navigation items across the top with a more buttonto reveal other stores in the Gilt family: Gilt City and Gilt Taste.
  7. 7. Skip the Sub NavLowe’s offers a new page of options on each drill down. This may be the mostcommon pattern in retail navigation (Target, Walmart, Amazon, etc).
  8. 8. Multi Toggle then Skip the Sub NavREI starts with a Multi Toggle menu, then takes you to a separate Sub Nav page.
  9. 9. Skip the Sub Nav then Multi ToggleCalvin Klein starts with a simple list menu that takes you to the sub nav page ontap. The sub nav page uses multi-toggle to revel the next level of options.
  10. 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 andlist menu is jarring and should be avoided.
  11. 11. Mobile Mega MenuSony 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. 12. Targeted BrowseZappos doesn’t offer a menu, but instead provides a structured search plus asimple sort and filter features to refine the results.
  13. 13. More MobileRetail Patterns
  14. 14. Streamlined Checkout1-Click and PayPal express checkout makes it easier to complete the purchase.
  15. 15. RecommendationsIncrease 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. 16. Anti-Pattern: PagingPaging and mobile don’t mix, use Endless Scroll or View More Items to show thefull product list. Paging Endless Scroll View More
  17. 17. Anti-Pattern: Idiot BoxDon’t break the flow with a modal dialog that has to be dismissed. Show thecart with an item in it and/or just open the cart for easy checkout. Modal Go to Cart Go To Cart
  18. 18. Follow me on Twitter @theresaneilCheck out my O’Reilly book Mobile Design Pattern Gallery
  • blade4souls

    May. 30, 2018
  • narf2916

    Aug. 30, 2017
  • SarahCarne

    Aug. 20, 2015
  • protofuseinc

    Jul. 23, 2015
  • biscuit.hippies

    May. 29, 2015
  • mariaduranperez

    May. 17, 2015
  • clivingston84

    Apr. 7, 2015
  • ElijahDaSilva

    Mar. 11, 2015
  • sandeep_naharia

    Mar. 7, 2015
  • JIVI7

    Feb. 18, 2015
  • martin.ferronnierre

    Dec. 13, 2014
  • Nillovic

    Dec. 10, 2014
  • darekmoleda

    Nov. 26, 2014
  • savenkov

    Sep. 22, 2014
  • undersnow

    Jun. 24, 2014
  • kyoo119

    Mar. 11, 2014
  • RafaelCoimbra1

    Mar. 3, 2014
  • lsorum

    Feb. 5, 2014
  • timostone

    Jan. 30, 2014
  • speedalert

    Jan. 8, 2014

Quick analysis of the mobile navigation patterns in the retail space.

Views

Total views

13,815

On Slideshare

0

From embeds

0

Number of embeds

136

Actions

Downloads

299

Shares

0

Comments

0

Likes

80

×