Navigation Patterns for Mobile Optimized Retail Sites
-
Upload
theresa-neil -
Category
Documents
-
view
108 -
download
2
description
Transcript of Navigation Patterns for Mobile Optimized Retail Sites
![Page 1: Navigation Patterns for Mobile Optimized Retail Sites](https://reader034.fdocuments.net/reader034/viewer/2022051613/54c7758b4a795945558b4584/html5/thumbnails/1.jpg)
NAVIGATION PATTERNSFor Mobile Optimized Retail Sites
![Page 2: Navigation Patterns for Mobile Optimized Retail Sites](https://reader034.fdocuments.net/reader034/viewer/2022051613/54c7758b4a795945558b4584/html5/thumbnails/2.jpg)
We looked at >30 top retail sites to find the patterns and the best examples for sharing.
Research
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
![Page 3: Navigation Patterns for Mobile Optimized Retail Sites](https://reader034.fdocuments.net/reader034/viewer/2022051613/54c7758b4a795945558b4584/html5/thumbnails/3.jpg)
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
The Patterns
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
![Page 4: Navigation Patterns for Mobile Optimized Retail Sites](https://reader034.fdocuments.net/reader034/viewer/2022051613/54c7758b4a795945558b4584/html5/thumbnails/4.jpg)
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.
Caveat
http://www.slideshare.net/theresaneil/the-dangers-of-the-wrong-mobile-strategy
http://www.slideshare.net/theresaneil/your-strategy-cant-be-html5
![Page 5: Navigation Patterns for Mobile Optimized Retail Sites](https://reader034.fdocuments.net/reader034/viewer/2022051613/54c7758b4a795945558b4584/html5/thumbnails/5.jpg)
Top Nav and Skip the Sub NavIkea offers Top Navigation combined with the Skip the Sub Nav menu. They do a particularily nice job showing the navigation path.
![Page 6: Navigation Patterns for Mobile Optimized Retail Sites](https://reader034.fdocuments.net/reader034/viewer/2022051613/54c7758b4a795945558b4584/html5/thumbnails/6.jpg)
Priority PlusGilt 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.
![Page 7: Navigation Patterns for Mobile Optimized Retail Sites](https://reader034.fdocuments.net/reader034/viewer/2022051613/54c7758b4a795945558b4584/html5/thumbnails/7.jpg)
Skip the Sub NavLowe’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).
![Page 8: Navigation Patterns for Mobile Optimized Retail Sites](https://reader034.fdocuments.net/reader034/viewer/2022051613/54c7758b4a795945558b4584/html5/thumbnails/8.jpg)
Multi Toggle then Skip the Sub Nav
REI starts with a Multi Toggle menu, then takes you to a separate Sub Nav page.
![Page 9: Navigation Patterns for Mobile Optimized Retail Sites](https://reader034.fdocuments.net/reader034/viewer/2022051613/54c7758b4a795945558b4584/html5/thumbnails/9.jpg)
Skip the Sub Nav then Multi ToggleCalvin 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.
![Page 10: Navigation Patterns for Mobile Optimized Retail Sites](https://reader034.fdocuments.net/reader034/viewer/2022051613/54c7758b4a795945558b4584/html5/thumbnails/10.jpg)
Off CanvasOriginally 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.
![Page 11: Navigation Patterns for Mobile Optimized Retail Sites](https://reader034.fdocuments.net/reader034/viewer/2022051613/54c7758b4a795945558b4584/html5/thumbnails/11.jpg)
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
![Page 12: Navigation Patterns for Mobile Optimized Retail Sites](https://reader034.fdocuments.net/reader034/viewer/2022051613/54c7758b4a795945558b4584/html5/thumbnails/12.jpg)
Targeted BrowseZappos doesn’t offer a menu, but instead provides a structured search plus a simple sort and filter features to refine the results.
![Page 13: Navigation Patterns for Mobile Optimized Retail Sites](https://reader034.fdocuments.net/reader034/viewer/2022051613/54c7758b4a795945558b4584/html5/thumbnails/13.jpg)
More Mobile Retail Patterns
![Page 14: Navigation Patterns for Mobile Optimized Retail Sites](https://reader034.fdocuments.net/reader034/viewer/2022051613/54c7758b4a795945558b4584/html5/thumbnails/14.jpg)
Streamlined Checkout
1-Click and PayPal express checkout makes it easier to complete the purchase.
![Page 15: Navigation Patterns for Mobile Optimized Retail Sites](https://reader034.fdocuments.net/reader034/viewer/2022051613/54c7758b4a795945558b4584/html5/thumbnails/15.jpg)
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
![Page 16: Navigation Patterns for Mobile Optimized Retail Sites](https://reader034.fdocuments.net/reader034/viewer/2022051613/54c7758b4a795945558b4584/html5/thumbnails/16.jpg)
Anti-Pattern: PagingPaging and mobile don’t mix, use Endless Scroll or View More Items to show the full product list.
Paging Endless Scroll View More
![Page 17: Navigation Patterns for Mobile Optimized Retail Sites](https://reader034.fdocuments.net/reader034/viewer/2022051613/54c7758b4a795945558b4584/html5/thumbnails/17.jpg)
Anti-Pattern: Idiot BoxDon’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
![Page 18: Navigation Patterns for Mobile Optimized Retail Sites](https://reader034.fdocuments.net/reader034/viewer/2022051613/54c7758b4a795945558b4584/html5/thumbnails/18.jpg)
Follow me on Twitter @theresaneil
Check out my O’Reilly book Mobile Design Pattern Gallery