According to the living style guide ( https://tools.wmflabs.org/styleguide/desktop/section-2.html) the current styling for "quiet buttons" is dark grey bold text with a blue hover state, and no outline, underline, or other indication it is clickable (or even what area it encompasses). Since we don't have hover states on mobile, there is no way to tell that a quiet button is actually a button (rather then just grey text). And you can't always assume this just from the text being a verb. For example, in the mobile login CTA we have "Help improve this page", "Log in", "Sign up", and "Edit without logging in". "Help improve this page" isn't clickable even though it's a verb in grey text.
What do you guys think about this problem?
Ryan Kaldari
On Mon, Oct 6, 2014 at 1:32 PM, Ryan Kaldari rkaldari@wikimedia.org wrote:
According to the living style guide ( https://tools.wmflabs.org/styleguide/desktop/section-2.html) the current styling for "quiet buttons" is dark grey bold text with a blue hover state, and no outline, underline, or other indication it is clickable (or even what area it encompasses). Since we don't have hover states on mobile, there is no way to tell that a quiet button is actually a button (rather then just grey text). And you can't always assume this just from the text being a verb. For example, in the mobile login CTA we have "Help improve this page", "Log in", "Sign up", and "Edit without logging in". "Help improve this page" isn't clickable even though it's a verb in grey text.
You can use anchor styling ( https://tools.wmflabs.org/styleguide/desktop/section-6.html ) to have a progressive/constructive/destructive text style, as used by Reply · Edit · Thank under a post in Flow
If you want a more "button"-y look, consider Shahyar's sleeper button design. Scroll down in http://area51.yar.gs/wmf/flow1/# Flow doesn't currently use them but IMO the idea is sound.
The anchor style seems like it might be a good fit for this case. Sleeper might not work, since it requires a hover state as well, S were you proposing to use the sleeper buttons in their active, hovered state?
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation
M +1 415 609 4043 \ @jaredzimmerman http://loo.ms/g0
On Mon, Oct 6, 2014 at 1:47 PM, S Page spage@wikimedia.org wrote:
On Mon, Oct 6, 2014 at 1:32 PM, Ryan Kaldari rkaldari@wikimedia.org wrote:
According to the living style guide ( https://tools.wmflabs.org/styleguide/desktop/section-2.html) the current styling for "quiet buttons" is dark grey bold text with a blue hover state, and no outline, underline, or other indication it is clickable (or even what area it encompasses). Since we don't have hover states on mobile, there is no way to tell that a quiet button is actually a button (rather then just grey text). And you can't always assume this just from the text being a verb. For example, in the mobile login CTA we have "Help improve this page", "Log in", "Sign up", and "Edit without logging in". "Help improve this page" isn't clickable even though it's a verb in grey text.
You can use anchor styling ( https://tools.wmflabs.org/styleguide/desktop/section-6.html ) to have a progressive/constructive/destructive text style, as used by Reply · Edit · Thank under a post in Flow
If you want a more "button"-y look, consider Shahyar's sleeper button design. Scroll down in http://area51.yar.gs/wmf/flow1/# Flow doesn't currently use them but IMO the idea is sound.
-- =S Page Features engineer
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design