Tweaks and additions to mediawiki.ui - Design

Ryan Kaldari

26 Jun 26 Jun

1:46 a.m.

FYI, there are updates to the mediawiki.ui color variables at https://gerrit.wikimedia.org/r/#/c/117105/. The change is about 3 months old, but hasn't been merged yet :( Maybe someone on the Growth team could take a look at it. Ryan Kaldari On Wed, Jun 25, 2014 at 6:27 PM, Steven Walling <swalling(a)wikimedia.org> wrote:

...

Hi all, This is a heads up about some of the things the Growth team is thinking about and working on with mediawiki.ui. 1. We're in the process of adding optional icon support for mediawiki.ui buttons, with browser support down to IE8.[A] 2. We're going to get rid of the text shadow on the default mediawiki.ui buttons.[B] It's distracting and doesn't increase readability. We don't use gradients in the colored buttons for similar reasons. 3. We need to do some tweaking of the design of the default mediawiki.ui button.[D] We're designing the second iteration of the anonymous editor signup invitation UI to A/B test.[E] When looking at these, you can see that the default mediawiki.ui button ("continue editing") almost seems disabled. We should talk about ways to improve on this design, such as darkening the text color or giving the default button a background color. This may come up in the WMF UX team's weekly design review as well, but I wanted to give a heads up about these issues since the library is in MediaWiki core. A. https://bugzilla.wikimedia.org/show_bug.cgi?id=55535 B. https://bugzilla.wikimedia.org/show_bug.cgi?id=61940 C. These are viewable at https://en.wikipedia.org/wiki/Crocodilia?gettingStartedReturn=true if you're logged in D. See style guide: http://tools.wmflabs.org/styleguide/desktop/section-2.html E. https://www.mediawiki.org/wiki/Anonymous_editor_acquisition/Signup_invites_… -- Steven Walling, Product Manager https://wikimediafoundation.org/ _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

Reply

Jared Zimmerman

1:53 a.m.

in point 2/B you mean the neutral state buttons correct? not default=primary right? for colored buttons and non-white buttons the text shadow certainly improves contrast and readability. *Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation M +1 415 609 4043 \\ @jaredzimmerman <http://loo.ms/g0> On Wed, Jun 25, 2014 at 6:27 PM, Steven Walling <swalling(a)wikimedia.org> wrote:

...

Hi all, This is a heads up about some of the things the Growth team is thinking about and working on with mediawiki.ui. 1. We're in the process of adding optional icon support for mediawiki.ui buttons, with browser support down to IE8.[A] 2. We're going to get rid of the text shadow on the default mediawiki.ui buttons.[B] It's distracting and doesn't increase readability. We don't use gradients in the colored buttons for similar reasons. 3. We need to do some tweaking of the design of the default mediawiki.ui button.[D] We're designing the second iteration of the anonymous editor signup invitation UI to A/B test.[E] When looking at these, you can see that the default mediawiki.ui button ("continue editing") almost seems disabled. We should talk about ways to improve on this design, such as darkening the text color or giving the default button a background color. This may come up in the WMF UX team's weekly design review as well, but I wanted to give a heads up about these issues since the library is in MediaWiki core. A. https://bugzilla.wikimedia.org/show_bug.cgi?id=55535 B. https://bugzilla.wikimedia.org/show_bug.cgi?id=61940 C. These are viewable at https://en.wikipedia.org/wiki/Crocodilia?gettingStartedReturn=true if you're logged in D. See style guide: http://tools.wmflabs.org/styleguide/desktop/section-2.html E. https://www.mediawiki.org/wiki/Anonymous_editor_acquisition/Signup_invites_… -- Steven Walling, Product Manager https://wikimediafoundation.org/ _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

Reply

Jon Robson

5:28 p.m.

In terms of icons please please please collaborate on that before coding something up. In mobile we have done a lot of this with icon classes and icons.less [1] to try to standardise on sizes and icons - it would be great to upstream that to core as a mw-ui-icon At the very least please look at how we are doing icons in core and let's see if we can come up with some shared understanding of how icons should work. I'm also hoping to converge on Flow with this and I tried to make a start to a mediawiki ui icon library in a patch for core to put the watchlist settings on the watchlist page which was apparently controversial [2] although to me seems like a no brainer. [1] https://git.wikimedia.org/blob/mediawiki%2Fextensions%2FMobileFrontend.git/… [2] https://gerrit.wikimedia.org/r/#/c/139872/ On Wed, Jun 25, 2014 at 6:27 PM, Steven Walling <swalling(a)wikimedia.org> wrote:

