New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Card #113

Open
govuk-design-system opened this Issue Jan 15, 2018 · 17 comments

Comments

9 participants
@govuk-design-system
Collaborator

govuk-design-system commented Jan 15, 2018

What

Panels of structured content (eg. image, title, description, link), typically organised in rows or grids:

Example 1: Home Office

image

Example 2: HMRC Tax Platform

image

Example 3: GOV.UK Notify

image

Example 4: GOV.UK Home page

image

Why

Versions of this pattern are already being used in various government services (see examples above).

HMRC have some evidence that adopting this pattern has improved the usability of their tax platform.

This specific component doesn't exist, but it's possible that it could be build from GOV.UK Frontend styles and the panel component.

Anything else

Cards: Home Office design system
Cards: HMRC Design Patterns

Recommendations

This proposal was reviewed by a panel of designers from GDS, DVLA, HMRC, DWP and Home Office on 15 Feb 2018.

The panel agreed that the pattern should be included in the GOV.UK Design System with the following recommendations.

Guidance

There were concerns that cards are often used to compensate for poor information hierarchy or content design.

Contributors to this pattern should establish what user needs the pattern is designed to meet and write appropriate guidance explaining when to use, and not to use, the pattern.

Design

Cards are already being used in many government services, but quite inconsistently. When used appropriately, cards are a good way of chunking up related content, data and links. They can also be used to highlight content on a page.

A consistent style and structure for cards should be established. A number of variants should be provided, with guidance for their appropriate use.

Accessibility

Close attention should be paid to the accessibility of the pattern, in particular colour contrast and the affordance of links.

Component or pattern

Consider whether Cards should be developed as a new component, or as a pattern built from existing styes and components.

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (Proposed) Jan 15, 2018

@rpowis rpowis referenced this issue Feb 15, 2018

Closed

Card #137

@stevenaproctor

This comment has been minimized.

Collaborator

stevenaproctor commented Feb 16, 2018

The services and information listing on www.gov.uk is another example of a card.

@owenm6

This comment has been minimized.

Collaborator

owenm6 commented Feb 19, 2018

The Home Office examples have not been used widely and not in a live service like HMRC tax account so any insight we have is minimal.

@ignaciaorellana

This comment has been minimized.

Contributor

ignaciaorellana commented Mar 19, 2018

The designer for PaaS has made custom Cards for the team to use

@dashouse

This comment has been minimized.

dashouse commented Apr 10, 2018

I have done a fair bit of work on cards before (pre-GDS)

Also this relevant blog post was just published - https://daverupert.com/2018/04/pitfalls-of-card-uis/

@timpaul timpaul added the component label May 21, 2018

@dashouse

This comment has been minimized.

dashouse commented May 22, 2018

I've put together a prototype of a configurable card. It has a few "slots" available for an image, text and action and the appearance can be changed by using modifier classes.

These modifiers can give the card a background and add padding, remove a border, make the whole card focusable, make cards the same height if have different content etc etc

https://govuk-card-test--region.herokuapp.com/
username: govuk
password: card

card-prototype

@timpaul

This comment has been minimized.

Contributor

timpaul commented May 22, 2018

Amazing work!

@owenm6

This comment has been minimized.

Collaborator

owenm6 commented May 22, 2018

This is fantastic work @dashouse. I wonder about the bottom border. It works really well with the images and background colours but not quite sure about its use on the other examples.

@dashouse

This comment has been minimized.

dashouse commented May 22, 2018

I was thinking it would essentially be a choice, it has a border by default but you could add the govuk-card--borderless modifier class to any of those examples to remove the border if it didn't work for you in context.

@owenm6

This comment has been minimized.

Collaborator

owenm6 commented May 22, 2018

Yes, I suppose I was questioning whether the border should be a default or not. My gut says it should be added rather then removed, so adding a border becomes a conscious decision based on need.

@stevenaproctor

This comment has been minimized.

Collaborator

stevenaproctor commented May 22, 2018

@dashouse For the govuk-card--selectable, we have done a lot of work to make them as accessible as possible. Worth asking @roblav and @Fenwick17

@dashouse

This comment has been minimized.

dashouse commented May 22, 2018

@owenm6 Yep probably right

@stevenaproctor Great stuff, couldn't work out the best solution (but I'm not a developer)

@igloosi

This comment has been minimized.

Contributor

igloosi commented Jun 4, 2018

@dashouse

This comment has been minimized.

dashouse commented Jul 18, 2018

Registers have some nice cards
https://www.registers.service.gov.uk/registers

image

@quis

This comment has been minimized.

Member

quis commented Jul 19, 2018

From GOV.UK Platform as a Service (the ‘preview’ card is showing the hover state):
image

@stevenaproctor

This comment has been minimized.

Collaborator

stevenaproctor commented Aug 14, 2018

Education, training and skills cards
https://www.gov.uk/education

@timpaul

This comment has been minimized.

Contributor

timpaul commented Aug 14, 2018

Examples of the Education cards (they're the same style as registers):

image

@mikeash82

This comment has been minimized.

mikeash82 commented Nov 27, 2018

@roblav commented on 20 Dec 2017

PTA Card - Submission to HMRC Design System

What is the user need?

pta card submission to hmrc design system google docs

Caption: Old PTA home page

  1. The previous home page navigation system provided a single link into a service.
  2. The problem is that there are useful things that users wanted to do within the tenant services but it wasn’t obvious that those services contained those features.
  3. At different business events the content and the links needed to change so the user could do a task that was related to a business event.
  4. The organisation and names of those services hadn’t undergone any information architecture or UR.
  5. UR showed that quite a few users would click on the text thinking that was the link.

Current Pattern

pta card submission to hmrc design system google docs

Caption: Current PTA home page

  1. Current pattern addresses the issues above.
  2. Undergone multiple rounds of tree testing, card sorting and first click tests, as well as UR sessions.
  3. The content and links have all been provided by the individual services based on their best understanding of their users’ needs.
  4. The links can change to meet key business events or any other demonstrable user or business need while the main link into the service remains constant.
  5. Font size - Header 19px, default font size 16px. The cards are a navigational tool and the font size makes the page less cluttered at the smaller size, making it easier for users to identify key information.

Known limitations

1. For other services to use this pattern we need to provide some more flexible use cases for the card. It needs to support when there is only 1 link into a service
We also need to decide absolutely whether or not we want to link to content outside of PTA (eg guidance content, or calculators), because this may impact the number of links services are able to offer. We currently don’t offer external links.

2. We need more ways to display different kinds of information in the main section of the card
It seemed to me, from watching the recent UR videos, that users were interacting with the blue in-card banner (eg SA ambig “You can’t access this service” or whatever it says) in the same way that they do with green buttons - by viewing it to the exclusion of everything nearby and taking primary direction from what it tells them to do (in this case, to look elsewhere for the task they need to perform). I think this design needs to be reviewed and possibly flagged for further UR.

3. We need a way to not have the main section clickable, but still have links

4. There are some general interaction issues with it
Current tile versions in prototype have borders that aren’t fully responsive. Not sure if this is the same in live.

5. There’s a strong belief that all the links should have a visible underline
Disputed point.
Sheldon’s understanding is that lists of items with links set within sentences should be underlined, but lists where the whole sentence is a link should be underlined.
My understanding matches but only to a point. Experts agree that underlines should be retained if accessibility is a priority (which is the case for us) and in addition our text / link colours don’t have a good enough contrast (2.93:1) to meet accessibility requirements. The purple of visited links is even worse (1.94:1).

6. The consistent height of the cards is set by minimum height

7. The content on the main card link is contained in an anchor tag and all of it is read out by a screenreader

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment