Page MenuHomePhabricator

Document how to use icons in our projects
Open, HighPublic

Description

Background/Goal

Investigate how we are using icons across our products, and make recommendations for judicious and appropriate usage. Icons are useful when they highlight an important concept, but if we highlight concepts everywhere, nothing is highlighted. Also, icons are useful when they are easy to understand and they reinforce the concept, but when if they are too complex they may create confusion in the users.

Audit so far:

Icons in a list or menu
Captura de Pantalla 2022-12-16 a las 10.41.39.png (530×1 px, 255 KB)
Several icons in the same content box
Captura de pantalla 2022-02-09 a las 11.14.22.png (1×862 px, 719 KB)
Group of icons in the sticky header
Captura de Pantalla 2022-12-16 a las 10.45.39.png (1×2 px, 2 MB)
Inline actions - some with and some without icons (Discussion tools)
image.png (1×1 px, 377 KB)
Inline actions - styled as links, without icons (thank and undo actions in History)
image.png (352×2 px, 228 KB)
Filters and controls with mix of icon and no icon actions (Watchlist)
image.png (972×1 px, 242 KB)

We need to document in our Design System guidelines the recommendations for the use of icons. We should also document the use of icons on specific components or patterns.

User stories

  • As a designer I need to know how to use icons to stands out information in the content.
  • As a designer, I need to know when to use icon only buttons and when to use text buttons (or icon with text) to emphasise out actions in the page.
  • As a designer I need to understand the context where icons are appropriate (e.g. if it’s an interface with a lot of text, then an icon button stands out much more, which may be appropriate or not depending on the context.

Documentation

Notion page will be linked here

Acceptance criteria (or Done)

Design

  • Define and document the use of icons
    • Document the use of icons for specific components and patterns
  • Add this documentation in the Icon library so designers can easily find it

DSG

Event Timeline

I think we need to add such documentation linked into specific components or patterns as well, like for example the Menu documentation.

bmartinezcalvo renamed this task from Define the use of icons in our system to Document how to use icons in our projects.Dec 16 2022, 9:46 AM
bmartinezcalvo updated the task description. (Show Details)
bmartinezcalvo moved this task from Inbox to Needs Refinement on the Design-System-Team board.
ldelench_wmf added a subscriber: ldelench_wmf.

Bumping to high priority based on its parent's priority - please lower to medium priority if our target completion is more than 1 month from now. Thanks!

@KieranMcCann will help us documenting the visual style for the use of icons. We should check his availability.

hi @bmartinezcalvo - per the comment on the parent task T313905#8112960, is this task meant to document when a new icon should be created, and/or how this task is currently described, which is more around when and how often icons and icon buttons should be used in a given UI?

I think probably we should cover both cases, but will leave to yourself and @KieranMcCann whether to split into two tasks or keep working on this one.

@RHo this task is just to define how we should use icons in our different projects (when to use them, the size we should use, colors, etc.).

The need for new icons and how to create them was already documented in T312025 (this documentation was already added in Codex contribution guidelines). If you feel more info about when an icon should be created we could extend this documentation.

@RHo this task is just to define how we should use icons in our different projects (when to use them, the size we should use, colors, etc.).

The need for new icons and how to create them was already documented in T312025 (this documentation was already added in Codex contribution guidelines). If you feel more info about when an icon should be created we could extend this documentation.

Gotcha, thanks for clarifying. In that case as part of this task, it would be good to be about Icon usage on UIs and in components which have variants with icons. For example, the button component would link to this info to help people who are considering using the icon or icon+label button variants.