Skip to content
This repository was archived by the owner on Jul 21, 2023. It is now read-only.

Navigation

Jump to bottom
Kevin Buffardi edited this page Apr 13, 2016 · 19 revisions

Lead Designer: Kevin, Carly

Lead Developer: Todd Brown

Problem

Menus with multi-level sub-menus are problematic and clumsy interactions. Moving the curser outside of a sub-menu's boundaries often makes everything disappear and then the user has to start all over again (a.k.a. "fly away"). In addition, menus that depend on hover don't translate well to touch-screen (or any non-mouse controlled) interface, which is a rapidly growing market.

Our research found that using selections (i.e. click/press/etc) for all navigation actions is quicker and result in fewer mistakes than hover interaction. In addition, when users backtrack, they tend to either (1) step back 1 level or (2) start all over again from the start. We need to build a navigation component that enables these interactions and supports multi-level menus elegantly.

User Story

The end user is anyone browsing a website and trying to get to the part of the website efficiently. The user needs to be aware of where they are within the website at any given moment and should be able to bookmark a page (or go directly to it from a google search) and the navigation should reflect where they are.

UX Wireframes

  • Navigation with horizontal orientation and external breadcrumb
  • Navigation with vertical orientation and internal breadcrumb

Minimum Viable Product

  • Ability to choose a top-level menu item
  • Ability to choose a second-level menu item
  • Ability to choose a 3+ level menu item, without having to keep cursor within boundaries (no hover "fly away")
  • Ability to navigate back one menu level (e.g. from 3rd to 2nd) with 1 selection
  • Ability to navigate back to top-level menu (and collapse all submenus) with 1 selection
  • If user selects out of bounds (not within any option), all navigation should collapse back to top-level view. If then the user clicks on the nav again, it should start as if nothing has been clicked previously
  • Highlight the current location within menu
  • breadcrumb option can be internal (default) or external. The internal breadcrumb adapts to the size of the button while the external breadcrumb will have its own container with width to show the whole path.
  • orientation option can be horizontal (default) or vertical

Breadcrumb rules:

  • The each sub-menu in the path should be preceded by an /. If a path is too long to fit within the container without overflow, convert from full path to only showing the youngest child proceeded by an ellipses (e.g. .../ Last Child)
  • Internal breadcrumbs exclude the top-level menu while the External starts with the top-level menu
  • Each breadcrumb level should be clickable. The slashes and ellipses are not clickable.
Clone this wiki locally