Communicated the status/state of a module in one of the upper corners of a module card

Please review the icons for communicating the status/state of a module in one of the upper corners of a module card.
There are three for three different states:
- Available
- Added
- Installed
Communicating the status of a module card with a colour is not correct from an accessibility perspective, that's why it's all about the shape of an icon. As there was not size specified, I made them 31x31px

Updating with a plan of action for this issue:

1. Decide if this is enough of a usability issue for MVP
2. Design an accessible solution for reflecting these statuses
3. Implement design by reflecting status

I believe that there are a few things that need decisions:

• Language - the three states are (1) "module is not in your codebase yet, and needs to be downloaded" (2) "module is in your codebase but not installed/enabled/active" and (3) "module is in your codebase and is installed/enabled"; we need to decide on one-word, clear terms that describe these states.
• Iconography/Color - Simple icons like the ones Antonia came up with make sense; however, you're also not suppose to ever convey meaning with ONLY an icon, it should have text with it. I think we will need both. Similarly, I think color differentiators are OK if you don't ONLY differentiate with color. I think a combination of color, icon, and text would be good - however, is that too much to cram onto a card?
• An actual design - we need to come up with a mockup of how this should look before proceeding (and of course a decision whether or not we'll even include before that!

I would love to hear some opinions from outside users to first ascertain the seriousness of the usability issue. (Note, it did not come up at our Univ of Minnesota real-user-testing; however, I'm not sure we had tasks directly related to that.)

hello! I took a stab at looking at this issue.

Language - For the three states, I was thinking of going with "Available" for a module that is not installed or enabled. "Installed" for a module that was downloaded to your codebase but still not enabled. "Enabled" for a module that is both installed and turned on.

Iconography - For the icons, I went with a simple + for Available, a downwards arrow for Installed, and a checkmark for Enabled. I also utilized the new marketing colors for each state, dark grey (#4F4F4F) for Available, the Drupal Blue (#009CDE) for Installed, and Drupal Green (#397618) for Enabled.
Installed:

Enabled:

Available:

Design - Here is a design of the grid and list view in project browser. I also attached the icons as SVGs.

Designs:
Grid View

List View

Thanks for working on Project Browser, it will be a huge improvement. About naming the actions and present situation of a module, it can be a source of confusion ... I recently posted this comment:

It's important to discern between downloading and installing modules, they are two very different things in Drupal.

1. You download the module and its additional necessary libraries (defined in the module's composer.json file) with Composer.
2. Then you install the module either via the GUI on the Extend page, or with Drush -- the module gets enabled, changes are made to the database (the configuration), necessary folders are created, etc.

See https://www.drupal.org/docs/extending-drupal/installing-modules → as well as these two issues for more discussions:

• #3315858: Make the micro copy for adding and installing modules consistent with the general plan for Drupal Core →
• #2888657: [meta] Less confusing and more consistent wording needed in module/theme add/install/update →

From Download ≠ install → .

Perhaps these words best convey the states and options?:

1. Module is not in your codebase yet, and needs to be downloaded: "Available"
2. Module is in your codebase but not installed/enabled/active: "Downloaded" -- OR -- "Added"
3. Module is in your codebase and is installed/enabled: "Installed"