...

Hi all, This is a heads up about some of the things the Growth team is thinking about and working on with mediawiki.ui. We're in the process of adding optional icon support for mediawiki.ui buttons, with browser support down to IE8.[A] We're going to get rid of the text shadow on the default mediawiki.ui buttons.[B] It's distracting and doesn't increase readability. We don't use gradients in the colored buttons for similar reasons. We need to do some tweaking of the design of the default mediawiki.ui button.[D] We're designing the second iteration of the anonymous editor signup invitation UI to A/B test.[E] When looking at these, you can see that the default mediawiki.ui button ("continue editing") almost seems disabled. We should talk about ways to improve on this design, such as darkening the text color or giving the default button a background color. This may come up in the WMF UX team's weekly design review as well, but I wanted to give a heads up about these issues since the library is in MediaWiki core. A. https://bugzilla.wikimedia.org/show_bug.cgi?id=55535 B. https://bugzilla.wikimedia.org/show_bug.cgi?id=61940 C. These are viewable at https://en.wikipedia.org/wiki/Crocodilia?gettingStartedReturn=true if you're logged in D. See style guide: http://tools.wmflabs.org/styleguide/desktop/section-2.html E. https://www.mediawiki.org/wiki/Anonymous_editor_acquisition/Signup_invites_… -- Steven Walling, Product Manager https://wikimediafoundation.org/ _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

-- Jon Robson * http://jonrobson.me.uk * https://www.facebook.com/jonrobson * @rakugojon

Reply

S Page

27 Jun 27 Jun

3:59 a.m.

On Wed, Jun 25, 2014 at 6:27 PM, Steven Walling <swalling(a)wikimedia.org> wrote:

...

Hi all, This is a heads up about some of the things the Growth team is thinking about and working on with mediawiki.ui.

Thanks for the heads up, which reminds me to do a heads up for Shahyar Ghobadpour's work on mediawiki.ui for Flow. It's all in the Flow extension currently but there are patches to move it into core.

...

1. We're in the process of adding optional icon support for mediawiki.ui buttons, with browser support down to IE8.[A] Flow frontend-rewrite[1] uses CSS to add Wikifont icons [2] including

class="wikiglyph-pencil". I'm not sure how far back its support goes. As for your points below (arggh, renumbered), Shahyar Ghobadpour's revamped mw-ui-button addresses them, and has a lot of other ideas for both less and more obvious buttons. You can see the CSS for a default button in an old static prototype[3], see the X button. There's a patch to move this CSS to core[4].

...

1. We're going to get rid of the text shadow on the default mediawiki.ui buttons.[B] It's distracting and doesn't increase readability. We don't use gradients in the colored buttons for similar reasons. 2. We need to do some tweaking of the design of the default mediawiki.ui button.[D] We're designing the second iteration of the anonymous editor signup invitation UI to A/B test.[E] When looking at these, you can see that the default mediawiki.ui button ("continue editing") almost seems disabled. We should talk about ways to improve on this design, such as darkening the text color or giving the default button a background color. This may come up in the WMF UX team's weekly design review as well, but I wanted to give a heads up about these issues since the library is in MediaWiki core.

[1] E.g. at http://en.wikipedia.beta.wmflabs.org/wiki/Talk:Flow , click the ... ellipsis target. [2] https://www.mediawiki.org/wiki/Design/Wikifont [3] http://area51.yar.gs/wmf/flow1/ again probably old. [4] https://gerrit.wikimedia.org/r/#/c/123804/

...

A. https://bugzilla.wikimedia.org/show_bug.cgi?id=55535 B. https://bugzilla.wikimedia.org/show_bug.cgi?id=61940 C. These are viewable at https://en.wikipedia.org/wiki/Crocodilia?gettingStartedReturn=true if you're logged in D. See style guide: http://tools.wmflabs.org/styleguide/desktop/section-2.html E. https://www.mediawiki.org/wiki/Anonymous_editor_acquisition/Signup_invites_…

Cheers, -- =S Page Features engineer

Reply

Shahyar Ghobadpour

7:53 a.m.

