A discussion on a new UI of external links editor

Thanks to everyone who spent time testing and giving valuable information in return. I read it all from the beginning as Iā€™m mentoring @yyoung with his project, enabling me to also answer about important points that have been discussed during the development.

As a reminder, I did push mostly existing tickets about URL editing to the list of ideas for GSoC this year, which have been investigated by @yyoung to make his own proposal. It got reviewed and approved. The current roadmap is slightly different from the initial proposal as implementation details become more clear. The current UI change is relatively small compared to the rest of the expected tasks. More insight should be provided about the overall progress of this project soon.

2 Likes

I love this.
(still feel strange to have the ā€œtypeā€ selector under the urlbox tho, seems itā€™ll take a lot of vertical screen estate. but I see that keyboard users prefer it.)

Updated UI layout is now available from beta website, it features both URL editing popover (MBS-11391) and grouping of edited URL relationships by external link (MBS-11680), and makes use of previously improved error messages (MBS-11698). Next improvements still in progress making use of this new layout are to support auto-select/cleanup/validation of more than one relationship type for external links (MBS-9902), to support adding URL relationship with begin and end dates (MBS-3774), and to support bypassing URL relationship validation (MBS-9040). More improvements to come in further releases.

3 Likes

Had a quick poke at the beta. Looking good. Seems to work for us old keyboard users.

Only curiosity - why are the URLs numbered? What is the 1. 2. 3. for?

2 Likes

When adding an existing URL again, this number is used as a position reference in error message to inform where the original URL can be found and where the second relationship will be added. This is particularly useful when there are so many external links that the whole field set donā€™t fit in the screen.

3 Likes

Sorry, I can break any test. Devs hate me. LOL. :rofl:

I just pasted this URL into the box and it acts the same as the current implementation and complains -
bryancorbett.co.uk - a link WITHOUT any http, https or www. It is still valid, but gets rejected.

If it is typed with www. on the front it gets resolved. Would be good if that happens to other valid links like this one.

BIG plusā€¦ if this is pasted into the current live website it is a PITA to fix as my attempts to add the https:// on the front are thrwarted by the GUI auto-correction. Your new interface is much better as it does at least let me type up the front of the box.

2 Likes

Sorry, but I didnā€™t get the point, do you mean the new UI introduces a new bug or it fixes a current issue? :slight_smile: BTW, I canā€™t reproduce the bug, could you be more specific?

2 Likes

Errrrā€¦ donā€™t know what is going on. It works now.

AH - hang onā€¦ just tested something. It was PEBCAK. I was pasting text which had a bogus SPACE in front of the text. Whoops. My paste buffer was " bryancorbett.co.uk". A SPACE in front of the B.

Sorry. Though that could change to the request to remove white space from the text as part of validationā€¦ Told you I find imaginative ways to bork things :laughing:

2 Likes

OK now I can reproduce it, it exists both on stable version and on beta, and it would be better to fix it, but Iā€™m afraid we canā€™t be certain about whether to add ā€˜httpā€™ or ā€˜httpsā€™.

1 Like

Thanks for heavy testing. This behavior is not new to this UI though. Now tracked as:

3 Likes

I canā€™t really answer the http vs https thing. Just use the same as you do for www. addresses. Usually if you hit a website with http it will autodirect to the https. But https is now much more common. Toss a coin. :smiley:

I hit things as a ā€œdumb userā€ so just try and use things. Yes, I have experience of GUI design, but all the best GUIs handle unpredictable users.

I know I copy URLs from all kinds of places. Often off of a website, so various formatting characters will be in the buffer when I paste. Your new GUI is easier to clean up text as the current one keeps putting the cursor at the end of the edit box when it is auto-correcting.

For the first time Iā€™ve tried the new URL editor when adding a standalone recording.
I add lots of music videos, that is to say thousands.

Usually it goes like this:

  1. Open tabs in advance (seeded with MBID if plan is to add multiple from same channel)
  2. Copy paste the title
  3. Type the length then Tab
  4. Tick ā€œVideoā€ using Space
  5. Copy paste video URL then Tab
  6. Tick ā€œVideoā€ using Space

Adding links was pretty smooth in the old editor:
old URL editor

In the new editor unfortunately I have to Tab twice to reach the video checkbox (a sacrifice I could live with if itā€™s intentional)

new URL editor

However in the old URL editor the remove button could be reached after a second Tab
old URL editor 2

Maybe the new URL editor could be changed to have the same tab order regarding the remove button and video checkbox as before?

5 Likes

Sorry I didnā€™t notice that difference before. This is due to a change in layout, so itā€™ll take some extra effort to change it back.

In the new editor you can also use Enter to submit and move focus, currently if a type is automatically selected, the focus will go to the next input box, otherwise itā€™ll go to the type selector. Maybe we can make it go to the checkbox as well, Iā€™ll look into that soon, thanks for reporting.

1 Like

I wonder if itā€™s worth adding ā€˜tabindexā€™ attributes to these pages to make it easier to change up in future/to avoid ever having to rearrange tables.

Vaguely related ticket + discussion (about not setting anything to -1 for accessibility reasons)

1 Like

Right, thatā€™s also a possible way, but needs to be tested.

1 Like

I tested that on test.musicbrainz.org /artist/<MBID>/edit
The behaviour when you press enter in a field is usually (and currently on MBS) to submit the form.
I usually press enter on one of the URL to submit the Edit artist page.

It seems a little strange to me to expect pressing Enter in a field for anything else than submitting.

5 Likes

The test server has not been updated for a long time.

Unfortunately we have to use that for links submission and merge confirmation as for now, but you could still press Enter in an empty field to submit the form.

Thereā€™s now two new features on beta for the URL editor, which were mentioned by @yvanzo on this earlier post:

Go give them a try, maybe?

1 Like

Overall it looks good, though I think the current layout is a bit messy:

Current Beta:
orig

Mock up showing what I would prefer (but thatā€™s just me):
mockup

Among changes:

  • move Add another relationship under existing relationships
  • invert position of delete / edit icons (like they are just above in this example)
  • add a separator to ease reading
  • I feel the ? icon isnā€™t needed, the entity could display it on rollover directly (for example, BBC Music ? could be replaced with just BBC Music, but still displays extra infos on rollover)

Just a quick feedback, the whole thing is quite an improvement already (finally only one Bandcamp URL)

Also, whatā€™s the purpose of numbers? If they are here to stay, they should be first (from the left), as it is usual for numbered lines.

8 Likes

Not had time to test yet, but one question. Why is the interface not consistent:
image

Compare top part of screen to lower part. Are all pencils now going to the end of the line instead of the start? Are they tidier at the start of the line?

3 Likes