4 ms·

Buttons in UI Design: The Evolution of Style and Best Practices

54 points by babich 10y ago

dudus 10y ago
Missing the classic gel pills from web 2.0 days
- Mikhail_Edoshin 10y ago
  Missing the classic Mac OS buttons to begin with. It's really strange to read about "early days" and see a dull Windows 95 button.
yalooze 10y ago
I always considered ghost buttons to be ok, provided they are used as a secondary button in conjunction with a primary button. I'm not sure what the alternatives would be to indicate button hierarchy.
- kevincox 10y ago
  Yeah, you can definitely have your buttons look less like buttons if they are in places that people expect to see buttons. For example at the bottom of dialog two short bold text items are move acceptable then text-only buttons in other places.
stronglikedan 10y ago
> Rectangular shaped buttons have been introduced into the digital world a long time ago and users are familiar with them. Some research suggests that rounded corners enhance information processing and draw our eyes to the center of the element. I found this bit pretty interesting, and anecdotally correct. It took me a while to figure out how to compose an email in Android's Gmail client when they made that button a circle. I still find myself looking for it a bit too long sometimes.
Animats 10y ago
Other button trends: 1. Hidden buttons that only appear when you mouse over them. These are used for options that reduce revenue, such as opting out of ads. Facebook does this. 2. Dialogs where the only button options are "Yes, monetize me" and a much smaller "Close dialog". Google's "Switch your search engine to Google" popup does this. It used to be that such obnoxiousness was confined to scam sites. Now it's mainstream.
- richardwhiuk 10y ago
  The inevitability of AB testing for particular metrics will lead companies to create dark patterns.
  - Silhouette 10y ago
    Although creating dark patterns is quite different to deciding to actually keep and use them. Tricking users is no less scummy just because it's Google or Facebook (or Microsoft or Amazon, to name two other recent repeat offenders) doing it.
- DonHopkins 10y ago
  Not only are Zynga's non-monitized "close dialog" buttons tiny little lower case "x"'s, but the mouse sensitive target area is actually SMALLER than the visually apparent target size, so you have to thread the needle to get through without paying! It's like you're trying to blow up the Death Star, but R2D2's knocked out and The Force isn't with you. What the sibling comment said about Dark Side of A/B testing always applies at Zynga, to the millionth power.
- DonHopkins 10y ago
  I fondly remember one of Microsoft's original "Dynamic HTML and JavaScript" demos: Two buttons. One labeled "Our Web Site". The other labeled "Our Competitor's Web Site". Whenever you point at "Our Competitor's Web Site", it quickly slides out from under your cursor so you can't click on it. Whenever you stop moving your cursor, "Our Web Site" smoothly slides under your cursor so it's convenient to press.
richardwhiuk 10y ago
The real 'ghost' button in iOS 7 was unframed, and was just blue text on a white background, normally slightly larger. That's where most of the 'how do I know what's a button' complaints came from AIUI.
mhd 10y ago
I'm not sure whether I'd call most of that "evolution", as it's not like the most fit styles survive. It's mostly about fashion. Candy buttons today, flat non-entities tomorrow. Rarely is there something that truly improves upon predictability/usability, it's mostly just bell-bottom pants and crinolines.
- qznc 10y ago
  I like website which distinguish between GET (navigation only) and POST (state changing) buttons by style. For example, ghost buttons for GET and colored for POST.
- pcurve 10y ago
  I'm guilty of jumping on the flat button band wagon a few years ago. I manage an internal application ui team at a pretty big company and despite their having less affordance than before, there hasn't been complaints. Regardless, for our new version of UI patterns, I'm bringing back the rounded corners. Guess what? Pages are already looking more usable, and frankly easier to design. It takes a very talented designer to create a beautiful looking page using flat, minimal motifs. And truth be told, most non-designers don't share the same aesthetics. But if you throw in rounded corners and very subtle gradients and shadows... and all of a sudden, designing a good looking page is much easier. And frankly, that's what I need in pressure cooker enterprise environment.
- Mikhail_Edoshin 10y ago
  There's survival of the fittest but there's also mating preferences and they don't always see eye-to-eye :)

