Design

design@lists.wikimedia.org

602 discussions

Re: [Design] Design Digest, Vol 30, Issue 5
by Asim Salkic 05 Sep '14

05 Sep '14

On Friday, September 5, 2014, <design-request(a)lists.wikimedia.org> wrote: > Send Design mailing list submissions to > design(a)lists.wikimedia.org > > To subscribe or unsubscribe via the World Wide Web, visit > https://lists.wikimedia.org/mailman/listinfo/design > or, via email, send a message with subject or body 'help' to > design-request(a)lists.wikimedia.org > > You can reach the person managing the list at > design-owner(a)lists.wikimedia.org > > When replying, please edit your Subject line so it is more specific > than "Re: Contents of Design digest..." > > > Today's Topics: > > 1. Re: Getting $wgUseMediaWikiUIEverywhere = true to be the > default (Tomasz Finc) > 2. Re: Style guides at Lonely Planet (Tomasz Finc) > 3. Re: Getting $wgUseMediaWikiUIEverywhere = true to be the > default (Erik Moeller) > 4. Re: Getting $wgUseMediaWikiUIEverywhere = true to be the > default (Steven Walling) > 5. Re: Getting $wgUseMediaWikiUIEverywhere = true to be the > default (Jared Zimmerman) > 6. Re: Style guides at Lonely Planet (Jared Zimmerman) > > > ---------------------------------------------------------------------- > > Message: 1 > Date: Fri, 5 Sep 2014 13:55:23 -0700 > From: Tomasz Finc <tfinc(a)wikimedia.org> > To: "A list for the design team." <design(a)lists.wikimedia.org> > Cc: Rachel diCerbo <rdicerbo(a)wikimedia.org> > Subject: Re: [Design] Getting $wgUseMediaWikiUIEverywhere = true to be > the default > Message-ID: > < CAMxhqbcX4gVFfthN0vnxrTm0VicB5UrFG4yuO_GxjVuDhLwj3w(a)mail.gmail.com> > Content-Type: text/plain; charset=UTF-8 > > On Thu, Sep 4, 2014 at 4:24 AM, Jon Robson <jrobson(a)wikimedia.org> wrote: >> 1) Enable MediaWiki UI everywhere >> >> Developers: Add $wgUseMediaWikiUIEverywhere=true into your LocalSettings >> Non-developers: Explore http://mwui.wmflabs.org/wiki/Main_Page or >> http://en.m.wikipedia.beta.wmflabs.org/ (the mobile site already >> enables these to be the default) >> >> 2) Navigate around the site and make a note of interfaces that look wrong. >> Please file bugs against them here [1] >> * Places where buttons are constructive when they should be >> destructive / progress >> * Take screenshots of interfaces that look cluttered/cramped. >> * Identify pages which do not use MediaWiki UI styles at all >> >> 3) Let's fix the bugs >> >> 4) When this is all done, we will need to engage the >> community/communicate this change. We might need to run a beta >> feature. I'm hoping Jared or Steven can oversee this. Alternatively we >> might just want to turn it on if we do not consider it a massive >> change. > > Is there a good forum for us to engage and recommend how community > members can get involved with at Step #1 ? That feels like it would > give us the sense of scale and community participation from the > beginning. > > CC'ing Rachel to see what she thinks > > --tomasz > > > > ------------------------------ > > Message: 2 > Date: Fri, 5 Sep 2014 14:02:43 -0700 > From: Tomasz Finc <tfinc(a)wikimedia.org> > To: "A list for the design team." <design(a)lists.wikimedia.org> > Subject: Re: [Design] Style guides at Lonely Planet > Message-ID: > <CAMxhqbfHe2Sn= k2vdW04VrH26XZFYyz++5azBCmH4BLLyZHuWA(a)mail.gmail.com> > Content-Type: text/plain; charset=UTF-8 > > Very interesting read and I've been watching a good chunk of the videos from > > https://www.youtube.com/channel/UCFdA1LIvjYDLrqeHiZphNWA > > Jared, where is our style guide at this point? I last checked in on it > around Wikimania. > > Also, have you had a chance to watch > > Ian Feather: Reducing Complexity With a Component API ? > > --tomasz > > On Tue, Jul 29, 2014 at 3:15 PM, Jon Robson <jrobson(a)wikimedia.org> wrote: >> Relevant to our interests... >> http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.ht… >> >> _______________________________________________ >> Design mailing list >> Design(a)lists.wikimedia.org >> https://lists.wikimedia.org/mailman/listinfo/design > > > > ------------------------------ > > Message: 3 > Date: Fri, 5 Sep 2014 14:08:22 -0700 > From: Erik Moeller <erik(a)wikimedia.org> > To: "A list for the design team." <design(a)lists.wikimedia.org> > Subject: Re: [Design] Getting $wgUseMediaWikiUIEverywhere = true to be > the default > Message-ID: > < CAEg6ZHkb75ORP0DUKL10e-PvZy8PwciWAuyAvEEHZJ-bfQkA1g(a)mail.gmail.com> > Content-Type: text/plain; charset="utf-8" > > Thanks, Jon, for continuing to keep the pressure on. > > The appearance/size change for e.g. checkboxes is very noticeable, and > right now it's inconsistent with other controls that are nearby, like > radiobuttons and dropdowns. The first thing is to actually finish the style > guide and consistently apply it. > http://tools.wmflabs.org/styleguide/desktop/index.html is very incomplete > right now, when can we expect an updated version, or is there another one I > should be looking at? > > Thanks, > Erik > > -- > Erik Möller > VP of Engineering and Product Development, Wikimedia Foundation >

