Consider adding "active installs" to Card view

+1 for adding the active installs. the information presented should be identical between the two views.

Functionality wise it seems to be there, but not sure if adding the full text "Active installs" makes everything now look a bit cramped.

I think that the idea was just to show an icon with a hover state that mentions the "active installs" bit.

Maybe we can show the icon and the number (icon XXXXX), and then on hover over the icon the full "XXXXX Active installs".
Or even just the icon, and then show the whole thing on hover, like it happens with the security icon.

+1 to #7

but the icons for the security coverage as well as the installs icon are missing a visual feedback. at the moment the impression could be that the icons "could" be just decorational. a feedback by changing the icon color on hover might be an idea?

plus the text in the tooltip currently states:

Total number of sites using the module

why not adjust it and also make it more bespoke. For example for the Chaos Tool Suite (ctools)

649020 currently using the Chaos Tool Suite (ctools)

So the number of active installs and the name of the module is reflected in the tooltip?

I added a really small and easy comment in the MR, but it'll need re-compiling of the assets.

thanks for the updates! i've noticed two things:

1) the first is a nitpick. i would suggest not to capitalize the word active since the sentence starts with the number of install s therefore active should use a small letter

2) the output in the tooltip visible for sighted users is sort of invisible to a screenreader user since the alt attribute is set to "project usage". (see project_usage.mp4). but i am not sure if using the same title and alt attribute would be the proper approach?

and in general i am not sure if it would be noticed by sighted users that the installs icon contains information inside its tooltip. there is no indication that there is the number of installs available on hover for that icon.

This is a design suggestion. Perhaps we can:
* Set the text to a shorter "NUMBER active installs".
* Show the icon with the number in a short format. See this for short format (ie: 1K instead of 1000): https://svelte.dev/repl/b3db3b6801ee4a45b1d204673566c0e9?version=3.25.1 (convert 649020 to 649K)
* Then on hover, show the full text

See the video here: https://www.drupal.org/files/issues/2022-09-28/Screen%20Recording%202022... that illustrates my suggestion.

Screen readers will read the whole thing and the text will also show on hover.

i like the suggestion in #15. that would mitigate my worries brought up in #13 that sighted users might not notice the information hidden in the tooltip. but i would keep the text announced to the screen reader with "x active installs for [module name]" . imho it is a good idea to provide the context in case the working memory of the person is small. the module name is appended so the screen reader user doesn't have to go through the whole announcement and is able to skip to the next information any time.

the only slight worry i have is the abbreviation for the number of active installs > 1000. it might be mandatory on certain viewports to fit everything in (for example the breakpoint when the layout switches to 3 columns for example), when "active installs" is blended in on hover. but the number with the abbreviation alone might make people think at least about the meaning of the letter K. Also in other languages that abbreviation might not be a single letter. For example for my native language german i had to look up what the correct abbreviation for numbers > 1000 would be. i wouldn't known the short form T i only knew the abbreviation Tsd. which would be longer than a single letter.

This requested change definately came up in a lot of listening sessions last week in Prague. I agree with the suggestions above to consider how the information is presented so it is clear and accessible to all users. We need to make any recommended changes to both the grid and list views.

Note that the suggestion on #15 uses javascript locale methods under the hood: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global...

I'm fine either way using the abbreviation or not. I only suggested it to "save" some space, but it's not relevant for the main points of #15 (show on hover).

I agree that only K without being followed by active installs would leave room for other interpretations, such as module size or etc. I believe that, in the future, shortening the number of installations will be a necessity given the order of magnitude of the number of active installations, to prevent the layout from breaking.
Below I use some suggestions from #16 just for viewing, as it still needs some adjustments like modifying the abbreviation suffix according to the language used. I will follow the development of the discussion before committing anything further.

Maybe it has been decided elsewhere to use that phrase, but why not just use "installs" in stead of "active installs"? Is "active" included to emphasize that there are Drupal installations which use modules, but have disabled reporting back to drupal.org?

Also, in my opinion the project-usage-icon.svg icon is perfect for List view and looks nice, but not crucial in Grid view, and can be removed to free up space, to allow simply showing "120.000 Installs" next to the Shield icon?

After all, the goal is to be able to quickly glance the most important information, and not have to mouse over an icon to see the actual number. Just my 2 cents.

Show number of installs

Active as opposed to lifetime. "CTools module has been installed 1,000,000,000 times" vs "CTools is running on 1,000,000 sites"
:shrug:

