[Design] MW UI on edit page

[Matthew Flaschen]

As you may know, there is a global to test out what MediaWiki UI will
look like when it is enabled site-wide. See
https://www.mediawiki.org/wiki/Manual:$wgUseMediaWikiUIEverywhere

Unfortunately, you can't test it right now due to
https://bugzilla.wikimedia.org/71595 , but the edit page currently looks
like:

Loading Image...

(Thanks to Quiddity for the screenshot).

I think the main button bar is too busy. Save page is fine; that color
is semantically correct and it's the main action.

However, I suggest we consider making preview and/or show pages neutral
(basically, that looks like a button, but is not colored in the current
skin).

I'm interested in other suggestions. See
https://tools.wmflabs.org/styleguide/desktop/index.html for the features
MW UI currently has.

Matt Flaschen

[Steven Walling]

On Thu, Oct 2, 2014 at 10:02 PM, Matthew Flaschen <mflaschen at wikimedia.org>

Post by Matthew Flaschen
Unfortunately, you can't test it right now due to
https://bugzilla.wikimedia.org/71595 , but the edit page currently looks
https://i.imgur.com/h4GTzUB.png
(Thanks to Quiddity for the screenshot).
I think the main button bar is too busy. Save page is fine; that color is
semantically correct and it's the main action.
However, I suggest we consider making preview and/or show pages neutral
(basically, that looks like a button, but is not colored in the current
skin).

Yes, Preview and Show changes should be neutral. Constructive and
progressive buttons should not be packed together like this.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20141002/c4392926/attachment.html>

[May Tee-Galloway]

Yep we shouldn't put so many colors next to each other. Colored buttons are
supposed to guide a user not add to cognitive load. In this screenshot it's
hard to tell what is the main action I should take and questioning why blue
and green and the difference it makes.

Neutral like you suggested is the best route and right way to use it. I'll
document this note for the style guide.

On Thu, Oct 2, 2014 at 11:45 PM, Steven Walling <steven.walling at gmail.com>

Post by Steven Walling
On Thu, Oct 2, 2014 at 10:02 PM, Matthew Flaschen <mflaschen at wikimedia.org

Post by Matthew Flaschen
Unfortunately, you can't test it right now due to
https://bugzilla.wikimedia.org/71595 , but the edit page currently looks
https://i.imgur.com/h4GTzUB.png
(Thanks to Quiddity for the screenshot).
I think the main button bar is too busy. Save page is fine; that color
is semantically correct and it's the main action.
However, I suggest we consider making preview and/or show pages neutral
(basically, that looks like a button, but is not colored in the current
skin).

Yes, Preview and Show changes should be neutral. Constructive and
progressive buttons should not be packed together like this.
_______________________________________________
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/20141002/78abe1da/attachment.html>

[Federico Leva (Nemo)]

Post by Matthew Flaschen
Unfortunately, you can't test it right now due to
https://bugzilla.wikimedia.org/71595 , but the edit page currently looks
https://i.imgur.com/h4GTzUB.png
(Thanks to Quiddity for the screenshot).

1) Can the fat checkboxes be decoupled from the change?
2) "Cancel" and "Editing help" are unreadable (grey on grey).

Nemo

[Jon Robson]

In terms of edit problem please raise a bug so this doesn't get lost -
https://bugzilla.wikimedia.org/enter_bug.cgi?product=MediaWiki&component=MediaWiki%20UI

I will review any patch fixing it within a 24 hour period (unless it's
the weekend and I'm out of town).

Post by Federico Leva (Nemo)
1) Can the fat checkboxes be decoupled from the change?

The goal is consistently styling checkboxes. I'm not a fan of the
checkboxes either and I think they will need to be improved prior to
applying this everything. Everything can be changed.
http://tools.wmflabs.org/styleguide/desktop/section-5.html I'd suggest
providing screenshots of where they are clearly not working so we can
brainstorm how to resolve it - do they need to be smaller on desktop
and just this size on mobile etc?

Post by Federico Leva (Nemo)
2) "Cancel" and "Editing help" are unreadable (grey on grey).

I do agree grey on grey is not a good idea. Can you raise a bug about
the background colour of the form? I think this form could be better
styled in some way e.g. top border but I'm not a designer so I'm not
quite sure how.

Post by Federico Leva (Nemo)
Nemo
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

[Derk-Jan Hartman]

