speced / bikeshed

:bike: A preprocessor for anyone writing specifications that converts source files into actual specs.
https://speced.github.io/bikeshed
Creative Commons Zero v1.0 Universal
1.09k stars 199 forks source link

WHATWG spec reference boxes have a usability regression #2772

Open domfarolino opened 8 months ago

domfarolino commented 8 months ago

Navigate to https://infra.spec.whatwg.org/#strings and click on the bold "string" definition. In the reference box that pops up, click #string at the top. In the past (and in maybe every other bikeshed specification) this would fragment-navigate you to #string, centering on that definition. Instead, the reference box does this awkward slow animation as it slides to the bottom left of the screen, and no navigation occurs.

If you want to navigate to the #string definition, you have to click on any reference within that reference panel, and then go back up and click on #string at the top of the reference panel to center you correctly on the definition. This seems like a usability regression:

  1. I think anytime you click on #string at the top of the box, you should be fragment-navigated to the definition.
  2. Why does the mouse turn into a question mark when you hover over definitions now?
  3. Why does the reference box animate now, slowly to the corner instead of just snapping there?

I noticed all of these on most WHATWG standards, but not really any other bikeshed specs. Any thoughts as to what is happening here?

dlaliberte commented 8 months ago

Hi Dominic. Since I was the instigator (and primary implementor) of these changes, I am very interested to hear your feedback. It seems to be working now as intended, so maybe we need to make some more changes so the behavior is less confusing.

Navigate to https://infra.spec.whatwg.org/#strings and click on the bold "string" definition. In the reference box that pops up, click #string at the top. In the past (and in maybe every other bikeshed specification) this would fragment-navigate you to #string, centering on that definition.

The way it used to work, which I found very confusing, was that two things would happen when you clicked on the #string link:

  1. The window scrolled, putting the definition I had hovered over in the center of the window.
  2. The reference box disappeared and was immediately displayed at the bottom of the window.

Consequently, I wasn't aware that the reference box was moved to the bottom of the window; it just seemed to disappear. The scrolling motion of the navigation was effectively like a slight-of-hand distraction that obscured the immediate redisplay of the reference box at the bottom corner of the window.

Instead, the reference box does this awkward slow animation as it slides to the bottom left of the screen, and no navigation occurs.

The initial redisplay of the reference box is immediate, straight down to the bottom of the window, and then the animation that slides the box to the left should be done in about a second. The intention of the animation was to make the repositioning visible so you know what happened to it, rather than appearing to merely disappear.

Scrolling the definition (that you were already looking at when you clicked on the link) to the center of the window is not particularly helpful, and instead, it seems to be more of a distraction since you are not really navigating to a link that is somewhere else. The definition is already visible in the window where you were hovering and clicking. If you need to see what was above the definition, you can do that by scrolling (with the mousewheel or by other means) instead, even while the reference box is displayed under the definition.

If you want to navigate to the #string definition, you have to click on any reference within that reference panel, and then go back up and click on #string at the top of the reference panel to center you correctly on the definition.

The current behavior is a little different from what you describe in some cases. If the destination that a link would navigate to is already visible on the page, then no scrolling occurs. Rather, the destination is highlighted, and the highlight fades over one second. The intention is to make the destination visible without the distraction of a scrolling event. When you click on the #string link, the definition itself is not highlighted, unless scrolling is required to make it visible on the page. I think that lack of highlighting is actually a bug, and it should instead highlight every destination in all cases, regardless of whether scrolling is required.

I tend to think that the highlighting of the destination is not quite enough to be noticeable. Scrolling the destination to the top of the window is not particularly desirable if it is already visible within the window, but it may serve to draw attention to that destination on the first line, if the scrolling is not otherwise distracting.

This seems like a usability regression:

  1. I think anytime you click on #string at the top of the box, you should be fragment-navigated to the definition.

Navigation to a page with a link that includes a fragment actually scrolls the page to display the destination at the top of the window, not the center. Is there some user-customized behavior I am unaware of?

  1. Why does the mouse turn into a question mark when you hover over definitions now?

The definition link does not behave like other links that navigate to somewhere else. Instead, clicking on the definition displays information about the thing you just clicked on; hence, the question mark cursor seems entirely appropriate.

  1. Why does the reference box animate now, slowly to the corner instead of just snapping there?

Unless you are already aware that the reference box will appear in the corner, you will tend to not see it. I know that was true for me. I wonder how many other people were similarly confused.

I noticed all of these on most WHATWG standards, but not really any other bikeshed specs. Any thoughts as to what is happening here?

