VisualEditor: Improve the UX of the template editor
Closed, ResolvedPublic

Description

I find the whole thing to be rather confusing. It's much too technical. Also it partially mixes the concept of ToC with that of a structure editor. It has some widgets on the ToC (add template, add content, change order) and others inside the editor (Add param, del param, del template). This is terribly inconsistent. And makes you having to scan the screen too much.

Also by default it tries to introduce you to the concept of chained templates ( starttemplate, content, endtemplate ). Which is rather complex and often not even needed.

This needs serious work to make the usability much more consistent and predictable. I would take the following into account.

1: Make a decision. Is it a toc, or a structure editor ? If the latter, then put all structure controls in the structure editor. Otherwise avoid putting them in there.
2: By default, don't show the buttons for chained/wrapping templates. Instead, only add them if Parsoid assumes there is content wrapping happening. For new templates insertion, make an addition to templatedata "openedBy, closedBy", and only add the buttons if the template data says they are needed.
3: Keyboard control. I try tab key to move focus to the "Add template" button next to the field. Seems this is captured by the UI, so I cannot move focus that way. It seems I can only click the button. BAD... Also seems that the add button and the delete buttons do not have a :focus state. Or rather, it seems that buttons have focus state, but the focusable element is the <a> inside it, so it doesn't really work.
4: The layout of the params view.. I don't know how to do it better right now, but this needs work. too many lines/blocks, it's too cluttered. Do you need a double line separator if you have a heading ?


Version: unspecified
Severity: enhancement

bzimport set Reference to bz61822.
TheDJ created this task.Via LegacyFeb 23 2014, 4:01 PM
TheDJ added a comment.Via ConduitFeb 27 2014, 6:37 PM

Add way to access/view /doc, if TemplateData is not visible.

Elitre added a comment.Via ConduitFeb 27 2014, 6:43 PM

That would be https://bugzilla.wikimedia.org/show_bug.cgi?id=49772 I think? (although not specific to the missing TD case).

Jdforrester-WMF added a comment.Via ConduitFeb 27 2014, 6:48 PM

Most of these points are met by the re-work of these that has been worked on for months as part of the citation work – see http://mediawiki.org/wiki/VisualEditor/Design/Reference_Dialog but broadly a much simplified version of the full transclusion dialog is being made (provisionally I'm calling it the template dialog) which removes the TOC and makes a lot of other changes.

There's also bug 53604 which tracks improvements in general; should we factor out the unique parts of this bug (not quite sure which)?

