Add possibility to display texts under icons for the tool buttons

[Iulian Onofrei]

Since I'm rarely using this app, it would immensely help to have the name of the tool under the icons.

 

Thread summary:
• The first step would be to implement this:

 

• A nice-to-have second step would be to implement this:

 

Edited July 6, 2023 by Iulian Onofrei
Provide thread summary

[Ezbaze]

You can hover over them, and it'll show you the tool name:

[Iulian Onofrei]

It doesn't make sense to have to do this for each and every tool until you find the one you're looking for, every time.

[Ezbaze]

Yes, I see how that could be frustrating, you can also change the time it takes for it to show up in the settings:

[GarryP]

How should the name of the tool be displayed under the tool button?

Should the button and text both be left-aligned, or centre-aligned, or something else?

Should the text be ‘a continuous unbroken line of characters’ or should it ‘wrap’ onto more than one line?

If it should ‘wrap’, at what point should it wrap? When it gets to a certain width (what width, and why that width?), or when it gets to a space (always first space, or not, and why?), or something else?

Can you show us a mock up of what, for example, the “Colour Replacement Brush Tool” button would look like with the text underneath it alongside/above/underneath other tools that also have their name displayed?

[Ezbaze]

@GarryP that is exactly what I was wondering about, there really isn't a way to this without making the sidebar wider

[Iulian Onofrei]

@GarryP, I don't know, I'm not a designer

[Iulian Onofrei]

@Ezbaze, maybe it would be easier to change it to a horizontal bar, similar to a browser bookmarks bar.

[GarryP]

1 hour ago, Iulian Onofrei said:

I don't know, I'm not a designer

...but you are the person asking for the changes to be done.

Customer: “I want you to make some alterations to my suit.”
Tailor: “No problem sir. If you just tell me how you want it altering…”
Customer: “No, I will not tell you how I want it altering. You will simply make some alterations and then I will tell you what you have done wrong.”

[GarryP]

1 hour ago, Iulian Onofrei said:

maybe it would be easier to change it to a horizontal bar

Switching the orientation of the Tools bar to horizontal, and putting the names of the tools at the side of the buttons (left or right), would mean having a scrollable Tools bar (a very long one in most cases) or a very deep panel which would take up a lot of valuable screen space.

I really can’t see that happening, or anyone wanting it.

As some kind of compromise, how about, when the user has the mouse over the Tools bar, if they don’t move the mouse for a few seconds the buttons are (temporarily) replaced (or overlaid) by some (small) text which gives an idea of the tool name. When the user moves the mouse the names go away so they can see the buttons again.

See attached image for a quick mock-up showing ‘before’ and ‘after’.

[fde101]

The classic way to handle this is to have a "Tools" menu in the menu bar which mimics the toolbar but lists the tools by name instead of using icons.

A more modern approach is a searchable pop-up menu that appears with one keyboard shortcut you would learn, which you could then start typing the name of a tool or menu command in order to find and switch to / execute it.

[Pšenda]

12 hours ago, GarryP said:

Can you show us a mock up of what, for example, the “Colour Replacement Brush Tool” button would look like with the text underneath it

My favorite is "Callout Rounded Rectangle Tool" 🙂

[Ezbaze]

Here's how it could look:

And honestly it isn't that bad

[walt.farrell]

25 minutes ago, Ezbaze said:

And honestly it isn't that bad

That would take up far too much space on any of the monitors that I use, and make the workspace too small (especially once the Left Studio is displayed).

[v_kyr]

23 minutes ago, Ezbaze said:

And honestly it isn't that bad

Well let's say mildly, it's a matter of taste, but for me it's wasting of space and redundant, as the icon button tooltips allready tell all that! - Another thing to keep in mind is, that apps should usually follow overall the common OS styleguides for such things and not the other way around. Aka not every app should make what it want's UI wise here, only since some people are short-sighted, or overall not used to dealing with the available usability specifics of some software.

[Ezbaze]

28 minutes ago, walt.farrell said:

That would take up far too much space on any of the monitors that I use, and make the workspace too small (especially once the Left Studio is displayed).

Yes this would definitelly require to have a larger monitor to use comfortably.

 

25 minutes ago, v_kyr said:

as the icon button tooltips allready tell all that!

That is the first thing i mentioned at the start of this topic, yes

 

27 minutes ago, v_kyr said:

common OS styleguides

Technically it does

Windows Apps List

 

Powertoys ( by Microsoft )

 

Windows Explorer:

 

These are all lists of Icon - Name which help to find what you are looking for

[v_kyr]

34 minutes ago, Ezbaze said:

Windows Apps List ...

Those are not in-app used tool panels, so IMO irrelevant here. - As far as I understood it, the OP asked about namings under the app internal tools panel icons and not common OS start panel or task bar app entry representations etc., which are different pairs of shoes here and either way handled by the OS!

