a11y - Icon for toolbar button "user" - cms ui

[Wagner3UB]

Describe the bug The icon shows a "profile icon" but it doesn't represent the real function. When clicked, this button shows a series of options, including "profile", but not only.

PS.: A discussion was made at Salamina Sprint. Please read the comments below.

Expected behavior An icon that shows a gear/engine, for example, would be more representative to show the options panel.

TO DO: -> Change the wording from "username" to "Settings" for the lower-left text for authenticated users. -> Change the icon from the head and shoulders (bust, user) icon to a settings icon, either https://github.com/plone/volto/blob/master/src/icons/settings.svg for Volto or https://icons.getbootstrap.com/icons/sliders/ for Classic UI. Alternatively for Classic UI, https://icons.getbootstrap.com/icons/sliders2-vertical/.

Screenshots If applicable,

Software (please complete the following information):

Volto Version 17.0.0-alpha.19 Plone Version 6.0.4

[abhinaisai2002]

I am working on this issue

[abhinaisai2002]

I used the gear svg image like this

[davisagli]

@sneridagh I think we need some design input here. There is a PR ready but I'm not sure if it's what we want design-wise or not.

[stevepiercy]

First I agree that the current head and torso icon is not the right one. It originated from Plone Classic UI, which I always felt was wrong, too, because it combines the logged in user's Preferences and Information, their Dashboard, and if an Administrator then the Site Setup as well. I can still remember being a newbie wondering where the heck do I configure this new Plone site?

Personally, I think the Site Setup should be its own menu and icon, and not nested under the Authenticated User menu and icon. I have no desire to push my opinion further.

---

Anyway, back to this repo, we already have some guidance.

• https://github.com/plone/volto/blob/master/src/icons/00%20-%20icons%20sheet.png
• https://github.com/plone/volto/blob/master/src/icons/README.txt which points to https://pastanaga.io/icons/

I see two possible icons, there may be others.

• configuration.svg
• settings.svg

I don't know which is better. Both visually and with its name, configuration.svg makes more sense to me, as we are configuring our user Profile, Preferences, and the Plone site.

In any case, I think this is going to take a some more discussion between Volto, Classic UI, and UX teams to reach a decision. The left-hand navbars should not be too different between the two UIs.

[sneridagh]

I agree with Steve that it's not an easy one, and both UIs have to sync.

For the record, in Quanta itself, the differentiation is also present. This is the spec from Albert:

https://www.figma.com/file/YpaRSKjFcFaAkVYnTSVGuz/Volto-UI-%E2%80%93-Quanta?type=design&node-id=1812-1076&mode=design&t=QausnnRVFvudgmXq-4

[davisagli]

@sneridagh I don't understand the distinction that is made in the quanta design. It says "with cog on in case of editor" but does not explain what it has to do with being an editor or not. Since the design doesn't show what opens after clicking on both icons, it's not clear what functionality they are meant to access.

[sneridagh]

@davisagli not editor as person but CMSUI /edit view.

@Wagner3UB I gave this a thought and while it's true that the "person" icon does not match to what's behind that menu if you don't think of them as "personal tools" which I think it was the original intention both in ClassicUI and in Volto. One could argue that the "site setup" is not a personal tool if you are manager...

@davisagli The fact of having two kind of icons reasoning I think it comes that while on edit is not useful to have the personal tools menu available since you are not going to make use of it. The cog in Quanta is only shown in /edit context, since it open/closes the right CMSUI sidebar.

[Wagner3UB]

@sneridagh I believe the confusion arises exactly for the reason you described. Inside, there isn't just one type of information to be modified, and it becomes quite challenging to correctly identify this action using only one image. Site settings, in general, and user identification are distinct things but are often found on the same viewing screen.

In general, considering UX/UI, I would look for how to change my user settings within the site configurations, however, I wouldn't go into the users' tab to modify, for instance, the menu or the footer of my site. And that's the point, the icon represents a very specific area USERS, and regarding this action as only as "personal tools" doesn't cover, for example, the language change for an entire site or, as mentioned earlier, altering a menu.

[stevepiercy]

I chatted with the Classic UI team. We discussed two paths, short-term and long-term.

For short-term, we agreed that two changes would be helpful:

1. Change the wording from "username" to "Settings" for the lower-left text for authenticated users.
2. Change the icon from the head and shoulders (bust, user) icon to a settings icon, either https://github.com/plone/volto/blob/master/src/icons/settings.svg for Volto or https://icons.getbootstrap.com/icons/sliders/ for Classic UI. Alternatively for Classic UI, https://icons.getbootstrap.com/icons/sliders2-vertical/.

For a long-term plan, there are some issues with registering the Site Setup that require some careful thought and planning. Ideally, Site Settings would have its own menu item, promoted from username > Site Setup, located in the lower left as a sibling to User Settings. This would be a good conversation to have at a sprint or PloneConf.

[Wagner3UB]

I'll transcribe the discussion from yesterday during the Salamina Sprint regarding this topic:

• We will NOT change the icon, at least for now. It will remain a product choice.

  • The decision was made because clients are already used to using this button to navigate the "site/user settings," and only admins can see the "site" settings. Therefore, this icon will remain unchanged for now, as it already covers most use cases.

• The improvements will be focused on assistive technologies only.

  • We need to better understand and refine the labels to accurately describe what this icon does, whether the user is a regular user or holds a specific position, such as an admin.

If anyone in the meeting wants to add something, feel free to provide the information @JeffersonBledsoe @tisto @sneridagh @ichim-david

[JeffersonBledsoe]

Just came up with another question. Should the label still be "Personal Tools", or can it be more generic/ obvious from the icon? Thinking about the voice input case where a user may want to say "Click Personal Tools", the chances of somebody not familiar with Plone guessing it is called "Personal Tools" is unlikely, while existing Plone users may assume it is Personal Tools and not something else. Voice input does generally have the fallback of just clicking a particular section of the screen, but we should try to see if we can make it obvious

[sneridagh]

@JeffersonBledsoe That's how it was called for more than twenty years :) However, I recall that we decided to go for something more meaningful in the aria-label message.

Any suggestion?

[stevepiercy]

@sneridagh it was already decided in https://github.com/plone/volto/pull/6346#discussion_r1782478481