Last modified: 2014-03-06 18:23:29 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T63822, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 61822 - VisualEditor: Improve the UX of the template editor
VisualEditor: Improve the UX of the template editor
Status: RESOLVED FIXED
Product: VisualEditor
Classification: Unclassified
Editing Tools (Other open bugs)
unspecified
All All
: Normal enhancement
: VE-deploy-2014-03-06
Assigned To: Trevor Parscal
:
Depends on: 50281
Blocks:
  Show dependency treegraph
 
Reported: 2014-02-23 16:01 UTC by Derk-Jan Hartman
Modified: 2014-03-06 18:23 UTC (History)
6 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments

Description Derk-Jan Hartman 2014-02-23 16:01:42 UTC
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 ?
Comment 1 Derk-Jan Hartman 2014-02-27 18:37:02 UTC
Add way to access/view /doc, if TemplateData is not visible.
Comment 2 Elitre 2014-02-27 18:43:20 UTC
That would be https://bugzilla.wikimedia.org/show_bug.cgi?id=49772 I think? (although not specific to the missing TD case).
Comment 3 James Forrester 2014-02-27 18:48:40 UTC
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
Comment 4 Elitre 2014-03-01 21:02:07 UTC
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.
Comment 5 James Forrester 2014-03-06 18:23:29 UTC
(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.

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links