7

I have a form which has been designed as mobile first. Currently (most) of the form field are set at 100% width, including the submit button. Some people are of the opinion that the submit button is too wide for "desktop" with no evidence except personal views.

Should the width of the submit button be reduced, which would also mean reducing it for large touchscreen devices (where the button looks fine).

The form looks like:

Name:
[ Input field                                             ]
....
(                        Button                           )

Wondering if there are any studies on the size of buttons in forms and their effectiveness?

3
  • Not really an answer to the technical part of the question, but it's worth pointing out that when you ask for someone's opinion on the appearance of something, they are not required to provide you with any evidence that their opinion is "correct". You're asking them a subjective question. In fact, it's more helpful to you if they approach it like your users would and give you their initial gut impression.
    – user47201
    Apr 23, 2014 at 18:49
  • 1
    I suppose the real question is "does a very wide button still afford clicking"? And the answer, frustratingly, is going to probably be "depends what it looks like". It's certainly weird though, and that's sometimes reason enough to not do it (when in doubt, follow convention).
    – Kit Grose
    Apr 24, 2014 at 10:12
  • Have you seen the login page for paypal on an ipad (when purchasing from a website)? This uses a full width design. When I first saw it I too thought it was a bit weird, but now I am used to it. If it starts becoming conventional on more websites, it should be become less weird.
    – user47191
    Apr 24, 2014 at 15:05

2 Answers 2

9

I think there's two good reasons to reduce the size of the buttons for larger displays.

First, really big buttons on a bigger screens can be overwhelming and take over the visual hierarchy of the page, this can be distracting to the user. Also, they are not a common or familiar practice on most web apps and web sites so big buttons seem unfamiliar or strange to users of larger displays - they seem out of place or like they don't belong. Distracting.

Second, bigger buttons don't always mean better. UX matters published a great article on designing for touch screens. While this article is written about designing for touch they make some valid points about making buttons too big and designing visual targets - I recommend reading it. I the article, they make this point:

If buttons get too big, users start having problems perceiving them as clickable buttons—and sometimes even discerning them as discrete elements.

There is also a study from the Human Factors and Ergonomics Society around building and designing computer workstations that might have some standards or guidelines - 100-2007 Human Factors Engineering of Computer Workstations

1
  • Would this still be valid in 2024? I have a design with a button that matches the width of a large text area field. The button is 1384px x 50px. To me it doesn't look like a button but more like a banner.
    – Jeff S.
    Mar 27 at 1:59
0

Not a button, but related as form fields usually suffer less from the problem of being too wide/large -

Tested a search field that took sth like 90% of a screen size (on 24") and a majority of people described why they prefer it shorter as they had a problem to recognize it's a search field. (sometimes heuristic eval is not enough as an argument :))

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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