Post by Jon Robson
I do agree grey on grey is not a good idea. Can you raise a bug about
the background colour of the form? I think this form could be better
styled in some way e.g. top border but I'm not a designer so I'm not
quite sure how.

One point on that, that background color was added to emphasize the
grouping and made very distinct from the rest of the page, to increase
usability of the editpage.

https://www.mediawiki.org/wiki/Micro_Design_Improvements#Current_project:_Improve_the_organization_of_information_in_the_edit_mode
Loading Image...

Probably wise to keep that effort close in mind when you are dealing
with that group.

Post by Jon Robson
In terms of edit problem please raise a bug so this doesn't get lost -
https://bugzilla.wikimedia.org/enter_bug.cgi?product=MediaWiki&component=MediaWiki%20UI
I will review any patch fixing it within a 24 hour period (unless it's
the weekend and I'm out of town).

Post by Federico Leva (Nemo)
1) Can the fat checkboxes be decoupled from the change?

The goal is consistently styling checkboxes. I'm not a fan of the
checkboxes either and I think they will need to be improved prior to
applying this everything. Everything can be changed.
http://tools.wmflabs.org/styleguide/desktop/section-5.html I'd suggest
providing screenshots of where they are clearly not working so we can
brainstorm how to resolve it - do they need to be smaller on desktop
and just this size on mobile etc?

Post by Federico Leva (Nemo)
2) "Cancel" and "Editing help" are unreadable (grey on grey).

I do agree grey on grey is not a good idea. Can you raise a bug about
the background colour of the form? I think this form could be better
styled in some way e.g. top border but I'm not a designer so I'm not
quite sure how.

Post by Federico Leva (Nemo)
Nemo
_______________________________________________
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

[Matthew Flaschen]

Post by Jon Robson
In terms of edit problem please raise a bug so this doesn't get lost -
https://bugzilla.wikimedia.org/enter_bug.cgi?product=MediaWiki&component=MediaWiki%20UI

https://bugzilla.wikimedia.org/show_bug.cgi?id=71628

Post by Jon Robson
I will review any patch fixing it within a 24 hour period (unless it's
the weekend and I'm out of town).

Done at https://gerrit.wikimedia.org/r/#/c/164677/

Post by Jon Robson
I do agree grey on grey is not a good idea. Can you raise a bug about
the background colour of the form?

Please see my previous email on this and retest.

Matt Flaschen

[Jared Zimmerman]

perhaps we should consider using Grey14 on the background, I think its
lighter (and more consistent)



*Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation

M [phone] \\ @jaredzimmerman <http://loo.ms/g0>


On Fri, Oct 3, 2014 at 2:48 PM, Matthew Flaschen <mflaschen at wikimedia.org>

Post by Matthew Flaschen

Post by Jon Robson
In terms of edit problem please raise a bug so this doesn't get lost -
https://bugzilla.wikimedia.org/enter_bug.cgi?product=
MediaWiki&component=MediaWiki%20UI

https://bugzilla.wikimedia.org/show_bug.cgi?id=71628
I will review any patch fixing it within a 24 hour period (unless it's

Post by Jon Robson
the weekend and I'm out of town).

Done at https://gerrit.wikimedia.org/r/#/c/164677/
I do agree grey on grey is not a good idea. Can you raise a bug about

Post by Jon Robson
the background colour of the form?

Please see my previous email on this and retest.
Matt Flaschen
_______________________________________________
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/20141003/282642a7/attachment.html>

[Matthew Flaschen]

Post by Federico Leva (Nemo)
[...]
2) "Cancel" and "Editing help" are unreadable (grey on grey).

I think that screenshot may have been from a little while ago. It looks
like Loading Image... for me now. Please retest at
http://mwui.wmflabs.org/w/index.php?title=Lorem_ipsum&action=edit and
let me know if you get a different result.

Matt

[Matthew Flaschen]

Post by Matthew Flaschen
As you may know, there is a global to test out what MediaWiki UI will
look like when it is enabled site-wide. See
https://www.mediawiki.org/wiki/Manual:$wgUseMediaWikiUIEverywhere
Unfortunately, you can't test it right now due to
https://bugzilla.wikimedia.org/71595 , but the edit page currently looks

Sorry, I meant testing on mwui.wmflabs.org was not possible (other
places e.g. local still were).

However, http://mwui.wmflabs.org/wiki/Main_Page is back up anyway, so
please feel free to resume testing there.

Matt Flaschen