Ah yes, that makes sense@tim.plunkett. How about putting the blue "Covered by Drupal Security Team" and "active installs" on separate lines? Something like this, where SEC_ICON is the blue security icon:

      LOGO

    DESCRIPTION
    DESCRIPTION

  TAG1 TAG2 TAG3

SEC_ICON
/\/ 95,469 active installs    INSTALL

In another issue, which I can't find now, it was suggested to add another icon next to the blue "Covered by Drupal Security Team", maybe compatibility? Having active installs on a separate line would allow something like this, where COMP_ICON is a possible future compatibility icon:

      LOGO

    DESCRIPTION
    DESCRIPTION

  TAG1 TAG2 TAG3

SEC_ICON COMP_ICON
/\/ 95,469 active installs    INSTALL

Re the COMP_ICON: note that all projects offered by default by project_browser will be compatible with the current installation. We are running that filter before showing anything to the user. In the unlikely event that a project is not compatible (ie: projects coming from another source where we can not query the version), the INSTALL button will say NOT COMPATIBLE and will be disabled.

Thanks for clarifying @fjgarlin. I found the icon, and it was the actively maintained icon, which was replaced in #3294608: Consider replacing "actively maintained" icon:

Just wondering could we combine the best aspects of displaying on the card and using a tooltip?
Displaying "NUMBER active installs" seems a little unwieldy, once the user knows what the figure represents.
Would it be sufficient to just display the number (preferably abbreviating it, such as "307K" or "1.1M"), but then have the fully explained version "307,513 active installs" available in a tooltip?

That's a great idea @lostcarpark. @rkoller and me have been discussing alignment in #3315854: Improve the readability of module cards in grid view, and that it does take:

[...] a cognitive toll to jump between different starting points with centered text, even with the anchoring of logo and title. So left-aligning should be considered.
[...]
To me, left-aligning logo, title, and description looks fine and orderly, and more easily scannable. The Security icon could be placed in the upper right corner, since it is quite important, when deciding whether to install a module or not. Tags can be placed left-aligned below description, and "Active installs" in the lower left corner, since the sorting is already by active installs, so least important.

If the general alignment is left, the Security icon could be placed in the upper right corner (important signal) and the active installs in the lower left (clunky asciidoclive.com mock-up):

LOGO                    SEC
                       ICON
DESCRIPTION TEXT
DESCRIPTION TEXT

TAG1 TAG2 TAG3

                    INSTALL
/\/ 307K             BUTTON

Here is my suggested change, showing the abbreviated number, and the full number in the tooltip. "Active Installs" is only shown in the tooltip.

Over 10 million display 53M
Over 1 million display 1.4M
Over 10 thousand, display 27K
Over 1 thousand, display 5.4K
Under 1000 shows the number.

I'm thinking about this issue some more, and I'm wondering is the actual number a very helpful piece of information to users, particularly if they are new to Drupal? Obviously big number means popular, but will 1000 or 100,000 installs tell a site owner anything meaningful? I'm suggesting changing the numbers on the cards with boxes as follows:

• 4 boxes - 100,000 or more installs.
• 3 boxes - 10,000 or more installs.
• 2 boxes - 1,000 or more installs.
• 1 box - 100 or more installs.
• no boxes - fewer than 100 installs.

Hovering over the indicator will still show the actual number of installs.

Note: This issue needs a rebase on the current codebase. I will try to get it done in the next couple of days.

I think that the use of a number of boxes for range of installations adds another layer of abstraction that will not help our target audience. Would having just 234,456 Installs to the right of the security shield with a tool tip with the text "# of active installs" work? And do the same on list view.

+1 on #36, I don't see much benefit in the boxes.

Using the title attribute to provide additional info is not particularly accessible . Anything that limits information to pointer device user (such as requiring a hover) is not something that would make it through the accessibility gate.

I agree with showing just "234,456 Installs" @leslieg, and suggested the same solution in #22 (see image in the comment).

Reviewed the code and tested via gitpod.

The only weird thing, from a design perspective, is that the size of the text for active installs is bigger than the one of the module's description.
Maybe we could change that while we are working on this component.

See image:

Suggested on the left vs what's there now on the right. Note that this also happens on the "list view", so it was an existing thing.

If you think that this should be a follow-up issue, please mark this as RTBC as the code and functionality are working as expected, but if it makes sense to include it here then I'll mark it as NW.

The font-size for the description of the module is set to 15px, whereas the active installs count font-size is set to 16px.

I think the active installs should be smaller, something like 13px (suggested in the MR) or any other value smaller than 15px tbh.

Thanks for addressing the feedback. Visual look now:

Marking RTBC.