Functional Design-Multi-Select - Steve Clark Portfolio

Steve Clark's Professional Portfolio

Steve Clark's Professional Portfolio

Multi-Select Dropdown
Each reusable component can have many layouts and styles. Components are made up of simple elements, like text, images, form inputs, links and various calls to action. Each element can have dozens of configurable items. The example below explores the rabbit holes for an otherwise simple dropdown.
The seeminingly infinite requirements and specifications are indeed overwhelming. However, years of repeating the same process led me to create the schema for all of it. Once there is a home for everything you know all the questions to ask and you have all the places to put the answers.
When you hire me you get this level of detail for the dozens of components that build the user journeys your customers want and need.
Multi-Select Dropdown Detailed Annotations

Multi-Select Dropdown

Multi-Select Dropdowns are used within forms mostly for filtering on multiple values.

Permutations

Interactions

Presentation

Technical

Authoring

Accessibility

Findability

Metrics

History

Permutations

Layouts

Label Above

Delta

None. Default layout

CSS File

form-controls.css

CSS Class

.multi-select-dropdown

.multi-select-dropdown--label-top

Label Right

Delta

Label is on the left

Usage

This layout can be used to preserve vertical space

CSS Class

.multi-select-dropdown

.multi-select-dropdown--label-left

Styles

Light Background

Delta

None. Default style

CSS File

form-controls.css

CSS Class

.multi-select-dropdown

.multi-select-dropdown--light-bg

Dark Background

Delta

Label is on the left

Usage

This style would be used for dark mode or could be used when dropdown is embedded in a dark background component

CSS Class

.multi-select-dropdown

.multi-select-dropdown--dark-bg

Interactions

A

Field label

User Interaction

View

B

Field container

User Interaction

Click/tap

Expected Result

Expand/collapse

Comments

User can click or tap anywhere within the field to expand it.

C

Prompt

User Interaction

Expand/collapse

Expected Result

annotation description

Comments

User can click or tap anywhere within the field to expand it.

D

Expand icon

User Interaction

Expand/collapse

Expected Result

annotation description

Comments

User can click or tap anywhere within the field to expand it.

E

Collapse icon

User Interaction

Click/tap

Expected Result

annotation description

Comments

User must click or tap on this icon or anwhere within the top of the expanded field to collapse it.

Field will also colllapse upon Submit.

F

Checkbox - deselected

User Interaction

Click/tap

Expected Result

Item is selected

Comments

See also "Display Logic" in the Presentation annotations

G

Multi-select options

User Interaction

Click/tap

Expected Result

Item is selected as defined in Annotation J

Comments

User can click or tap anywhere on an unselected line to select it.

H

CTA button - inactive

User Interaction

View

Comments

CTA is, by definition, inactive. It is therefore view-only.

J

Checkbox - selected

User Interaction

Click/tap

Expected Result

Item becomes deselected as defined in Annotation G

Comments

User can click or tap anywhere on a selected line to deselect it.

K

CTA button - active

User Interaction

Click/tap

Expected Result

Closes dropdown

Navigates to defined page or flow

Comments

By clicking the Submit CTA the form output is collected and sent to its defined service, page or flow.

Presentation

Specs

HTML

div class="dropdown-container"

CSS File

form-controls.css

CSS Class

.dropdown-container

CSS Naming Convention

Block, Element, Modifier (BEM)

Frameworks

Vue.js

Javascript

multiSelectDropdown.js

fetchDropdownOptions.js

Responsive

CSS modifiers have been designed for each viewport and are applied based on @media:
SM (default): 767 and below
MD: .md/ 768 - 991px

LG: .lg/ 992px - 1199px

XL: .xl/ 1200 and above

Annotations

A

Field Label

CSS Class

.field-label

HTML Markup

.dropdown-container

Semantic HTML

'label' element

Display Logic

Always displayed

B

Field container

CSS Class

.dropdown-container

HTML Markup

div class="dropdown-container"

Semantic HTML

.dropdown-container

Javascript

multiSelectDropdown.js

Display Logic

Always displayed as curated by author

Comments

This annotation pertains to the entire dropdown element, which is scripted with multiSelectDropdown.js

C

Prompt

CSS Class

.field-hint

HTML Markup