Further Powertoys is here a bundle of apps, instead you would have more to show here how MS Office Word/Powerpoint/Excel etc. internally offered tool icons look.

With UI styleguides I meant more things like these here ...

• https://books.apple.com/de/book/apple-style-guide/id1161855204
• https://developer.apple.com/design/human-interface-guidelines
• Designing for macOS
• Toolbars
• Buttons
• ... etc.

And related to such tool panels ...

... which is common usage for graphics apps (here shown for GC).

[Iulian Onofrei]

18 hours ago, GarryP said:

...but you are the person asking for the changes to be done.

Customer: “I want you to make some alterations to my suit.”
Tailor: “No problem sir. If you just tell me how you want it altering…”
Customer: “No, I will not tell you how I want it altering. You will simply make some alterations and then I will tell you what you have done wrong.”

Incorrect. As a paying customer, I stated the problem and my use case.

[Iulian Onofrei]

17 hours ago, fde101 said:

The classic way to handle this is to have a "Tools" menu in the menu bar which mimics the toolbar but lists the tools by name instead of using icons.

A more modern approach is a searchable pop-up menu that appears with one keyboard shortcut you would learn, which you could then start typing the name of a tool or menu command in order to find and switch to / execute it.

Yesterday I thought about these exact approaches. Indeed, text near buttons would not be feasible, so, yes, the easiest and most obvious step towards an easier to use interface would be to have the tools in the menu bar, which would automatically allow users to search by them in the standard Help menu, which doesn't work now:

 

[Iulian Onofrei]

7 hours ago, Ezbaze said:

Here's how it could look:

And honestly it isn't that bad

Wow, this looks great! And it would not impact negatively if you're using a big monitor.

[Pšenda]

9 hours ago, Ezbaze said:

Here's how it could look:

Unfortunately, it doesn't match the OP's request.

On 7/4/2023 at 4:10 PM, Iulian Onofrei said:

it would immensely help to have the name of the tool under the icons.

 

9 hours ago, Ezbaze said:

And honestly it isn't that bad

The downside of your solution is that it must always display and take up space for the longest tool name, i.e. for "Callout Rounded Rectangle Tool", which you didn't show in your example. You could remove the word Tool from the description (it keeps repeating) and the keyboard shortcut (apparently the icon user doesn't use it and they are displayed in the Tooltip), but it could be confusing for some users.

[Return]

Options.
Practice more often and know the tools by heart.
or 
Make a screenshot of the UI >print out>add the tool names yourself with a pen>hang at your monitor with tape to prevent from losing.
 

[Iulian Onofrei]

4 minutes ago, Return said:

Options.
Practice more often and know the tools by heart.
or 
Make a screenshot of the UI >print out>add the tool names yourself with a pen>hang at your monitor with tape to prevent from losing.
 

Sorry. By "rarely using", I meant that my use case means that I use the app only once every 2-3 months, meaning that I don't need to use it more often, so it won't happen, so I won't get the practice you're mentioning.

[Return]

It wasn't meant as a joke although it may seem so but if you're not using it much and want to have the tool names, the printing is a good solution.
I have software that back in the day provided a laminated card with the tools and its shortcuts on it when the cd/dvd came in the mail.
 

[Ezbaze]

4 hours ago, Iulian Onofrei said:

Wow, this looks great! And it would not impact negatively if you're using a big monitor.

Thank you

----------

10 hours ago, v_kyr said:

• https://books.apple.com/de/book/apple-style-guide/id1161855204
• https://developer.apple.com/design/human-interface-guidelines
• Designing for macOS
• Toolbars
• Buttons
• ... etc.

It's funny how all of those are Apple related

----------

2 hours ago, Pšenda said:

Unfortunately, it doesn't match the OP's request.

It is actually, OP even said so

 

2 hours ago, Pšenda said:

The downside of your solution is that it must always display and take up space for the longest tool name, i.e. for "Callout Rounded Rectangle Tool", which you didn't show in your example. You could remove the word Tool from the description (it keeps repeating) and the keyboard shortcut (apparently the icon user doesn't use it and they are displayed in the Tooltip), but it could be confusing for some users.

I used the standard tools shown on the toolbar as it was easier to copy over / copy names over to Figma each one by hand, I did make it wrap in the Figma file with a max of 2 lines, below is the example with "Callout Rounded Rectangle Tool" included within the mockup

----------

@Return The example I showed would actually be a good way to learn, as you have both side by side, with the possibility of minimizing it when it gets in the way.

----------

 

Illustrator Actually does the same thing when you go to view all of the tools / add new ones to the toolbar, they also have a toggle that allows you to change between a grid/list of icons-text