Add how to display a summary entry point to more detail (card)

[kelliedesigner]

As a user of the design system
I want to know how to create an entry point to more detailed information (summary)
So that there is a consistent experience across services

Description

Displaying a summary with certain key information and the ability to drill down into further information is a common pattern.

This pattern is used for things like: Search results, event listings, case studies, news listings

Links and resources

• Relates to: Add how to display multiple summary entry points to more detail (cards) #93 and Add Pagination #344
• https://material.io/guidelines/components/cards.html
• https://www.nngroup.com/articles/cards-component/
• https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary

Acceptance Criteria

• What is the key information to surface
• Consistent solution for each type
• Optimum content hierarchy for each type
• Clear differentiation between each type
• Responsive considerations

Then:

• Add components to design system
• Addresses accessibility/usability considerations
• Works on target devices and browsers

[kelliedesigner]

Care Leavers app:

[kelliedesigner]

https://www.uxpin.com/studio/blog/web-layout-best-practices-12-timeless-ui-patterns-explained/

[kelliedesigner]

Current website:

[kelliedesigner]

Intranet - Featured

Featured

Intranet - Content promo

Intranet - Workplace group

[kelliedesigner]

Intranet - Contact info

[kelliedesigner]

Basic card

Related content

Teaser card

[kelliedesigner]

Basic event card

Service card

Shop card

[kelliedesigner]

Find my local

[kelliedesigner]

Call out blocks

Intranet call out blocks

[kelliedesigner]

Download

[kelliedesigner]

Use this component when you want to present a summary and link to additional details.

[jeddy3]

From UX Planet:

2. Make the Entire Card Clickable
   Follow the Fitts’s Law and allow the user to click/tap any part of the card, not just the text link or image. Larger touch zone substantially improves usability on both touchscreen devices and mouse-based devices.

[olimj]

From UX Planet:

1. Make the Entire Card Clickable
   Follow the Fitts’s Law and allow the user to click/tap any part of the card, not just the text link or image. Larger touch zone substantially improves usability on both touchscreen devices and mouse-based devices.

@derekjohnson Good one to chat about today also. Will need to research a little more and better define what a teaser card is for Barnardo's, but this feels a little restrictive to link the entire card. Maybe we have separate definitions for "Teasers" (single link to content and therefore the whole thing is linked) and "Cards" (displays more summary information than a teaser and could have multiple links). One to test...

[mat-walker]

From UX Planet:

1. Make the Entire Card Clickable
   Follow the Fitts’s Law and allow the user to click/tap any part of the card, not just the text link or image. Larger touch zone substantially improves usability on both touchscreen devices and mouse-based devices.

@derekjohnson Good one to chat about today also. Will need to research a little more and better define what a teaser card is for Barnardo's, but this feels a little restrictive to link the entire card. Maybe we have separate definitions for "Teasers" (single link to content and therefore the whole thing is linked) and "Cards" (displays more summary information than a teaser and could have multiple links). One to test...

Good one to explore but I can't think of a requirement at the moment where we would have a teaser card with more than one call to action?

[derekjohnson]

I don't know enough about making the whole thing clickable to say whether it's a good thing or not. I do know it means you can't select text easily.

There may be a teaser that has a link in the text as well as the main call to action. However there are ways to make that work if the whole thing is a link.