A rule for everybody who’s thinking about styling a button

I wish there was a rule from the start when designing KDE4. Whenever you really really need to not use one of the already very nice default Oxygen style buttons, and can find no way around actually creating your very own custom look button, please, PLEASE do it all the way and make sure it has unique, clear looks for the normal, hover and pressed down state.

Looking at the 4.2 desktop now I see so many widget elements breaking this rule. The most obvious (and possibly also the most important) is the start button – which has only one hover picture. When you press it you get no feedback at all, and the mental image I get every time I click that button is hitting my fist against a brick wall (why? it’s hard to explain, it just feels so hard and unmovable without the proper visual feedback).

Actually, when I think about it, this is actually the same for _all_ the buttons I have on my bottom panel. Including the systray expander button, which actually doesn’t even have a hover state. The task list is an exception, that one is actually doing it right. (Not that that one gives me a lot of feedback either with the all too subtle color change it has, but that’s really a problem with the current style, and not kde by itself).

A quick end note, to be honest, this was actually the kind of things I set out to fix when I slowly started KDE development some time back with ui improvements to Ark. I eventually got stuck maintaining ark instead, and these small annoyances that I have been thinking about for way too long, had to wait in the back of the queue while Ark was getting fixed from the bruised and bad condition that I found it in.

About these ads

5 Responses to “A rule for everybody who’s thinking about styling a button”

  1. Ed Says:

    I agree that it’s annoying that most of the plasma widgets do not respond to a mousedown event. Equally annoying is when oxygen buttons are pressed, the button looks pressed but the label remains static.

  2. Aaron Seigo Says:

    “Including the systray expander button, which actually doesn’t even have a hover state.”

    that’s actually not true. =)

    “the start button”

    that’s not actually a button, though, but an icon. i really don’t want them looking like push buttons either because that causes all sorts of other annoyances as you places things around the plasma canvas.

    i’ll probably end up doing something like what i did for kicker and make the icon “pinch” when pressed.

    good news is that pretty nearly all the buttons on your panel use the same class, so we have very few places to fix it.

  3. Matt Williams Says:

    The place I’ve really noticed this is the NetworkManager applet. There’s next-to-no visual feedback when clicking on anything in that box. To the point where I can’t even tell what’s a button and what’s not.

    To confuse matters more, there’s elements in there which have a hover response but AFAICT do nothing (e.g. the padlock symbol in the wireless section).

    Having tooltips for any of these elements would also help.

  4. zak89 Says:

    ” ‘Including the systray expander button, which actually doesn’t even have a hover state.’
    that’s actually not true. =)”

    However, the hover state is extremely hard to detect. I was not even aware the expander button was clickable for some time. I thought it was a static image.

    I agree, the panel needs some better UI feedback.

  5. Harald Says:

    @Aaron:
    The fact that I actually didn’t notice the hover effect at all is maybe a hint by itself.
    Anyways, just because things have push-down states doesn’t mean they have to start looking like pushbuttons. It would be enough to just overlay the icon with a strong blue color (or any suitable color coming from the palette) in the push down state, and it would feel much more like I’m actually pushing something when it’s clicked.

    Aren’t there any usability experts who already pointed out these things?

Comments are closed.


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: