search

merylpritchett / hhmi-design-patterns

0 stars 0 forks source link

Navigation Bar #1

Open merylpritchett opened 9 years ago

merylpritchett commented 9 years ago

Description Top-level navigation component. This issue refers to the primary navigation and NOT the search function in the navigation, which is a separate issue: #2

:star: Recommendation :star: For the form/layout, we use the body of the navigation from Science Education Webflow (http://hhmi-navigation-comp927051858.webflow.io/) but modify the design to include a click-triggered dropdown instead of a hover-only dropdown menu for better accessibility. We use the white/light color scheme from Biointeractive.

HHMI.org and the Science Education Webflow do not currently have designs for mobile. We need to create design patterns for the mobile menu. Janelia(https://www.janelia.org/) can be used as a loose model for the dropdown style.

On HHMI.org

screen shot 2015-09-20 at 9 57 11 pm screen shot 2015-09-20 at 9 57 17 pm

Link to Design: http://hhmi.org

Pros: Makes it easy to find lower-level pages from anywhere on the site.

Cons: Dropdown is only on hover state which is not accessible, this excludes navigation on touch screen devices. Hierarchy of top-level navigation items could be clearer.

On BioInteractive

screen shot 2015-09-20 at 9 57 45 pm screen shot 2015-09-20 at 9 57 57 pm

Link to Design: http://www.hhmi.org/biointeractive

Pros: Gradient in accent bar supports logo redesign. Clickable dropdown arrows are more accessible than a hover-only dropdown menu.

Cons: Pattern may not support the more complex IA of the main site.

On Janelia

screen shot 2015-09-20 at 10 02 42 pm

Link to Design: https://www.janelia.org/

Pros: Top-level navigation is clear.

Cons: Dropdown is only on hover state which is not accessible, this excludes navigation on touch screen devices.

Science Education Webflow

screen shot 2015-09-20 at 10 05 55 pm

Link to Design: http://hhmi-navigation-comp927051858.webflow.io/

Pros: Top-level navigation is a bit clearer, easier to read. Gradient in accent bar supports new logo design. Design is clean, easy to understand. Hierarchy of navigation items is clear.

Cons: Dropdown is only on hover state which is not accessible, this excludes navigation on touch screen devices.

erbarth commented 9 years ago

Notes from call:

merylpritchett commented 9 years ago

Updated recommendation to include the white color scheme!