Design

design@lists.wikimedia.org

604 discussions

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

Winter: not right rail
by Amir E. Aharoni 16 Aug '14

16 Aug '14

Hi, This is a follow-up to Brandon's Wikimania talk about Winter. Winter has an important concept of "the right rail". I like the "rail" part of the name, because it's a nice departure from "bar", but the "right" part is wrong for several reasons: 1. It's "left" in Arabic. 2. It can be misunderstood as "correct". 3. Most importantly, it doesn't say what is the rail for. What is it for, really? Data, tools, info, navigation, aids, knowledge, gallery? I don't have a strongly preferred name myself. "Tools" is pretty close, but an infobox is not exactly a tool. Other suggestion are welcome. I should also mention that we have a pretty similar bar (rail? column?) in the ContentTranslation extension. It shows information about words, translations, and tools to control the machine translation. In the Language team we usually call it the "tools column". -- Amir Elisha Aharoni · אָמִיר אֱלִישָׁע אַהֲרוֹנִי http://aharoni.wordpress.com ‪“We're living in pieces, I want to live in peace.” – T. Moore‬

8 10

thought: remove infobox invocations entirely
by Amir E. Aharoni 13 Aug '14

13 Aug '14

Just an idea inspired by Brandon's Wikimania talk and some discussions at Wikidata-L: We can completely remove infobox templates. More precisely, the templates may stay, but the code that places them in the article can be removed. Let me explain: Wikidata makes it possible to write an infobox without any parameters - just {{Infobox settlement}} without any |, = and all that. Wikidata even has a property called "infobox's main topic", a kind of "meta-property" that can automatically identify which infobox does the article need, so that you can simply say something like {{Infobox}}. This is implemented in the Russian Wikipedia using https://ru.wikipedia.org/wiki/Module:Universal_infocard , which is used on hundreds of articles there. So it hasn't replaced the usual templates yet, but the theoretical possibility is there. Thus, the only thing left to the editor's discretion is where to place the infobox. This, however, can be handled by Winter. Winter puts infobox-like information on the info rail*, and if we plan to be bold enough to take it completely out of the article's prose flow, why not just remove it from the article completely? If an article has an appropriate infobox template, it is shown on the info rail, and that is it. (The Community will then ask for the __NOINFOBOX__ magic word, but that's a minor thing.) Thoughts? * That's how I call the "right rail" until there is consensus on a better name. See http://lists.wikimedia.org/pipermail/design/2014-August/001897.html -- Amir Elisha Aharoni · אָמִיר אֱלִישָׁע אַהֲרוֹנִי http://aharoni.wordpress.com ‪“We're living in pieces, I want to live in peace.” – T. Moore‬

6 8

Testing Devices with Current Store Versions for WIkimania
by Vibha Bamba 01 Aug '14

01 Aug '14

Hi Abbey! The following 2 devices are on your table with current store versions Design Team - IPOD 1 Design Team - LG Android 1 There may be an IOS update next week, Moiz can keep you posted on that. Thanks Vibha ---- Vibha Bamba Senior Designer | WMF Design

1 0

Official colors for the Wikimedia world
by David Abián 31 Jul '14

31 Jul '14

Hi, designers. Are the official colors for the Wikimedia world described somewhere? I guess that they are, for the WMF logo and others, #900, #069 and #396, but I can also find some of them that show #AC2D1F, #005C93 and #007B4F (the old ones?), like the horizontal version for the WMF logo.[1] Should I update this logo? Official colors are #900, #069 and #396? Thanks in advance. [1] https://commons.wikimedia.org/wiki/File:Wmf_logo_horiz_pms.svg -- David Abián @d_abian - [[es:User:Abián]] http://davidabian.com/ Wikimedia España http://www.wikimedia.es/

3 4

Fwd: [Wikitech-ambassadors] Thumbnail style update
by Steven Walling 26 Jul '14

26 Jul '14

Sorry for cross-posting, but wanted to make sure folks knew that we were releasing this. This was tested as part of the typography refresh, but we didn't want to put it out with the initial release because it needed more testing. Like typography refresh, the design goals here are consistency across devices and simplifying the reading interface to increase emphasis on the content. ---------- Forwarded message ---------- From: Nick Wilson (Quiddity) <nwilson(a)wikimedia.org> Date: Tue, Jul 22, 2014 at 2:45 PM Subject: [Wikitech-ambassadors] Thumbnail style update To: Coordination of technology deployments across languages/projects < wikitech-ambassadors(a)lists.wikimedia.org> Greetings all, There's an upcoming change to the thumbnail styling in Vector that we'd appreciate your assistance translating and announcing. The primary change is to remove the "box" border, which will bring the clean style that was recently added to <gallery> to all our thumbnails, plus consistency with our mobile view and the images on most Main Pages. It will be arriving on non-Wikipedias on August 12, and on Wikipedias on August 14, so there's additional time to acclimate. The design team will be available to discuss this, and other updates and ideas, with anyone interested at Wikimania in 2 weeks. Please see documentation and details, at https://www.mediawiki.org/wiki/Thumbnail_style_update Much thanks, Quiddity -- Nick Wilson (Quiddity) Community Liaison Wikimedia Foundation _______________________________________________ Wikitech-ambassadors mailing list Wikitech-ambassadors(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-ambassadors -- Steven Walling, Product Manager https://wikimediafoundation.org/

2 1

Re: [Design] [Wikitech-l] logging out on one device logs user out everywhere
by Jon Robson 21 Jul '14

21 Jul '14

Sounds good. Adding design mailing list. On Mon, Jul 21, 2014 at 2:02 PM, Steven Walling <steven.walling(a)gmail.com> wrote: > On Mon, Jul 21, 2014 at 1:20 PM, Jon Robson <jdlrobson(a)gmail.com> wrote: > >> http://en.wikipedia.org/wiki/Special:UserLogout might be an obvious >> place (closest to the action)... although not sure how discoverable. >> >> Do you want to logout everywhere <YES> <NO> >> [] Remember this decision >> >> It seems like we could split this into 2 features though in the >> interest of getting things done. Right now I'm interested in just >> fixing the logout behaviour - in this day and age to many people are >> using too many different devices and this experience seems very >> broken. > > > This seems potentially overcomplicated. Other sites doing this (Facebook, > Google, others) don't put this kind of "close all sessions" option directly > on logout. Let's get some input here from the UX team. > _______________________________________________ > Wikitech-l mailing list > Wikitech-l(a)lists.wikimedia.org > https://lists.wikimedia.org/mailman/listinfo/wikitech-l -- Jon Robson * http://jonrobson.me.uk * https://www.facebook.com/jonrobson * @rakugojon

2 1

Some more unsoliciteds
by Brandon Harris 02 Jul '14

02 Jul '14

Here's this, which appears to be a reskin, with a browser plug-in. Languages are front-and-center, which is nice. many texture. so color. http://en.wikipedia.org.advanc.io/ And then there is this: http://www.wikiwand.com/ which will "upgrade" Wikipedia for you if you want (I'm too scared to click that button, so let me know what happens). They have a nice ToC interaction - just scroll around in here and you'll see it: http://www.wikiwand.com/en/Ferrari_599_GTB_Fiorano --- Brandon Harris, Senior Designer, Wikimedia Foundation Support Free Knowledge: http://wikimediafoundation.org/wiki/Donate

7 6

Tweaks and additions to mediawiki.ui
by Steven Walling 30 Jun '14

30 Jun '14

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/

6 11

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

Jump to page:

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

2012

Design