Topic on Talk:Style guide/Forms

NeilK (talkcontribs)

1) The buttons you have pictured have very intense colors. The problem with intense colors is that you then have to keep upping the ante for everything else (like alerts, which then have to be in gaudy yellow, and so on...)

Perhaps these are just examples, but people tend to remember what they see in pictures.

This is just a personal preference, but I like the standard jQuery.UI / Vector look where the buttons are all the same very light cyan, with very small, relatively subtle pixel-oriented icons. We've already chosen jQuery.UI as the basis for most of our form interfaces.


2) Ease of producing buttons is also a factor. I think it goes without saying that we are never going to require an artist to be involved in creating forms, it has to be all in code.

So in this example we have white icons on dark, intense-colored + gradient rounded-corner buttons. Not all of this is doable in CSS on all browsers that we care about. If we do come up with a way to do this, then the text loads before images, so for a while the button text will appear to be white on white. Even if we do fallbacks to standard buttons, there is a big difference in what seems "right" when the designed form has an intense red button, and when it's a flat grey rectangle. So it becomes harder to make the form work everywhere.

Also, if you allow such radical color changes you have to produce more versions of the icons (white or black at a minimum).

Again, this is my preference but I think subtle wins over intense for a lot of reasons. If I can take a standard 'submit' button and apply CSS it's 10x easier/faster than creating a div with a fancy background and attached JS behaviours to simulate a submit button, not to mention that key shortcuts (return for submit) will still work, etc.


3) Re: "reset" buttons; I feel they should be abolished from interfaces generally, as they are often included just because HTML Forms have them by default. They trick users into clicking on them far more often than they help anybody. Perhaps you are just including it as an example, for the rare cases where you do need it. But again, people remember what they see. They will copy that, and ignore what you say.

Jakob Nielsen hates them too: http://www.useit.com/alertbox/20000416.html -- in his view, even "cancel" buttons are a questionable idea. "Making it easy for users to destroy their work in a single click violates one of the most basic usability principles, which is to respect and protect the user's work at almost any cost. (That's why you need confirmation dialogs for the most destructive actions.)"

Jorm (WMF) (talkcontribs)

I agree that those colors are extreme, and that's intentional. There's marked, measurable changes with brighter color buttons based on user behavior. I'm not worried about implementation but I should find myself exceptionally surprised if jQuery.UI can't do more intense colors. I don't believe that we should stay with a button design just because it's the current style and there are several instances (even from internal interviews) where the current button styles get lost.

As far as the reset button: you're right; I included the reset button as an example, and don't really intend for it to be used. It's there for completion ("reset" as an action type). I don't want to say directly "Never use reset" because for all we know that could be untrue (though I'm at loss to come up with one in the moment). I think wording needs to be included that reset is strongly discouraged and I'll remove the reset button from the example. Probably replace it with a different fourth button ("preview?")

"Cancel" and destructive actions I'm less adverse to but I think they absolutely need to be called out for what they are. I don't like the word "cancel" in most instances, though ("Cancel what? What am I canceling?") but that's a larger issue.

Jorm (WMF) (talkcontribs)

...Aaaaaaaaand done. Replaced graphic (s/Reset Form/Preview/) and added a bit of warning text in the document.

Reply to "Buttons"