Currently our buttons look like this
<http://tools.wmflabs.org/styleguide/desktop/section-2.html>
[image: Inline image 1]
And on compact personal bar, the select looks like this
<https://www.dropbox.com/s/e7o7ywyhkdggx0h/Screenshot%202014-08-25%2011.58.39.png?dl=0>
[image: Inline image 2]
and if you look above your gmail search bar input combo box, it looks like
this
<https://www.dropbox.com/s/gt9twpqrixhninu/Screenshot%202014-08-25%2012.19.39.png?dl=0>.
Very similar to ours.
[image: Inline image 4]
I don't believe we've had complications with users with these styles so
far. To set the right expectations for it to be an input field or a select
button/menu, it's more than just how the bounding box looks like or limited
to that. A drop down caret is important to show that there is some kind of
menu happening. A high contrast text within the bounding box is also
important to show that this is not an input field. A light italicized
placeholder within a bounding box shows that "this is where you should be
typing in your response." Even the label is important.
I don't think the gmail's search bar is the best execution for a input
combo box, but I guess it worked. I would've included more affordance to
show that it's an input field, but at the same time, the length of the box
and the search button next to it kinda gave it away.
So in conclusion, in the effort of being as simple as possible—elements
being used for a reason and nothing more with a goal of being consistent as
well—I have a strong feeling that this set is going to work! We want to be
able to explain what every single element* does effectively without more
elements*.
[image: Inline image 6]
*elements being text, icons, color, line, border, etc.
mm
On Mon, Aug 25, 2014 at 11:26 AM, Trevor Parscal <tparscal(a)wikimedia.org>
wrote:
I think they should look different, and decades of
operating system UI
design would agree. A key here is that a combo box should not look like a
drop-down, it should look like an input with a special affordance for
showing preset values.
In the OOjs UI Apex theme, selects are outlined only:
[image: Inline image 3]
While inputs (and combo boxes) have a gentle inner shadow:
[image: Inline image 1]
[image: Inline image 2]
These designs may be old, and I wasn't able to remove the red marks
because whoever made the PDF baked them right into the raster graphics for
the controls, but this is presumably how combo boxes and dropdowns are
meant to be rendered in MediaWiki[1]:
[image: Inline image 4]
I think that at-a-glance the controls look very input-like, and that's a
potential problem.
Perhaps May could share a more recent version of this design?
- Trevor
[1]
https://www.mediawiki.org/w/index.php?title=File:Agora_specs.pdf&page=9
On Mon, Aug 25, 2014 at 10:55 AM, Jon Robson <jdlrobson(a)gmail.com> wrote:
So...
I still lack an answer to my original question.
I understand styling select elements involves care, but I'm asking
whether they /should/ be styled like mw-ui-inputs or in a completely
different way that needs to be implemented.
On Mon, Aug 18, 2014 at 10:17 AM, Trevor Parscal <tparscal(a)wikimedia.org>
wrote:
Today, I am starting work on the Agora theme for
OOUI. So, you could
use one
of those widgets to solve this problem very soon
without having to mix
themes.
- Trevor
On Mon, Aug 18, 2014 at 10:13 AM, Shahyar Ghobadpour
<sghobadpour(a)wikimedia.org> wrote:
>
> This is why I advised people to stop using mw-ui-input/mw-ui-button on
> elements like this. It isn't consistent and can actually be quite
> inaccessible on some browser/OS combinations.
>
> --Shahyar
>
>
> On Mon, Aug 18, 2014 at 12:56 PM, Prateek Saxena <
psaxena(a)wikimedia.org>
wrote:
>
> Last time I tried this—and its been a while—select elements can't be
> styled consistently across browsers. The only way to do that would be
> to write some kind of a (OOUI) JS component.
>
> —prtksxna
>
> _______________________________________________
> Design mailing list
> Design(a)lists.wikimedia.org
>
https://lists.wikimedia.org/mailman/listinfo/design
_______________________________________________
Design mailing list
Design(a)lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
_______________________________________________
Design mailing list
Design(a)lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
--
Jon Robson
*
http://jonrobson.me.uk
*
https://www.facebook.com/jonrobson
* @rakugojon
_______________________________________________
Design mailing list
Design(a)lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
_______________________________________________
Design mailing list
Design(a)lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design