Hot answers tagged

65

Your question revolves around signifiers for a button's design (i.e. hints that communicate what an element can do/how to interact with it). I assume your primary concern with buttons is that many of them are becoming flat, borderless areas of text or icons, which often lack many of these important signifiers that indicate clickability. There has been a ...


6

I'm expanding my comment on maxaathousand's answer as requested and have added some additional insight: The most important visual key to a button is contrast. This refers to: The button contrasting against the background behind it The button contrasting against surrounding elements and the whole page The text or symbol within the button contrasting against ...


4

You feel "uncomfortable" when observing an input looking like a button, right? In HCI they explain it with The Least Astonishment Principle (Wiki). The principle of least astonishment (POLA), also called the principle of least surprise applies to user interface and software design. A typical formulation of the principle is: "If a necessary feature has a ...


2

Since your default (assuming based on your domain knowledge) is that all statuses are the useful norm, unchecking one will make that the only one NOT selected, and you can change the All Statuses to the semi-selected state: If your users are accustomed to the gmail pattern, here's how it works in sequence by clicking the 'Select All' master checkbox: If ...


2

I would probably go with option 2 just because that's going to be what the user's are most familiar with. If you want people to notice and take action make sure they're a color that stands out verses the rest of the design. Adding a slight animation or having them fade in will also trigger an action. Signup/CTA buttons are typically in the top right with a ...


2

You are correct that reducing opacity conveys a disabled state. Hovering should make a button appear more clickable, not less. If you want to convey a hover state with color, try the opposite -- aim for slightly increasing intensity. The normal-state button should look normal (not disabled) and its hover should be slightly more saturated and darker. It can ...


1

Reducing the opacity on hover, when done carefully, can deliver good UX. I believe the intention behind reducing opacity on hover is to make the buttons appear brighter. But changing only the background color signals disabled state. This can be corrected by making text and/or border darker at the same time. We're essentially increasing the overall contrast ...


1

I normally take the approach of increasing the opacity of hovered buttons, my theory being hovering over the button is almost like pressing, and pressing would make my button go inward and have more shadow. Alternative justification would be that the cursor by being over the button causes a shadow itself. I've also seen the counter argument that the opacity ...


1

I just had a half hour Skype talk with my old mom. She understood she must hit the button - she was not able to see the two buttons on the screen right in front of her! This definitely would never happened decades ago, when the buttons pictured like the true 3D buttons. It is also true for windows and other GUI elements. Older people just do not see them on ...


1

I would add to this that whilst you might think new / add / create are all equally viable. You won't know unless you test with users. Recently I worked on a system where we used "create" in the context of a computer network. Our developers all thought "create" made sense, it made sense in their mental model. Their view was "the user has something they need ...


Only top voted, non community-wiki answers of a minimum length are eligible