A discussion on a new UI of external links editor

No, I still value accessibility design, especially in such a large global database. But since I have little knowledge about that, it’ll take me some time to learn and refine the design.

In my opinion they should be displayed next to the type select, since they’re attributes at relationship level.

Yes I think so.

Yes, and I guess begin/end dates are more rarely used than the ended flag, but it make no sense to only add a checkbox for that instead of a form for all attributes, since it still introduce an extra click.

4 Likes

It’s still in UI prototype stage and feedbacks are still welcomed, this time I decided to present the prototype earlier after the last lesson learnt. :slight_smile:

Anyway, thanks for your feedbacks again.

5 Likes

It sounds like an excellent addition to me, I would use it :slight_smile:
(I have rarely bothered trying to set an ended date with the current UI)

Great work btw @yyoung, a lot of (clunky…) UI edits just get put through without coming through the forums at all! This may have been a painful process having to redo stuff here but the result is going to be so much more user friendly as a result :raised_hands:

2 Likes

The URL input field (or edit box) was doing changes without notifying you. It was most often working correctly but happened to block editor from typing some characters, to make wrong changes, to become outdated after external websites made breaking changes to their URL patterns (which happens very frequently and usually takes weeks to get fixed).

No one feels the need of seeing the untouched URL you did paste and the automatically formatted URL separately, but everyone is reporting issues about URL Cleanup (400+ tickets created so far, many of them about this specific automated clean-up feature) that could be more effectively addressed if more insight was given to editors. That is the main motivation of this change which is just a prerequisite to further improvements. For example, it is also planned to allow bypassing the automated formatter when needed.

The input field is replaced with a clickable URL only after you started focusing on something else (either by clicking elsewhere or by hitting the TAB key). When hitting the edit button, the input field in the popover dialog is auto-focused, so it is not really more efforts than getting focus to the input field again.

That is right but it does not make as many changes to the content of the input field either. The inspiration for replacing input field with button and popover comes from the relationship editor which allows for more input capabilities and better visibility of actual changes.

Which site? @yyoung would probably be happy to include it into use cases/real examples.

One motivation of creating a popover (or bubble) dialog is to make room for additional features without damaging the navigation in the external links field set. So yes, it requires more key strokes, but it saves more of them given the advanced features to be added.

I have not been able to reproduce your test, because Amazon is autoselected in the drop down when I paste an Amazon link. Can you please provide the URL you pasted and the URL of the editing form?

Sorry about that but it is not possible to add the wanted features without redesigning the external links field set. I also got used to shift-tab and all sort of weird habits to go through the old UI that has its own issues. Some tasks will become more difficult for the ones, easier for the others. The new UI will most probably not be optimal at first but it will allow to expose the many improvements being made behind the scene. We didn’t rush the new UI either, we spent a fair amount of time on preventing the UI to require too many additional efforts from editors, still we don’t know about all workflows and needs and that is how your feedback is particularly useful.

It is not being redesigned for the fun of redesigning stuff or for some pretty pencils. It helps with exposing features that were not there before, it allows exposing future features too. One reason for presenting these changes with so little actual improvements (just showing changes to the URL for now) is to identify navigation issues as early as possible, given every editor may have a different workflow and needs.

Automated tests have been updated to make sure this change doesn’t break the seeding feature userscripts are based on at least.

3 Likes

Yes, external links field set is missing some features from relationship editor. Replacing URL input field with the submitted value will allow to implement the orange highlight for edited links like for relationships.

1 Like

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