Design August 2014

design@lists.wikimedia.org

36 participants
16 discussions

Recommended viewing: talk on Cognitive Science and Design
by Derk-Jan Hartman 29 Sep '14

29 Sep '14

I just love this Google I/O 2013 talk on human perception and cognition, and its implications for interactive and visual design. It is accessible, but with a lot of information and applies very well to us I think. I'm sure that many designers know all about this and some have probably seen the clip before, but it is also very good for developers, because many of these things we know subconsciously, but it's not really part of our vocabulary. https://www.youtube.com/watch?v=z2exxj4COhU DJ

4 4

Standardising icons across projects
by Jon Robson 24 Sep '14

24 Sep '14

Since we had the luxury of having several people in the office, Trevor, Juliusz, Rob Moen, Ed Sanders, Shahyar, May, Monte and I sat down to talk about the problem we currently have of having no standard way to create icons. Here is my write up of this meeting, again, if you attended please add/correct me on anything and if you were not please ask for clarification where needed. Currently we have two modes of creating icons in MediaWiki 1) Using a font 2) Using SVGs with PNG fallbacks and the markup varies depending on what extension you look at. We discussed both approaches and advantages and disadvantages of each. One of the major disadvantages of the WikiFont is the additional HTTP request it creates to download the font and cannot be embedded in the stylesheet using data uris like SVGs can (due to URL size restrictions). One of the major advantages of WikiFont is you can design a grayscale icon, and style it using font colour. Shahyar was happy to move Flow to using SVG based fonts if we could build grayscale SVGs and change their colours using ResourceLoader. One concrete example is when you have an icon used in a constructive anchor. The icon needs to be green, but when hovered over a lighter green. Another advantage brought up by May was that currently she finds it much easier to build icons in this way, and that having to maintain separate coloured versions of the SVGs is a pain point to her. We decided that we should push towards using SVGs that can be built into fonts for the purpose of the app. As next steps 1) Monte to explore using SVGs in the Wikipedia apps. He will create font from SVGs. He will work with May to ensure her workflow is as easy as before. 2) Trevor is going to look into how we can automatically generate different colour versions of SVGs and automatically create PNGs from them. 3) I am going to aim to agree on a standard icon HTML markup for mediawiki ui. We still have an issue with the fact that everyone is using different HTML markup to create icons. After reviewing all our current approaches [1] it was clear that we were relatively closely aligned and that it simply is a case of agreeing on class names. We aim to get all the above done by Sept 15th, 2014 so please poke us on the mailing list if you haven't had a follow up then. Full disorganised notes can be found here [2]. [1] https://www.mediawiki.org/wiki/Icon_standardisation [2] http://etherpad.wikimedia.org/p/Icon_standardisation

9 14

WikiFont and accessibility
by Derk-Jan Hartman 09 Sep '14

09 Sep '14

Something that came up yesterday when I was discussing with User:Rexx about the new WikiFont, is how it will influence accessibility, since it is actually a 'character' that will have effects on screenreader software. I have no idea what the effect will be, so if we start using that, I very much encourage that we should go and find out and then document some of the knowledge we gather into it's style and usage recommendations guidelines. DJ

11 20

MediaWiki UI Forms
by Jon Robson 09 Sep '14

09 Sep '14

On bug 65317 [1] it is suggested that the preferences page should have buttons aligned to the right and should be ordered so constructive is the last. I've written a fix for this and I would appreciate some code review. This had me wondering, should this apply to all forms? e.g. the editing form If so I think we probably need to get this into the style guide in some form, detailing how buttons should be ordered. We may want to introduce mw-ui-button-group or mw-ui-form-button-group. [1] https://bugzilla.wikimedia.org/show_bug.cgi?id=65317

6 13

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

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

2012

Design August 2014