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

Add how to progressively reveal content #534

Closed
kelliedesigner opened this issue Jan 23, 2019 · 6 comments

Comments

3 participants
@kelliedesigner
Copy link
Contributor

commented Jan 23, 2019

As a user of the Design System,
I want to know how to provide content which can be revealed
So that there is consistency across products

Acceptance Criteria

  • Research usability and accessibility of progressively revealing content
  • Add guidance into the Design System

@kelliedesigner kelliedesigner added this to Backlog in Board via automation Jan 23, 2019

@kelliedesigner

This comment has been minimized.

Copy link
Contributor Author

commented Jan 23, 2019

GOV.UK Design System - Details component

  • Make a page easier to scan
  • Letting users reveal more detailed information
  • Include information that only some users will need
  • Do not use to hide information that the majority of users will need
  • Make the link text short and descriptive so users can quickly work out if they need to reveal it

screen shot 2019-01-24 at 13 14 06

@kelliedesigner

This comment has been minimized.

Copy link
Contributor Author

commented Jan 23, 2019

The 'details' element provides a good user experience with minimal html and can be styled.

'Summary' can be included for the link text.

screen shot 2019-03-07 at 06 59 32

Working example, click 'System requirements' below.

System Requirements

Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.

@kelliedesigner

This comment has been minimized.

Copy link
Contributor Author

commented Jan 24, 2019

NN Group - Progressive Disclosure

  • It must be obvious how users progress from the primary to the secondary disclosure levels
  • Make the mechanics of this operation simple
  • Label the button or link in a way that sets clear expectations for what users will find when they progress to the next level (strong information scent)
@kelliedesigner

This comment has been minimized.

Copy link
Contributor Author

commented Jan 24, 2019

GOV.UK - Github issue on Details

  • From an accessibility point of view, they are not treated as links by screen readers assistive technology so the experience is totally different.
  • Native details can't be forced to display its contents when printed (unless element is already open on page load or was opened by user). This is because the visibility of the contents is toggled with open attribute in the markup, and this can't be controlled with CSS print styles.
    w3c/csswg-drafts#2084
  • Since we're using plus and minus in the Accordion component, I thought I'd see how Details would look with the same symbols, as the behaviour is very similar:
    46947139-caf90780-d071-11e8-9653-36542dace1a4

@kelliedesigner kelliedesigner changed the title Add details (show/hide, progressive content reveal) Add details (show/hide, progressive disclosure) Jan 24, 2019

@jeddy3 jeddy3 changed the title Add details (show/hide, progressive disclosure) Add how to progressive disclosure content (e.g. Details) Feb 8, 2019

@kelliedesigner kelliedesigner changed the title Add how to progressive disclosure content (e.g. Details) Add how to progressively disclose content Mar 7, 2019

@kelliedesigner kelliedesigner changed the title Add how to progressively disclose content Add how to progressively reveal content Mar 7, 2019

@olimj

This comment has been minimized.

Copy link
Contributor

commented Mar 13, 2019

The 'details' element provides a good user experience with minimal html and can be styled.

'Summary' can be included for the link text.

screen shot 2019-03-07 at 06 59 32

Working example, click 'System requirements' below.

System Requirements

Other Mozilla example doesn't seem to use a pointer cursor: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

@olimj

This comment has been minimized.

Copy link
Contributor

commented Mar 13, 2019

Cursors on the details element

HTML example doesn't use a pointer cursor either: https://html.com/tags/details/

  • Without any CSS, the cursor seems to use the text cursor on the details element.
  • Considering this element is interactive, the text cursor doesn't 'feel' right.
  • Could we use a default or pointer cursor to indicate an interaction?

@jeddy3 jeddy3 moved this from Backlog to To do in Board Mar 13, 2019

@jeddy3 jeddy3 moved this from To do to In progress in Board Mar 13, 2019

@olimj olimj closed this in #733 Mar 13, 2019

Board automation moved this from In progress to Done Mar 13, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.