Use icons with text in admin table actions #4552
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
javierm
force-pushed
the
table_icons_with_text
branch
4 times, most recently
from
312b4aa
to
f332faa
Compare
javierm
force-pushed
the
table_icons_with_text
branch
4 times, most recently
from
d355dbe
to
7e9d06e
Compare
Senen
reviewed
Jun 30, 2021
javierm
force-pushed
the
table_icons_with_text
branch
from
7e9d06e
to
db7c1c3
Compare
In commit 9794ffb, we replaced "buttons" with icons in order to make the admin interface consistent with the planned budget investments redesign. However, using icons has some issues. For once, icons like a trash for the "delete" action might be obvious, but other icons like "confirm moderation" or "send pending" might be a bit confusing. It's true that we were adding tooltips on hover. We tried two approaches: using Foundation's tooltips and using CSS tooltips. Foundation tooltips are not activated on focus (only on hover), while CSS tooltips always appear below the icon, which might be a problem when the icons are at the bottom of the screen (one of our milestone tests was failing because of that and we can now run it with JavaScript enabled). Both Foundation and CSS tooltips have other issues: * They force users to make an extra step and move the mouse over the link just to know what the link is about * They aren't available on touch screens, so these users will have to memorize what each icon does * They are not hoverable, and making them hoverable would cause a different issue because the tooltip might cover links below it, making it impossible to click these links without moving the mouse away first * They are not dismissable, which is considered an accessibility issue and a requirement in the Web Content Accessibility Guidelines [1] For all these reasons, we're using both texts and icons. As Thomas Byttebier said "The best icon is a text label [2]". Heydon Pickering also makes a point towards providing text alongside icons in his book "Inclusive Components" [3]. Note that, since we're now adding text and some of the colors we use for actions are hard to read against a white/gray background, we're making a few colors darker. With these changes, actions take more space in the admin table compared to the space they took in version 1.3, but they are more usable and accessible while they still take less space than they did in version 1.2. [1] https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus [2] https://thomasbyttebier.be/blog/the-best-icon-is-a-text-label [3] https://inclusive-components.design/tooltips-toggletips/
When we see a list of, let's say, banners, and each one has a link to edit them, the word "banner" in the text "edit banner" is redundant and adds noise; even for users with cognitive disabilities, it's obvious that the "edit" link refers to the banner.
We use the words "Manage" and "View" in other places; we don't use the word "See" as often.
The word "budget" in the "Preview budget" link is redundant. On the other hand, the words "Manage", Edit" and "Admin" are not really necessary in my humble opinion. Just like in the admin navigation menu we use "Participatory budgets" instead of "Manage Participatory budgets", the fact that we're going to manage or admin or edit something can be deduced from the fact that we're in the admin section. Besides, it isn't clear to me why we use "Manage" for projects, "Edit" for heading groups and "Admin" for ballots. The differences between these three concepts might be too subtle for me. The previous paragraphs haven't been corroborated with real users, though, so I might be mistaken and we might need to revisit these links in the future. These actions still take quite a lot of space. Maybe in the future we could remove the "delete" icon, at least on budgets which cannot be deleted.
javierm
force-pushed
the
table_icons_with_text
branch
2 times, most recently
from
3008ca4
to
f5a0e09
Compare
We were removing the margin half of the time, and sometimes removing it made us use `!important` rules.
javierm
force-pushed
the
table_icons_with_text
branch
from
f5a0e09
to
450d954
Compare
Senen
approved these changes
Jun 30, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
References
Objectives
Visual Changes
Before these changes
After these changes
Notes
For an explanation about the usability and accessibility issues related to tooltips, check the message in commit 25e9065.