Use widget rollover to hide/add UI feedback #38070

New Issue

William Reynish · 2014-01-04T20:58:20+01:00

William Reynish commented

2014-01-04 20:58:20 +01:00

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)

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: ![number_field_rollover.png](https://archive.blender.org/developer/F61208/number_field_rollover.png) A moving example of this can be seen below: (click to view) ![number_field_rollover3.gif](https://archive.blender.org/developer/F61925/number_field_rollover3.gif) Icon-only buttons: ![Button_no_bg.png](https://archive.blender.org/developer/F60661/Button_no_bg.png) Highlighting can also be added more places, such as the headers in the Properties editor: (click to view) ![panel_anim_render.gif](https://archive.blender.org/developer/F61900/panel_anim_render.gif)

William Reynish commented

2014-01-04 20:58:20 +01:00

Changed status to: 'Open'

William Reynish commented

2014-01-04 20:58:20 +01:00

Added subscriber: @billrey

Jonathan Williamson commented

2014-01-04 21:03:50 +01:00

Added subscriber: @JonathanWilliamson

Bartosz Moniewski commented

2014-01-04 22:06:21 +01:00

Added subscriber: @BartekMoniewski

Tillmann Schütz commented

2014-01-04 23:16:42 +01:00

Added subscriber: @ionarn

Campbell Barton commented

2014-01-05 07:33:44 +01:00

Added subscriber: @ideasman42

Campbell Barton commented

2014-01-05 07:33:44 +01:00

+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.

+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.

Jonathan Williamson commented

2014-01-05 16:50:08 +01:00

This looks good to me.

michael knubben commented

2014-01-13 17:28:09 +01:00

Added subscriber: @michaelknubben

michael knubben commented

2014-01-13 17:28:09 +01:00

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?

Paweł Łyczkowski commented

2014-01-23 22:31:48 +01:00

Added subscriber: @PawelLyczkowski-1

Bastien Montagne commented

2014-01-25 21:43:38 +01:00

Added subscriber: @mont29

Forest Ka commented

2014-01-26 05:31:06 +01:00

Added subscriber: @forest-ka

Sergei Smyslov commented

2014-02-17 07:57:04 +01:00

Added subscriber: @Luarvik

CodeManX commented

2014-02-19 17:02:28 +01:00

Added subscriber: @CodeManX

CodeManX commented

2014-02-19 17:02:28 +01:00

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:

http://lists.blender.org/pipermail/bf-committers/2014-February/042875.html

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):

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: http://lists.blender.org/pipermail/bf-committers/2014-February/042875.html 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): ![Widget_Rollover_Proposal.png](https://archive.blender.org/developer/F78102/Widget_Rollover_Proposal.png)

Pablo Vazquez commented

2014-02-19 17:10:10 +01:00

Added subscriber: @pablovazquez