[RFC] Redesign toolbox with smaller icons and no text

[irgolic]

Changes:

• smaller icons
• no text below icons
• workflow info and align to grid buttons removed

Workflow info is accessible by CMD+I and File -> Workflow Info. I suppose align to grid should be added to one of the top menus. I don't find the action useful as it is right now, I think it should either be removed or replaced with the idea originally described in biolab/orange3#4154.

Also, I've changed ToolGrid to inherit QWidget instead of QFrame. This was the only way I could find which removes an annoying 8-pixel bottom margin. Does this break anything?

[borondics]

Wouldn't this change make it harder to new users to become familiar with the widget functionality? The icons are not intuitive enough to always figure out what is what.

[irgolic]

The toolbox isn't a good tutorial for Orange. Names are still instantly visible on hover in the help menu, and in the tooltip. (also honestly, a personal pet peeve of mine is delivering an interface for tool selection where names elide)

This way, more widgets are visible at the same time, and the structure seems clearer. I'd like to move in the direction of tools like Photoshop, which don't put the names of tools below their icons. Perhaps even grouping widgets like File, CSV, SQL, Datasets.

I agree that for this to work well, you need good icons. If you think a specific icon doesn't make sense and can think of a better idea, do tell, we're currently in the process of reevaluating icons.

How do you use the toolbox?

[janezd]

While it looks great, even I, as a frequent user, have would problems with a few icons in almost every tab.

Adobe's icons (I only use Illustrator) are easier because they refer to graphical elements, but even there colors and swatches and symbols confuse me. But I fear the experience with Orange without labels would be more akin to using Finale (music notation software) where nothing was obvious and if I haven't used it for a month I had to learn it anew.

Most importantly, other software based on canvas (e.g. Oasys) may have problem with that if its icons are not distinct enough.

I still like how it looks. What about having small icons without text as an option?

[borondics]

@irgolic, I agree, the text definitely shouldn't be a replacement for a manual. The problem for me with the icons is not that they don't represent the methods well (for that matter you could use animals, once I learn that cat means PCA, I'll remember) but they are certainly not intuitive for people who didn't use them or used them only a few times to figure out or remember they do.

Personally, I use the search box to add widgets to the canvas the most, so I need to know the name of the widget. Then, sometimes I need to browse the toolbox for some functionality I need and even then, having the names I need to actually open the widget to see if it is the right one.

@janezd has a very good point for other 'mutations' of Orange. OASYS is one, where all the widgets are different and their icons might not be as well designed as core Orange icons. With toolbox oriented 'mutations', like Quasar, the users have very little knowledge about actual machine learning, so for them it would be even harder to relate to the no-text icons.

Over all, I think having it as an option, to turn off the names, it would be great. Maybe some A/B testing would be interesting in this case? Orange has enough DAU for that...

[ajdapretnar]

In big favour of A/B testing. Orange could really benefit from it.

[irgolic]

I've recently come across Houdini, a 3D animation application, look at what they do with their toolboxes:

By having a one-line horizontal toolbox, they make the buttons wide enough for text not to elide. That said, category titles still elide (I'd make these behave similarly if I were them).

Could you imagine Orange having a similar toolbox, on the top, or on the bottom of the canvas?
Qt allows drag-and-drop rearranging of window elements like the toolbox, but the toolbox currently only supports being placed on the left and right of the window. I'd make it such that it's on top by default, with a design similar to Houdini, and can be dragged to the left and right, where it loses labels and behaves as in this PR.

Of course, this ignores the issue of where to place the help menu and annotation/pause buttons.

Over all, I think having it as an option, to turn off the names, it would be great. Maybe some A/B testing would be interesting in this case? Orange has enough DAU for that...

In big favour of A/B testing. Orange could really benefit from it.

Orange does indeed have enough DAU. Does anyone know of any examples of A/B testing in open source projects?