Plug-ins, Hosts, Apps,
Hardware, Soundware
Developers
(Brands)
Videos Groups
Whats's in?
Banks & Patches
Download & Upload
Music Search
KVR
   
KVR Forum » DSP and Plug-in Development
Thread Read
Button design basics
Goto page 1, 2  Next
zmarx
KVRist
- profile
- pm
- www
PostPosted: Thu Apr 12, 2012 5:29 am reply with quote
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 Smile ). 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!
^ Joined: 19 Mar 2005  Member: #62027  Location: Vienna, Austria
arakula
KVRAF
- profile
- pm
- e-mail
- www
PostPosted: Thu Apr 12, 2012 6:22 am reply with quote
"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...
----
"Until you spread your wings, you'll have no idea how far you can walk."
^ Joined: 16 Aug 2004  Member: #37236  Location: Vienna, Austria
duncanparsons
KVRAF
- profile
- pm
- e-mail
- www
PostPosted: Thu Apr 12, 2012 7:04 am reply with quote
real world has finger shadows, but you never see that on GUIs

Maybe you could buck the trend Smile
----
^ Joined: 11 Apr 2003  Member: #6706  Location: now on the flat
phlake
KVRist
- profile
- pm
PostPosted: Thu Apr 12, 2012 8:56 am reply with quote
duncanparsons wrote:
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.
^ Joined: 18 Dec 2006  Member: #132797  
duncanparsons
KVRAF
- profile
- pm
- e-mail
- www
PostPosted: Thu Apr 12, 2012 10:33 am reply with quote
[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]
----
^ Joined: 11 Apr 2003  Member: #6706  Location: now on the flat
mystran
KVRAF
- profile
- pm
- e-mail
- www
PostPosted: Thu Apr 12, 2012 10:42 am reply with quote
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:



 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.
----
<- my plugins | my music -> @Soundcloud
^ Joined: 11 Feb 2006  Member: #97939  Location: Helsinki, Finland
VitaminD
Pick Me Pick me!
- profile
- pm
- www
PostPosted: Thu Apr 12, 2012 11:09 am reply with quote
duncanparsons wrote:
real world has finger shadows, but you never see that on GUIs

Maybe you could buck the trend Smile


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.
----
"Use the talents you possess, for the woods would be very silent if no birds sang except the best." - Henry Van Dyke
^ Joined: 11 Mar 2002  Member: #2027  Location: in a state of confusion
AdmiralQuality
KVRAF
- profile
- pm
- e-mail
- www
PostPosted: Thu Apr 12, 2012 11:38 am reply with quote
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.
^ Joined: 10 Oct 2005  Member: #83902  Location: Toronto, Canada
mystran
KVRAF
- profile
- pm
- e-mail
- www
PostPosted: Thu Apr 12, 2012 2:11 pm reply with quote
AdmiralQuality wrote:
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. Razz
----
<- my plugins | my music -> @Soundcloud
^ Joined: 11 Feb 2006  Member: #97939  Location: Helsinki, Finland
AdmiralQuality
KVRAF
- profile
- pm
- e-mail
- www
PostPosted: Thu Apr 12, 2012 3:29 pm reply with quote
mystran wrote:
AdmiralQuality wrote:
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. Razz


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.
^ Joined: 10 Oct 2005  Member: #83902  Location: Toronto, Canada
ouroboros
KVRAF
- profile
- pm
- www
PostPosted: Thu Apr 12, 2012 3:56 pm reply with quote
VitaminD wrote:
duncanparsons wrote:
real world has finger shadows, but you never see that on GUIs

Maybe you could buck the trend Smile


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.
Smack
----
^ Joined: 15 Apr 2003  Member: #6777  Location: -on the outside looking in
VitaminD
Pick Me Pick me!
- profile
- pm
- www
PostPosted: Thu Apr 12, 2012 4:01 pm reply with quote
ouroboros wrote:
VitaminD wrote:
duncanparsons wrote:
real world has finger shadows, but you never see that on GUIs

Maybe you could buck the trend Smile


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


It is a good idea and you know it.. deep down.. somewhere.. you do.. you just don't know it yet Razz
----
"Use the talents you possess, for the woods would be very silent if no birds sang except the best." - Henry Van Dyke
^ Joined: 11 Mar 2002  Member: #2027  Location: in a state of confusion
ouroboros
KVRAF
- profile
- pm
- www
PostPosted: Thu Apr 12, 2012 5:14 pm reply with quote
"..because everybody needs a hand sometime!"
----
^ Joined: 15 Apr 2003  Member: #6777  Location: -on the outside looking in
zmarx
KVRist
- profile
- pm
- www
PostPosted: Tue Apr 17, 2012 1:37 am reply with quote
"Look what they've done to my thread, ma, look what they've done to my thread ..." Smile

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.
^ Joined: 19 Mar 2005  Member: #62027  Location: Vienna, Austria
phlake
KVRist
- profile
- pm
PostPosted: Tue Apr 17, 2012 10:34 am reply with quote
mystran wrote:
That's what I do, because I think it's retarded that you have to hover to see the value. :P

Hear, hear!
^ Joined: 18 Dec 2006  Member: #132797  
All times are GMT - 8 Hours

Printable version
Page 1 of 2
Goto page 1, 2  Next
Display posts from previous:   
ReplyNew TopicPrevious TopicNext Topic
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
Username: Password:  
KVR Developer Challenge 2012