Page MenuHomePhabricator

VisualEditor: Improvements and behaviour changes to the link input widget (tracking)
Closed, ResolvedPublic

Description

There are essentially two ways to create a link:

#1 You enter the link's text, select it, click the link button (or CTRL-K), and choose the link target.

#2 You click the link button first, enter the target and get out of the dialog, at which point the link text (identical to chosen link target) will be entered.

I'm not sure which method users prefer, but it's clear that both methods should work seamlessly. However, with the current setup both methods are problematic:

#1 Once the correct target has been picked (either by entering it, or by selecting from the list), it is not quite clear what the user should do next. Is the back arrow the right thing to do, or does that cancel the selection? Should I simply click outside of the dialog, or does that cancel? It turns out: if the target was selected from the list, both these actions are correct and do not cancel the choice, but if the link target was entered by hand (and not followed by Enter!), both actions do cancel the choice. The fastest way is to enter the link target and hit Enter twice. This is all fairly unintuitive.

#2 With this method, the user will often have to adjust the link's text afterwards, for instance in the case of plurals or if the target article is disambiguated with parentheses. But it is not clear to the user that adjusting the link text is safe and won't create a broken link; indeed the crucial distinction between link text and link target remains obscure. (Changing a singular to a plural is especially difficult since editing links at the end is not allowed.)

I have checked the workflow of entering links in LibreOffice, Gmail and Word; they are all basically the same as in the Visual Editor, with two major differences:

a) the dialog popup window has a clear OK button, and

b) the dialog popup window contains separate clearly labeled boxes for the link text and the link target.

I believe both of these changes make a lot of sense.

When entering the dialog from an existing link or from highlighted text, that text should automatically be entered into the link text's box, with a corresponding suggestion for the link target preselected, but both boxes should be editable independently. The link target box should have a list of further suggestions underneath. Once everything is OK, clicking the OK button or hitting Enter should create the link; clicking outside of the dialog box or hitting the back arrow should cancel the action.

There is another minor issue: right now, when hovering over an existing link, the link target is displayed in a popup; when clicking on the link, a separate link symbol popup occurs which does not show the link target. The meaning of that symbol is not clear; it turns out that clicking on it will open the dialog popup, allowing to change or remove the link. Gmail solves this issue as follows: hovering over a link will not display anything, but when clicking on a link, a tiny popup appears giving the link's target and options to change or remove the link. I find that completely self-explanatory.


Version: unspecified
Severity: enhancement

Details

Reference
bz48789

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 1:29 AM
bzimport set Reference to bz48789.

Alternately, once a link is selected we could have the link inspector automatically close (re: OK buttons). I'm more of a fan of OK buttons because I think auto-closes are just inviting someone to mis-click and get infuriated at the software for going away and leaving them with the wrong link.

(inspector->input widget; inspector is the context menu with buttons to open a dialog or input widget)

English Wikipedia user comments that the current behaviour of the input widget is not intuitive at all:

"I clicked the link tool while not focused on any text, to try and add a new link. I got a largely empty box with no instructions, and the next word in the article highlighted within the box. I fiddled with it a few times, and still don't know if typing in the box A. changes the text of the link. B. allows me to select more words. C. Changes what is linked to, or D. is followed by another, nearly identical box for a secondary function"

To me this is further evidence that we need two boxes: one to enter the link target and one to enter the link display text. The second box would default to the same as the link for internal links and for external links either (ideally) the page title or (less ideally but probably easier) the filename sans extension.

This would also fix Bug 50945 and Bug 51438 (if the latter is distinct from the former)

Adam Cuerden comments again on the suggestion to have separate boxes for link target and link title:
"Yes [that would be better], but do make sure it's on the same page. Don't give one dialogue, then a second. Also, if one of the boxes is left blank, it should be auto-completed from the other box. "

For the second part of the comment they mean that if someone gives a link target (e.g. Fish) and doesn't specify any title, produce a link: [[Fish]]
If someone gives a link title (e.g. Hedgehog) but doesn't specify a target, produce the link: [[Hedgehog]].

at en.wp Mauro Bieg comments:
"The add-link dialog should have a clear "OK" and "Cancel" button. Right now, you have no obvious way to get rid of it and it is not clear what happens when you click somewhere else (the dialog goes away, but did it save the changes or not?) Also, what does the strange back button (<) to the left do? and are the Link-symbol and "Hyperlink" two buttons or a description or what (nothing happens when I click on them)? The trash symbol is good and does what you'd expect it to: remove the link."

Turning this into a tracking bug as it's a lot easier to understand that way.

  • Bug 57716 has been marked as a duplicate of this bug. ***
