Discussion:
[Design] UI form standardisation groans
Jon Robson
2014-10-09 23:39:40 UTC
Permalink
Thanks to Lego this conversation was brought to my attention.
Basically a mediawiki ui progressive button sneaked into the special
contributions page. Although not a big deal (in my opinion) this has
caused a tiny bit of a stir as might be expected (Facebookization) and
gives us a useful insight into how any form changes might be
perceived.

This button is no longer blue on mediawiki.org and will go back to
normal styling on next deploy. It seems silly to lightning deploy a
fix for this in my opinion.

Read more here:
https://en.wikipedia.org/wiki/Wikipedia:Village_pump_%28technical%29#Enormous_blue_search_button

I've replied, feel free to do so also.

What happened:
* https://gerrit.wikimedia.org/r/#/c/162121/ got deployed.
* This patch https://gerrit.wikimedia.org/r/#/c/163775/ did not.
Prateek Saxena
2014-10-09 23:49:24 UTC
Permalink
Post by Jon Robson
* https://gerrit.wikimedia.org/r/#/c/162121/ got deployed.
* This patch https://gerrit.wikimedia.org/r/#/c/163775/ did not.
https://gerrit.wikimedia.org/r/#/c/162121/ was for
Special:Contributions. How did its changes leak into Special:Search?

—prtksxna
May Tee-Galloway
2014-10-09 23:54:00 UTC
Permalink
Hence, "leak" ;P

But as I was saying to Jon, it was easy to make the Facebook comment
because all they saw was a blue button, no other ones.


On Thu, Oct 9, 2014 at 4:49 PM, Prateek Saxena <psaxena at wikimedia.org>
Post by Prateek Saxena
Post by Jon Robson
* https://gerrit.wikimedia.org/r/#/c/162121/ got deployed.
* This patch https://gerrit.wikimedia.org/r/#/c/163775/ did not.
https://gerrit.wikimedia.org/r/#/c/162121/ was for
Special:Contributions. How did its changes leak into Special:Search?
—prtksxna
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20141009/55420bb7/attachment.html>
Jared Zimmerman
2014-10-10 01:12:38 UTC
Permalink
Since when did Facebook solidify their ownership of the color blue?

Sent while mobile
Post by May Tee-Galloway
Hence, "leak" ;P
But as I was saying to Jon, it was easy to make the Facebook comment because all they saw was a blue button, no other ones.
Post by Prateek Saxena
Post by Jon Robson
* https://gerrit.wikimedia.org/r/#/c/162121/ got deployed.
* This patch https://gerrit.wikimedia.org/r/#/c/163775/ did not.
https://gerrit.wikimedia.org/r/#/c/162121/ was for
Special:Contributions. How did its changes leak into Special:Search?
—prtksxna
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20141009/f25c3d54/attachment.html>
Pau Giner
2014-10-10 12:17:56 UTC
Permalink
Making next logical steps more prominent and using color to do so in a
consistent way is a common practice. Google uses red (main actions), green
(sharing) and blue (navigation) as detailed in this talk
<http://vimeo.com/29965463>. Bootstrap components (widely used all around
the internet) use the same concept but with a different set of colors and
meanings <http://getbootstrap.com/components/>. And we can find many more
examples in existing UIs and design guidelines...

What I am wondering is which is the better way we can communicate this kind
of design decisions to our community? Is it enough to communicate the
rationale or more evidence will be needed? Is researching on specific UI
components (as opposed to the broader interaction problems those solve when
put together in a UI) the best area to invest our research and
communication efforts?


Pau

On Fri, Oct 10, 2014 at 3:12 AM, Jared Zimmerman <jzimmerman at wikimedia.org>
Post by Jared Zimmerman
Since when did Facebook solidify their ownership of the color blue?
Sent while mobile
Hence, "leak" ;P
But as I was saying to Jon, it was easy to make the Facebook comment
because all they saw was a blue button, no other ones.
Post by Prateek Saxena
Post by Jon Robson
* https://gerrit.wikimedia.org/r/#/c/162121/ got deployed.
* This patch https://gerrit.wikimedia.org/r/#/c/163775/ did not.
https://gerrit.wikimedia.org/r/#/c/162121/ was for
Special:Contributions. How did its changes leak into Special:Search?
—prtksxna
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
--
Pau Giner
Interaction Designer
Wikimedia Foundation
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20141010/7be7b29b/attachment.html>
Steven Walling
2014-10-10 16:44:43 UTC
Permalink
Post by Pau Giner
Making next logical steps more prominent and using color to do so in a
consistent way is a common practice. Google uses red (main actions), green
(sharing) and blue (navigation) as detailed in this talk
<http://vimeo.com/29965463>. Bootstrap components (widely used all around
the internet) use the same concept but with a different set of colors and
meanings <http://getbootstrap.com/components/>. And we can find many more
examples in existing UIs and design guidelines...
What I am wondering is which is the better way we can communicate this
kind of design decisions to our community? Is it enough to communicate the
rationale or more evidence will be needed? Is researching on specific UI
components (as opposed to the broader interaction problems those solve when
put together in a UI) the best area to invest our research and
communication efforts?
Circulate the living style guide (after making sure it adequately explains
these choices for that audience).