54 points by babich 10y ago

dudus 10y ago

Missing the classic gel pills from web 2.0 days

Mikhail_Edoshin 10y ago
Missing the classic Mac OS buttons to begin with. It's really strange to read about "early days" and see a dull Windows 95 button.

yalooze 10y ago

I always considered ghost buttons to be ok, provided they are used as a secondary button in conjunction with a primary button. I'm not sure what the alternatives would be to indicate button hierarchy.

kevincox 10y ago
Yeah, you can definitely have your buttons look less like buttons if they are in places that people expect to see buttons. For example at the bottom of dialog two short bold text items are move acceptable then text-only buttons in other places.

stronglikedan 10y ago

> Rectangular shaped buttons have been introduced into the digital world a long time ago and users are familiar with them. Some research suggests that rounded corners enhance information processing and draw our eyes to the center of the element. I found this bit pretty interesting, and anecdotally correct. It took me a while to figure out how to compose an email in Android's Gmail client when they made that button a circle. I still find myself looking for it a bit too long sometimes.

Animats 10y ago

Other button trends: 1. Hidden buttons that only appear when you mouse over them. These are used for options that reduce revenue, such as opting out of ads. Facebook does this. 2. Dialogs where the only button options are "Yes, monetize me" and a much smaller "Close dialog". Google's "Switch your search engine to Google" popup does this. It used to be that such obnoxiousness was confined to scam sites. Now it's mainstream.

richardwhiuk 10y ago
The inevitability of AB testing for particular metrics will lead companies to create dark patterns.
- Silhouette 10y ago
  Although creating dark patterns is quite different to deciding to actually keep and use them. Tricking users is no less scummy just because it's Google or Facebook (or Microsoft or Amazon, to name two other recent repeat offenders) doing it.
DonHopkins 10y ago
Not only are Zynga's non-monitized "close dialog" buttons tiny little lower case "x"'s, but the mouse sensitive target area is actually SMALLER than the visually apparent target size, so you have to thread the needle to get through without paying! It's like you're trying to blow up the Death Star, but R2D2's knocked out and The Force isn't with you. What the sibling comment said about Dark Side of A/B testing always applies at Zynga, to the millionth power.
DonHopkins 10y ago
I fondly remember one of Microsoft's original "Dynamic HTML and JavaScript" demos: Two buttons. One labeled "Our Web Site". The other labeled "Our Competitor's Web Site". Whenever you point at "Our Competitor's Web Site", it quickly slides out from under your cursor so you can't click on it. Whenever you stop moving your cursor, "Our Web Site" smoothly slides under your cursor so it's convenient to press.

richardwhiuk 10y ago

The real 'ghost' button in iOS 7 was unframed, and was just blue text on a white background, normally slightly larger. That's where most of the 'how do I know what's a button' complaints came from AIUI.

mhd 10y ago

I'm not sure whether I'd call most of that "evolution", as it's not like the most fit styles survive. It's mostly about fashion. Candy buttons today, flat non-entities tomorrow. Rarely is there something that truly improves upon predictability/usability, it's mostly just bell-bottom pants and crinolines.

qznc 10y ago
I like website which distinguish between GET (navigation only) and POST (state changing) buttons by style. For example, ghost buttons for GET and colored for POST.
pcurve 10y ago
I'm guilty of jumping on the flat button band wagon a few years ago. I manage an internal application ui team at a pretty big company and despite their having less affordance than before, there hasn't been complaints. Regardless, for our new version of UI patterns, I'm bringing back the rounded corners. Guess what? Pages are already looking more usable, and frankly easier to design. It takes a very talented designer to create a beautiful looking page using flat, minimal motifs. And truth be told, most non-designers don't share the same aesthetics. But if you throw in rounded corners and very subtle gradients and shadows... and all of a sudden, designing a good looking page is much easier. And frankly, that's what I need in pressure cooker enterprise environment.
Mikhail_Edoshin 10y ago
There's survival of the fittest but there's also mating preferences and they don't always see eye-to-eye :)