I'd like to propose we go with "*N*eutral, *P*rogressive, *D*estructive,
and *C*onstructive" for the actual names in code.
Primary = button boundary is drawn (uses *N,P,D,C* states above)
Secondary = stylized text with custom hover effects, but no button boundary
(uses *N,P,D,C* states above)
Quiet = a name I just made up for a button that is one of the*
P,D,C*states above when in hover, click, or clicked, but
*N*eutral when there is no user interaction, Its currently used for Thank
in flow.
Action rail/bar = what we've (in design) been calling the icons that are
right aligned in flow for things like watch,, permalink, edit, flag. As
well as being used in the mockups for multimedia actions like flag, thank,
share, use, for images.
Neutral null state = Primary Neutral (buttons) in a state where a user is
not interacting with the control, wasn't trying to to be obtuse.
CTA = Call to action = Button we want user to press to move a process flow
along
*Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation
M : +1 415 609 4043 | : @JaredZimmerman<https://twitter.com/JaredZimmerman>
On Wed, Nov 6, 2013 at 9:28 PM, S Page <spage(a)wikimedia.org> wrote:
On Tue, Nov 5, 2013 at 8:49 PM, Jared Zimmerman <
jared.zimmerman(a)wikimedia.org> wrote:
It sounds like you're going to write a new <
https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Patterns_and_com…
, but two levels down. If you can't adapt that, please Be Bold and move it
to /Old and move yours up.
I'm using the format of questions to capture
behaviors, that won't be the
final state of this, but its helpful to capture some of the places that
will need clarity, like the control UI style guide itself this will grow
and change over time, as people interact with it.
Explaining behaviors is good, but the biggest boost to clarity will come
when designers add consistent text and names to the excellent specs and
mockups you've already built. Or you chop the specs up to fit these wiki
pages, which seems a lot of work. Maybe there's wiki markup to, e.g. show a
portion of page 3 of Agora_specs.pdf within a wiki page; I couldn't figure
it out and so took a cropped screenshot for <
https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Patterns_and_com…
, which sucks when you revise the original.
Clarity will also come when the LESS files use the same names and
reference wiki pages in their comments.
For example, the names in <
https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Agora_Control_Li…
like "Neutral, Progressive, Destructive, and Constructive" are very
helpful, but they're not in the mockups. I love your "Quiet action"[1],
but
what does it look like? Is it a secondary action that doesn't have a button
outline?
I'm done for the night, so if you have
questions to add, please do so,
The highest priority are the grid of buttons in Agora specs.pdf page 3
"Buttons" , we need good class names for their LESS implementation, and
decide what to do with the current mw-ui- classes. Let's nail 'em down
tomorrow.
The Behaviors terminology is different from its parent page <
https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Agora_Control_Li…gt;.
Terms that appear in one and not the other include:
Behaviors:
primary, secondary, CTA, action buttons
action bar
ACL:
Quiet action, neutral null state.
action rail
[1] subtle Human League ♩♫ reference :-)
Cheers,
--
=S Page Features engineer
_______________________________________________
Design mailing list
Design(a)lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design