I am a new Slicer user. I would like to suggest that buttons appear in color. It is hard to recognize that the Apply button needs to be clicked because it has the same color as the field labels and dropdown lists. See screenshot below. I noticed the same with other buttons.
@Ulli_Wagner thank you for providing your feedback.
I was helping Ulli navigate Slicer, and the other two situations where key buttons were missed was “Load” in DICOM Browser and “Restart” in Extension manager. I completely agree those are indeed very easy to miss.
Thank you for the feedback. It is very useful to get specific information about what be users find unintuitive.
We definitely need to solve the issue of having some buttons that are ready to miss.
I’m not sure if the proposed solution of changing the color is ideal, because we use a standard color scheme and usually when we modify such defaults then it tends to result in unfamiliar look&feel. Adding more colors would also go against current simple monochrome GUI design trends (the application may look odd and/or dated).
Maybe we could address the issues by changing the location or spacing of the widgets? For example, if we don’t show the textbox below the Apply button until the first run, increase the space around the button, and maybe if we make the button narrower then they button will be more noticeable. Also, maybe the “Apply” text of the button is not completely clear either?
Another alternative to color is to give a more prominent border or shading so it looks “pressable” and at-a-glance distinct from non-pressable UI elements.
(But with shading/borders also the wrong approach can easily lead to a tacky or dated look)
I’m thinking of something like the contrast seen here:
(a figure from this page)
All the objects that can be pressed have the same look with Qt classic widget styling. The Collapsible buttons (Inputs/Outputs/Advanced), push buttons (Show 3D/Apply), comboboxes (Segmentation Task) and checkboxes which are all take input share their look.
I think what is being requested is more along the design lines of primary/secondary/tertiary styling of buttons as in material design (Common buttons – Material Design 3). Where material design is often seen in Qt QML usage planned with figma (Creating Controls from Figma Design). It is easier to identify that “Apply” is the primary action and more important than the button that expands the Advanced section or others.
@jamesobutler you raise some good points. Qt classic widget style can distinguish the default action (which button is clicked if you hit Enter in the “form”), see for example in “Add data” window:
Maybe we should just make the
Apply buttons the default button? It would highlight the button with a color accent and it could be also useful to be able to run the module by hitting the Enter key.
Yes for certain situations defining the appropriate default action for a QDialog as you have shown is helpful. However the highlighting you show is based on the focus where the default action is the default focus. Clicking/tabbing elsewhere can change this highlighting focus. In the examples below the button primary color would remain even if the focus is elsewhere. There of course would be a slightly differently shade when it is focused/hovered/pressed/disabled.
Where in the situation of dialogs they would be stylized based on button role like:
The bigger topic is indicating levels of importance of buttons with different styling (such as different colors). There is GitHub - UN-GCPDS/qt-material: Material inspired stylesheet for PySide2, PySide6, PyQt5 and PyQt6 which tries to apply this type of styling with Qt classic widget styling, but really requires more stylesheet specification for various buttons on an individual basis to mark them as “Primary” buttons or “Secondary” buttons. That repo provides an example usage that would be like
self.main.pushButton.setProperty('class', 'big_button'). Currently we apply a QStylesheet that is applied to all buttons without defining individual customizations based on importance/button role.
To further add to this point, we have modules that has multiple “apply” like button (one for each step of the process). so maintaining focus on all of them won’t be possible.
In general similarity of these buttons to the general UI elements (and hence not noticing that there needs to be interaction) has been a common complaint in our community too.
Changing the apply button to upper case and bolder would work and tbh I found that after a few uses, it become intuitive to look for the apply button and if you’re using slicer alot much of the points above are resolved with familiarity.
But, is ‘Trending’ always a good thing… Colour palettes do need to be sensitive to the 7% of males with red/green deficiency, and a couple of other issues, but there are good guidelines for that. If not suing colour, then there needs to be some geometric, or typographic, differentiator for required/desired action buttons.
I guess that this forum is your ‘Focus Group’ ; we often found surprises when working with ‘trusted external reviewers’, people with no in-depth experience with applications. Big surprises
(I worked at Tektronix, Agilent, Rohde & Schwarz, and a big mobile phone company, where we did this type of work with new, or proposed, applications.)
All the best to you-all in 2023!
If you want to try what Slicer would look like using Material color schemes, you may be interested in the qt-material python extension (GitHub - UN-GCPDS/qt-material: Material inspired stylesheet for PySide2, PySide6, PyQt5 and PyQt6).
It can be used directly in Slicer’s Python console :
slicer.util.pip_install("qt-material") from qt_material import apply_stylesheet apply_stylesheet(slicer.app, theme='light_blue.xml')
I am planning to look at how we can leverage / extend the qt-material package during the upcoming project week.