WikimediaUI
OpenPublic

Subscribers
Tokens
"Barnstar" token, awarded by Jan_Dittrich."Yellow Medal" token, awarded by Volker_E.
Authored By
violetto, Oct 12 2015

Mock History

Current Revision

Mock Description

This mockup provides the overview of widgets as template for our interface implementation. The widgets are sharing consistent “WikimediaUI base” design properties and interaction patterns.

Find the source Sketch file for designers to use on Dropbox

Please report design shortcomings or bugs in T136371: Design shortcomings of current M101 widget overview (tracking)

More details on individual component pholio mockups:
(Notice that those might be outdated, M101 is featuring the latest changes)


  • Buttons
    Checkbox
    Radio buttons
    Text field
    Toggle switch
    Dropdown
    Combo box
    Date picker
    Stepper control
    Secondary toolbar

    M101 is based on an em based grid (translated to 8px as .5em) and uses Sketch symbols for instant adaption to changes across widgets.

    There are a very large number of changes, so older changes are hidden. Show Older Changes
    Volker_E added a comment.EditedApr 26 2016, 12:50 AM

    Italics in placeholder was removed in https://gerrit.wikimedia.org/r/#/c/285231/ with notice “aren't safe to apply in general (breaks CJK and other languages) and are implicit anyway.”
    It was merged before getting a chance to reconsider alternatives or language-specific handling. To be revisited in future.

    Some further reading: http://www.kt.rim.or.jp/~tyamamot/aboutitalicsinJapanese_E.html

    Italics in placeholder was removed in https://gerrit.wikimedia.org/r/#/c/285231/ with notice “aren't safe to apply in general (breaks CJK and other languages) and are implicit anyway.”

    I won't oppose the removal of italics, but I think the patchset should have an associated Phabricator ticket to provide context and support a more standard process of change for common patterns. Maybe the ticket exists but was not linked in the patchset. Maybe @Jdforrester-WMF can add some context on this.

    @Pginer-WMF I won't oppose it either when it's for a clear and good reason like the one mentioned (still needs triage). Although I'd be not too happy to see it go in latin languages from a design perspective. As we currently don't have any CSS selector helping us with language families, I don't think we can easily come up with a compromise here.

    @Pginer-WMF What we'd make a little less clear by removing italics here is the difference between input fields and buttons, see T131810

    Volker_E updated the mock's description. (Show Details)May 3 2016, 12:09 AM

    @Pginer-WMF What we'd make a little less clear by removing italics here is the difference between input fields and buttons, see T131810

    I agree that the change brings input fields closer to buttons, but there are some important aspects to consider:

    • Italics were only applied to input text placeholders, which are normally distinguished by the use of a non-bold lighter grey text. So I don't see how they help with T131810.
    • If we want to distinguish buttons from input fields it may be better to rely on common practices so that users take advantage of their previous experience. Buttons are normally distinguished from input fields by the use of bold and centred text, the "hand" cursor (as opposed to text editing one) and making them look raised (as opposed to lowered) in terms of depth. We already provide the distinction based on text weight, alignment and cursor style.
    • A more general point is how much we need to differentiate buttons from input fields. If the user wants to search and there is a box labelled as search, the important aspect is that it is identified as actionable and the user is able to proceed to use it (i.e., click/tap on it). To illustrate this point I included an example of OSX where a button becomes an input field.

    Pginer-WMF added a comment.EditedJun 2 2016, 12:04 AM

    Some small details about the button groups:

    • The normal state shows no separating lines except for one of the options.
    • The hover state shows the selected element with one border line on the left side but no border on the right.
    • The active state shows the selected element slightly taller than the rest.
    Pginer-WMF updated the mock's description. (Show Details)Jun 3 2016, 9:21 PM
    Volker_E updated the mock's description. (Show Details)Jun 6 2016, 3:34 AM

    @Pginer-WMF Button Group is fixed in rev 2016-06-05.

    @Pginer-WMF Button Group is fixed in rev 2016-06-05.

    Awesome. Thanks!

    Volker_E renamed this mock from "Mediawiki UI" to "WikimediaUI".Sep 15 2016, 9:12 AM
    Volker_E updated the mock's description. (Show Details)
    SamanthaNguyen added a comment.EditedSep 18 2016, 5:11 PM

    Just curious, are any of you WMF designers planning to introduce a design for tabs and breadcrumb navigation?

    Volker_E updated the mock's description. (Show Details)Sep 19 2016, 6:53 AM

    @SamanthaNguyen As for the tabs, there are plans to add them anytime soon. There is also an implementation of tabs in our UI library OOjs UI, you can find in the demos under “Indexed dialog (tab navigation)”. It didn't go through full design process, therefore it's not yet included here.

    Breadcrumbs are currently not a core functionality of our products, therefore there's no plan to add those.
    Please feel free to file a ticket & share your use case if you think that it is a needed addition.

    @Volker_E Will do! (I'll probably set a reminder to do it during the weekend), thanks for the info :)

    jrbs added a subscriber: jrbs.Oct 13 2016, 11:56 PM
    stjn added a subscriber: stjn.Jan 16 2017, 7:54 PM