Also, as far as WikiFont-Glyphs goes, the support goes back to IE8, but I have a patch (if needed) that can extend this to IE6 with HTC behaviors. --Shahyar On Fri, Jun 27, 2014 at 3:51 AM, Shahyar Ghobadpour < sghobadpour(a)wikimedia.org> wrote:

...

Yes, please take a look at [4] <https://gerrit.wikimedia.org/r/#/c/123804/> linked by S. Make sure you rebuild the style guide with that patch, and you'll see a) the styles have been improved quite a bit, and b) the documentation is better. It's awaiting further review (and has been for a very long time), so if your team is interested, it would be really nice to have someone take a look at it. --Shahyar On Thu, Jun 26, 2014 at 11:59 PM, S Page <spage(a)wikimedia.org> wrote:

On Wed, Jun 25, 2014 at 6:27 PM, Steven Walling <swalling(a)wikimedia.org> wrote:

Hi all, This is a heads up about some of the things the Growth team is thinking about and working on with mediawiki.ui.

Thanks for the heads up, which reminds me to do a heads up for Shahyar Ghobadpour's work on mediawiki.ui for Flow. It's all in the Flow extension currently but there are patches to move it into core.

1. We're in the process of adding optional icon support for mediawiki.ui buttons, with browser support down to IE8.[A] Flow frontend-rewrite[1] uses CSS to add Wikifont icons [2] including

class="wikiglyph-pencil". I'm not sure how far back its support goes. As for your points below (arggh, renumbered), Shahyar Ghobadpour's revamped mw-ui-button addresses them, and has a lot of other ideas for both less and more obvious buttons. You can see the CSS for a default button in an old static prototype[3], see the X button. There's a patch to move this CSS to core[4].

1. We're going to get rid of the text shadow on the default mediawiki.ui buttons.[B] It's distracting and doesn't increase readability. We don't use gradients in the colored buttons for similar reasons. 2. We need to do some tweaking of the design of the default mediawiki.ui button.[D] We're designing the second iteration of the anonymous editor signup invitation UI to A/B test.[E] When looking at these, you can see that the default mediawiki.ui button ("continue editing") almost seems disabled. We should talk about ways to improve on this design, such as darkening the text color or giving the default button a background color. This may come up in the WMF UX team's weekly design review as well, but I wanted to give a heads up about these issues since the library is in MediaWiki core.

[1] E.g. at http://en.wikipedia.beta.wmflabs.org/wiki/Talk:Flow , click the ... ellipsis target. [2] https://www.mediawiki.org/wiki/Design/Wikifont [3] http://area51.yar.gs/wmf/flow1/ again probably old. [4] https://gerrit.wikimedia.org/r/#/c/123804/

A. https://bugzilla.wikimedia.org/show_bug.cgi?id=55535 B. https://bugzilla.wikimedia.org/show_bug.cgi?id=61940 C. These are viewable at https://en.wikipedia.org/wiki/Crocodilia?gettingStartedReturn=true if you're logged in D. See style guide: http://tools.wmflabs.org/styleguide/desktop/section-2.html E. https://www.mediawiki.org/wiki/Anonymous_editor_acquisition/Signup_invites_…

Cheers, -- =S Page Features engineer

Reply

Jared Zimmerman

10:45 p.m.

Just get May the icon and we can get it cleaned up and integrated into the font. *Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation M +1 415 609 4043 \\ @jaredzimmerman <http://loo.ms/g0> On Mon, Jun 30, 2014 at 3:39 PM, Steven Walling <swalling(a)wikimedia.org> wrote:

...

On Fri, Jun 27, 2014 at 12:53 AM, Shahyar Ghobadpour < sghobadpour(a)wikimedia.org> wrote:

Also, as far as WikiFont-Glyphs goes, the support goes back to IE8, but I have a patch (if needed) that can extend this to IE6 with HTC behaviors.

IE8 support works fine for us. Sam's SVG patch doesn't actually have 6 or 7 support, it just falls back to no icon with normal button appearance. If this is the case, the only blocker for us to convert to it would be creating a WikiFont icon for suggestions (we're currently using a lightbulb in GettingStarted), which is an easy design task on our end. I'll make sure Sam, Matt, and Rob take a look at your patch and we come to a decision about it all. -- Steven Walling, Product Manager https://wikimediafoundation.org/ _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

Reply