1 0

Style guides at Lonely Planet
by Jon Robson 05 Sep '14

05 Sep '14

Relevant to our interests... http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.ht…

5 4

Praise for the mobile site
by Steven Walling 02 Sep '14

02 Sep '14

"Wikipedia already looks great ... just add .m (on desktop)" https://news.layervault.com/stories/31897-wikipedia-already-looks-great--ju… For those unfamiliar, this is a designer's equivalent to Hacker News. Interesting to see professional UX designers be less forgiving towards the WikiWand design, in addition to the warm fuzzies from the love for the mobile site. This kind of feedback makes me wish you could set your desktop skin to use mobile (aka Minerva). Or may e have clicking the "mobile view" link set a cookie for my session to auto-redirect to mobile. Otherwise, it's hard to evaluate how the mobile view stands up over sustained use on desktop. -- Steven Walling, Product Manager https://wikimediafoundation.org/

6 12

mwui.wmflabs.org reactivated, showing upcoming MW UI styles ($wgUseMediaWikiUIEverywhere = true; )
by Matthew Flaschen 31 Aug '14

31 Aug '14

I've updated the MW UI demo site (http://mwui.wmflabs.org/wiki/Main_Page) and enabled $wgUseMediaWikiUIEverywhere = true; (the global used by Jon's blanket MW UI change). Basically, we want to test this version for a while, then make it the only version. So please click around on http://mwui.wmflabs.org/wiki/Main_Page (e.g. try editing http://mwui.wmflabs.org/wiki/Lorem_ipsum, among many other possibilities). Thanks, Matt Flaschen

7 22

Select elements and mediawiki ui
by Jon Robson 27 Aug '14

27 Aug '14

I was under the impression that a select element could be styled in the same way as an input element using 'mw-ui-input' [1] as essentially they are one field. This came up when I tried to enable MediaWiki UI on select elements in all forms. If you are curious what this would look like it would look like this: http://tools.wmflabs.org/styleguide/desktop/select.html Is my impression true? If yes, we should update the documentation to explicitly say that. If no, we should update the documentation and describe how they should be styled... [1] http://tools.wmflabs.org/styleguide/desktop/section-1.html

10 13

Design and change
by Erik Moeller 26 Aug '14

26 Aug '14

Hi folks, As WMF looks to clarify its role for UX changes, I think it's important to look at other examples, and initial reactions to major design changes. It's also important to understand which efforts have succeeded and failed. Here are examples that I can think of: 1) NYT redesign <http://publiceditor.blogs.nytimes.com/2014/01/08/times-designers-are-monito…> (1000+ comments, mostly negative). 2) Flickr redesign <https://www.flickr.com/help/forum/en-us/72157633547442506/> (if you think disputes in Wikimedia can be unpleasant ..). Even their recent changes <https://www.flickr.com/help/forum/en-us/72157642911765443/> to the photo view got similar reactions. 3) Slashdot redesign <http://meta.slashdot.org/story/13/10/01/1849218/come-try-out-slashdots-new-…> (which led to - ongoing - protests and boycott suggestions) 4) Gawker redesign <https://en.wikipedia.org/wiki/Gawker_Media#2011_redesign_and_traffic_loss> (which by all accounts was a failure - PVs declined) - anyone got a comment thread for this one? 5) Wikia 2010 redesign, which led to many wikis forking (including the World of Warcraft Wiki) and the formation of an Anti-Wikia Alliance <http://awa.shoutwiki.com/wiki/Anti-Wikia_Alliance> Others you can think of? Other than Gawker, what's the evidence for success/failure of the above changes? What are examples of really successful major UX changes that were welcomed by communities, if any? Thanks, Erik -- Erik Möller VP of Engineering and Product Development, Wikimedia Foundation

8 11

Mobile blockquote
by Erwin Dokter 26 Aug '14

26 Aug '14

I have seen several messages floating by regarding the mobile blockquote styling, and its issue with the quote marks overlapping any floating image. There is a simple solution; the minerva stylesheet just needs one added (+) line: @media all and (min-width: 768px) { [...] .content blockquote { padding-right: 35px; padding-left: 40px; + overflow: hidden; } } I don't have a local repo, so I can't make a patch. So I'm throwing it in here for others to patch and test it. Regards, -- Erwin Dokter

