Buttons in UI Design: The Evolution of Style and Best Practices | Hacker News Reader

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

uxplanet.org

54 pointsbabich15 comments

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.

The inevitability of AB testing for particular metrics will lead companies to create dark patterns.

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.

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.

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.

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.

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.

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.

There's survival of the fittest but there's also mating preferences and they don't always see eye-to-eye :)

Missing the classic gel pills from web 2.0 days

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.

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.

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.

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.

> 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.

Reply on news.ycombinator.com