Page MenuHomePhabricator

docs: Redesign tokens presentation table
Closed, ResolvedPublic0 Estimated Story Points

Description

Background

The tokens table presentation could use some improvements, as we have received feedback that it is difficult to review many tokens at once, especially the colors, and some information might be redundant, unnecessary, or lacking hierarchical importance. It's also not accessible, missing a caption.

Screenshot 2024-08-23 at 09.59.56.png (1×1 px, 134 KB)

Proposal

Table_03.png (701×1 px, 135 KB)

Acceptance criteria

  • Add screen-reader-only caption to table
  • Redesign all tokens tables to be more readable, usable, and consistent with Codex styling

Event Timeline

Restricted Application triaged this task as High priority. · View Herald TranscriptMar 15 2023, 12:19 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

@Volker_E I've been working on some proposals to improve the tokens table in the demo and I lean towards with this one:

Table_03.png (701×1 px, 135 KB)

  1. Align deprecated and values tags: Menlo 12px, Regular and color-base
  2. Use an icon-only progressive button for the copy value
  3. Increase the paddings between the value on top, the representation and the info below the representation to 32px
  4. Use Small text 12px for the text in the info below the representation
  5. If possible, update the value tag background to #EAECF0 with opacity-medium so these tags are less prominent in the demo
ldelench_wmf raised the priority of this task from High to Needs Triage.May 9 2023, 1:49 PM
ldelench_wmf subscribed.

Removing from sprint board; no movement since March.

Change 965619 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] [WIP] docs: Deemphasize token meta information and change copy button

https://gerrit.wikimedia.org/r/965619

Table_03.png (701×1 px, 135 KB)

  1. Align deprecated and values tags: Menlo 12px, Regular and color-base

I'd restrain from making the second most important information, the token value smaller.

  1. Use an icon-only progressive button for the copy value

Done in a first iteration. Not sure about the clarity of that icon. I think it's more confusing than a textual label and shouldn't go icon-only.

  1. Increase the paddings between the value on top, the representation and the info below the representation to 32px
  2. Use Small text 12px for the text in the info below the representation

The comments are valuable too:

image.png (1×1 px, 153 KB)

  1. If possible, update the value tag background to #EAECF0 with opacity-medium so these tags are less prominent in the demo
DTorsani-WMF renamed this task from docs: Improve tokens presentation table to docs: Redesign tokens presentation table.Aug 23 2024, 2:03 PM
DTorsani-WMF updated the task description. (Show Details)
CCiufo-WMF set the point value for this task to 0.Aug 23 2024, 9:39 PM
CCiufo-WMF removed the point value 0 for this task.
CCiufo-WMF triaged this task as Medium priority.Sep 3 2024, 4:51 PM
CCiufo-WMF set the point value for this task to 0.

From T374706:

In the color table the second column contains multiple value types. A good table has one type per cell. Two column headers are already hinted to as "Defined in" and Refers to" are repeated in each cell, so those should clearly be column headers. Similarly, the hex code and the sample could be in their own columns. A "Notes" column also seems to be needed.

This will make the table easier to read, more compact, easier to copy values from and easier to parse.

(This issue is inspired from a discussion in the Wikimedia Hackathon Telegram channel, where it was noted that one needs to page down 40 times to get to the bottom of the table that only has 68 rows.)