div class=".field-hint"

Semantic HTML

placeholder

Display Logic

Presented until user executes form action via CTA button

D

Expand icon

CSS Class

.arrow-container

.arrow

.arrow-container

.arrow-CTA-down

HTML Markup

class="arrow arrow-CTA-down"

Asset

dropdown-controls-sprite.png

Asset Location

Digital asset manager (DAM) /icons/sprites/

Display Logic

Downward-facing arrow is presented when dropdown is inactive (not in focus)

Comments

Approach uses CSS, not a movable HTML viewport.

E

Collapse icon

CSS Class

.arrow-container

.arrow

.arrow-container

.arrow-CTA-down

HTML Markup

class="arrow arrow-CTA-up"

Asset

dropdown-controls-sprite.png

Asset Location

Digital asset manager (DAM) /icons/sprites/

Display Logic

Upward-facing arrow is presented when dropdown is active (in focus)

Comments

Approach uses CSS, not a movable HTML viewport.

F

Checkbox - deselected

CSS Class

.dropdown-checkbox-wrapper

.dropdown-checkbox

HTML Markup

input type="checkbox"

Semantic HTML

label

for

Asset

dropdown-controls-sprite.png

Asset Location

Digital asset manager (DAM) /icons/sprites/

Display Logic

Unchecked asset is presented adjacent to unselected items

Comments

Approach uses CSS, not a movable HTML viewport.

The .dropdown-checkbox class is the default (unchecked).

G

Multi-select options

CSS Class

.dropdown-text-option

HTML Markup

div class ="dropdown-text-option"

Semantic HTML

option

select

Display Logic

Displayed when field has focus.

Comments

annotation description

H

CTA button - inactive

CSS Class

.dropdown-cta-button

HTML Markup

button class="dropdown-cta-button"

Semantic HTML

button type="submit"

Javascript

multiSelectDropdown.js

Display Logic

Inactive version of button is presented until user selects an item.

Comments

Button is inactive by default. Once an option is selected it becomes active (focus). This is managed in the Javascript.

J

Checkbox - selected

CSS Class

.dropdown-checkbox-wrapper

.dropdown-checkbox

.input:checked + .dropdown-checkbox

HTML Markup

input type="checkbox"

Semantic HTML

label

for

Asset

dropdown-controls-sprite.png

Asset Location

Digital asset manager (DAM) /icons/sprites/

Display Logic

Checked asset is presented adjacent to selected items

Comments

Approach uses CSS, not a movable HTML viewport.

The .input:checked + .dropdown-checkbox is a variation of dropdown-checkbox. When the state of the item changes to checked this variation is invoked.

K

CTA button - active

CSS Class

.dropdown-cta-button active

HTML Markup

button class="dropdown-cta-button active"

Semantic HTML

button type="submit"

Javascript

multiSelectDropdown.js

Display Logic

Active version of button is presented once user selects an item.

Comments

Once an option is selected CTA becomes active (focus). This is managed in the Javascript.e

Technical

Specs

CMS Component

Multi-Select Dropdown

Content Management System

Contentstack

Digital Asset Manager

Contentstack

PIM

Inriver

ERP

SAP

CRM

Salesforce

API Framework

Flask

Annotations

A

Field label

System of Record

CMS

DAM

PIM

ERP

CRM

Integrations

Content Layer (CMS)

Presentation Layer (client-side)

Data Layer

Logic Layer

Security Layer

Comments

This could get its content from ....

Content is managed in the CMS

B

Field container

System of Record

CMS

DAM

PIM

ERP

CRM

Integrations

Content Layer (CMS)

Presentation Layer (client-side)

Data Layer

Logic Layer

Security Layer

Comments

This could get its content from ....

Content is managed in the CMS

C

Prompt

System of Record

CMS

DAM

PIM

ERP

CRM

Integrations

Content Layer (CMS)

Presentation Layer (client-side)

Data Layer

Logic Layer

Security Layer

Comments

This could get its content from ....

Content is managed in the CMS

D

Expand icon

System of Record

CMS

DAM

PIM

ERP

CRM

Integrations

Content Layer (CMS)

Presentation Layer (client-side)

Data Layer

Logic Layer

Security Layer

Comments

