Skip to content
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 · 23 comments
Open

Card #113

govuk-design-system opened this issue Jan 15, 2018 · 23 comments

Comments

@govuk-design-system
Copy link
Collaborator

@govuk-design-system 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.

@stevenaproctor
Copy link

@stevenaproctor stevenaproctor commented Feb 16, 2018

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

@owenm6
Copy link

@owenm6 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
Copy link
Contributor

@ignaciaorellana ignaciaorellana commented Mar 19, 2018

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

@dashouse
Copy link

@dashouse 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
Copy link

@dashouse 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
Copy link
Contributor

@timpaul timpaul commented May 22, 2018

Amazing work!

@owenm6
Copy link

@owenm6 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
Copy link

@dashouse 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
Copy link

@owenm6 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
Copy link

@stevenaproctor 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
Copy link

@dashouse 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)

@kr8n3r
Copy link

@kr8n3r kr8n3r commented Jun 4, 2018

@dashouse
Copy link

@dashouse dashouse commented Jul 18, 2018

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

image

@quis
Copy link
Member

@quis quis commented Jul 19, 2018

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

@stevenaproctor
Copy link

@stevenaproctor stevenaproctor commented Aug 14, 2018

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

@timpaul
Copy link
Contributor

@timpaul timpaul commented Aug 14, 2018

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

image

@mikeash82
Copy link

@mikeash82 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

@awjdigital
Copy link

@awjdigital awjdigital commented Feb 1, 2019

We have recently been testing a new 'hub' for our service which directs users to various sub services or actions. While I don't agree with creating portals, our users aren't the general public and have specific needs and services which they need to use. So, having individual searchable services is just not possible.

version-5_account_hub

@quis
Copy link
Member

@quis quis commented Feb 13, 2019

The GOV.UK Registers ones have changed to look more like the ones on GOV.UK Platform as a Service and less like those on GOV.UK publishing:

image

@dommn
Copy link

@dommn dommn commented Oct 3, 2019

Our service, which allows people to view and repay money they owe to DWP, uses a version of a card. It's been tested extensively and, despite my initial reservations, has proved to be successful in guiding users through the service. It's been especially well received on mobile, which we understand will be the device of choice when interacting with the service.

Repayment plan homepage

@rinto-c
Copy link

@rinto-c rinto-c commented Dec 18, 2020

Our service, which allows people to view and repay money they owe to DWP, uses a version of a card. It's been tested extensively and, despite my initial reservations, has proved to be successful in guiding users through the service. It's been especially well received on mobile, which we understand will be the device of choice when interacting with the service.

Repayment plan homepage

@dommn – is the card as a whole clickable? if so, does it allow the users to select the text inside it?

@arifliya
Copy link

@arifliya arifliya commented Jan 27, 2021

Our service in ESFA is for Submitting Learner Data and is now live using a card pattern taken from the Gov notify initially. However there were a few iterations based on accessibility. We had to adjust the font sizes slightly and use the bold font style.

Screenshot 2021-01-27 at 11 18 06

@rinto-c
Copy link

@rinto-c rinto-c commented Mar 11, 2021

We designed a card variation for a service that I am working on in DfE and it proved to be quite effective and prominent. I have taken inspirations from the card design provided by @dashouse and utilised the code from nhs card design.

Added few tweaks to our version of the card to fit for our needs. The code for this can be found here:

html
css
js

card-design-eyfs

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

Successfully merging a pull request may close this issue.

None yet