On 2013-11-06 11:05 PM, Steven Walling wrote:

On Wed, Nov 6, 2013 at 10:51 PM, Jared Zimmerman <jared.zimmerman@wikimedia.org> wrote:
p.s. Preview would be a progressive action, not a neutral one, since the user would need to Save to finish the process flow of making an edit.

This is an example of why I think having the two states is potentially too big a burden on the user. In your scheme, Save and Preview would each be a large colored button, one green and one blue, correct? This seems potentially detrimental, since they're right next to each other, and thus would seem like they have the same priority.  

On login right now, we're using something like the scheme you proposed, but the visual hierarchy is really really obvious because of the placement in the vertical form. It's a login submit button and then a CTA. 

--
Steven Walling,
Product Manager
I do see a need for 4 buttons states but I don't agree with this NPDC structure either. Specifically I do not like calling the dark blue button "Constructive".
I don't consider Constructive to be Blue nor do I consider Green to be a form of progress through the form.

From my perspective a green button implies a form of creation or sometimes success (however green as "success" is typically reserved for messages, progress bars, etc... not buttons).
This implication differs from that of the dark blue button (which in other UX such as bootstrap's I've seen called "primary") and I think that both of them are necessary.

My perspective is that these states are needed (colours are for my/our culture but may be substituted if another culture or even design has different expectations):
Neutral = Grey
Destructive = Red
Constructive = Green
Primary = Blue

On the edit page the submit button would be Primary (Blue) while the others are Neutral (Grey).

Constructive buttons are the antonym to Destructive buttons. Destructive buttons imply you are about to destroy something or do something hard to take back. Constructive buttons imply you are about to immediately create or add something new.
In general most of our current forms wont start using Constructive right away. Our edit form, login forms, move, etc... typically have the implication of submitting a form rather than truly creating something and for those forms the submit button should be Primary.

However Constructive buttons may find situations they are useful in future creations. A good example for the use of Constructive buttons is something where something you're modifying is laid out as a vertical table of entries. You may have red Destructive items for each entry on the table. And a green Constructive button down at the bottom as part of a UI for adding a new entry.

I don't necessarily mean a table editor but something where the individual entries in the database are simple enough to be laid out as a table. For example a special page listing interwiki prefixes with a green Constructive button to either add a new interwiki or open a larger form to add a new interwiki (which one it does is implied by whether the button is part of an inline form or alone).
Another example is on a larger type of edit page form (maybe something like one in a Semantic Form's UI) that has a blue Primary submit button at the end there may be a list or table of stuff somewhere in the middle (say one listing categories or template sub-entries in the form) with a green Constructive button on the same page below the list that adds a new entry before you save.

~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://danielfriesen.name/]