[Design] Tweaks and additions to mediawiki.ui

Discussion:

Steven Walling

2014-06-26 01:27:04 UTC

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_v2#Version_two

--
Steven Walling,
Product Manager
https://wikimediafoundation.org/
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wikimedia.org/pipermail/design/attachments/20140625/c01ca728/attachment.html>

Ryan Kaldari

2014-06-26 01:46:29 UTC

Permalink

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 at wikimedia.org>

Post by Steven Walling
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
http://tools.wmflabs.org/styleguide/desktop/section-2.html
E.
https://www.mediawiki.org/wiki/Anonymous_editor_acquisition/Signup_invites_v2#Version_two
--
Steven Walling,
Product Manager
https://wikimediafoundation.org/
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wikimedia.org/pipermail/design/attachments/20140625/86d5402f/attachment.html>

Steven Walling

2014-06-26 01:50:20 UTC

Permalink

On Wed, Jun 25, 2014 at 6:46 PM, Ryan Kaldari <rkaldari at wikimedia.org>

Post by Ryan Kaldari
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.

Thanks for the heads up. We'll definitely take a look.

Jared Zimmerman

2014-06-26 01:53:38 UTC

Permalink

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 at wikimedia.org>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wikimedia.org/pipermail/design/attachments/20140625/f0aed4ea/attachment-0001.html>

Steven Walling

2014-06-26 01:55:35 UTC

Permalink

On Wed, Jun 25, 2014 at 6:53 PM, Jared Zimmerman <

Post by Jared Zimmerman
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.

Yeah, I am just talking about the default buttons, per our commentary on
the related bug. I know some are also not a fan of the text shadow on
colored buttons but I can hardly tell the difference on those, to be
honest.

Jon Robson

2014-06-26 17:28:13 UTC

Permalink

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/6f43ca20b6b89d962f30a8d24e4f7cbf93733985/less%2Fcommon%2Ficons.less
[2] https://gerrit.wikimedia.org/r/#/c/139872/

Post by Steven Walling
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
http://tools.wmflabs.org/styleguide/desktop/section-2.html
E.
https://www.mediawiki.org/wiki/Anonymous_editor_acquisition/Signup_invites_v2#Version_two
--
Steven Walling,
Product Manager
https://wikimediafoundation.org/
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

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

Jon Robson

2014-06-26 17:31:26 UTC

Permalink

Correction:
* please look at how we are doing icons in /MobileFrontend/

Also see discussion on external link icons which may also be relevant
and good to standardise on:
https://gerrit.wikimedia.org/r/141973

Post by Jon Robson
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/6f43ca20b6b89d962f30a8d24e4f7cbf93733985/less%2Fcommon%2Ficons.less
[2] https://gerrit.wikimedia.org/r/#/c/139872/

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

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

S Page

2014-06-27 03:59:04 UTC

Permalink

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

Post by Steven Walling
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.

Post by Steven Walling
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].

Post by Steven Walling
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/

Post by Steven Walling
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
http://tools.wmflabs.org/styleguide/desktop/section-2.html
E.
https://www.mediawiki.org/wiki/Anonymous_editor_acquisition/Signup_invites_v2#Version_two

Cheers,

--
=S Page Features engineer
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wikimedia.org/pipermail/design/attachments/20140626/83dd1094/attachment.html>

Shahyar Ghobadpour

2014-06-27 07:51:54 UTC

Permalink

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

Post by Ryan Kaldari
On Wed, Jun 25, 2014 at 6:27 PM, Steven Walling <swalling at wikimedia.org>

Post by Steven Walling
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.

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] 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/

Cheers,
--
=S Page Features engineer

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wikimedia.org/pipermail/design/attachments/20140627/604b590d/attachment-0001.html>

Shahyar Ghobadpour

2014-06-27 07:53:17 UTC

Permalink

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 <

Post by Shahyar Ghobadpour
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

Post by Ryan Kaldari
On Wed, Jun 25, 2014 at 6:27 PM, Steven Walling <swalling at wikimedia.org>

Post by Steven Walling
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.

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].

Post by Steven Walling
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/

Cheers,
--
=S Page Features engineer

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wikimedia.org/pipermail/design/attachments/20140627/39e33d00/attachment.html>

Steven Walling

2014-06-30 22:39:32 UTC

Permalink

On Fri, Jun 27, 2014 at 12:53 AM, Shahyar Ghobadpour <

Post by Shahyar Ghobadpour
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.

Jared Zimmerman

2014-06-30 22:45:10 UTC

Permalink

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 at wikimedia.org>

Post by Steven Walling
On Fri, Jun 27, 2014 at 12:53 AM, Shahyar Ghobadpour <

Post by Shahyar Ghobadpour
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 at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wikimedia.org/pipermail/design/attachments/20140630/46687a5b/attachment.html>