Jdforrester-WMF removed subtasks: T76399: Change the link inspector menu widget to show information about the target in a bigger format, T76398: External link interface for link dialogue, T64492: VisualEditor: Link input widget sometimes picks wrong link target, T69446: VisualEditor: Link inspector should indicate link target when applied via keyboard shortcut, T69447: VisualEditor: Link annotation gets cut off when label contains linktrail end characters, T69377: VisualEditor: Converting a numbered external link to a regular one from the link inspector drops the annotations, T64229: VisualEditor: Link inspector dirties links, causes dirty diffs for links with underscores, T62501: VisualEditor: Gallery inspector/Link inspector opens with an animation from left to right for a specific case, T67343: VisualEditor: Link inspector ignores selected value, T60554: VisualEditor: Links should do pre-annotations in both directions (not just down-page but also up-page), T60528: VisualEditor: link inspector appears next to page title, pointing to what is an uneditable area of the page, T65603: VisualEditor: Provide a way (other than selection) to extend link (and other) annotations to more of the content, T58749: VisualEditor: wiki markup for link shows up if a template is selected with another text and applied link onto them together, T58747: VisualEditor: The link inspector and the language selector opens up outside the editor while selecting a text outside the editor, T65355: Direct link to a non-extant local file ([[:File:Foo]]) is red even if there is an extant file in a remote repo, T63558: VisualEditor: ISBN link labels (from magic words) can be changed, but not the underlying links, T65200: VisualEditor: The link inspector opens after gallery , if there is gallery just after the text on which the link is getting applied, T53464: VisualEditor: Use a "broken link" icon as the "remove" button in the link inspector, instead of a rubbish bin, T56984: VisualEditor: Link tooltip is not updated if link inspector is not explicitly closed, T53438: VisualEditor: Link inspector should make it easier to change the label, T58503: VisualEditor: Shows "<" icon on the last clicked link, if user clicks on the link icon from the toolbar on a blank space, T53415: VisualEditor: Link inspector ignores typed text if user presses [enter] too quickly, explodes with new links, T58482: VisualEditor: Demote the "New Page" part of the link inspector to below the "External link" one when inserting a link as URL pattern, T56947: VisualEditor: When user changes a link anchor which has the same link target, suggest that they may wish to change the link target too, T53404: VisualEditor: Link inspector crashes when inserting link on non-linkable or empty selection, T58434: VisualEditor: It should be possible to add a link with only pressing enter once, T58429: VisualEditor:The cursor position for newly inserted link should be at the end of the link that is being created, T53309: VisualEditor: Support creation of auto-numbered external links and to convert them to labeled ones, T53270: VisualEditor: Mobile Google Chrome text cursor hides link object icon, T56759: VisualEditor: Provide a way (beyond Ctrl-Click, middle-click, or right-click/tab) to open links in another window, T53205: VisualEditor: Matching pages list in link dialog should support right-click / ctrl+click to open page in a new window/tab, T64941: VisualEditor: Link inspector icon remains enabled in the toolbar even after closing the link inspector, T51680: VisualEditor: Caption of a thumb image starting with a link means link inspector icon appears in slug, confusingly, T59783: VisualEditor:The link icon appears on the template while attempting to apply a format on the article, T64857: VisualEditor: Link inspector opens up in the wrong place after inside Media Settings dialog, T53065: VisualEditor: Link editor requires ENTER for input, T64818: VisualEditor: Link inspector doesn't save changes when closing while XHR is pending, T63072: VisualEditor: Apply styles for redirects/disambiguation links in suggestions in link inspector, T63069: VisualEditor: Link inspector is appearing broken or towards the end of the page while applying link by selecting a whole link, T59604: VisualEditor: Link is not getting added when the clear formatting is used while the link inspector was open, T52945: VisualEditor: Wikilink editing does not permit easy alteration of display text, T52881: VisualEditor: Link input widget should suggest section links, T59506: VisualEditor: If a link that doesn't have a pipe is changed, the link target remains, T54670: VisualEditor: Link suggestions list should vertically scroll if there's insufficient room for them on-screen, T54634: VisualEditor: Links can point to wrong page if not matching case exactly and when not first option in the list, T62850: VisualEditor: Math Inspector icon and Link inspector icon appears together on a Math formula which has link applied on it, T62843: VisualEditor: Link inspector is adding just a link text while opening up the inspector for the second time selecting another element, T57839: VisualEditor: Link inspector does not show suggestions dropdown on open if link target is the same as the target of the most recently inspected link, T52646: VisualEditor: Internal links should display the page's URL in the status bar on the browsers that do that, T54436: VisualEditor: Link inspector should have bottom margin to avoid cutting the page (UX), T52593: VisualEditor: Link inspector should preview the linked page (à la Navigation Popups), T57724: VisualEditor: Wrong link rendered in edit mode when you click link in drop-down, T59205: VisualEditor: Opening and closing the link inspector dirties the link, adding a pointless transaction, T59200: VisualEditor: Long links are not shown in full in the link searcher, T52452: VisualEditor: When inserting a new link (not annotating on existing text), the suggested link is capitalised even if your input text isn't, so leading to unexpected capitalisation of link anchors, T55973: VisualEditor: Link input widget should have separate inputs for target and display text, T52360: VisualEditor: Link input widget should somehow recognise input text that look like urls without protocol as external links (e.g. "www.example.org/foo") and then guess the right protocol, T54127: VisualEditor: Editing a link spanning a comment splits the link, T52321: VisualEditor: Ctrl-Click / middle-click on a link should open it in another window; on an image, should open the image's description page, T57465: VisualEditor: Link inspector suggestions sometimes aren't displayed in Firefox, T52279: VisualEditor: Link input widget outwits itself with the leading colon for Category/file links, T57390: VisualEditor: The link suggestor should suggest links from the current namespace ahead of named links, T52240: VisualEditor: Have the link inspector inform users if they're linking to a disambiguation or redirect page, or reinserting the same link, T51928: VisualEditor: No way to identify destination, rather than link text, of links, T55495: VisualEditor: Link insertion dialog should preserve the case of the initial character, T35091: Parsoid: Linking on a part of a word triggers linktrail, T39835: A link can span whitespace but won't be displayed, so cannot be edited or noticed.Sep 10 2015, 6:56 PM