EA Microsite Navigation

Game maker EA provides access to their network of microsites from EA.com and offers cross-site navigation via a toolbar that is positioned at the bottom or top of each site. I like the design of the navigation on the main site and the Sports sites. But the navigation is inconsistent in position, visual design, and behavior from site to site. The Pogo site doesn't have a micro-site navigator at all, so ironically, you have to "pogo" up to the main EA site via the logo in the footer to cross-navigate. This may not be an issue, however, if EA doesn't want or need users to cross-navigate, or more importantly if Pogo users don't want to navigate to other EA sites.

1. Micro-site navigation accessed via the EA logo in the footer.
2. Micro-site navigateion acessed via a drop-down menu in the header.
3. Another micro-site navigator design in the header.


Nike Microsite Navigation

Nike.com's main site provides entry to a host of micro-sites for each sport or product family, but a consistent navigation model is provided across all microsites. A primary navigation widget is provided in the Nike Swoosh button, which reveals a list of a few of the most popular microsite destinations. A "More" link epxands the list to show all of the microsites.

1. Users click the Nike Swoosh logo to navigate across the Nike space to other microsites. A drop down reveals the most popular destinations.
2. A More link in the drop down reveals the entire list of microsites.


Nike Video Hero

Nike has been using a video player as hero graphic in the main Nike.com site. The player features large buttons for play controls and link to microsite (the button with the right angle quotes), star rating, playhead, low/high resolution and bandwidth switcher, a time elapse countdown, volume bars, and save/share options.


Layar: Mobile Augmented Reality browser

Layar is an augmented reality application for Android phones which uses location information and the phones camera to show what is around the user by displaying real time digital information on top of reality. The video shows the browser being used to scan buildings and overlay real estate information to find out which houses are for sale.


MoMA Exhibition/Collection Browser

MoMA's exhibition and collection browser provides faceted drill-down of the museum collection's image library using a mega drop-down menu. Each facet provides the ability to select multiple terms, so the user may select multiple authors, departments or decades, for instance. Executing the search displays the narrowed set of results in an image gallery that can be toggled thumbnail, slideshow, list, and single artist views. Sorting options and image matte colors may also be selected by the user.

1. The main collections page provides invites the user to browse using large images as links for selecting a first point of entry.
2. The collection browser includes a filtering toolbar. Clicking anywhere in the toolbar displays filtering options.
3. The filter drop down displays facets in columns. Multiple terms may be selected in each facet. User clicks Search to find matches.
4. This is the page of narrowed search results using the filters shown in the toolbar. Unfortunately, you can't see what the terms are if you selected multiples in a facet.
5. This is the single entry view.


Formula 1 Video Bandwidth Profiler

Formula 1's Video site provides a bandwidth profiler before display their video player. After checking your bandwidth availability, the app suggests a resolution and quality that will give you the best experience.

1. User selects the video they wish to view.
2. App assesses available bandwidth.
3. App provides report of bandwidth and resolution, and suggests the option that will provide the best experience.
4. Grade 2 video player.


Profoto Breadcrumbs

Profoto's take on the breadcrumb combines expanded menus for each branch to provide a drill-down method for navigating siblings, aunts, great-aunts, etc. It basically exposes the hierarchy of siblings at each level, and it's really most useful when you've navigated deep into a hierarchy.

It can get a little weird when you use these, because you have to remember that you're viewing siblings in the branch you're exposing. If you look at the last screenshot for the "Products" siblings, you see that Products is listed there along with the other top-level categories and miscellaneous stuff. But in the second screenshot under the "Profoto" product, I see what I think are children of Profoto, rather than it's siblings. Possibly because Profoto is the only product? I don't know.

I like the implementation of this hybrid breadcrumb/navigation menu, but I think I got lost because of the information architecture. Things need to be exceedingly simple for me to make sense of a site's content and what threw me off was my own IA perspective. If you're going to feature IA as part of a hierarchical navigation control, the IA should really be well organized to reflect hierarchy. Otherwise, forgo hierarchy and find a better way to point users through contextual links in the body, or perhaps treat the final node differently and break it out of the breadcrumb. Or maybe I'm just confusing myself because of my purist ideas about these kinds of things.

1. Breadcrumbs shown below title. Hovering over a crumb displays a clickable button style behind it.
2. Clicking the disclosure icon next to a crumb expands a multi-column list of what should be siblings to the current node or leaf. I think this one shows children though.
3. Children of Cables. When navigating down this deeply, the options are very helpful.
4. Siblings of "Products" seem miscellaneous.


Adobe Product Comparison Table

Adobe's Creative Suite packages the company's graphics and motion products into families that can be purchased as a set. Because it can be difficult to determine which suite is right for the work you do, Adobe provides both a product comparison table with products and features listed in a chart, or a wizard questionnaire.

1. The standard product comparison table, showing suites along the top and included products prices in rows.
2. Checking off the applications you're interested in displays the suites that include the checked product(s).
3. An activity-focussed wizard asks what types of activities the customer is interested in, and highlights the matching suites.
4. The product focussed wizard is identical in function to clicking the checkboxes in the screen 2 above, but displays in this simpler list.


Basecamp Product Comparison Table

37 Signals' product comparison for Basecamp provides a simple, side-by-side comparison of the features of each product category. They also try to help guide the customer to the plan that meets typical needs by featuring the Plus Plan in a larger box. Details for each feature are provided in a mouseover when hovering over the feature in the featured plan box. The mouseover is not provided on hover in the other boxes, but the feature description is the same, regardless of plan.


Best Life Magazine Drop Down Menus

Best Life Magazine's global navigation uses drop-down menus to provide both sub-section navigation where applicable, and teasers of content in sections, using a multi-column lists and showing a featured article with a thumbnail.

Thanks to Fritz for the pointer.

1. Subscribe drop down shows print and online subscription options.
2. Teasers of latest and featured content within a section.