3 2

new disabled checkbox does not look disabled
by Ryan Kaldari 26 Aug '14

26 Aug '14

Maybe it's just me, but the new disabled checkbox doesn't look disabled to me: https://tools.wmflabs.org/styleguide/desktop/section-5.html The normal convention for making a form element disabled is to make it faded out (<100% opacity), not giving it a gray fill. I have no idea where this design came from or who is responsible for it, but I was wondering if the design team could revisit it. Thanks! Ryan Kaldari

12 27

Input styles in mediawiki.ui right now
by Steven Walling 19 Aug '14

19 Aug '14

Hi all, In the interest of closer collaboration, Jon and Matt have merged a patch to upstream new mw-ui-input styles, which I believe originated in Flow. It's at https://gerrit.wikimedia.org/r/#/c/149173/ I'm glad we merged this sooner rather than later, since it means there are fewer Flow-specific overrides on top of mediawiki.ui and it forces us to have a cross-team discussion. However, with the new input styles going out on desktop search, log in, and create account there are some design issues we need to resolve. 1. This appears to have caused a regression, where the CAPTCHA input field on create account is not styled correctly. It's now way too small for the container. 2. We now have multiple indicator styles showing up. In form fields, the blue bar on the left appears. On elements like page links and checkboxes, the softer blue outline appears. This mixed experience is distracting. 3. The left-aligned blue bar is way too close to the cursor, and makes it harder to see where it is. In an RTL language like Hebrew, the blue bar overlaps entirely with the cursor. You can see all of these by checking out the relevant forms on Beta Labs right now. You can see the previous forms on English Wikipedia, or via the style guide (which hasn't been updated yet): http://tools.wmflabs.org/styleguide/desktop/section-3.html Overall, the issues identified lead me to believe this new input indicator is the wrong way to go for now. This is particularly true when you consider that previously one input indicator was applied to all elements consistently, and with the new style you see both the blue outline and the new in-field indicator depending on which element type you're selecting. I'm okay updating form-by-form with mediawiki.ui, but the forms themselves cannot be sloppy like this. On a related issue, but not caused by the latest updates: we need to sort out what the type styles are for forms and buttons. Right now I am getting the system font of Lucida Grande. That doesn't appear to meet the spec, according to the Trello card mocks like https://trello.com/c/8FOi1X1x and https://trello.com/c/4TfdOik8. Let's update so at least we're using the plain sans-serif, so the user is not getting a mix of different sans-serifs on one form. -- Steven Walling, Product Manager https://wikimediafoundation.org/

9 15

MediaWiki UI is broken - let's fix it.
by Jon Robson 19 Aug '14

19 Aug '14

tldr: Help me find a way forward to get the inadequacies of MediaWiki UI in front of people and get those issues addressed so we have a more consistent MediaWiki; #### I wrote a patch which applies MediaWiki UI everywhere and got merged [1]. It highlights lots of issues [2] with it in existing form. I've enabled it by default on MobileFrontend for mobile pages [3], since most pages didn't load any styles by default for desktop special pages. I'm getting early indication this is a useful technique as already I'm hearing issues about certain pages from Matt Flaschen. I would thus like to find a way to get this global enabled safely in a desktop environment. My hunch is that if we make these issues more visible to developers, designers and product owners, on the long term we will get much more consistency. There are 4 ways we can do this desktop enabling: 1) Create a beta feature that turns the styles on. e.g. UI refresh 2) Enable it on betalabs, so we are constantly reminded about the brokenness. e.g. https://gerrit.wikimedia.org/r/154972 3) Run on a separate test instance. 4) Drop the global and just do it in desktop My worry about 3 is it won't get used, bugs won't get filed. Nothing will change. Matt raised a valid concern about 2 in that betalabs should reflect our code going out to production, but I personally think it is the best place to do this and since we are only changing classes I believe disruption will be relatively minimal. 1 has the advantage of getting us feedback from more people and for projects to begin using it on content pages if they so wish. 4 is scary and is likely to be a bumpy ride as there are lots of issues, although on the plus side I imagine would trigger lots of follow up patches. It is not an approach we have ever tried in conservative MediaWiki land :) [1] https://gerrit.wikimedia.org/r/150635 [2] Issues: * Certain elements have been designed for a specific use case and don't really work outside that use case e.g. the mediawiki ui checkboxes are too big, especially when used alongside others. * The blue bar on the left of input fields sometimes * We've never done an audit of forms to clarify which forms are destructive or constructive. * Some forms have unnecessary buttons e.g. the cancel button in http://en.m.wikipedia.beta.wmflabs.org/wiki/Special:ChangeEmail * Some forms have constructive buttons instead of destructive. * Certain elements are not featured in mediawiki ui (select elements and radio inputs most notably) [3] https://gerrit.wikimedia.org/r/150636

2 1

← Newer
1
...
19
20
21
22
23
24
25
...
61
Older →

Jump to page:

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

2012

Design