2

Examples:
- https://dribbble.com/shots/5364117-Compose
- https://dribbble.com/shots/433877-Introducing-Tweebie/attachments/34845
- https://dribbble.com/shots/472747-Download-and-Share-Buttons
- https://dribbble.com/shots/237766-Navigation-Duo
- https://dribbble.com/shots/66468-Concrete-blog
- https://dribbble.com/shots/4030219-Removing-Mud
- https://dribbble.com/shots/103722-Blog-Preview
- https://dribbble.com/shots/1476443-Footprints

I'm new to design. And I know this kind of buttons and icons are kind of out of fashion today, but I'm still curious. Why did people make buttons that looked pressed by default, when they're not yet pressed? What are the reasons for / advantages of doing this?

  • I would say "Why not". All kind of physical buttons out there... You need a thin wire to press most physical reset buttons.... – Joonas May 17 at 17:06
  • Some physical buttons are recessed a bit, so in a skeuomorphism-like design, these all make sense to me. It might also be somewhat reactionary to not wanting to look like the 3D-ish designs of Windows 95/98 buttons. – Scribblemacher May 17 at 17:32
  • "Because they can" :) It's kind of like asking why someone chose blue instead of red.. they thought it looked better. – Scott May 17 at 18:35
  • @Joonas Thanks for taking the time to answer my question. But wouldn't it make it unclear that the button is clickable? Do users intuitively understand that it looks pressed but they can still click it? – Min Andy Choi May 17 at 18:44
  • @Scribblemacher Thanks for taking the time to answer my question. I had never realised some physical buttons were indeed slightly recessed before. But wouldn't it make it unclear that the button is clickable? Do users intuitively understand that it looks pressed but they can still click it? – Min Andy Choi May 17 at 18:45
1

It's really all relative.

A designer may choose a specific visual appearance for no other reasoning than they feel it looks "better" or suits the overall concept more adequately. There often isn't a hard and fast "rule" one has to follow - such as all buttons MUST appear raised.

The important aspect, especially with skeuomorphism, is that the object appears different or "actionable". Raised or depressed isn't as imperative as focus/rollover much of the time.

It is just as valid a design choice to have a switch down and the user flips it up, as it is to have the switch up and the user flips it down.

Context is used to make either action seem plausible/viable.

  • A raised button may indicate that by clicking it the user "delves into" that content.

Conversely...

  • A depressed button may indicate that by clicking it the user brings that content "forward".

Neither is incorrect or "better".

  • If you had a raised button and a depressed button that would both send the user to a different page/screen, would you use a different transition for each button? – Min Andy Choi May 17 at 19:14
  • Well, consistency is important. All buttons should match (raised or depressed) given their current state - so all look the same except perhaps the active item. The transition would be the same but merely reversed based upon current button state. – Scott May 17 at 19:26
1

Interesting question.

My theory is that it is inheriting real-life design elements.

A lot of software interfaces, which we now call UI, has a real-life counterpart. Desk, Mouse, File, etc.

A real-life gadget needs a tactile input so you know where the button is even if you are blocking the view with the same finger you are using to press a button.

Sometimes you had a big fat crank, or you have a membrane button https://www.google.com/search?q=membrane+button which are upwards.

But sometimes having a button that goes beyond the level of the surrounding area might be pushed by accident. So you need to make a valley for it. (They feel nicer, by the way)

So a good industrial design interface is a "sunk" button, not really pushed, but sunk.

A lot of gadgets use that concept. So if your interface wants to look gadget-ish, you have a style to explore.


It is also interesting that the way you could potentially mark that button as active, is not by the shadows, but changing color, probably making it glow... gadget-style again.


One thing that potentially makes the design fail is a reference.

If the button is the only one present, it has no context on how the button looks when not active.

If you see more buttons next to each other and one is active by default, the difference is clear.


An additional comment. As UI designer you need to differentiate the terms pressed, depression, active, default, "up and down". They are all different.


Another really interesting concept is that a pressed button could be the real default "un-active" or "off" state.

If you have some switches, lever-like, on a wall (imagine an old nuclear reactor panel) the off status would be the lever down.

A series of buttons could be also down as default position. So you only activate some of them to be on the up position.

Going a bit deep on a real case scenario, this could have some safety reasons, For example, the safest status could be the off switch, if something hit the panel, the helmet of a worker, it is safer than the object falling turn off a switch instead of turning on the self destruct one (something similar to the gadget reason)

  • Thanks for your answer! I'll definitely explore that style – Min Andy Choi May 17 at 19:10
  • I just realized you are the one asking about the "pressed" status on that same image :o) – Rafael May 17 at 19:20
0

Speaking for myself, I show a button depressed to indicate:

That the virtual button could be depressed to cause the indicated state of the display.

and

That an activated virtual button would look like when activated.

I would show such a situation in comparison to other pictured buttons to reinforce appearance of the difference. I wouldn't show an isolated instance of the state of a two-state switch without the appearance of the alternate state. I would expect such illustrations to accompany user instructions and illustrated How-To procedures.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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