Im doing a project and I would like to now if is a good practice use this type button

Someone can tell me?


Now, see this page in html, css + Js:

  • Which button are you referring to? – Steve Jones Jun 2 '18 at 16:18
  • the green large button – tatah Jun 2 '18 at 16:54
  • To be honest, I didn't even see that as a button. The screen is way to busy IMHO, although YMMV, etc. – Steve Jones Jun 3 '18 at 14:21
  • 1
    It would probably help if the screenshot was true to size, and a better resolution. It's hard to see anything on it.. – Anders Jun 4 '18 at 12:22

To get back to the raw question: I think there are fields of application for this kind of button. (As mentioned by others it should have another design - color, border, icons etc. )

In general this type of button design is used with forms and multicolumn configurators. The width of the button clarifies that all of the fields above are processed by this button.

In your case this seems to be correct. The small grey button for example processes only the field beside it.

It's not about the size, it's about the width. In this case.

| improve this answer | |

No, it is not a good practice. Users will need more time than usually to understand that this is a button. Some will not be sure where should they click - on any place in the button or rather on the text.

| improve this answer | |
  • Agreed. My comment above is a good example of this, in that I didn't even realise that was a button. – Steve Jones Jun 3 '18 at 11:04
  • 1
    @SteveJones: he-he, right :) – mentallurg Jun 3 '18 at 11:12
  • I don't agree with that at all. It is a matter of design. I the case of the design above, I agree that it is hard to see that it is a button. But generally speaking big buttons with contrast is not a bad idea. If you had the actual size of the webpage above, you would be a lot clearer, and also if you understand the text (I don't know if you do, but I don't) – Anders Jun 4 '18 at 12:09

I think Steve Jones has offered your first bit of feedback about the button - It's so large that it's become part of the background - A bit like how you can't see Europe while you're standing in the middle of Paris.

You also have a muddle of CTA colours: I can see yellow links, a grey button, what looks like a blue button, and then your large green button.

Pick one primary and one secondary CTA colour and stick to that palette - if you do that then your user will become conditioned to understand that items in those colours should be clicked - this, in turn, will reduce the size your button needs to be in order to be seen and clicked by the user.

Then you need to understand the basic premise of Fitt's law (that the larger and closer an object is, the easier it is to hit) and Gestalt grouping principles.

Summary: The button doesn't need to be huge but it does need to be clearly visible and have some relationship with what ever it sends/activates/etc

| improve this answer | |
  • The 1st and 2nd part of your response kind of speak against each other. If Tatah had the correct use of color, the button size wouldn't be a problem, correct? So it is a design problem not a size one? – Anders Jun 4 '18 at 12:17
  • 1
    It's about striking a balance. The size they have at the moment makes the button blend in with all the background noise of the page. One way to make it stand out again is with better use of colour, another is with size and placement. Making it an obvious target is a function of both these things. – Andrew Martin Jun 4 '18 at 12:21
  • It would probably be easier to see if the form was complete instead of just a couple of input fields :) – Anders Jun 4 '18 at 12:24
  • 1
    It's also possible that the reading gravity is wrong - it's hard to see an obvious path through that screen but context could change that. – Andrew Martin Jun 4 '18 at 12:26

Not the answer you're looking for? Browse other questions tagged or ask your own question.