This should be true of all bikeshed specs that have been regenerated since the last release of Bikeshed. I suspect your experience of being surprised by the change is more about what you were used to than that the new behavior is a regression. I am curious if you might get used to the current behavior. I am also curious about what other people have experienced.

domfarolino commented 8 months ago

The way it used to work, which I found very confusing,

Do we know for sure that other people found this very confusing? I personally find it more confusing that one link (for the actual definition) in the reference panel now behaves totally different compared to all of the other links in the panel. I think we should figure out if the old behavior was actually causing problems or confusion to most spec consumers before changing it.

  1. The reference box disappeared and was immediately displayed at the bottom of the window.

Consequently, I wasn't aware that the reference box was moved to the bottom of the window; it just seemed to disappear.

Just to be clear, are you saying that after clicking the definition link in the reference panel, you couldn't see it down in the bottom left of, e.g., this screenshot:

Screenshot 2024-01-25 at 1 01 45 PM

Again, is this a known issue that has caused editors or implementers pain that needed to be addressed?

The scrolling motion of the navigation was effectively like a slight-of-hand distraction that obscured the immediate redisplay of the reference box at the bottom corner of the window.

I don't think I understand this. Normally (in the past) you'd just get an immediately synchronous same-document fragment navigation with the reference panel still appearing at the bottom left of the screen. What was the problem with that? I think everyone understands that links in standards are generally same-document fragment navigations, so that behavior seemed really consistent with just how the web works. I would love to see that part of this change reverted.

The intention of the animation was to make the repositioning visible so you know what happened to it, rather than appearing to merely disappear.

I don't think I ever saw it just randomly disappear, after clicking a link in the reference window. Is this a widely known issue that I'm not aware of? I never had any issues with this.

Scrolling the definition (that you were already looking at when you clicked on the link) to the center of the window is not particularly helpful, and instead, it seems to be more of a distraction since you are not really navigating to a link that is somewhere else.

Yeah this part makes sense, I have no qualms with simply highlighting the definition if it is already on-screen for you to see (instead of scrolling you to it). I just think that clicking links in the reference pane should always navigate the fragment/URL bar to that link or reference. That's exclusively how I would get links to specific references of definitions all the time to send people. Now that is often hard or impossible. For example if you navigate to https://dom.spec.whatwg.org/#trees and I want to send someone a link to the "descendants" definition, I think clicking the bold descendants should change the URL bar to #concept-tree-descendant (while preserving the scroll position on the page, if you really want that behavior). Same goes for if I want to send someone a specific reference to that term that happens to be within my viewport. For example: https://dom.spec.whatwg.org/#ref-for-concept-tree-descendant%E2%91%A0. Now I have to click any random reference in the panel that's way out of viewport just to scroll me far away, and then finally click on the reference that I actually want, in order for it to fragment-navigate me back up to the top and give me the URL of the reference I actually want to send someone a link to it. And that's not even always possible, since there's no guarantee there's a reference out-of-viewport. Either way this is a terribly hacky workflow.

The current behavior is a little different from what you describe in some cases. If the destination that a link would navigate to is already visible on the page, then no scrolling occurs. Rather, the destination is highlighted, and the highlight fades over one second.

Fair enough, I just think the URL bar should either always change or never change. Whether the reference or definition is within the viewport should have no impact on how usable my URL bar becomes while navigating around a spec.

Scrolling the destination to the top of the window is not particularly desirable if it is already visible within the window, but it may serve to draw attention to that destination on the first line, if the scrolling is not otherwise distracting.

Do other people think this? Was this a common complaint that editors and implementers (i.e., spec readers) had? I feel like it wasn't, and this decision may have been made without that data.

Unless you are already aware that the reference box will appear in the corner, you will tend to not see it. I know that was true for me. I wonder how many other people were similarly confused.

I have never heard of this complaint before, and I believe I am very tapped into the spec editor ecosystem. Please, please, please, consult avid spec users before making this kind of change on a whim/hunch.

dlaliberte commented 8 months ago

Not updating the URL to correspond with any link you click on was not intentional. I can see why that change would be disruptive, and we should be able to fix that while preserving the rest of the behavior.

I made these changes with Tab, who I am confident has lots of connections with spec users. It certainly wasn't done on a whim or hunch. We didn't do any study of users experiences with spec documents, but I believe it is widely known that there can be many confusing aspects of web link behavior. A general problem I observed, as a new user of spec documents, is that it was very confusing to be confronted with a large number of links that had a variety of very different behaviors, all looking otherwise identical. I generally want to know where a link goes or what it does before clicking on it.

