A discussion on a new UI of external links editor

Tags: #<Tag:0x00007f58fce8c8b0> #<Tag:0x00007f58fce8c7e8> #<Tag:0x00007f58fce8c6d0> #<Tag:0x00007f58fce8c5e0>

Hello to all editors, we developers are planning to roll out a new UI of external links editor, and we would like to hear your opinions and suggestions!

Here is how it looks like:

The main purpose of this new UI is to solve MBS-11391, we’re going to introduce a new popover for editing URL of the links, which contains 2 fields:

  • URL: Your raw input
  • Cleaned up to: The result of URL cleanup, is the one that will be stored

Here’s how it works:

  1. Add a new link by inputting URL in the last input box
  2. Press enter or click other elements to add the new link to the list above (You’ll not be interrupted by URL cleanup while entering, but cleaned up URL will be used when it’s added to the list)
  3. To edit an existing link in the list, click the “Edit Item” icon to open the popover, edit the URL and preview the differences between 2 URLs, then click “Done” button or press enter to save

Another purpose is to provide a more impact layout, this may not be obvious at this moment, but it will after we group the links by URL to solve MBS-11680, like this:

(This feature is still working in progress.)

The new UI will eventually be available on beta server for testing, but we would like to have your early feedback, plus your most common usecases and urgent needs for improvement, thanks!

8 Likes

Grumpy old man mode: On.

This ticket says:

It would be nice to have separate display for the URL entered by the editor and the normalized URL.

Sorry to challenge this nice to have URL clean-up preview. :bowing_man:

It seems that adding and editing URL relationships become more complex and less quick, less straightforward.

And I’m not sure how it is better to see a preview of the cleaned up URL instead of immediately fixing it in place.
:thinking:

This ticket says:

Current external links editor displays link type as a label or select next to each link, this implies an external link can only have one relationship.

But I’m pretty sure I’ve often seen digital releases having the same Bandcamp URL for both streaming and purchase relationships to the same release. No?

6 Likes

How does this affect Development/Release Editor Seeding - MusicBrainz Wiki

2 Likes

I think the problem is that if URL cleanup is taken in place, it will interfere with your input, e.g. your input may be immediately overwritten by the cleanup with a wrong URL.

And I agree that the new UI does make the editing process more complex and we’re working on it, but sometimes it seems unavoidable.

We have also come up with an idea to show a bubble on the right to display clean URL, but it also has its disadvantages, I wonder if this looks good to you?

Yes, the statement in the ticket is not true due to a misunderstanding. While we have supported multiple relationships for a single link, it is better to group the links by URL for clarity.

1 Like

We will ensure seeding still works after this change.

I think everyone is pasting URL, not typing.
And if a clean-up is wrong, it will also be wrong with the new system.
The new system does not allow bypassing the clean-up, I guess
If a clean-up is wrong, it should be fixed.

Currently I directly paste.
I would not want to click open a pop-up then paste then click OK.

I don’t… need a clean-up preview.
What’s the point of a preview when anyway you don’t have the choice, your URL will be cleaned up anyway (and that’s good)?

Sorry I think I didn’t get the benefits but it’s just me maybe.

And editing on MB is already time consuming, it should not be made slower / one more click here and there.

And it seems more difficult to maintain.

I hate being so negative on all aspects, I’m so sorry… :dizzy_face:

I have just found it’s a whole project. I will read its history, I think I will understand then.

4 Likes

Well, the cleanup works fine when you directly paste the whole URL, but if you type the URL character by character, there might be a problem.

Then I think a bubble on the right would be suitable for you.

You’ll only benefit when you are typing the URL, I guess.

Right, we should look for a better approach.

I don’t think anyone types the URL relationships. :wink:
I will read the project page I’ve just found to understand more the reasons, don’t worry tou much with me, other editors should comment too.

1 Like

This might be more common than one thinks:

And it wasn’t just one or two persons. Seen it several times while voting.

2 Likes

Woo, updates!!

I wonder if something like this would be better to solve the URL cleanup issue.

image

More clicks and popups should be avoided for something like this imo. I don’t know if comparing before + after is necessary, maybe it is, but if I need to check for mistakes I’m afforded that chance in the ‘submit’ editing page.

Isn’t there also full substitutions happening with iTunes\Apple Music too? Changing the text in the box you are typing in seems too jumpy.

When you select a Label, the text to the right of the label will then be clickable to allow you to check what you selected. Same with Artists, etc.

Would it not be more sense to just follow that idea? Sling the text to the right to be clicked on instead of re-writing the box when you are trying to type in it? Then on the Finish page show that new URL in the same way MB will show a before and after for recording swaps.

I like simple. Don’t give me more clicks as I am already filling in lots of different styles of boxes. And sometimes I have multiple URLs to copy and paste.

Hmm, yes, it would get more complicated for substitutions, my mockup assumes that there’s just text being removed.

I don’t have a problem with it going to the right, but I don’t like having to click the pencil icon and/or the done button - as you say, more clicks = bad.

Does something simple like this address the ticket, or am I missing something?

6 Likes

That’s what I was thinking. No clicks needed. Bubble disappears as I click on the next box down, but I can still keep editing my URL if I need to.

When you get to the FINISH page you can present both URLs there - as entered and as tidied up. Just like you show the before and after for recordings.

