Experimental Design [primary action link]

[joshkimux]

What

Improvement to the primary action link (green) on the design system

Purpose

Several conversations have emerged over the visual prominence of the action link when

• compared to secondary buttons or its blue secondary counterpart
• it exists within complex/dense content heavy pages
• it isn't nested within a card

Usability testing from some teams forming hypothesis that users may be missing the action link due to its lack of visual hierarchy, with the occasional suggestion to redesign it as a button (sacrificing material honesty).

In order to address those issues, I'd like to propose an updated, more prominent version of the primary action link button.

Usage

This updated version should based on the current principles:

Use a primary (green) Action Link for the primary call to action on a page or the start of a digital service. Use only one primary Action link per page.

AND, when it is not nested within an alert or card (in which the card itself should be visually prominent enough to garner attention).

Specifically, in scenarios like this where a user has logged in and is ready to start their service:

Behavior

I'm proposing the following changes to the primary action link:

• Increased font size
• Displaying as a block (as opposed to in-line)
• Increased padding
• Left border with green accent

Examples

After vs. before

Accessibility

Focus wraps around full element, larger click target on mobile

Guidance

This serves a very specific niche for form state pages and shouldn't be used elsewhere (in most cases).

A possible alternative placement could be in modals with secondary buttons:

Before

After

Research (optional)

The check in team had research that led them to hypothesize the visual prominence of the link was the issue. I'd be curious to see how results would fare with this pattern.

I took inspiration from recommendations by NHS (where we originally got the pattern from) to simply increase padding and size.

Code (optional)

For the example, I tweaked the following:

• padding to 2rem
• added border-left using green accent and matched alert width (around 10px)
• background-color to alert's gray
• font-size to 2rem

Next steps

Note: this is more of a backlog request to be presented in the case a team is worried about the visual prominence of an action link again. Writing this ahead of time to provide options for them to explore. I don't have the bandwidth to push this forwards on my own 🙇

[humancompanion-usds]

I've continued to iterate on this design here: https://www.sketch.com/s/be292806-8dbf-4201-bfa7-0edbba103347/p/3DB6F4DD-A6B9-4BC5-9760-E2BDCB01C8ED/canvas

and here in modals: https://www.sketch.com/s/be292806-8dbf-4201-bfa7-0edbba103347/p/B323B60B-8BD0-4B92-9022-738A65FD36FB/canvas

The team working on replacing DS Login with Login.gov is testing with the E.2 variation for modals.

[joshkimux]

@humancompanion-usds feel free to update the main ticket with more iterations and replace the trashy one I quickly drafted 😆 thank you for continuing to iterate on it!

[humancompanion-usds]

Here are 2 variations side by side that we could test out:

[humancompanion-usds]

@allison0034 - Is my memory correct, did the Identity folks use this in their design?

[allison0034]

I believe they did. Here is their collab cycle ticket. It looks like the are waiting for a staging review. And here is their research repo.

[humancompanion-usds]

@allison0034 - Can you try to track down an example of this with the Identity team? I'd like to get this added. Thanks.

[allison0034]

@humancompanion-usds this did not ship. I did some digging in Slack and it is still in the Awaiting Staging review pipeline. I can get a screen cap of Sketch if you want?

[allison0034]

And to further complicate things, they are no longer using an action link per this Slack convo. We had some teams recently come thru Collab Cycle that have action links, do you want me to reach out to see if they are willing to try this? I assume you want user testing done?

[humancompanion-usds]

@allison0034 - Yes and yes, please. Thanks!

[humancompanion-usds]

@allison0034 to task the 21-686C team with testing this in an Intro page. @humancompanion-usds will ask the VFF team if they can test this out.

[allison0034]

Unfortunately they are not testing that page. I will keep my eyes out for another form.

[humancompanion-usds]

I will assign this to the Veteran-facing Forms team.

[humancompanion-usds]

@jeana-adhoc and @rachelshearerux will handle this as part of upcoming forms team work. I created these variations:

Jeana and DK will review these and pick one to usability test.

[humancompanion-usds]

@jeana-adhoc and @briandeconinck have arrived at this alteration which gives this component a unique shape:

Brian has even solved for wrapping the focus state around the pointy bit. Huzzah! We're going to test this variation and then bring it to DSC.

[humancompanion-usds]

Latest iterations are in this Figma file