Button design basics

[zmarx]

Hi there!

I am working on my first VST plugin and I decided to do the graphic design myself (I was after a bit of fun with Blender ). Designing my first button I already stumbled across a problem - let's say a solo button to have an example.

I'd like to give the user feedback when he is hovering over the button, so I made four images:






Whenever the user hovers over the button, the button is pushed down. The color of the "S" changes with the state of solo. This has the right level of feedback, but the handling still feels odd and by no means "real-worldy" - you just don't push something down by just hovering over it.

So I am currently thinking of only having the
* "lit & pushed down"-button for "Solo on" and the
* "not lit & not pushed down"-button for "Solo off"

BUT what graphic change could I use to supply "mouse hovering feedback"? What kind of thing do you guys do?

Many Thanks!

[arakula]

"Real-worldly"? In the real world, if my finger hovers above a button, there's no feedback. And it is most definitely not pressed. If I'd try to mimick the real world, there'd simply be no "hovering" state.

Possible visual clues: change the button's color, make it blink or wobble, change the area around the button (focus rectangle in whatever shape and elegance), change the cursor shape. Whatever you like.

But don't pretend the button has been pressed.

If necessary, I'd simply change the cursor to a "you can click me!" shape as a visual indicator, but I'm not a GUI guy...

[duncanparsons]

real world has finger shadows, but you never see that on GUIs

Maybe you could buck the trend

[phlake]

real world has finger shadows, but you never see that on GUIs

But you can see the mouse pointer. I don't see any value in a hover state -- it's pretty obvious where the mouse is pointing.

[duncanparsons]

[I wasn't being /entirely/ serious! I agree overall, hover over stuff is a sweetener that few of us need, but having said that sometimes small visual clues can help one determine whether a function is actually available or disabled]

[mystran]

For hover state the normal things to do is one or more of the following:

- slight lighting highlights (light colors, subtle glow etc)

- underlined text (doesn't necessarily work so great with buttons though)

- change of mouse cursor

Normally you want these things to be fairly subtle though.

Also consider that for a basic button you normally have 4 states: idle, hover, pressed and "cancelling." I don't know what to properly call the last one, but pressed down then mouse moved outside without releasing; moving mouse back to the button while still dragging makes it back to pressed state, while releasing mouse outside the button just returns to idle without generating an activation event. Eg the state machine would be something like:

Code: Select all

 idle: mouseEnter -> hover

 hover: mouseExit -> idle
        mouseDOwn -> pressed

 pressed: mouseUp -> hover (generate activation)
        mouseExit -> cancelling

 cancelling: mouseUp -> idle
          mouseEnter -> pressed

Obviously you need a mouse-capture for pressed/cancelling states to get the necessary events and prevent other controls from transitioning to "hover" state and in practice you'd also transition from cancelling to idle when capture is lost.

[VitaminD]

real world has finger shadows, but you never see that on GUIs

Maybe you could buck the trend

GREAT idea.. we need a VST plugin wrapper that allows for the usage of a giant, 3d hand to take the place of the mouse cursor.

[AdmiralQuality]

As a hover effect, I find a displaying a tooltip showing the full name of the control and its current value to be much more useful than just hilighting the control, which you already can see you're hovering over.

[mystran]

As a hover effect, I find a displaying a tooltip showing the full name of the control and its current value to be much more useful than just hilighting the control, which you already can see you're hovering over.

Well, doesn't apply if you show the names and values of all controls all the time anyway. That's what I do, because I think it's retarded that you have to hover to see the value.

[AdmiralQuality]

As a hover effect, I find a displaying a tooltip showing the full name of the control and its current value to be much more useful than just hilighting the control, which you already can see you're hovering over.

Well, doesn't apply if you show the names and values of all controls all the time anyway. That's what I do, because I think it's retarded that you have to hover to see the value.

Real estate to display everything in full rapidly becomes an issue in plug-ins with large numbers of parameters, or in any host. That's why the button is labeled "S" instead of "Solo". But if you ROLL OVER it, it could say "Solo", thus helping some newb who's new to the mixing board paradigm.

[ouroboros]

real world has finger shadows, but you never see that on GUIs

Maybe you could buck the trend

GREAT idea.. we need a VST plugin wrapper that allows for the usage of a giant, 3d hand to take the place of the mouse cursor.

[VitaminD]

real world has finger shadows, but you never see that on GUIs

Maybe you could buck the trend

GREAT idea.. we need a VST plugin wrapper that allows for the usage of a giant, 3d hand to take the place of the mouse cursor.

It is a good idea and you know it.. deep down.. somewhere.. you do.. you just don't know it yet

[ouroboros]

"..because everybody needs a hand sometime!"

[zmarx]

"Look what they've done to my thread, ma, look what they've done to my thread ..."

Many Thanks for the replies and the ideas - I learned: Subtlety is key, so pushing the button just to give hover feedback is definitely over the top ... I guess I will go with a subtle change in lighting AND I like the tooltip idea.

[phlake]

That's what I do, because I think it's retarded that you have to hover to see the value. :P

Hear, hear!