Fonts Library: Replace the Aa manage fonts icon with a button with visible text

[afercia]

Description

Admittedly from anecdotal experience but every single time I use and test the font library I struggle to find the UI control to open the 'Manage fonts' modal dialog.

Clicking one of the installed fonrs does open the modal dialog but it brings me to the sub-view of that specific font within the modal dialot. This is useful when I want to manage that specific font.

Instead, when I want to open the Fonts library list, I struggle.

Turns ouf the control to open it is a small Aa icon button. Screenshot:

• The Aa icon doesn't really represent the concept of 'Manage fonts'.
• As a speech recognition software user I can't figure out the accessible name of that button by the visuals of the icon. As such, I wouldn't be able to issue an appropriate voice command and I would be forced to tab to the button to discover its accessible name.
• The same icon is used also for the Elements styles right below the Fonts group, which makes the UI confusing. What is the different meaning of the two icons?
• Icon buttons should only be used when there's not enough space to use visible text.
• Icons should be used when they help clarify meaning. They should not be used to obscure a functionality and make it less discoverable.

Overall, visually, looking at the UI I can't find anything that tells me 'Manage fonts'. I see icons, and I don't know what they mean nor the UI makes it easier to understand these icons meaning.

For accessibility, icon buttons are always less than ideal. In this case, I think this Aa icon does more harm than good and should be replaced with visible text. The placement of the button with visible text could be at the top [Edit:] at the bottom of the list of the installed fonts.

Step-by-step reproduction instructions

• Go to the Site Editor > Styles > Typography
• Observe the UI within the Typography panel.
• Try to determine wich of the UI controls is the one to 'Manage fonts'.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[afercia]

I'd ike to further clarify a design principle that seems obvious to me.

Besides the fact that controls that use only icons are inherently less than ideal for accessibility, Icons should help clarify the purpose of an UI control. They should help the users 'visual memory' to recognize an UI control immediately. As such, icons should be used unambiguously to always identify one specific functionality.

IMHO, using the same icon for different features defeats the purpose of using icons in the first place and, to me, it's just an inappropriate way to use icons. Screenshot:

[t-hamano]

There are two approaches I can think of, but what do you think?

Use the cog icon:

Use the link-like button:

[afercia]

what do you think?

I'd like to do something entirely different.

Trying to look at the broader picture:

1
I'm not sure I like the proliferation of icons with different meaning placed at the end of a row, especially in the right panel. There's too many of them and they all have different meaning / purpose / functionality. Example screenshot:

Visually, and from a cognitive perspective, I think this is pretty overwhelming.

Some of these icons even change dynamically, for example the 'Dimensions' one, which may seem a smart idea at first but I'm not sure it helps clarity and predictability.

I think we should reduce the amount of different icons and functionalities used in that spot to a very small set of very recognizable patterns.

Keeping placing in that spot controls that do different things and are sometimes a little obscure because they use unclear, unique, icons is less than ideal to me.

2
I'm not sure there are other places in the editor UI where an icon button placed in that spot opens a modal dialog That is pretty a unique case and it's unexpected. Most of the icon buttons in that spot either open a dropdown menu or expand a panel or transform a control. I can't think of another icon button in that spot that opens a modal dialog.

3
The editor already uses a pattern for a 'manage all' button that opens a modal dialog. For example, the 'Explore all patterns' button. Screenshot:

I think we should strive for consistency and establish a new pattern for all buttons that open a modal dialog. If it was up to me, I'd place a 'Manage all fonts' button at the end of the fonts list. Something like what is illustrated in the following example screenshot:

[t-hamano]

Thank you for the detailed explanation! I do think your approach makes sense.

The editor already uses a pattern for a 'manage all' button that opens a modal dialog. For example, the 'Explore all patterns' button. Screenshot:

It may be a good idea to unify the "Edit something" and "Manage something" buttons that open modal dialogs using the secondary variation style.

[afercia]

Thanks for your feedback @t-hamano

I'd say that the wording should be consistent as well. Currently:

'Explore all patterns'
'Manage all templates'
'Manage all template parts'

vs.

'Manage fonts'

where the 'all' is missing. Either we always use 'all' or we don't.

[afercia]

Seems there is already feedback that the Aa icon button makes the Font Library very little discoverable. See
#55179

I clicked the “Aa” icon to open up font management just because I followed your instructions, but I couldn’t have found the font management easily without them. I love icons, but this is only visible with a label.

Cc @annezazu

[annezazu]

Thanks for flagging. Going to tag in @WordPress/gutenberg-design to follow up here. I agree that we should improve discoverability but can't speak to design considerations.

[annezazu]

Ah! Apologies. I just saw this as soon as I wrote this of course: #58158 (comment) I think this is a solid approach.

[carolinan]

I was viewing a livestream by a WordPress contributor who is an educator and teaches people to use WordPress and even though I was guiding them they really struggled with finding the button.

[paaljoachim]

Switching to text will very much help. The Aa seems more decorative than it is actually a link. I have myself wondered about this icon earlier as it just did not seem like a link. Especially when as it is on the line with the FONTS heading.

I really like the Manage all fonts blue outlined button which Andrea suggested above. It is big and it gives a very good hint to the user to click the button to manage all the fonts.

[annezazu]

Can we close this out in favor of #58082 ? There are a few discussions happening, making it hard to keep track of feedback, designs, and attempted PRs.

[t-hamano]

Can we close this out in favor of #58082 ? There are a few discussions happening, making it hard to keep track of feedback, designs, and attempted PRs.

I also think that we should concentrate the discussion on one issue. Isn't the first reported issue #55179 appropriate?

[afercia]

No objections to closing this issue in favor of #55179 as long as the feedback on this issue is reported there. To me, the part about proliferation of icons pointed out in comment #58082 (comment) is important as well as the proposed soluton to use buttons with visible text.
I updated the labels on #55179