Big buttons are great, but they'd better make sense | Hacker News Reader

Big buttons are great, but they'd better make sense

davidverhasselt.com

63 pointsrelix26 comments

Ha! This looks like the result of an 8-hour meeting between engineering and PMs.

You nailed it.

I recently had to setup a few mailchimp campaigns for a client and so found myself using the new UI quite a lot. Their new design has quite a lot of UI bugs and things that make no sense. Its all fixable with feedback, but it would've been nice if they'd beta tested this design first. It feels rushed.

Yep, although it's still 10 times better than their old interface.

It's been a couple of months now I think (?) since the redesign and if they had been proactive about it, most of these should have been fixed already. It makes me believe that they're not using usability testing, which makes no sense for a company their size. Or maybe they do, and that really is the unintuitive outcome their tests have shown to be the least confusing to users. Would be hard to believe, though...

Usability testing is hard to get right. If you have 2 bad ideas, all it will show you is which is the least bad. They probably A/B tested this two-step layout with a text-only prompt and it did better.

Those circles doesn't look like buttons at all to me, just eye candy. Failings of the flat design trend?

At first I thought he was talking about the 'Drafts' and 'Create campaign' buttons on the top right.

Yeah, that's the first thing I thought too. They don't look like clickable buttons at all.

I don't think those buttons are particularly flat. I actually think it's more that they look so big that they look like illustrations and not buttons.

They may not look like traditional buttons, but if something has a verb-an-object phrase like "Create a list" as a caption, I damn well expect it to do what the caption says when clicked.

I'm a new user of MC after the redesign and I think they really made sense. They are not actionable buttons, but "instruction buttons". They help the beginners to understand the UI and know where are the things they're going to use often. I remember have used once the old UI and it wasn't as clear as this and normal people don't mind clicking.

But there's no such thing as instruction buttons. It's not like software is a physical thing where you can't easily change where buttons point to. What makes more sense to your mom: that the huge button labeled "Create a new list" teleports the user to the "Create a new list"-page, or that it shows the user where to actually click to start the confusing road towards the "Create a new list"-page?

You say normal people don't mind clicking. I say you don't have much experience with normal people. Any time you add an extra step in your funnel, you'll have a higher drop rate.

I get the instructional intent -- give a person a fishing net, not fish. But it's a huge amount of real estate. Even Clippy didn't demand this much space.

Such 'instruction buttons' and other notices/signs sprinkled through the UI can be an indicator of bad design, an insufficient consideration of 'affordances'[1].

Which is to say, a good user interface (and not just software, but anyplace human/device interaction occurs) should probably be as intuitive/discoverable as possible, featuring behaviours which can be inferred/suspected from an element's inherent properties (e.g.: in an aircraft cockpit, make the "flaps" switch resemble a flap), from the user's general experience in other contexts (an on-screen control that looks like a "button" should act like a "button"), or which preclude incorrect actions entirely (on a door which only swings open in one direction, install a flat plate on the "push" side and a pullable handle on the "pull" side, so the incorrect choice becomes impossible, and no signs are even needed). Putting actual instructional labels onto interface elements, whether in software (e.g. using words "Click here to..." in the text of a hyperlink) or in real life with the push/pull signs, is oftentimes a cop-out in lieu of a more thoughtful/obvious design.

In computer software interfaces (particularly web apps), I would suggest that a large, prominent, colored circle with a gloss effect and an action written/iconized on it, has the affordance of carrying out that action immediately when clicked (for some value of "immediately") -- i.e. being a button.

If substantial UI changes have taken place within an app that already has a customer base, I agree it may be valuable to bring these to the attention of the users. But a highlighted notification box appearing at the top of the app's regular UI screens, which persists until the user reads and dismisses it, is widely used -- rather than sprinkling "push" and "pull" signs around a wrongly-conceived interface[2].

Even the venerable "tool-tip" (aka HTML "title" attribute) seems often overused, becoming a crutch to support a mystery-meat navigation[3] philosophy which requires users to hover and wait to figure out what the hell _anything_ does.

[1] http://en.wikipedia.org/wiki/Affordance

[2] I'm not suggesting that the MC UI itself is wrongly-conceived or even particularly bad, just continuing with my general point.

