5 ms·

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

63 points by relix 13y ago

vinhboy 13y ago
Ha! This looks like the result of an 8-hour meeting between engineering and PMs.
- hcarvalhoalves 13y ago
  You nailed it.
movingahead 13y ago
Those big buttons seem more like a bad onboarding implementation than call-to-action buttons.
earlyriser 13y ago
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.
- relix 13y ago
  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.
- 6cxs2hd6 13y ago
  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.
- jamestnz 13y ago
  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 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 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.
  - ricardobeat 13y ago
    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.
mailarchis 13y ago
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.
TamDenholm 13y ago
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.
- relix 13y ago
  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...
  - sfrjay 13y ago
    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.
ricardobeat 13y ago
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.
- nadaviv 13y ago
  Yeah, that's the first thing I thought too. They don't look like clickable buttons at all.
- untog 13y ago
  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.
- Sharlin 13y ago
  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.
darmen 13y ago
They seem like a banners, not buttons
devx 13y ago
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.
alan_cx 13y ago
I would click on the Show Me links, not the , er, big filler images above. Is that right or wrong?
- relix 13y ago
  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.
pbreit 13y ago
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.
dredmorbius 13y ago
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/ http://www.contrastrebellion.com/

63 points by relix 13y ago

vinhboy 13y ago

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

hcarvalhoalves 13y ago
You nailed it.

movingahead 13y ago

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

earlyriser 13y ago

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.

relix 13y ago
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.
6cxs2hd6 13y ago
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.
jamestnz 13y ago
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 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 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.
- ricardobeat 13y ago
  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.

mailarchis 13y ago

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.

TamDenholm 13y ago

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.

relix 13y ago
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...
- sfrjay 13y ago
  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.

ricardobeat 13y ago

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.

nadaviv 13y ago
Yeah, that's the first thing I thought too. They don't look like clickable buttons at all.
untog 13y ago
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.
Sharlin 13y ago
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.

darmen 13y ago

They seem like a banners, not buttons

devx 13y ago

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.

alan_cx 13y ago

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

relix 13y ago
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.

pbreit 13y ago

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.

dredmorbius 13y ago

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/ http://www.contrastrebellion.com/