Page MenuHomePhabricator

Can't tell what's a button in search forms (mw-inputbox-input and mw-ui-button look identical)
Closed, ResolvedPublic

Description

Which thing in the following screenshot is the button? It's hard to tell because all the parts look similar and none of them look like a button.

Screen Shot 2016-04-04 at 3.19.37 PM.png (280×758 px, 44 KB)

Form generated by InputBox extension which uses the mediawiki-ui styles. See https://commons.wikimedia.org/wiki/Category:Media_contributed_by_the_Folger_Shakespeare_Library for live example.


After merged patch in mediawiki.UI:

T131810 Category:Media contributed by the Folger Shakespeare Library - Wikimedia Commons 2017-01-05 10-52-19.png (181×784 px, 31 KB)

Event Timeline

kaldari renamed this task from Can't tell what's a button in search forms generated by InputBox Extension to Can't tell what's a button in search forms (mw-inputbox-input and mw-ui-button look identical).Apr 4 2016, 9:25 PM
kaldari updated the task description. (Show Details)
kaldari updated the task description. (Show Details)

@kaldari, completely agree! There should be a primary button in this view. .mw-ui-button should be extended by .mw-ui-progressive

The message box below should also be clearly designed like a message-box (notice box) and not just a “message in a bordered box”

@kaldari with https://gerrit.wikimedia.org/r/#/c/312651/ being merged at some point, the button should feature a light shade grey, so differing button and input should be easier. The example page is flawed in another point, as the button should be a primary button.
Looking at https://www.mediawiki.org/wiki/Extension:InputBox the usage of primary vs normal buttons doesn't seem to follow a scheme.
A button element should only be primary (progressive) accent colored, when it's the default action in the view. Ensuring this in the extension goes beyond UI-Standardization causes.

After https://phabricator.wikimedia.org/rMW673f6f2e9d3d1a357a67e921b2be45190285de70 got merged, we now have a visual distinction between the input and the button.

T131810 Category:Media contributed by the Folger Shakespeare Library - Wikimedia Commons 2017-01-05 10-52-19.png (181×784 px, 31 KB)

The issue of the primary action not being primary remains, but is out of scope for UI-Standardization and should probably another task.

Volker_E updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)

Cool. Thanks for fixing it!

<rant>I hope one day we can move past this flat ultra-minimalist design fad that Apple and Google started and realize that web interfaces are human interfaces and can benefit from the use of visual queues.</rant>

After https://phabricator.wikimedia.org/rMW673f6f2e9d3d1a357a67e921b2be45190285de70 got merged, we now have a visual distinction between the input and the button.

So what is the distinction? The bolding? That's only a distinction when they're right next to each other...

@Isarra: The button now has a faint grey background as well.

Ah, I see it on this one, but you might want to make it less faint. I couldn't even tell on my laptop, and that was a rather new thinkpad (and the screens I have where it does show up are all ones I've gone to some effort to colour calibrate).