tabatkins commented 8 months ago

I personally find it more confusing that one link (for the actual definition) in the reference panel now behaves totally different compared to all of the other links in the panel.

That link, tho, is by definition to the exact element you're already looking at, and hovered immediately prior. I'm not sure I understand what benefit there would be of scrolling that element to the top of the screen.

Hm, tho, I hadn't noticed the behavior where if the target of any of the panel links is already on screen, it doesn't change the URL. We should fix that, that's weird.

dlaliberte commented 8 months ago

Just to be clear, are you saying that after clicking the definition link in the reference panel, you couldn't see it down in the bottom left

It wasn't that I couldn't see the reference panel if I looked in the corner; it was that I didn't notice that the reference panel had moved. After the page was done redisplaying, or scrolling, or whatever the link took me to, the box that suddenly appeared in the lower left corner was the same as the box I was just looking at when it seemed to just vanish under my mouse. Furthermore, the definition I started on is still visible somewhere on the page. As a new user, I would have to know that before I click on a link at the top of the reference box, it will do what it is about to do. Then, the next time I do something similar, I can expect that it will behave in a similar manner. But how can I tell one kind of link from another if they all look the same?

domenic commented 8 months ago

I want to strongly +1 the desire that links behave uniformly. In particular, if I click the text #string which is a link to https://infra.spec.whatwg.org/#string (as indicated, e.g., by the status bar on desktop), then this should have the same behavior as putting https://infra.spec.whatwg.org/#string in the URL bar and pressing enter.

The most important reason is that for me, the purpose of opening the dfn panel and then clicking #string, is to get a link to share with other people. This means a few things:

I think there were some attempts to fix the URL updating, but I just did a re-deploy of https://infra.spec.whatwg.org/ and they are not working. The link is also not scrolling to the top of the page. And the weird slow-mo slidey definition panel is definitely a strange experience that other people don't get if they open https://infra.spec.whatwg.org/#string in a new tab.

I'd really like the first two fixed; they seem like just bugs. As for the third, the slidey slow-mo thing seems pretty strange. Can we just not move the definition panel at all, when clicking on the #string?

domenic commented 8 months ago

I also would like to support the general sentiment of "if it isn't broken, don't change it..." Adding new capabilities is cool (e.g. the linking text info), but changing how existing things work would best be done with a bit more data and editor consultation than seems to have been behind this change.

In particular, "I believe it is widely known that there can be many confusing aspects of web link behavior" doesn't ring true with my experience. Previously, all links behaved like normal <a> elements. Now this link in particular behaves very differently.

tabatkins commented 8 months ago

Note that I've deployed some fixes here. I've removed the code that attempted to prevent a scroll from occurring if the anchor was already on the page, as it was causing the other issues (and working around that to still have the URL update, etc., wasn't worth the difficulty).

I've also changed the trigger for showing the panels. Having them activate on hover has been bothering me for a while; it's just a little bit too busy, and results in panels popping up when you're just moving your mouse over the link on the way to a different location. Currently they activate on mousedown, so if you click and then drag off the link you'll get the panel. I probably want to add a delayed hover effect as well, but writing a proper delay behavior when you can trigger a bunch of overlapping delays is non-trivial and I didn't have time to dig into it on Friday.

(I still don't have a way to show them on mobile, and I'm not sure what to do about that.)

tabatkins commented 8 months ago

And the weird slow-mo slidey definition panel is definitely a strange experience that other people don't get if they open infra.spec.whatwg.org/#string in a new tab.

Someone freshly visiting the page won't get a dfn panel at all until they click the dfn. That's always been the case. The slide just makes the "teleport from next to the dfn to the corner of the screen" behavior a little more obvious; without it it is easy to miss if the dfn wasn't anywhere near that corner originally.

Tho perhaps we can shorten the duration when the panel is already close to its final position, so the "slow-mo" effect isn't as pronounced.

smaug---- commented 7 months ago

Fully agree with domfarolino's initial comment here. Rather annoying usability regression, without any good reasons. Especially the animation feels awkward to my eyes, and the "clicking on a fragment identifier not working the way clicking on a fragment identifier works everywhere else " is just broken.

tabatkins commented 7 months ago

Again, I've fixed several nits in the last few releases; they've been out for several weeks, so if you're still seeing the link issues it's just because those specs haven't been rebuilt recently. I haven't touched the animation yet.