Nested Dropdown

Design Library Component
Overview

During my internship at Oh My Green, the UX team began building a design system for Engineering to use as reference. I was tasked with creating a navigation component to be used for our internal tools which, after several iterations, became known as the Nested Dropdown Menu.

Role

Jan 2020 - Apr 2020

Lead Designer

User research, Visual design, Copywriting, Prototyping and testing

Tools used:

Sketch, Invision, Zeplin, HTML/CSS, Pen & paper

The Brief

Design a way to navigate through parent and child menu items without having to use multiple elements like in traditional menus. If possible, find a way to aggregate items under one component.

Competitor Research

The first resource I looked into was an established design system, Google's Material Design. Since most of our components were derived from their guidelines I thought they would have something along the lines of what I was looking for. Unfortunately, the closest component they had was a cascading menu.  A cascading menu would allow the selection of a child item once the menu was expanded upon hover. Unfortunately, we required the parent item to also be selectable.

Material Designs Menu Component Guidelines

Shopify's cascading menu allowed the user to see the selection path that led to the current page, but again, only the child item could be selected. Instead of hovering to expand the menu, it was click to open. Upon first use, all menu text was black at regular opacity. Once a selection was made, every item but the selection were at a reduced opacity and had a different color container highlighting the text.

Shopify Nested Menu

Finally, Google Drive showed promise as it featured a nested navigation menu linked to their G-Suite apps. The parent item was selectable and even had hover and focused states for both containers and icons. The only downside was that each item linked to a different app so the menu was only present on the drive page and thus, a selection history like Shopify's wasn't necessary.

Google Drive Nested Menu

Challenges

To click or not to click

One discussion I had with the design team was whether child menus would open on click or hover. Since mobile interaction would be tap to select, it was best to keep continuity between devices with having the user click the expand icon. Not having to hover also allowed for less room for error by not having to keep the cursor over an item and its children.

The key element

Another issue was how best to show the selection path. I decided to throw in the focused and selected states I saw in Google Drive and Shopify as well as reduced opacity for items not on the selection path.

A rule in Material Design's cascading menu was having the top of the child menu align to the selection. Due to a use case of a long child menu, I elected to have all the menus top-aligned no matter what length.

User flow

The component would be used on a platform where the user would be directed to their portal from login so there would already be an input in the dropdown, but I included an interaction if there was no input for good measure.

Starting wireframes

At that point, many components of the design system were already created like the text field and dropdown menu so I could stitch together components easily.

Cascading menu placement

Functionality

I added the icon and divider from Google Drive as well as lowered the opacity for non-selected text. I realized some paths would not be able to align due to different menu lengths so I made sure each item on the selection path was highlighted. Even if the user was hovering over different items or scrolling up and down the menu, there would be no confusion about which item linked to the child menu.

Since this was a new component, I walked engineering through each interaction and luckily there was little pushback.

During testing, the engineer assigned informed me for the first iteration, there would be no need to have an inactive field so the faded text was unnecessary. To give more focus to the selected item, we also decided to get rid of the container highlights and just leave the icon states. I added font weight and a darker container to the selected item.

Removed selected container states and increased the font weight of the input

Hi-fidelity

Talking with my team, we decided to give the menu a more cohesive design by pulling colors from the text field for the icon and container states as well as changing the font weight and color for the input item.

Key takeaway

In the end, it was satisfying just to be able to contribute and design something that, at the time, I'd never seen before. I'm excited to see how the component will be used and how it will perform in front of users.

The Brief

Design a way to navigate through parent and child menu items without having to use multiple elements like in traditional menus. If possible, find a way to aggregate items under one component.

Competitor Research

The first resource I looked into was an established design system, Google's Material Design. Since most of our components were derived from their guidelines I thought they would have something along the lines of what I was looking for. Unfortunately, the closest component they had was a cascading menu.  A cascading menu would allow the selection of a child item once the menu was expanded upon hover. Unfortunately, we required the parent item to also be selectable.

Material Designs Menu Component Guidelines

Shopify's cascading menu allowed the user to see the selection path that led to the current page, but again, only the child item could be selected. Instead of hovering to expand the menu, it was click to open. Upon first use, all menu text was black at regular opacity. Once a selection was made, every item but the selection were at a reduced opacity and had a different color container highlighting the text.

Shopify Nested Menu

Finally, Google Drive showed promise as it featured a nested navigation menu linked to their G-Suite apps. The parent item was selectable and even had hover and focused states for both containers and icons. The only downside was that each item linked to a different app so the menu was only present on the drive page and thus, a selection history like Shopify's wasn't necessary.

Google Drive Nested Menu

Challenges

To click or not to click

One discussion I had with the design team was whether child menus would open on click or hover. Since mobile interaction would be tap to select, it was best to keep continuity between devices with having the user click the expand icon. Not having to hover also allowed for less room for error by not having to keep the cursor over an item and its children.

The key element

Another issue was how best to show the selection path. I decided to throw in the focused and selected states I saw in Google Drive and Shopify as well as reduced opacity for items not on the selection path.

A rule in Material Design's cascading menu was having the top of the child menu align to the selection. Due to a use case of a long child menu, I elected to have all the menus top-aligned no matter what length.

User flow

The component would be used on a platform where the user would be directed to their portal from login so there would already be an input in the dropdown, but I included an interaction if there was no input for good measure.

Starting wireframes

At that point, many components of the design system were already created like the text field and dropdown menu so I could stitch together components easily.

Cascading menu placement

Functionality

I added the icon and divider from Google Drive as well as lowered the opacity for non-selected text. I realized some paths would not be able to align due to different menu lengths so I made sure each item on the selection path was highlighted. Even if the user was hovering over different items or scrolling up and down the menu, there would be no confusion about which item linked to the child menu.

Since this was a new component, I walked engineering through each interaction and luckily there was little pushback.

During testing, the engineer assigned informed me for the first iteration, there would be no need to have an inactive field so the faded text was unnecessary. To give more focus to the selected item, we also decided to get rid of the container highlights and just leave the icon states. I added font weight and a darker container to the selected item.

Removed selected container states and increased the font weight of the input

Hi-fidelity

Talking with my team, we decided to give the menu a more cohesive design by pulling colors from the text field for the icon and container states as well as changing the font weight and color for the input item.

Key takeaway

In the end, it was satisfying just to be able to contribute and design something that, at the time, I'd never seen before. I'm excited to see how the component will be used and how it will perform in front of users.

Heading 1

Heading 2

Heading 3

Heading 4
Heading 5
Heading 6
Quoted text sentence