The disadvantage of the style guide we have is that editors expect
guidelines to be described on their local wiki. You can correct for this by
creating pages on some major wikis that describe the purpose of the style
guide and link to it. This will then allow you to link to it in discussions
and have more in depth debates on the talk page(s). It's easy to forget 90%
of editors with both reasonable and unreasonable feedback won't come to a
mailing list like this one. It's just not on their radar.
Post by Pau Giner
Pau
On Fri, Oct 10, 2014 at 3:12 AM, Jared Zimmerman <jzimmerman at wikimedia.org
Post by Jared Zimmerman
Since when did Facebook solidify their ownership of the color blue?
Sent while mobile
On Oct 9, 2014, at 4:54 PM, May Tee-Galloway <mgalloway at wikimedia.org
Hence, "leak" ;P
But as I was saying to Jon, it was easy to make the Facebook comment
because all they saw was a blue button, no other ones.
On Thu, Oct 9, 2014 at 4:49 PM, Prateek Saxena <psaxena at wikimedia.org
On Fri, Oct 10, 2014 at 5:09 AM, Jon Robson <jrobson at wikimedia.org
Post by Jon Robson
* https://gerrit.wikimedia.org/r/#/c/162121/ got deployed.
* This patch https://gerrit.wikimedia.org/r/#/c/163775/ did not.
https://gerrit.wikimedia.org/r/#/c/162121/ was for
Special:Contributions. How did its changes leak into Special:Search?
—prtksxna
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
<javascript:_e(%7B%7D,'cvml','Design at lists.wikimedia.org');>
https://lists.wikimedia.org/mailman/listinfo/design
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
<javascript:_e(%7B%7D,'cvml','Design at lists.wikimedia.org');>
https://lists.wikimedia.org/mailman/listinfo/design
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
<javascript:_e(%7B%7D,'cvml','Design at lists.wikimedia.org');>
https://lists.wikimedia.org/mailman/listinfo/design
--
Pau Giner
Interaction Designer
Wikimedia Foundation
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20141010/0646ca09/attachment.html>
Nick Wilson (Quiddity)
2014-10-10 18:23:45 UTC
Permalink
On Fri, Oct 10, 2014 at 9:44 AM, Steven Walling <steven.walling at gmail.com>
Post by Steven Walling
Post by Pau Giner
Making next logical steps more prominent and using color to do so in a
consistent way is a common practice. Google uses red (main actions), green
(sharing) and blue (navigation) as detailed in this talk
<http://vimeo.com/29965463>. Bootstrap components (widely used all
around the internet) use the same concept but with a different set of
colors and meanings <http://getbootstrap.com/components/>. And we can
find many more examples in existing UIs and design guidelines...
What I am wondering is which is the better way we can communicate this
kind of design decisions to our community? Is it enough to communicate the
rationale or more evidence will be needed? Is researching on specific UI
components (as opposed to the broader interaction problems those solve when
put together in a UI) the best area to invest our research and
communication efforts?
Circulate the living style guide (after making sure it adequately explains
these choices for that audience).
The disadvantage of the style guide we have is that editors expect
guidelines to be described on their local wiki. You can correct for this
by creating pages on some major wikis that describe the purpose of the
style guide and link to it. This will then allow you to link to it in
discussions and have more in depth debates on the talk page(s). It's easy
to forget 90% of editors with both reasonable and unreasonable feedback
won't come to a mailing list like this one. It's just not on their radar.
Updating the onwiki documentation page, with an FAQ that answers these
types of questions, would be a great first step.
https://www.mediawiki.org/wiki/MediaWiki_UI is currently pretty bare bones.
I sent some likely FAQs in another email thread. A timeline/roadmap would
also be helpful (hazy is fine. Editors don't need deadlines, they just
don't like surprises.), to understand when the rest of the UI currently
planned at the Trello Board is likely to get development time. Clearer
links to the code would be good (I added some git links, but I don't know
if they're good or complete).

Adding links to Google's HCI Guidelines and similar heavily-researched
reference materials, in the docs/FAQ, would also definitely help;
particularly references to work at/for other academic/scholarly
institutions (versus Facebook, who may have a massive UX research dept. but
have a significantly different mission and target core-demographic).
The video link would not be ideal (at least without a specified timestamp
to skip to) because it assumes the user has a full 30 minutes to dedicate
to understanding one of the answers.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20141010/ce9ed7ba/attachment-0001.html>
Jon Robson
2014-10-12 21:59:38 UTC
Permalink
Follow up: interestingly the main concern seems to be it effecting the
Monobook skin.

I personally think we should revisit applying MediaWiki UI to all skins
especially monobook. I know there has been concern about it raised in bugs
by Isarra and others. I'm not sure why that decision was made but I
personally feel like it is a bad one.
Post by Jon Robson
Thanks to Lego this conversation was brought to my attention.
Basically a mediawiki ui progressive button sneaked into the special
contributions page. Although not a big deal (in my opinion) this has
caused a tiny bit of a stir as might be expected (Facebookization) and
gives us a useful insight into how any form changes might be
perceived.
This button is no longer blue on mediawiki.org and will go back to
normal styling on next deploy. It seems silly to lightning deploy a
fix for this in my opinion.
https://en.wikipedia.org/wiki/Wikipedia:Village_pump_%28technical%29#Enormous_blue_search_button
I've replied, feel free to do so also.
* https://gerrit.wikimedia.org/r/#/c/162121/ got deployed.
* This patch https://gerrit.wikimedia.org/r/#/c/163775/ did not.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20141012/3c172e7f/attachment.html>
Bartosz Dziewoński
2014-10-14 06:20:58 UTC
Permalink
Post by Jon Robson
I personally think we should revisit applying MediaWiki UI to all skins
especially monobook. I know there has been concern about it raised in
bugs by Isarra and others. I'm not sure why that decision was made but I
personally feel like it is a bad one.
(https://bugzilla.wikimedia.org/show_bug.cgi?id=70351 for example, which
is interesting reading.)
--
Bartosz Dziewoński
Loading...