Design improvements to the Link UI

[mtias]

The link UI could use some design tweaks to bring it line with the evolution of the interface:

• Update the "return" icon.
• Update the circular + to the now standard black [+].
• Revise the lines: should they be darker? Should they be equal in length?
• The "create new page" flow only happens after search has finished. Should it be shown sooner or does it risk too much in terms of possible conflicts? I think it should be shown immediately.

Suggestion for icon:

[karmatosed]

In tackling this problem I think it would be a good idea to split this into iterations that bring inline with current styling and then start to consider later going beyond the existing experience. As a result the first exploration I've done focuses on iteration, specifically around these points:

• Update the "return" icon.
• Update the "+" circular visual.
• Iterate the spacing and lines.

The "create new page" flow only happens after search has finished. Should it be shown sooner or does it risk too much in terms of possible conflicts? I think it should be shown immediately.

I tend to agree with you @mtias that as soon as we can show this, it should be shown. I would love to know other's feelings here and what the possible conflicts could be. I came to this decision based on having to wait for the option is a hitch in the experience flow that's avoidable if it's shown immediately.

Iteration

Icon

I did explore whether the return icon existed @mtias, this might be myself not finding it so please let me know if that's the case. However, I created something approximate to your suggestion that I think could work:

I'm interested in opinions if this aligns when seen in explorations to come.

Smaller iterations

There are 2 'stages' to this I have explored, searching and results. First, searching:

Here the following changes to the search results:

A summary of points that have changed are:

• New icon.
• Aligning the + styling.
• Removing one of the lines: this brings the same relating content together.

Futher exploring

Taking the idea of reducing the horizontal lines, some further explorations lead me to the following:

What the above explores and raises is perhaps what the intent should be to the grouping. Perhaps there is merit in grouping by actions, for example creating and opening in a new tab. I would love some discussion around this but do feel this goes beyond the iterations that can start happening.

Also worth noting is the above uses non-grey text for help description, this is a bigger discussion, however I added it to fuel some thoughts.

Looking beyond

Whilst the above explorations do all focus on the existing interface, I think in working through this there is some more work to be done around this interface. Where possible, the link interface should be as similar as possible and trusted in what it will be. I do however think focusing feedback on these explorations begins that and gets some experience gains in earlier.

Feedback

I am looking specifically for feedback on:

• Is the icon aligned with existing work?
• Is there anything missing from these explorations?
• Is there anything should be iterated on in these explorations?

Next steps

Once I have some feedback, the goal will be to iterate or get a PR as soon as possible for this. There is some good 'low hanging' fruit experience wise to catch here which is always a great.

[karmatosed]

I worked on a little PR of some of the changes here, specifically the removal of border and also adjusting some padding:

[mtias]

@karmatosed added the icon to the figma, it's in the "explored" group:

[karmatosed]

@mtias thanks, that's great!

[karmatosed]

Updating here some more work that has gone on in the PR, this includes extra changes like label styling, spacing and some general tidying.

[karmatosed]

There has been quite a bit of work done around this and next is to get some development assistance around this.

Current

After a little back and forth in a PR, visual updates are now in. All the new icons and some additional iterations are in place. This is what currently it looks like:

What is next?

The missing piece is around the way 'create' works. I would advise this should as said by @mtias be shown as soon as possible.

The "create new page" flow only happens after search has finished. Should it be shown sooner or does it risk too much in terms of possible conflicts? I think it should be shown immediately.

As noted by @shaunandrews in #26317, then taking this to other areas for the link interface would be needed.

[skorasaurus]

ref #24099

[getdave]

@jasmussen Do you think we can safely close this one out? I seems we can but I would appreciate a second opinion.

[jasmussen]

A vast amount of stuff has happened to the Link UI since this ticket:

Enough that in most cases it makes most sense to close out this ticket, and if need be, open new specific ones. In the case of this issue, one remaining task is the "Create new" item mentioned here:

The "create new page" flow only happens after search has finished. Should it be shown sooner or does it risk too much in terms of possible conflicts? I think it should be shown immediately.

That still appears to be the case:

I wonder if a quick fix is to just literally show the "Create new page" immediately, as soon as you start typing, so you don't have to wait for the search to complete?

---

Related, I think there are some design improvements we can make and track separately. One of the challenges we have is that the weight of items is pushing down the "Create new page" button:

Could we reduce each item to one line? In this example, the word "Pocahontas" hasn't been used on the site at all:

But if there was a page called "Pocahontas", it would show up first:

In this case, the word "about" shows up in quite a few places:

Let me know what you think and I can create a new ticket tracking future design improvements.

[shaunandrews]

I'd love to see a more thorough and wholistic design for the Link UI that covers all the scenarios and use-cases across the editor, it's blocks, and perhaps wp-admin. I'm all for small tweaks in various separate issues/PRs to incrementally improve the existing UI, but I'm still lacking a general end-goal or direction.

For instance, it seems there are now icons for different post-types, but I'm not sure these are placed correctly (Should they be on the right? Maybe they should be smaller?) or if they're added visual weight is necessarily worth it. Or, is dropping the URL/permalink actually helpful, or harmful?

I think the mockups you posted above are a good starting point; They reduce some of the spacing, line-heights, and overall size of the UI. Maybe some more iteration there will help provide a solid map towards where smaller tweaks and issues should go.

[getdave]

Thanks for this review 🙇 Given that all but one of the concerns have been addressed I'd personally I'd like to see a new Issue tracking new improvements.

I wonder if a quick fix is to just literally show the "Create new page" immediately, as soon as you start typing, so you don't have to wait for the search to complete?

Let me look into this one.

Could we reduce each item to one line? In this example, the word "Pocahontas" hasn't been used on the site at all:

I know that we can't easily do this because doing so makes it very hard to discern the different between certain results. We intentionally wrap longer items to ensure the user has full access to the information about the search suggestion.

We addressed this in #33753 in response to user feedback in #33586.

...the weight of items is pushing down the "Create new page" button:

I wonder whether making a dedicate UI button for this function would be better than tacking on a "Create" option as we do currently? The question of reducing the number (quantity) or size (visually) of the results has been suggested a few times in various places but it always ends up with us loosing to much information that the user cares about in the results.

I'd love to see a more thorough and wholistic design for the Link UI that covers all the scenarios and use-cases across the editor, it's blocks, and perhaps wp-admin.

I'd be happy to see this and work with a designer to iterate on it.

[karmatosed]

Thanks for this review 🙇 Given that all but one of the concerns have been addressed I'd personally I'd like to see a new Issue tracking new improvements.

+1

[jasmussen]

Coming back to this one, here are the freshest mockups showing URL dialogs filtered across a slew of contexts:

And the search options:

Are they appropriate to update this issue? Or is it best to create a separate issue?

[richtabor]

I'm closing this issue as quite a bit has adapted since, and we have #50891 moving forward that focuses on a holistic UI/X refresh of LinkControl.