Page MenuHome

Use widget rollover to hide/add UI feedback
Closed, InvalidPublicDESIGN


In Blender, hovering the cursor over a UI item highlights it. This is quite nice, because it's clear which item will be interacted with when clicked.

However, some of the UI widgets don't give proper feedback when hovering the cursor. For example, number fields highlight the entire widget when hovering over it, even though it consists of three distinct areas (left arrow, text field, right arrow). The problem is that the current highlighting gives a false sense that clicking the button anywhere does the same thing. This can lead to user error and confusion when attempting to interact with these fields.

Also, when buttons have no background (icon only), there's no highlighting and pressed state. This makes it unclear if a button has been pressed or not.

Proposed solution:
Use rollover to hide/add useful feedback:
Number fields:

A moving example of this can be seen below:
(click to view)

Icon-only buttons:

Highlighting can also be added more places, such as the headers in the Properties editor:
(click to view)

Event Timeline

+1 for this proposal, Blender buttons already highlight when you move your house over them, (file browser too) so I'd consider this in keeping with existing UI design.

There area areas IMHO which are not at all clear (as noted in this proposal), Number fields are the most obvious example - other suggestions in this proposal I'd consider lower priority but still worth doing.

Brecht Van Lommel (brecht) lowered the priority of this task from 90 to Normal.Jan 8 2014, 10:16 PM

Rather than completely hiding things such as the arrows, how about just dimming them? I find they're valuable in determining what type of field you're looking at. Is it a text-field that happens to contain numbers, is it a dropdown, is it a numeric field with arrows?

codemanx added a subscriber: codemanx.EditedFeb 19 2014, 5:02 PM

This would make it clearer to the user what to expact (data input or increment/decrement step?) and solve the problem with arrow button area:

But the numbers are aligned to the right now, making the arrows on both sides look a odd / unbalanced. I tried to improve on billrey's mockup and reduce the distance needed to step up/down by moving the arrows next to each other (as seen on OSX for scrollbars for instance):

Brecht Van Lommel (brecht) changed the task status from Unknown Status to Unknown Status.Oct 31 2018, 2:03 PM