swalling wrote:

This seems pretty subjective to me. Of course it's going to seem large compared to the previous tiny button. The perception of "normal" is shaped by what you're used to seeing Monobook, where all buttons are the same small size, and don't follow modern web usability patterns, like making primary targets larger than secondary actions.

As far as comparing to other sites: yes, the minutiae of a design is going to vary widely from site to site. We look to best practices on other sites not to copy the size and exact style of their buttons, but as examples of what high-level patterns to follow.

Making targets large and easy to hit on an interface like login, that you want to move through very quickly and go on to what you were doing, is a big help.

(In reply to comment #1)

This seems pretty subjective to me. Of course it's going to seem large
compared to the previous tiny button. The perception of "normal" is shaped by
what you're used to seeing Monobook [...]

Does Vector have oversized buttons elsewhere?

swalling wrote:

(In reply to comment #2)

(In reply to comment #1)

This seems pretty subjective to me. Of course it's going to seem large
compared to the previous tiny button. The perception of "normal" is shaped by
what you're used to seeing Monobook [...]

Does Vector have oversized buttons elsewhere?

That is one of those "How long have you been beating your wife?" questions.

The buttons are not oversized. They seem that way because they are larger than other buttons in Vector or Monobook, but that does not mean it is wrong. It is simply new, and that's because this is a redesign. In a redesign, some things are going to be different.

Primary submit buttons of this larger size are a part of the designs we A/B test ed on create account, and they work.

Large targets are necessary so a user knows what the CTA is even when they squint at the interface:

This is driven by a quantitative science, known as 'Fitt's law'

Fitts' law (often cited as Fitts's law) is a model of human movement primarily used in human–computer interaction and ergonomics that predicts that the time required to rapidly move to a target area is a function of the distance to the target and the size of the target.

Please Read : http://en.wikipedia.org/wiki/Fitts's_law

(In reply to comment #3)

The buttons are not oversized. They seem that way because they are larger
than other buttons in Vector or Monobook, but that does not mean it is wrong.

Well, button, not buttons. We're only discussing the "Log in" button. And if we can accept that every other button in the interface defines the "normal" size, then we can definitively say that this particular button is oversized.

It seems to be out-of-step with the rest of the MediaWiki interface and out-of-step with common practice on the Web.

It would be helpful to have examples of a log in button this large in another site's user interface. Here are some examples where the log in button is normal size:

• https://instagram.com/accounts/login/
• https://twitter.com/login
• https://myaccount.nytimes.com/auth/login
• https://secure.nordstrom.com/SignIn.aspx
• https://shop.wikimedia.org/account/login
• https://blog.wikimedia.org/wp-login.php
• https://mingle.corp.wikimedia.org/profile/login
• https://ticket.wikimedia.org/otrs/index.pl

I found one example of a site using an oversized log in button:

• http://www.wikia.com/Special:UserLogin

Perhaps there are others? Or perhaps only the designers at Wikia and the Wikimedia Foundation have studied Fitts' law.

I'm guessing this falls into the new design direction that WMF wants to go. If there is direction in the design strategy on when, where and why to use this 'bulky' form of a button, then I have little trouble with it.

I'd say just don't use it too much like that, it shouldn't become Fisher-Price here.

https://en.m.wikipedia.org/wiki/Special:UserLogin is using a large log in button, though it appears this form was optimized for an iPhone.

(In reply to comment #6)

If there is direction in the design strategy on when, where and why to use this
'bulky' form of a button, then I have little trouble with it.

mw-ui-button makes a gradient button, mw-ui-big gives it a large font, mw-ui-primary makes it blue (in the vector skin). That set is what the "Agora" design suggests for the main (Call to action) submit button of a form

You can see a secondary button in Create account's [Join wikiname] button, which is mw-ui-button mw-ui-constructive (green in vector).

The mw-ui-vform style for compact vertical forms makes buttons within it into stacked full-width (display:block, width:100%) elements. That is likely to be over-aggressive, e.g. a form with additional [Reset] and [Cancel] buttons will probably be overwhelming if they're all stacked. Create account overrides full-width for its [Join {wikiname}] button. We'll learn more as other forms adopt the design.

https://www.mediawiki.org/wiki/Agora#Code.2C_status describes the implementation, it's nested inside a bigger "Wikimedia Foundation Design" plan that is unfortunately out-of-date in areas.

It was redone a few times and looks good enough for me these days.