Page MenuHomePhabricator

Convert Extension:EmailAuthorization to use OOUI
Open, NormalPublic


and After:

Event Timeline

Restricted Application added a project: User-Jayprakash12345. · View Herald TranscriptApr 12 2018, 5:52 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Change 425873 had a related patch set uploaded (by Jayprakash12345; owner: Jayprakash12345):
[mediawiki/extensions/EmailAuthorization@master] Convert Special:EmailAuthorizationConfig to use OOUI

Jayprakash12345 triaged this task as Normal priority.Apr 12 2018, 6:02 PM
Jayprakash12345 updated the task description. (Show Details)

Change 425873 merged by jenkins-bot:
[mediawiki/extensions/EmailAuthorization@master] Convert Special:EmailAuthorizationConfig to use OOUI

Sorry to belated response, but above resulted screenshots are wrong on several levels from an UI Standardization standpoint and we should follow-up quickly or revert the merged change and introduce a new.
The primary button appearance is meant to be limited to one action per view.
The buttons in the three different fieldsets should be quiet progressive buttons with the “Revoke” one considered to be a quiet destructive?

Without having the interface at my fingertips is there even a primary action from all the ones? If unsure, it's better to also turn both “Show…” buttons at the end of the form into quiet progressive buttons.

Yes, the "before" UI above is one I built in a hurry to serve a purpose. It is not beautiful nor does it conform to good UI practices. The OOUI conversion was no worse than the original :-)

@cicalese Just to voice it, I value and appreciate @Jayprakash12345's recent work on OOUIfication of interfaces and you reviewing it. There's a good number done in little time.
The case here is, that we're turning all “normal” buttons into “primary action” buttons, which is an issue from a user-experience point of view. Understanding the uses cases of all forms is sometimes hard. In this specific case, where I've seen this form for the first time in the screenshots above, I'd agree with you, a real design process invoked wouldn't end up in such form representation. Nevertheless let's achieve what we can achieve while we're at changing it over to OOUI and amending the buttons falls for me into necessary and possible achievements category. :)

Jayprakash12345 removed Jayprakash12345 as the assignee of this task.Apr 14 2018, 5:17 AM

@Volker_E Let it be. Let's start again

@cicalese and @Volker_E Please give me feedback on above screenshot.

@Jayprakash12345 , I defer to @Volker_E 's expertise with respect to the look and feel of the UI.

@Jayprakash12345 As I've said above, “quiet progressive” and destructive buttons seem to be a better choice here altogether.

In general, that form would need Design inputs. But it's no priority for us right now.

Change 428141 had a related patch set uploaded (by Jayprakash12345; owner: Jayprakash12345):
[mediawiki/extensions/EmailAuthorization@master] Convert Special:EmailAuthorizationConfig to use OOUI

@Jayprakash12345 “Show authorized email addresses and domains” and “Show all wiki users” buttons need to be “quiet progressive” buttons as they are both same priority and higher priority than other non-destructive buttons on the view. Keeping “Revoke” quiet destructive is a fine compromise here.
If possible the two form submitting buttons should be in a HorizontalLayout as well.

@Jayprakash12345 “Show authorized email addresses and domains” and “Show all wiki users” .... well.

@Volker_E Current Patch Output after amending

Sir, I have a suggestion for bottom buttons, How it will If Both buttons should be on the right side?

@Jayprakash12345 As one of our principles is top-to-bottom alignment for simpler orientation (not having both, eye movement top-to-bottom, interchanging with left-right for accomplishing task), I suggest button alignment on the starting side (left in LTR languages, right in RTL languages, accomplished automatically).

cicalese moved this task from Inbox to Needs Review By Me on the User-Cicalese board.