I stick lots of Pink Floyd discographies in these boxes. They never need an auto clean up as they are not recognises - but often I will manually edit them to remove excess text.

When I put in a Discogs, Bandcamp, whatever link I like the way currently this is a single paste operation and I then move on to the next box.

I also would not want to see the “import from discogs” or “import from Bandcamp” scripts disrupted. Been odd enough the past few days loosing many of the handy userscripts due to GUI changes. You forget how much you rely on them.

2 Likes

Seems good at first look, but there’s a problem:

URLCleanup will not only remove fragments but also add/change them, so we’ll have to use red and green to indicate additions and removals

Therefore, if there’re too many changes, the input box might be a mess.

2 Likes

Actually this is what my initial proposal looks like, and I think it can solve this issue, but my mentor suggested adding a popover, I’ll talk to him later.

1 Like

Unneeded, thanks to disable it. :wink:

Yes it’s just one step of a project to improve external links editing UI. Maybe the initial post of this topic didn’t recall it because the project had already been announced on the community forums beforehand. Note that plans are slightly changing as new issues are found. See also tickets @yyoung self-assigned.

It will be mainly useful to newcomers that do not understand why a different URL than the one they entered has been added. It will also help more advanced editors with noticing bugged URL cleanups.

Ultimately, it should allow to bypass the clean-up. Using this option should be noted in the edit data too, and can simplify reporting broken cleanup. However, this is future work that requires deeper changes.

External websites evolve all the time which fixing cleanup takes at least two weeks. It happens very often as we maintain a large number of cleanups. So it seems useful to bring more control to editors over links being entered.

Great, because nobody suggested this. The pop-up would be for editing links not adding new ones.

1 Like

Thank you. This was indeed @yyoung’s first proposal. The problem was the URL to be submitted (the clean URL) would not be visible from the list. It would require to point the mouse on the input field to see it in the bubble, so it doesn’t allow to visually check the whole form before submitting it.

After another discussion, two potential ways out are investigated:

  • either switching the content of the input box to raw/clean URL on focus/blur and showing clean URL in bubble on focus,
  • or adding auto-focus to input field in popover to prevent requiring an extra click to edit existing URL.
1 Like

FYI, we have the changes from MBS-11391: Show changes made to external link when editing URL relationship by y-young · Pull Request #2151 · metabrainz/musicbrainz-server · GitHub running on test.musicbrainz.org. For a quick example, see The Beatles’ edit page (you can log in as any user on the test server; all passwords are mb).

Feedback is always appreciated. :slight_smile: There was some discussion on IRC too.

3 Likes

An initial bit of feedback from me. I paste in lots of URLs when adding releases. Often linking to Pink Floyd discographies which are links that are never auto-corrected. So I’ll be using this a lot.

Short version: Question: why does the edit box disappear? Can’t this be left open and editable until I hit FINISH? Now when I make an error I have to hit an edit button for an edit box and OK the edit

Longer waffle:

  • The rest of the editor always leaves text ready to re-edit without clicking pencils and OK buttons.
  • It is much clearer to tweak what you have just added if it is still in an edit box.
  • At least one of the sites I copy\paste links from I need to paste the link then edit it. Often I’d only remember to do the edit at the end. Which will now mean an extra couple of clicks to open an edit box for an edit box to do an edit and hit OK.
  • Keyboard navigation has now doubled the number of tab presses I’ll need to do for each item. (Even more if I make a mistake and need that edit box for the edit box)
  • As a test, I pasted an Amazon link in, but now I have to select Amazon in the drop down on the left making things slower than the past automation. Even messier for keyboard navigation as I have to go backwards.

I am probably not the best person to ask as I don’t like work flow being redesigned. It is unsettling, but I’ll get used to it. I just don’t really see the benefit of making us click so much more just for some pretty pencils. An edit pop-up with OK buttons for an edit box just seems really slow.

I also realise that “keyboard navigation” is not a thing people do who are editing on phones, but some of us are old skool.

This is also going to kill even more import scripts. Why strip out edit boxes? The site redesigns lately seem to be having a really bad effect on the add-on scripts so many of us use as those script writers don’t have time to keep up with the changes.

Why strip out edit boxes? Is that going to happen everywhere else on a Release Edit page? Date selectors? Country choices? Label selection? Is this a start of a double click every edit? I don’t see the need of a style change like that when we enter data in a data entry mode then hit Finish to make it static again. It just looks weird and out of place when editing a Release. Your current forms are so good and efficient and obvious in use.

Sorry to sound negative. This is just plain honest feedback. I just don’t really see the benefit of slowing down editing to add pencils and extra OK buttons to an Edit Form.

Edit: Maybe I can see the point of an edit pencil if you are changing a single old URL on an artist page or something. But it is a big time killer on a data entry form for adding a new Release.

2 Likes

Yes I want to stress out that each time I can edit MB on computer, I heavily use the keyboard navigation.

For adding release URL, for instance:

  1. I click the first empty URL relationship
  2. Paste first URL

Then I Ctrl(+Shift)+Tab among my tabs to copy more URL and to paste them I Ctrl(+Shift)+Tab back to MB release editor and:

  1. Tab
  2. Tab
  3. Paste

Having more key presses or, worse, having to use the mouse instead of Tab Tab Paste, would be a pity for me. :wink:

2 Likes