Page MenuHomePhabricator

Evaluate when you should use each style of button (primary, flagged, frameless) and clarify in style guide
Open, LowPublic

Description

Currently there are several different types of buttons (examples based on mw theme):

  • Primary buttons (solid coloured buttons, updated 2016-03-16 to reflect resolved T110555)
  • Non-primary buttons (framed white buttons, updated to reflect resolved T110555)
  • Frameless buttons (they look like links with extra padding)

  • Frameless buttons styled like tabs (message dialogs)

The distinction between when to use primary vs non-primary buttons is vague and seemingly arbitrary. As different versions for primary/non-primary buttons only exist for progressive, constructive, and destructive styles, and having multiple progressive, constructive, and destructive buttons on the same form is generally a sign that the form is a horrible mess and needs to be redone (not necessarily an issue with anything ooui I've seen yet, but there are extensions that would have this problem if converted, and the thing they share in common tends to be that they really are just a mess), this should be reconsidered.

Frameless buttons by themselves are, essentially, simply not buttons. If having buttons somewhere is out of the question, a link should be used. However, it appears that a primary purpose for frameless buttons is also to allow for other styles of buttons to be specified (such as in message dialogs). This should be avoided, as it adds unnecessary complexity for users to parse, designers to design around, and developers to implement and maintain. If the existing buttons do not work or look good in a particular setting, the reasons why should be determined and addressed within the overall theme/form/whatever.

These different button types should be standardised into a single style that adequately supports all use cases.

Event Timeline

Isarra created this task.Aug 27 2015, 6:18 PM
Isarra raised the priority of this task from to Needs Triage.
Isarra updated the task description. (Show Details)
Isarra added projects: UI-Standardization, OOUI.
Isarra added subscribers: violetto, Isarra, Aklapper.

More neutrally, "Explain when to use each type"?

violetto updated the task description. (Show Details)Aug 28 2015, 4:48 PM
violetto set Security to None.

I'll be looking into this. cc @Volker_E

Restricted Application added a subscriber: StudiesWorld. · View Herald TranscriptNov 19 2015, 11:39 PM

@matmarex What is the current process of selecting in development on when to use a ButtonWidget, a flagged ButtonWidget and a primary ButtonWidget?
@Jdforrester-WMF referred in another task to the rule of using maximal one primary button in a dialog. Anything else? cc: @Pginer-WMF

Jdforrester-WMF renamed this task from Consolidate different button types into a single style to Explain in the design guide when you should use each style of button (primary, flagged, frameless).Mar 16 2016, 7:24 PM
Jdforrester-WMF triaged this task as Low priority.

In VE primary buttons are used for the primary progressive action in a dialog/inspector, especially when other secondary actions are available. There is typically only one primary action on a given form.

Volker_E updated the task description. (Show Details)Mar 16 2016, 9:58 PM

@Esanders And what's the rule for flagged (coloured) "normal" ButtonWidgets?

Volker_E renamed this task from Explain in the design guide when you should use each style of button (primary, flagged, frameless) to Evaluate when you should use each style of button (primary, flagged, frameless) and clarify in style guide .Mar 16 2016, 11:11 PM

@Esanders And what's the rule for flagged (coloured) "normal" ButtonWidgets?

I don't know exactly when a progressive secondary button is used vs a normal secondary button, but there are fairly clear cases where a secondary button would be destructive: if the user inspects something in VE and is offered "Edit" and "Delete" buttons, the "Delete" button would clearly not be the primary button, but would also clearly be flagged as destructive.

MJL added a subscriber: MJL.Sep 4 2019, 10:14 PM