Experimental Design System Request: Typeahead

[mgleo]

Check the design system backlog and experimental design tab to see if your proposal has already been suggested.

What

Give a brief description of the component or pattern you want to propose.

Typeahead

Why

Explain why you think this should be added to the VA.gov design system.

There are several products on VA.gov that utilize search.

According to Nielsen Norman Group:

"When your users select from search suggestions rather than typing in their own complete query, they benefit because they:

• Pick an appropriate term, which will show them good results, rather than making up a query which might have no results or poor results
• Decrease interaction cost, because they can type less
• Avoid typos, because they don’t need to type out the entire query themselves
• Use less mental effort to search, because they can simply recognize the right words or phrasing they want"

• What evidence do you have that it's needed by multiple services across VA?

There are several VA.gov products that utilize search and could also utilize typeahead:

• Resources and support
• Find a form
• Find a VA location
• Yellow ribbon tool

Not search related but typeahead has been utilized to assist users fill out forms:

• Currently utilized on 'Add a condition' field on Form 526
• Currently utilized on 'Add a payroll deduction' on Financial status report

• What evidence do you have that it meets the needs of the users of those services?

• Increased CTR on search results with typeahead.
• Users clicked search result links 2.2s faster when using typeahead.
• Approximately 50% of users who are shown typeahead suggestions select a suggestion.

05/25/2021 ToT Presentation:

06/01/2021 ToT Presentation:

06/15/2021 ToT Presentation:

06/29/2021 ToT Presentation:

• Have you checked that it doesn't already exist in the VA.gov Design System?

Yes, it does not exist on the Design System.
Note: @GnatalieH recently opened #636: Document type-ahead as a Pattern on design.va.gov
Standardize type ahead search pattern department-of-veterans-affairs/va.gov-team#38264 opened Sept 2020

Anything else

Include links to any examples, research or code to support your proposal, if available.

• Usability Research

  • Although not the focus of the research, users had no issue using typeahead on global search during a Jan/Feb 2021 usability study. During this time the typehead feature was a proof of concept and typeahead suggestions have since been overhauled and improved.

• Comparative Analysis

  • Comparative Analysis (.docx)

• Accessibility updates:

  • Updates to typeahead code were made for screenreader users #32133
  • Selected typeahead suggestion background was updated to primary blue #0071BB for users with low vision #32133

• Typeahead on Global Search highlights suggested characters

  • NN Group: Site Search Suggestions

• Typeahead suggestions are ordered by character length with a max length of 32 characters

• Visual anatomy of typeahead for Design System:

1. Search input field: Where users enter their search query.
2. Typeahead suggestions: Sorted by descending character count. Suggestions in bold. If suggestions appear after the user’s text, the suggestion should appear in bold. If user’s text appears anywhere within the suggestions, the user’s text should appear in bold.
3. Selected typeahead suggestion: Highlighted on hover, clicking/tapping on suggestion automatically searches for the suggestion.

Next steps

You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.

Submit requests to join an upcoming Design System Council meeting in #vsp-design-system.

During the meeting, the Design System Council Working Group will evaluate the request and make a decision.

If your component request is approved, you can add your component to the experimental section on design.va.gov. If you havee any questions on how to add your component to the experimental section, please reach out to the Design System Team at #vsp-design-system

[GnatalieH]

Thank you, @mgleo, this looks great.

[caw310]

@mgleo Thanks for all the details in your request. Looks great. Please assign experimental design requests to me so I make sure it is brought to the Design System Council. Thanks!

[mgleo]

Thanks @GnatalieH and @caw310, let me know if you need anything else.
FYI- it doesn't allow me to add assignees within vets-design-system-documentation, might be a permission setting?

[GnatalieH]

Thanks @GnatalieH and @caw310, let me know if you need anything else.

@mgleo here is a link to user test findings that the team doing The Financial Status Report captured. They have multiple type-aheads in their list and loops, and the component tested poorly so they are going do another iteration that doesn't use list and loop. The 526 form add a condition type-ahead also has a similar usability issue:

• Participants thought they had to choose from the suggestions given; they didn't realize it was also a freeform input field (even with the bold text in the intro paragraph.

Here is a link to the Slack conversation about the type-ahead.

And, here is a link to the type-ahead audit I'm currently working on (Mural board).

This doesn't require you to do anything, but I wanted to leave these links in a comment on this ticket. I think that the type-ahead is a pattern that works great for search, and I'm looking forward to documenting it.

[caw310]

Here are the action items from DSC meeting on 2/4 where this item was discussed.

No need to add this to experimental design since research was done and shows success.
Add to DS as component.
Add to DST backlog (Carol to prioritize)
Differentiate type ahead from auto suggestion - include in documentation / guidelines

[mgleo]

Hi @GnatalieH and @caw310, since this was approved for the Design System what are the next steps for the Search & Discovery team? Do you need anything more from us to get Typeahead up on design.va.gov?

[caw310]

@mgleo , I don't think we need anything else as this time but Natalie may follow up once we start working on this. Thanks!

[GnatalieH]

Hi @GnatalieH and @caw310, since this was approved for the Design System what are the next steps for the Search & Discovery team? Do you need anything more from us to get Typeahead up on design.va.gov?

@mgleo when I start working on the design for the type-ahead to help guide development of the web component, I'd like to leverage what I can from your mockups. Where can I find them in Sketch for Teams? Could you leave a link in this ticket? Thx.

[mgleo]

Sending you a Typeahead Sketch file via Slack (along with some Search UI mockups as well).

[humancompanion-usds]

Typeahead functionality is covered in https://design.va.gov/components/search-input