Experimental Design: Spotlights

[jcklpe]

What

In going over previous wireframes for the VBA and looking at the VAMC as it currently exist we see this component

Purpose

Honestly not totally sure. I think it's kind of a weird pattern but it exists and I'm documenting it here. 

Why I say honestly not sure: I mean yeah it does say "spotlights" so obviously it's purpose is to spotlight information, but I'm not totally sure what feed or context these pieces of information are being pulled from or how a spotlight is administered within the CMS by editors. The basic structure is pretty easy to surmise from looking at the component example though. 

Usage

Behavior

header, followed by boxes, with a subheader, and description text ending with a link. It appears that more than one link can be used, or some kind of "most recent blog posts" thing can be made so there's that to consider too. 

Examples

Here's another example:
 

Accessibility

n/a

Guidance

n/a

Research (optional)

I've just inherited this pattern. 

Code (optional)

According to dev inspect the main component section is given the ID of "field-vet-center-feature-content". I imagine a dev will be better equipped to find this code than I. 

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 #platform-design-system.

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

If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.

[bkjohnson]

Could this be achieved with a few Featured content components and a header?

[jcklpe]

@bkjohnson : doesn't look like it:

[humancompanion-usds]

@jcklpe - You found the answer and the appropriate component to substitute in your previous comment thus I'm not sure what the request is. Can you clarify? We'd recommend that the Major links variation of Link - Collection be used for these links. The misuse of the featured content component is not recommended.

You could talk to @DanielleThierryUSDSVA and @bethpotts about the reasoning behind it if the provided guidance is unclear.

[jcklpe]

@humancompanion-usds :  I think you're confusing tickets? Perhaps you are confusing this submission for this previously opened ticket? #1201

Spotlights is specific component we have in production now. It's not covered by the Links Collection component you reference.

[jcklpe]

@humancompanion-usds : Or maybe I misunderstand. Should I change our VBA wireframes to use the Link Collection: Major Links pattern instead of a separate Spotlight component? Should I pass this information up to our engineers to get them to change the current implementation on the VAMC production pages also?

[humancompanion-usds]

@jcklpe - Neither of us are confused, the situation is confusing. There appears to be conflicting guidance between the CMS and the Design System. Let's raise this in the Design System Council and figure out how to reconcile.

[humancompanion-usds]

We resolved in Design System Council to add this to our backlog to document but to not recommend further use of this component without modification. A number of issues were raised with the component:

• The blue background is meant to be reserved for the most important thing on a page and thus should not be used here unless the contents of the component are in fact the most important thing on that page.
• Both the triptych (3 panel) variation as well as the side-by-side variation imply a relationship between the items in those variations but seemingly none exists.
• The 3 panel variation is too narrow at certain breakpoints and thus has a very small line length that hinders readability.
• When there is a clear relationship, ideally, both the 2 and 3 panel variations would align their elements by using flexbox for implementation. Case in point:

All that said, there is clearly a need to highlight content on these pages that does not rely on a variation of the Featured content component. A Card variation (I'm leaning towards a white background variation with a border or drop-shadow which is in an experimental contribution for notifications in MyVA) could be useful here combined with recommendations on minimum and maximum widths, length of content within, relationship of content used, etc.

Also, one important variation of this component is this one, which often has the label of "spotlight" in the title:

For this issue in particular the issue of two columns was raised. At the 768px breakpoint this component splits into 2 columns:

This raised some points of discussion:

• What are the semantic reasons behind splitting into 2 columns? Other than visual interest we couldn't come up with a rationale. This begs the question: Why shift from a simple list? There was an argument presented that a single list is helpful in reducing cognitive load but, I've not been able to find any research or recommendations to back that up. WCAG simply states that the "Width is no more than 80 characters or glyphs", which is possibly more likely to happen with 2 cols rather than 1 (though we could certainly codify a max text-width).
• Lack of hierarchy. This may in fact be the intent, but a two column list lacks a bit of hierarchy and a single list does not. On the other hand, reducing cognitive load calls for shorter lists and the 2 col version does seem to consistently hold 2 lists of 4-5 items. I'm not aware of research to say that the Serial position effect is less or more prevalent with a 1 col versus 2 col list.

One thing we did agree on is that the CMS calls this a variation of the Featured Content component and it was not the intent of the Design System to have variations. Thus we may make this a distinct component and hopefully test variations in future that move away from the visual design of the Featured content component. It's also worth pointing out the USWDS version of this is a Summary and is meant to summarize the page, which is closer to the intent of the Featured content component.

[humancompanion-usds]

1. Design a Spotlight that has a non-Summary box background (i.e. not blue) and not a Card (nor a gray background). @danbrady to choose a color and add to Figma.
2. @caw310 - After we have a Spotlight design, please ssk Erika to have an issue filed for the CMS to provide the Major Links Spotlight using this new design and also rename Featured Content for other users to Summary box.