This could get its content from ....

Content is managed in the CMS

E

Collapse icon

System of Record

CMS

DAM

PIM

ERP

CRM

Integrations

Content Layer (CMS)

Presentation Layer (client-side)

Data Layer

Logic Layer

Security Layer

Comments

This could get its content from ....

Content is managed in the CMS

F

Checkbox - deselected

System of Record

CMS

DAM

PIM

ERP

CRM

Integrations

Content Layer (CMS)

Presentation Layer (client-side)

Data Layer

Logic Layer

Security Layer

Comments

This could get its content from ....

Content is managed in the CMS

G

Multi-select options

System of Record

CMS

DAM

PIM

ERP

CRM

Integrations

Content Layer (CMS)

Presentation Layer (client-side)

Data Layer

Logic Layer

Security Layer

Comments

This could get its content from ....

Content is managed in the CMS

H

CTA button - inactive

System of Record

CMS

DAM

PIM

ERP

CRM

Integrations

Content Layer (CMS)

Presentation Layer (client-side)

Data Layer

Logic Layer

Security Layer

Comments

This could get its content from ....

Content is managed in the CMS

J

Checkbox - selected

System of Record

CMS

DAM

PIM

ERP

CRM

Integrations

Content Layer (CMS)

Presentation Layer (client-side)

Data Layer

Logic Layer

Security Layer

Comments

This could get its content from ....

Content is managed in the CMS

K

CTA button - active

System of Record

CMS

DAM

PIM

ERP

CRM

Integrations

Content Layer (CMS)

Presentation Layer (client-side)

Data Layer

Logic Layer

Security Layer

Comments

This could get its content from ....

Content is managed in the CMS

Authoring and Experience Curation

Authoring annotation is different from the UI/UX annotations, however, the annotation IDs are consistent. Annotation A covers the Field Label, Annotation C covers the Prompt, etc.

Specs

CMS Component

Multi-Select Dropdown

Component Type

Custom

Core Component

Combo Box

Annotations

A1

Field Label Source

Interface Type

Dropdown

Action

Author select

Default

Author Input

Options

Author Input

Data Dictionary

Instructions

Author Input - author can input a string into the Field Label Text field (Annotation A2)

Data Dictionary - author can select a value from the data dictionary

Note: if Data Dictionary is selected please check the context as text strings may change.

A2

Field Label Text

Interface Type

Text Field

Required

No

Minimum

3

Maximum

24

Instructions

Inputs exceeding the maximum will be truncated in the UI; there is no limit on this field

If a value is selected from the data dictionary it will be populated in the Field Label Text field and the field will be uneditable.

C1

Prompt Source

Interface Type

Dropdown

Action

Author select

Default

Author Input

Options

Author Input

Data Dictionary

Instructions

Author Input (default) - author can input a string into the Prompt Text field (Annotation C2)

Data Dictionary - author can select a value from the data dictionary

Note: if Data Dictionary is selected please check the context as text strings may change.

C2

Prompt Text

Interface Type

Text Field

Required

Yes

Minimum

5

Maximum

20

Instructions

Inputs exceeding the maximum will be truncated in the UI; there is no limit on this field

If a value is selected from the data dictionary it will be populated in Prompt Text field and the field will be uneditable.

G1

Field Values Source

Interface Type

Dropdown

Action

Author select

Default

Author Input

Options

Author Input

Data Dictionary

Script

Instructions

Author Input (default) - author must input at least 3 strings of text, each separated by a hard return, in the Field Value text area (Annotation G2).

Data Dictionary - author can select values from the data dictionary

Note: if Data Dictionary is selected please check the context as text strings may change.

Script - Author can choose one script from a list. Script will return an array of values that will populate the dropdown as options.

G2

Field Values

Interface Type

Text Area

Required

Yes

Minimum

3

Maximum

10

Instructions

At least three (3) strings separated by a hard return. If more than 10 strings are inputted only the first 10 will appear in the UI. Each string will appear in the dropdown, and may be truncated by design constraints.

If a value is selected from the data dictionary it will be populated in Prompt Text field and the field will be uneditable.

H1/K1

CTA Button

Interface Type

Dropdown

Action

Author select

Default

Data Dictionary

Options

Data Dictionary