[3] http://en.wikipedia.org/wiki/Mystery_meat_navigation

[n] The examples about cockpit design and push/pull doors come from actual published studies in ergonomics. I do not have the resources available at the moment to cite them further.

The goal of these instructions is to guide the user on how to use Mailchimp, the e-mail system, not the UI. The plane cockpit won't show you by itself how to start the engine, that's in the manual/training.

That's a fair point. And just to clarify (since you mentioned "instructions"), my references to MC above were referring just to the colored circular non-buttons discussed in the OP, and not to the "A quick primer" and "Need help with your first campaign?" instructions (which I'm assuming are always there, and are unrelated to the non-buttons… I guess it would be nice if users could dismiss these newbie instructions once they've become experienced with the site).

But if these large circular non-buttons are to remain a permanent fixture on the MC Dashboard (rather than just a temporary "look, here are our new features" exercise), I still wonder why I'd want it to jiggle the blue pointer as if to say "Oh there's the place you SHOULD have clicked just now", when it could actually just take me to my obviously-desired destination immediately. That destination page would then become active on the navbar, presumably with some kind of visual indication that it is now the active one ("presumably" because I'm just speaking extemporaneously here, I haven't used MC in ages)... so the attentive user will have learned a second way to reach their desired feature (as in, "I clicked the big round button and it took me straight to the place I was expecting, and the 'Lists' item on the navbar has become active").

Then you've provided two different ways to get to the desired feature in a single click (each method reasonable in and of itself), rather than providing one direct method (the navbar), plus an indirect method that attempts to retrain the user to click somewhere else instead.

> The plane cockpit won't show you by itself how to start the engine, that's in the manual/training.

The plane cockpit is also _not_ intended to be used by first-time users having to discover everything themselves as they go along. It is assumed the new user of the plane cockpit will be given detailed training on how to use the cockpit.

UI's, and esp. web UI's, don't tend to come accompanied with _detailed training on how to use_ them. Which is why UI's _need_ discoverability and plane cockpits do not.

>UI's _need_ discoverability and plane cockpits do not

Interestingly enough, Boeing has a world-class ergonomics research/implementation department focusing on solving problems just like this within the cockpit.

You see, it turns out that pilots were occasionally activating the switch for Undercarriage when they meant to activate the Flaps switch, because the switches were near each other on the console and they looked identical. This despite the switches being clearly labeled, and despite the intensive training that pilots undergo. Apparently this was enough of a problem that a habit developed amongst some pilots, of sticking a tiny paper cup over the Undercarrige switch shortly after each takeoff (the kind of tiny paper cup that they serve you your tiny cup of water in).

The Boeing folks were tasked with this issue, researched likely causes and tested potential solutions, and (IIRC) came up with the idea of physically/visually distinguishing the switches, and furthermore to actually design each switch to be visually reminiscent of the feature it controls.

(Hopefully I related this story correctly, it comes from a textbook-level source I read ages ago).

General usability is important in pretty much all interfaces, but discoverability isn't. There's a big difference between designing an interface a user will be instantly familiar with, and one that's optimally suited to the task at hand.

Those big buttons seem more like a bad onboarding implementation than call-to-action buttons.

The images themselves appear to be iconography, not control elements. Unless there were some specific affordance (say, tooltips, a feature which is missing from FAR too many interfaces), I wouldn't think to actually click on the images. The links below them, yes.

The whole greyed-out control cluster on the left side -- I'd probably ignore almost completely. Grey-on-grey does not suggest importance.

http://www.contrastrebellion.com/

MailChimp's UX has always been quite miserable. The new redesign is better in some ways, worse in others. I'm pretty convinced that it leads because it has the best freemium plan.

I find the Mailchimp UI very confusing. I always forget where to get my API key for example. So many important items seem to be hidden in hidden menus and submenus.

Slightly tangent

the new ui has no modal popups. Its either a new page or the ui element slides from up , down or sides. It makes an interesting redesign.

I would click on the Show Me links, not the , er, big filler images above. Is that right or wrong?

This is UI, as a user there's no right or wrong. The designer should accommodate you clicking on the "Show Me" link. I guess that way this works how you would expect it.

They seem like a banners, not buttons

Reply on news.ycombinator.com