Page MenuHomePhabricator

Epic: Be more consistent about dialog availability in mobile visual editor
Closed, ResolvedPublic


Certain dialogs are disabled in mobile visual editor due to space constraints, but there doesn't appear to be much logic to it. E.g. image editing is disabled but gallery editing isn't (even though the gallery dialog is more complicated). We could make the experience a lot more consistent.

In some cases, we might want to disable or re-enable a dialog, but in others there might be an in-between solution. E.g. the math formula dialog has two versions in desktop, and it's the smaller, quicker version that is offered in mobile.

Dialogs to review:

Related Objects

Event Timeline

Here are some examples of mobile dialogs for @iamjessklein

Gallery dialog (images tab):

image.png (1×800 px, 497 KB)

Gallery dialog (options tab):

image.png (1×802 px, 82 KB)

Math inspector:

image.png (1×806 px, 91 KB)

...simplified from the full math dialog on desktop (NB both versions are available on desktop):

image.png (1×1 px, 178 KB)

Here is the media dialog on mobile:

image.png (753×430 px, 36 KB)

This is an outlined BooketLayout from OOUI.

The "quick" fix to make it just work for this dialog would be to switch out the BookletLayout for a TabLayout (as seen in the gallery dialog above).

A more thorough fix would be to make the outlined BookletLayout more responsive. This would have the benefit of fixing all other such layouts on the site in mobile, such as our template editor in advanced mode (after clicking show options) and probably others outside VE:

image.png (757×440 px, 34 KB)

Deskana added a subscriber: Deskana.

@Tchanders is currently working on this one, gathering screenshots and generating proposals for @iamjessklein and myself to review.

Deskana triaged this task as Medium priority.
Deskana moved this task from Incoming to In progress on the VisualEditor (Current work) board.

I've had a look at the dialogs, including those that are used for editing parts of the document (e.g. table dialog, math dialog), and those that aren't (e.g. save, command help tips, etc).

There's a distinction between dialogs and inspectors; inspectors are smaller, simpler and less problematic in mobile, so only dialogs are considered here.

I've categorised them into:

  • Disabled on mobile
  • Replaced by an inspector on mobile
  • Looks OK
  • Needs improvement

The last two are my opinion - I've included screenshots to help @iamjessklein and others review.

Disabled on mobile

  • Media dialog - for editing a single image
  • Meta dialog - for editing page metadata, e.g. categories

Replaced by inspector on mobile
(On desktop, there are two ways to edit math and chemistry formulae: an inspector and a dialog each. The dialogs exist to provide syntax shortcuts and provides no extra editing functions. On mobile, only the inspector is available. I don't think this needs to change.)

  • Math dialog - for editing math formulae
  • Chem dialog - for editing chemical formulae

Looks OK
References list dialog - for editing reference lists
Citation dialog - for editing references of known format (e.g. book, etc)
Reference dialog - for editing references, not of a specific type
Transclusion dialog - for editing templates
Pre dialog - for editing preformatted text
Syntax highlight dialog - for editing code snippets
Mobile save dialog - for saving the edit
Language search dialog - for searching for a language; pops up from a language annotation inspector

References list dialogCitation dialogReference dialogTransclusion dialogPre dialogSyntax highlight dialogMobile save dialogLanguage search dialog
references_list_dialog.png (659×369 px, 15 KB)
citation_dialog_real.png (640×358 px, 56 KB)
reference_dialog_real.png (641×357 px, 39 KB)
transclusion_dialog_real.png (645×359 px, 39 KB)
pre_dialog.png (660×365 px, 11 KB)
syntax_highlight_dialog_real.png (636×354 px, 27 KB)
save_dialog.png (638×361 px, 48 KB)
language_search_dialog.png (641×360 px, 32 KB)

Needs improvement
Table dialog - for editing table properties
Graph dialog - for editing graphs
Maps dialog - for editing maps
Command help dialog - for looking up keyboard shortcuts
Diff dialog - for reviewing changes
Gallery dialog - for editing image galleries

Table dialogGraph dialogMaps dialogCommand help dialogDiff dialogGallery dialog
table_dialog.png (661×367 px, 20 KB)
graph_dialog_general.png (663×370 px, 19 KB)
maps_dialog.png (661×369 px, 73 KB)
command_help_dialog.png (641×360 px, 80 KB)
diff_dialog.png (664×372 px, 56 KB)
gallery_dialog_add_image_tab.png (658×366 px, 197 KB)

I think most of these are unusably bad, but can be made usable with relatively straightforward fixes (possibly with the exception of the gallery dialog).

I'd propose that, wherever a dialog is in a terrible state but could easily be made usable, we do this first. Next, I'd propose that we discuss the more complicated cases, and also re-enabling the media dialog.

Thanks for this thorough assessment @Tchanders! This is so great, is there a list of all of these dialogs on a wiki somewhere for future access?

I agree with your proposal - there are pretty painful usability issues here. I would prioritize the bugs that make Wikipedia basically uneditable so that we have a baseline to work from. Then, it would make sense to take a look holistically if any patterns exist. If you break these up into individual tasks, we can troubleshoot together.

🤔For the keyboard shortcuts, I'm wondering how usable the shortcuts are on mobile.

Thanks - I'll break those into subtasks.

The closest we have to a list of dialogs is probably this page, which is really helpful for seeing all the different ways to edit. It has screenshots of the inspectors and dialogs (on desktop), and the dialogs are the bigger, more complicated ones. (Though the way I found them all was to search the code for classes that descend from the OO.ui.ProcessDialog class...)

Yes, I had a similar thought about the keyboard shortcuts! Some of them are sequences to type so will be relevant (e.g. type <ref to open a dialog for inserting a reference). The others would only be useful if there was an external keyboard plugged into the device. Could be worth discussing whether to change what's shown on mobile eventually.

Deskana renamed this task from Be more consistent about dialog availability in mobile visual editor to Epic: Be more consistent about dialog availability in mobile visual editor.Oct 2 2018, 3:55 PM
Deskana added a project: Epic.

I am going to attempt to edit the Epic task here to include all of the fixes so that we can look at them holistically.

Everything @Tchanders described as needing improvement in T202575#4551941 is already fixed or only waiting for QA.

I think there are only two items left, for which I just proposed solutions as well – these could use design input though:

  • T209909 Fixing the advanced template dialog (transclusion dialog)
  • T209911 Enabling the page options dialog (meta dialog)

(We've finished work on this half a year ago, let's close the task. Any work on the remaining two items would be separate from this project at this point.)

matmarex updated the task description. (Show Details)