Author Input

Instructions

Data Dictionary (default)- author can select a value from the data dictionary. The data dictionary value "Submit" is the default for this CTA.

Note: if a different data dictionary string is used please check the context as text strings may change.

Author Input - author can input a string into the CTA Text field (Annotation H2/K2)

H2/K2

CTA Button

Interface Type

Text Field

Required

Yes

Minimum

2

Maximum

12

Instructions

Inputs exceeding the maximum will be truncated in the UI; there is no limit on this field

If a value is selected from the data dictionary it will be populated in CTA Text field and the field will be uneditable.

L

Layout

Interface Type

Dropdown

Action

Author select

Default

Labels Above

Options

Label Above

Label Left

Instructions

Labels Above is the default layout Labels Left will present the label to the left of the dropdown.

M

Style

Interface Type

Dropdown

Action

Author select

Default

Labels Above

Options

Light Background

Dark Background

Instructions

Light Background is the default style. Dark text on a light background.

Dark Background presents light text on a dark background.

All colors are brand-approved from the site's color palette.

All styles meet WCAG 2.1 Level AA contrast requirements.

Accessibility

Specs

Contrast

Color contrast for all text and essential visual elements meets WCAG 2.1 Level AA requirements.

Large Text

The design ensures readability of large text (18pt or 14pt bold and above) across all breakpoints, and color contrast meets the WCAG 2.1 Level AA requirement of 3:1.

Annotations

A

Field label

ARIA label

Uses html markup 'label'

Labeling

'label' element

Comments

The ‘label' element provides the accessible name.

The 'for' attribute of the 'label' should be associated with the 'id' of the input element.

B

Field container

ARIA label

Uses html markup 'label

Focus

tabindex="0"

Keyboard Controls

Escape key closes the dropdown and returns focus to the trigger button

Labeling

'select' element

Comments

The ‘label' element provides the accessible name.

Ensure visible focus indicator.

Each option within the combo box should be a 'option' element. The 'label; element (as described above) should be used to label the 'select' element itself.

C

Prompt

ARIA label

Uses html markup 'placeholder' or aria-describedby

Labeling

'placeholder' attribute directly on the 'input', 'textarea', or 'select' element.

Comments

The ‘placeholder' element provides the accessible name.

For more complex or persistent hints, use a separate 'div' or 'span' with a class like form-hint and associate it with the input using aria-describedby.

D

Expand icon

ARIA label

aria-expanded="false"

Keyboard Controls

annotation description

Labeling

Not applicable

Comments

A control that expands a section might have text like "Show More" or use an icon with visually hidden text (using a class like sr-only for screen readers).

The button itself would be the semantic element.

E

Collapse icon

ARIA label

aria-expanded="true"

Keyboard Controls

Escape key closes the dropdown and returns focus to the trigger button

Labeling

Not applicable

Comments

A control that expands a section might have text like "Show More" or use an icon with visually hidden text (using a class like sr-only for screen readers).

The button itself would be the semantic element.

F

Checkbox - deselected

ARIA label

Uses html markup 'label'

Focus

Covered via html markup

Keyboard Controls

Select or deselect by pressing Spacebar or Enter

Labeling

input type="checkbox"

Comments

The checked attribute conveys the state.

Each checkbox should have an associated 'label' element (using the 'for' attribute).

The checked attribute on the 'input' indicates the selected state.

G

Multi-select options

ARIA label

Uses html markup 'option'

Focus

Covered via html markup

Keyboard Controls

Navigate options via Up/Down arrow keys

Labeling

option

select

Comments

The text content of the 'option' elements serves as their accessible name.

The 'option' elements within a 'select' are inherently semantic and self-explanatory.

Their text content provides the meaning.

H

CTA button - inactive

ARIA label

Uses html markup button-type="submit"

Focus

Covered via html markup

Keyboard Controls

annotation description

Labeling

button type="submit"

Comments

The text content of the button type="submit" provides its accessible name.

The text content of the button (e.g., "Submit," "Save") provides the semantic meaning.

J

Checkbox - selected

ARIA label

Uses html markup 'label'

Focus

Covered via html markup

Keyboard Controls

Select or deselect by pressing Spacebar or Enter

Labeling

input type="checkbox"

Comments

The checked attribute conveys the state.

Each checkbox should have an associated 'label' element (using the 'for' attribute).

The checked attribute on the 'input' indicates the selected state.

K

CTA button - active

ARIA label

Uses html markup button-type="submit"

Focus

Covered via html markup

Keyboard Controls

Shift + Tab: Moves focus backward to the Submit button from the element that had focus after it.

When the Submit button has focus, pressing the Enter key will activate the button, triggering the form submission.

Labeling

button type="submit"

Comments

The text content of the button type="submit" provides its accessible name.

The text content of the button (e.g., "Submit," "Save") provides the semantic meaning.

SEO, AIO and Site Search

Form components like this are not usually indexed for search. However, deliberate content and element tagging are a best-practice for search and accessibility. Annotations below cover the meta data, html markup and semantic HTML for this component.

Specs

Search Platform

Solr

Schema.org Tagging

Enabled

Annotations

A

Field Label

CSS Class

.field-label

HTML Markup

.dropdown-container

Semantic HTML

'label' element

B

Field container

CSS Class

.dropdown-container

HTML Markup

div class="dropdown-container"

Semantic HTML

.dropdown-container

C

Prompt

CSS Class

.field-hint

HTML Markup

div class=".field-hint"

Semantic HTML

placeholder

D

Expand icon

CSS Class

.arrow-container

.arrow

.arrow-container

.arrow-CTA-down

HTML Markup

class="arrow arrow-CTA-down"

E

Collapse icon

CSS Class

.arrow-container

.arrow

.arrow-container

.arrow-CTA-down

HTML Markup

class="arrow arrow-CTA-up"

F

Checkbox - deselected

CSS Class

.dropdown-checkbox-wrapper

.dropdown-checkbox

HTML Markup

input type="checkbox"

Semantic HTML

label

for

G

Multi-select options

CSS Class

.dropdown-text-option

HTML Markup

div class ="dropdown-text-option"

Semantic HTML

option

select

H

CTA button - inactive

CSS Class

.dropdown-cta-button

HTML Markup

button class="dropdown-cta-button"

Semantic HTML

button type="submit"

J

Checkbox - selected

Meta Data

.###

HTML Markup

input type="checkbox"

Semantic HTML

label

for

K

CTA button - active

Meta Data

###

HTML Markup

button class="dropdown-cta-button active"

Semantic HTML

button type="submit"

Metrics and Analytics

Specs

Analytics Platform

Google Analytics

Annotations

B

Field container

Event

dropdownOpenedComboBox

Event Description

Triggered when the dropdown is opened

Only triggered if user explicitly selects the field, not the icon

E

Collapse icon

Event

dropdownOpenedIcon

Event Description

Triggered when the dropdown is opened

Only triggered if user explicitly selects the icon

F

Checkbox - deselected

Event

optionDeselected

Event Description

Triggered when a checkbox option is selected.

Capture ID and label of each selected item

J

Checkbox - selected

Event

optionDeselected

Event Description

Triggered when a checkbox option is selected.

Capture id and label of deselected item

K

CTA button - active

Event

dropdownSubmitted

Event Description

Triggered when a "Submit" CTA option is selected.

Capture number of selected items

User Testing

Rapid Prototype Testing Plan

Release 1.1

Mult-Select Dropdown v1.1 Prototype and Testing Plan

Release 1.0

Mult-Select Dropdown v1.0 Prototype and Testing Plan

Component Briefs

Mult-Select Dropdown v1.1 Prototype and Testing Plan

User Test Findings

Three concepts were tested, on real humans, in all viewports and styles (light background and dark background).

We tested a version with labels on top, labels to the left and label as a prompt inside the dropdown. Users reacted best to the first two, but found the label inside the box to be confusing.

Users preferred Labels Above layout and the Light Background style.

Based on these results we decided to build two layouts and two styles.

The Labels Above layout with the Light Background style became the default. The Labels to the Left layout and Dark Background style are optional. This results in four permutations.
These findings are detailed in the Mult-Select Dropdown v1.1 Prototype and Testing Plan document.

Release History

Release 1.1

Date12/6/2021
Dev SprintSprint 25
UAT findings3 UI defects and 1 functional defect found. All cleared.

