7

I've noticed some web sites neglect adding an "active" state on certain buttons or links; the visual effect when the button is pressed, usually making the button look like it's being pushed in physically (usually via the CSS :active selector). As an example you can try to click the "ask question" button on the top right of this site; it grows darker as you hover, but upon click there is no visual effect.

jQuery UI's Button Widget is a good demo of buttons with an active state (though their active state doesn't particularly give the impression they're "pressed").

I'm wondering now, is the active state just a visual flair to improve experience or does it aid affordance of button-like controls?

Improve this question

3 Answers 3

Reset to default
3

Both.

It's visual flair as well as confirming the affordance a button typically provides. In my experience however; I have on varying occasions pressed a button with an active state and received nothing in return, no action took place. This led to false affordance and at that point the active state lost its value.

The point is that the active state is only as valuable as the sum of its parts. If the active state were removed and the button behaves as one would assume a button behaves (response times are critical), it becomes a moot point and visual flair would surface as the primary basis for adding the active state within your button.

Improve this answer
3

Having a down/pressed "active" state on a button absolutely provides an additional affordance and makes the site seem more responsive. This is doubly-true on touch devices, where the concepts of "direct manipulation" and skeuomorphic UIs mandates that things are made to feel as close to their real-world counterparts as possible. It also gives you a tiny bit of immediate feedback that yes, in fact, you DID successfully push the button.

Also, check out this related question for more interesting discussion: "When is it a good idea to perform actions on mouse-down?"

Improve this answer
1
  • 1
    I often find myself clicking buttons just to see if they go down (and moving my mouse away to avoid actually performing the action). I've wondered if it's as noticeable for people without the eye for such details though.
    – Ben Brocka
    Dec 9, 2011 at 15:27
1

As I've mentioned elsewhere, users are fundamentally distrustful of applications, which have a horrible habit of not working as expected. Things like button rollover states both confirm that the application is responsive, and reinforce the assumption that it will react as expected.

Actual 3D effects are probably more eye-candy than anything else, as I don't think there's a need for an affordance with physical buttons (button pushing = precursor to an action isn't something humans have experienced for more than 150 years).

As for persistent 'pushed' states, they work well when there's a large list of buttons (eg navigation items), and the user benefits from a subtle reminder which one they've picked (ini our example, which page in a navigation structure the user is reading).

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.