(In reply to Derk-Jan Hartman from comment #0)

I find the whole thing to be rather confusing. It's much too technical. Also
it partially mixes the concept of ToC with that of a structure editor. It
has some widgets on the ToC (add template, add content, change order) and
others inside the editor (Add param, del param, del template). This is
terribly inconsistent. And makes you having to scan the screen too much.

Add param – moved to ToC for transclusion dialog, and to bottom for template dialog.

Del param – currently being left on each param; we could move it, but not sure where?

Del template – will not available in template dialog; being left in place right now for transclusion dialog.

Also by default it tries to introduce you to the concept of chained
templates ( starttemplate, content, endtemplate ). Which is rather complex
and often not even needed.

Indeed, hence the split.

This needs serious work to make the usability much more consistent and
predictable.

Which is why we've been working on this for months. :-)

I would take the following into account.

1: Make a decision. Is it a toc, or a structure editor ? If the latter, then
put all structure controls in the structure editor. Otherwise avoid putting
them in there.

See above.

2: By default, don't show the buttons for chained/wrapping templates.
Instead, only add them if Parsoid assumes there is content wrapping
happening.

See above.

For new templates insertion, make an addition to templatedata
"openedBy, closedBy", and only add the buttons if the template data says
they are needed.

This is a nice idea, though it could get very complex ("this template can be opened by these four templates, or these two templates in conjunction, but not following this template, except on Category: pages, but only with language conversion switched on, unless it's a Tuesday…").

3: Keyboard control. I try tab key to move focus to the "Add template"
button next to the field. Seems this is captured by the UI, so I cannot move
focus that way. It seems I can only click the button. BAD... Also seems that
the add button and the delete buttons do not have a :focus state. Or rather,
it seems that buttons have focus state, but the focusable element is the <a>
inside it, so it doesn't really work.

Yeah, there's some bits of keyboard work that need improvement, and the tension between accessibility and utility is acute here.

4: The layout of the params view.. I don't know how to do it better right
now, but this needs work. too many lines/blocks, it's too cluttered. Do you
need a double line separator if you have a heading ?

See https://commons.wikimedia.org/wiki/File:VE-reference-dailog-design-05b.png

Elitre added a comment.Via ConduitMar 1 2014, 9:02 PM

What about a drop-down menu with a list of most used templates (on the project or chosen by the single user)? I think it was asked somewhere else, but it's being brought up again on en.wp so I hope this is the right place to mention it. I know something like this will be added to the referencing system, but it'd be great to have it for more general purposes as well.

Jdforrester-WMF added a comment.Via ConduitMar 6 2014, 6:23 PM

(In reply to James Forrester from comment #3)

Most of these points are met by the re-work of these that has been worked on
for months as part of the citation work – see
http://mediawiki.org/wiki/VisualEditor/Design/Reference_Dialog but broadly a
much simplified version of the full transclusion dialog is being made
(provisionally I'm calling it the template dialog) which removes the TOC and
makes a lot of other changes.

There's also bug 53604 which tracks improvements in general; should we
factor out the unique parts of this bug (not quite sure which)?

(In reply to Derk-Jan Hartman from comment #0)
> I find the whole thing to be rather confusing. It's much too technical. Also
> it partially mixes the concept of ToC with that of a structure editor. It
> has some widgets on the ToC (add template, add content, change order) and
> others inside the editor (Add param, del param, del template). This is
> terribly inconsistent. And makes you having to scan the screen too much.

Add param – moved to ToC for transclusion dialog, and to bottom for template
dialog.

{{done}}

Del param – currently being left on each param; we could move it, but not
sure where?

Del template – will not available in template dialog; being left in place
right now for transclusion dialog.

{{done}}

[Snip]

> For new templates insertion, make an addition to templatedata
> "openedBy, closedBy", and only add the buttons if the template data says
> they are needed.

This is a nice idea, though it could get very complex ("this template can be
opened by these four templates, or these two templates in conjunction, but
not following this template, except on Category: pages, but only with
language conversion switched on, unless it's a Tuesday…").

I've spun this out to its own bug, bug 62338.

> 3: Keyboard control. I try tab key to move focus to the "Add template"
> button next to the field. Seems this is captured by the UI, so I cannot move
> focus that way. It seems I can only click the button. BAD... Also seems that
> the add button and the delete buttons do not have a :focus state. Or rather,
> it seems that buttons have focus state, but the focusable element is the <a>
> inside it, so it doesn't really work.

Yeah, there's some bits of keyboard work that need improvement, and the
tension between accessibility and utility is acute here.

Partially done; OOjs UI buttons are not, which is bug 62337.

> 4: The layout of the params view.. I don't know how to do it better right
> now, but this needs work. too many lines/blocks, it's too cluttered. Do you
> need a double line separator if you have a heading ?

See
https://commons.wikimedia.org/wiki/File:VE-reference-dailog-design-05b.png

{{done}}

(In reply to Elitre from comment #4)

What about a drop-down menu with a list of most used templates (on the
project or chosen by the single user)? I think it was asked somewhere else,
but it's being brought up again on en.wp so I hope this is the right place
to mention it. I know something like this will be added to the referencing
system, but it'd be great to have it for more general purposes as well.

That's bug 53590.

Consequently, I'm closing this bug as "FIXED", which is not quite right but is a better disposal that the alternatives.

Add Comment

Column Prototype
This is a very early prototype of a persistent column. It is not expected to work yet, and leaving it open will activate other new features which will break things. Press "\" (backslash) on your keyboard to close it now.