Release 1.0

Date8/1/2021

Dev SprintSprint 3

UAT Findings

20 UI defects and 19 functional defect found. 17 UI defects cleared, 3 were pushed. All 19 functional defects were cleared.

Footer goes here
Why Documentation Like This Matters
You are a product manager supporting multiple sites for your organization. One Tuesday afternoon you start seeing a handful of tickets from your “Website Feedback” link in your site’s footer. They are all about the multi-select dropdown.
You investigate and find that the checkbox icon is missing. You can still make selections, but there’s a broken image link where the icon should be. You also observe that the up and down arrows are also displaying broken links.
It’s a visual defect and a poor customer experience.
Current State: Without This Tool
In today’s world you would most likely open a support ticket with IT. While you classified it as Critical, you still need to plead your case to the Board. This takes a day. Once you win someone in IT has to isolate the problem. This is very common, even in small organizations.
You detailed the ticket correctly with Steps to Reproduce, Expected Result, Actual Result, but it still takes them two days to figure it out. They fix the issue, you test it in the staging environment, approve the fix, and wait until the next deployment on Monday.
Meanwhile, your analytics tell you that 10,347 customers had a broken experience, and you have received over 50 notifications about the issue.
A conservative estimate of the person-hours required to address this issue would be about $1,000. Additionally, your customers have been enduring a broken experience for a week. This does not reflect well on your brand. It could have been fixed in minutes, very few customers would have been impacted, and your brand would be relatively unblemished.
Succeeding With This Tool
Upon confirming the issue you navigate to the Multi-Select Dropdown component in the functional design system. Knowing it’s a presentation layer issue, you click on the Presentation tab and find Annotations F and J, which describe the Deselected and Selected states, respectively, of the Checkbox element.
You see that both the Deselected and Selected states use the .dropdown-checkbox-wrapper and .dropdown-checkbox CSS classes. They also use an asset called dropdown-controls-sprite.png in the /icons/sprites/ folder of your digital asset manager (DAM).
The Expand/Collapse icons use the .arrow-container, .arrow, .arrow-container, .arrow-CTA-down, and .arrow-CTA-up CSS classes. However, these also use dropdown-controls-sprite.png.
In a matter of minutes you have isolated the issue.
The design system tool links to the form-controls.css file where the CSS classes live, and it links to the /icons/sprites folder of your DAM. You could explore the CSS but you’re highly certain the issue is with the sprite. In the icons/sprites folder you search for dropdown-controls-sprite.png and it’s not there. What now? Next you sort all assets by last updated and at the top of the list there’s a file called asjfdsds.png that was last saved 36 minutes ago. You open it and find the four images that represent your up/down arrows and your selected/deselected checkboxes.
You’ve solved the case. To resolve the issue you need to rename the file back to dropdown-controls-sprite.png. Immediately you return to the live page where you observed the issue and invoke the multi-select dropdown. Before clicking on it you notice the down arrow is appearing. This tells you that your fix worked. You invoke the dropdown and all the arrows and checkboxes are behaving as expected.
Meanwhile, there are two more inbox notifications about the broken assets. Using your generic “Web Support” email address, you respond everyone notifying them it has been resolved, asking them to re-test to confirm, and thanking them for reporting the issue. A few respond back saying it looks good, some thank you for following up..
Superior Outcomes
With the help of the design system tool you managed to clear a costly issue within minutes of hearing about it. You didn’t need a ticket or a software deployment or a justification for marking it a critical defect. You owned it. This is what digital product managers do.

Multi-Select Dropdown

Multi-Select Dropdown

Permutations

Layouts

Label Above

Label Right

Styles

Light Background

Dark Background

Interactions

Presentation

Specs

Annotations

Technical

Specs

Annotations

Authoring and Experience Curation

Specs

Annotations

Accessibility

Specs

Annotations

SEO, AIO and Site Search

Specs

Annotations

Metrics and Analytics

Specs

Annotations

User Testing

Rapid Prototype Testing Plan

Release 1.1

Release 1.0

Component Briefs

User Test Findings

Release History

Release 1.1

Release 1.0

UAT Findings

Why Documentation Like This Matters

Current State: Without This Tool

Succeeding With This Tool

Superior Outcomes