Proposal for UX improvements to the link dialog

[tkrieck]

Hey everyone, in an effort to standardize various aspects of XWiki, I would like to propose some improvements to the link dialog used in the CK editor.

Some problems with the current implementation:

• Non-standard UI elements.

  • Specially visible on button styles and rounded corners
  • This might be a CK limitation, but if possible it would be good to standardize on Theme variables
  • Example:
    

• Some important controls are hidden by default

  • The selection of the link type is on a drop-down
  • Sometimes the icon type is clickable, sometimes it is not.
  • Example:
    
    

• The flow for uploading a new file makes the user go backwards in the natural flow of reading.

To remedy some of these problems, I would like to propose the following layout to the dialog:

Below you can see the proposed layout applied to each type of link:

And here two example user flows with the changes.

Flow for selecting / creating page

It is important to note that here the user could create new pages. These pages would be created as a child of the current one, of the type configured as default (usually a blank page) and its title is informed on the “Display Text” field:

Flow for selecting / uploading file

Remarks:

1. It would be nice to have an alternative and more modern way of uploading files, via drag and drop.
2. Uploading via click or touch interaction would still be possible.
3. Uploading itself would be automatic on link save

The other two types of links I didn’t create a flow as they are very simple.

Now I would like to know from you, what do you think of this proposal, if it is technically feasible, any improvements that could be made?

Thank you all for reading

[amilica]

Hello Thiago! Thanks a lot for your proposal!

Pros of current version

What I (surprisingly) liked about the current UI of the link dialog is how compact it is. Once you use it 1-3 times you get used to the fact that you have to click on an arrow to select different types of data.

Cons of current version

The things that I don’t like about the current one are:

1. the arrow can seem like it doesn’t let the user choose through the types, but through something else
2. there is no search icon and this makes the input feel not typeable in a way (for a long time I never typed in that input, I’ve only used the tree)
3. pasting a link to a wiki page doesn’t get transformed into an internal page reference
4. there are no types for images, videos that could enable the user to find info easier
5. nothing informs the user that they can paste the page reference in the input field

Improving the UI

I feel we should still aim to have it pretty compact, letting us use it in other places where it should be, but it isn’t.

An example of a place like this is macro configurations.

Many times in these configurations, referencing one or multiple pages/attachments is needed, but ATM this can only be done by knowing the address/reference of that page/attachment. The UI of the link dialog could be repurposed in these configurations.

This is how I’d see the revamp. Ignore the fake tree icon, it should be something else, but I couldn’t find it (right now I’m using the branch icon):

I agree that this UI is less transparent to the user than what your proposed, but I also think that once the user would do it a few times it would seem very straight forward. This UI is also easier to integrate visually in a possible revamp of macro configurations:

What do you think about this? It is possible I’m mistaken or maybe biased because of how familiar the UI has become to me.

[MichaelHamann]

Hi, first thank you very much for your proposals!

First, let me state what I don’t like about the current dialog, and then I’ll try to explain how I like that your proposals improve that (apart from improving consistency):

1. Most of the time when I open this dialog I want to link to a URL (as links to other pages are usually handled through the quick actions). It takes me two clicks and I need to carefully target this tiny button to change the link type to a URL.
2. It took me more than two years to find out that you can click on that “page” icon to open a page tree. I always thought that was just to show me the currently selected link type.
3. It is quite hard to create a link to a new page using this dialog as you cannot select a parent page and a title like in the new page dialog.

For point 1, I really like the tabs @tkrieck is proposing. They are immediately visible and require just a single click on a click target that is comfortable to reach. For the macro dialog use case, I think in most cases you only have a single type of reference and thus the tabs won’t be relevant.

For point 2, this is the one point that’s not great yet in the proposal by @tkrieck: it’s totally not obvious to me that the search icon would open the tree. I like the idea of @amilica to introduce a dedicated icon for that. This icon could also be next to the input as it is not really connected to that input.

For point 3, @tkrieck has a “Create page” button, but it is not clear where this page “Procedures” in your screenshot would be created. Could we open a dialog similar to the left part of the “create page” dialog when selecting that option? Or just include these controls in the link dialog after clicking a “Create page” button similar to the “Upload” button for files?

A comment regarding the attachment use case, it would be great if the following two features could be considered:

1. copy & paste files (into the input?)
2. rename the file before (or after) the upload. This is particularly important for drag & drop and copy & paste as there the user frequently doesn’t control the filename.

I think the idea of integrating the possibility to transform a full URL into a page reference is also nice, it still happens from time to time for me that I first copy a URL and then notice, ah, no, I need to copy the reference (in particular as in other cases like this forum I indeed need the URL). But I guess that could also simply be integrated into the search form, that when you paste a full URL it automatically suggests the page (and maybe even parses the anchor?).

[tkrieck]

@amilica

I feel we should still aim to have it pretty compact, letting us use it in other places where it should be, but it isn’t.

I like that, but what if we could make this more automatic, based on what the user types in the box. And make the “type” the first button on the input group. For example:

