Page MenuHomePhabricator

Design Jade entity UI
Closed, ResolvedPublic

Description

Create a complete design of a Jade entity page that allows viewing/editing proposals and endorsements.

Event Timeline

We already have some code which implements the judgment view mode using a Mustache template, so maybe it would be easier to just tweak this template rather than write a JS layer for prototyping?

That will depend on what the wireframe ends up looking like; if it's a big radical change, it might be worth just prototyping first before implementing.

if it's a big radical change, it might be worth just prototyping first before implementing.

Great, I'm okay either way here. Another potential reason to write a JS prototype would be that we need to guarantee repeatable data for each test.

Link to the current template for reference:
https://phabricator.wikimedia.org/diffusion/EJAD/browse/master/templates/judgment_page.wiki.mustache

Harej triaged this task as High priority.Mar 19 2019, 9:48 PM
Halfak renamed this task from Jade Mockups: Entry view mode to Design Jade entity UI.Aug 6 2019, 8:08 PM
Halfak updated the task description. (Show Details)
Halfak added subscribers: Harej, Jeroen_N, Halfak, He7d3r.

Copied from T199128:

I'm not a designer, but I figured that it would help jump-start our design conversation if I took a stab at some layouts. Below are three wireframes that I have worked out to demonstrate some approaches we might take to generating a nice layout for a entity view. Note that the vertical "..." is intended to represent a menu tab that, when clicked, would display a pop-over menu pane containing options such as "edit", "remove", or "move". I couldn't find any standard way to represent such a thing so I made due.

Tabs

This view is inspired by the tab-based navigation of Special:Preferences. The tabs contain the consensus data. When a tab is selected, the proposals and endorsements are visible. One clear downside to this is that tabs will quickly run out of space horizontally. This can be dealt with by stacking tabs, but that is visually unappealing.

Table

This view was designed to experiment with strategies for mitigating the too-many-tabs problem. The idea is that a table of schemas would be visible. Each row would show the consensus data and some basic stats about the # of proposals/endorsements. When a row is expanded, the proposals and endorsements are visible.

Two Column

This wireframe was developed to explore a mobile compatible entity view. The vector image demonstrates two potential views of an entity. One uses the single-column mobile diff. The other uses a two column default diff view. Each schema is contained within a block that can stack and flow as the browser width changes. The blocks are initially compressed and only show the consensus data but they can be expanded to show reasoning behind the consensus proposal as well as counter-proposals and endorsements.

Copied from: T212374

https://docs.google.com/drawings/d/1fP-4Tmn4bDDLWKD_Uu_W0xQNM-QyRc4LDKQTkKNp_fc/edit covers a few different types of edits someone might do.

Menu items allow "edit", "details", "move", and "remove" where relevant. Editing happens within the view with a "✔ publish" and "✗ cancel" buttons inline. The "details" dialog makes metadata available to the UI. The goal here is not to replicate all of history but instead to provide some useful details for review.

My thought is that "move" only shows up for one's own endorsements. It's really just a convenience since "remove" and "endorse" perform roughly the same action.

Editing someone else's endorsement could be discouraged through the UI by a modal interruption ("You're editing someone else's endorsement. Are you sure?").

https://docs.google.com/drawings/d/1urHCaEycUs0n-63bTcWLOJtaRE7D08yWd8nQS6W6Jd0/edit covers the creation of endorsements and proposals.

Halfak lowered the priority of this task from High to Medium.Sep 11 2019, 9:21 PM

The basic UI

Expanded:

Wireframe - Entity view - Plus buttons - Expanded.svg.png (1×1 px, 288 KB)

All collapsed:

Wireframe - Entity view - Plus buttons.svg.png (1×1 px, 237 KB)

Basic actions

Propose a label:

Wireframe - Entity view - Plus buttons - Expanded - Propose new label.svg.png (1×1 px, 297 KB)

Endorse a label:

Wireframe - Entity view - Plus buttons - Expanded - Endorse a label.svg.png (1×1 px, 293 KB)

Advanced actions (rare)

Labels

Label menu:

Wireframe - Entity view - Plus buttons - Expanded - Label menu.svg.png (1×1 px, 292 KB)

Edit Label:

Wireframe - Entity view - Plus buttons - Expanded - Edit label.svg.png (1×1 px, 277 KB)

Edit label (Error):

Wireframe - Entity view - Plus buttons - Expanded - Edit label - Error.svg.png (1×1 px, 288 KB)

Promote a label:

Wireframe - Entity view - Plus buttons - Expanded - Promote a label.svg.png (1×1 px, 289 KB)

Delete label:

Wireframe - Entity view - Plus buttons - Expanded - Delete label.svg.png (1×1 px, 277 KB)

Delete label (Error):

Wireframe - Entity view - Plus buttons - Expanded - Delete label - Error.svg.png (1×1 px, 299 KB)

Endorsements

Endorsement menu:

Wireframe - Entity view - Plus buttons - Expanded - Endorsement menu.svg.png (1×1 px, 289 KB)

Edit endorsement:

Wireframe - Entity view - Plus buttons - Expanded - Edit endorsement.svg.png (1×1 px, 269 KB)

Edit endorsement (Error):

Wireframe - Entity view - Plus buttons - Expanded - Edit endorsement - Error.svg.png (1×1 px, 286 KB)

Move endorsement:

Wireframe - Entity view - Plus buttons - Expanded - Move an endorsement.svg.png (1×1 px, 287 KB)

Delete endorsement:

Wireframe - Entity view - Plus buttons - Expanded - Delete endorsement.svg.png (1×1 px, 298 KB)

Etc.

Manual revert:

Wireframe - Entity view - Plus buttons - Manual revert.svg.png (1×1 px, 307 KB)

Wireframe - Entity view - Plus buttons - Expanded - Propose new label.svg.png (1×1 px, 330 KB)

This screenshot contains the labeldata field for editquality. I included a lot of content because I think this label benefits from solid coaching. We'll need to set up strings for all of the relevant content bits. I'm working on contentquality next.

Wireframe - Entity view - Plus buttons - Expanded - Confirm move an endorsement.svg.png (1×1 px, 282 KB)

This screenshot shows a confirm dialog for moving an endorsement.