Hi,
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.
3 Likes
@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.
1 Like
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?
1 Like
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.
3 Likes
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.
2 Likes
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.
1 Like
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!
2 Likes
Hi everyone,
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')
4 Likes
I am planning to look at how we can leverage / extend the qt-material package during the upcoming project week.
3 Likes