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.

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.