Similar to what we have now with quick search. Now, I don’t know the technical feasibility of this. But if possible, it would be more reactive to what the user actually wants instead of relying on the user selecting everything by hand.

@MichaelHamann

Could we open a dialog similar to the left part of the “create page” dialog when selecting that option?

We could, but it would be a dialog on top of another dialog, and one that takes the user away from its primary objective (creating a link). That’s why in my mockups I mention that the page should be created on save automatically, as a child of the current page. Maybe I should add a brief explanation to the interface on this.

[toothspaces]

Hi,
first thank you very much for your proposals!
Like @MichaelHamann …

I toadly agree with all that have been proposed and discussed.

Thank you again.

What I don’t agree on : the compact thing.
What the advantage of compact ?
If it make you click each time on two tiny things, to reach what can be reached with one click in a large zone (tab header…) ?

IMHO, the link dialog is made for people that know very well the tool, and work hard to write a page.
Your proposal is… refreshing.

@MichaelHamann

• It took me more than two years to find out that you can click on that “page” icon to open a page tree. I always thought that was just to show me the currently selected link type.
• It is quite hard to create a link to a new page using this dialog as you cannot select a parent page and a title like in the new page dialog.

Yes… same experience for me.
And a feeling of WTF each time I have to use it…

---

What most important, IMHO, is not only the interface, but the features.

=> I wish a link box that is modular and customizable, with some hooks that allow to plug in some usual features.
(for Christmas ? … seems time to write the letter… )

Something that would need some programming and technical customization, but with some plugs that make things more easy. (modular architecture).
“plugs” : I mean “des points d’entrées”. Some hook mechanism… and architecture that allow to provide another piece of code to make the job, for the custom feature.

Kind of feature :
The selection and typing of the link : to be able to change the plugin, and put our one.
With special feature, custom : provide some proposals, filter on some custom criteria, etc…

The addition of a tab,… that could be :
“link to pages about security” (on a dedicated other web site of the company),
or “link to FAQ items”, etc…
For custom needs.

Very important : being able to build the “title” attribute, or the “target” attribute, with some proposal that is built by programming. To provide a proposal that is “home made built”.
Example : the title is built with : the space name + the title of the page + a short summary of the first line of text. Or whatever custom way to build it.

Very important : being able to build the link with some additional feature, prebuilt for the user. The idea : make some links like the one you can have in Wikipedia : with the mouse over show a nice tooltip, with sumary of the article linked to.
So powerfull, for reading the content of a page… and have a peep on the linked page without going to this page …
Being able to provide the user with some tool to build these kind of links.
A tool that provides “the most easy way to build them”.

For pages of the wiki, as well as other external source of information (other website).
Usual use case : a company provide to the users of the XWiki platform and tool, … some dedicated link dialog, that aim directly and easily to another platform of the company (security procedures, internal product description tools, etc…)

By the way, if some custom compact link dialog is available, then the platform admin, or may be even each user, could choose for the compact link dialog, or regular link dialog.

All this complexity of the additionnal feature is left to the customization and programming, on the customer side…
XWiki provide the modular architecture, and others do their customization.
Providing some nice link dialog features, as extension, is part of this global schema.

---

For the Connexion and Authentification feature of XWiki, there is some modular and pluggable feature, to offer the customization of how to make the identification and authentification of a user.
With LDAP, with SSO with Google, etc…
Both interface and process are customizable.

The same for the link dialog ?
Open the door to add some custom feature ?
with full programming (Velocity, Groovy, Java, Javascript,… ) use, … if needed.

---

XWiki is about organizing the information.
Making a link is a master, center feature of the platform/tools.
(2 years “to find out that you can click on that “page” icon to” ?
By one experimented user. … seems there something to do, there…).

---

And… documentation of all this customization ability.
The only thing I could find is :
Add a new Link Type

And this extension documentation :
CKEditor Integration (XWiki.org)
extensions.xwiki.org › xwiki › bin › view › Extension

The way to customize the link dialog, now, is to rewrite the extension and make our own ?

Hope it helps…

[Wardenburg]

Hey everyone,

great suggestions @tkrieck , I agree that users struggle with links, whilst it is a crucial part of a wiki (internet? ) environment!

Some suggestions/notes from my side;

• The link options are hidden for most users
  IMO The anchor functionality is very powerful when linking to xwiki pages but it is hidden and it is relatively advanced to have users copy paste the correct Anchor string (i.e. HCasesensitiveheader). Perhaps something can be done to have users easily / more readily select from the table of content items from the selected page when creating a page type link?

• The target window of the link is something that can be defaulted now (which will help most users) but it’s probably worth taking this part of the UI in consideration when creating the new theme. Personally I could live with ‘same window, new window’ being with more readily available radio buttons/checkmarks and the rest of the options staying in the dropdown - but perhaps that’s more about my preference/use case. (Forgive the dutch mumbo jumbo of the image )

• Finally theres the Mailing tab, it’s worth noting there are other types of links that can be linked to (i.e. think link types as SIP: for skype/teams and/r callto: urls for linking to phone numbers), perhaps a way can be found to support these types of links from the interface