-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fonts Library: Replace the Aa manage fonts icon with a button with visible text #58082
Comments
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: |
I'd like to do something entirely different. Trying to look at the broader picture: 1 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 3 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: |
Thank you for the detailed explanation! I do think your approach makes sense.
It may be a good idea to unify the "Edit something" and "Manage something" buttons that open modal dialogs using the secondary variation style. |
Thanks for your feedback @t-hamano I'd say that the wording should be consistent as well. Currently: 'Explore all patterns' vs. 'Manage fonts' where the 'all' is missing. Either we always use 'all' or we don't. |
Seems there is already feedback that the
Cc @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. |
Ah! Apologies. I just saw this as soon as I wrote this of course: #58158 (comment) I think this is a solid approach. |
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. |
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. |
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. |
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. |
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:Aa
icon doesn't really represent the concept of 'Manage fonts'.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 beat the top[Edit:] at the bottom of the list of the installed fonts.Step-by-step reproduction instructions
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
The text was updated successfully, but these errors were encountered: