Page MenuHomePhabricator

Improve the UX of section anchor links
Closed, DuplicatePublic

Description

We should improve UX design of the section anchor links introduced in https://gerrit.wikimedia.org/r/#/c/186332/

See http://en.wikipedia.beta.wmflabs.org/wiki/Barack_Obama for an example of how it currently works.

Event Timeline

wctaiwan created this task.Feb 20 2015, 6:33 AM
wctaiwan raised the priority of this task from to Needs Triage.
wctaiwan updated the task description. (Show Details)
wctaiwan added a subscriber: wctaiwan.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 20 2015, 6:33 AM

Currently, the anchors are revealed when the user mouses over the full-width horizontal strip occupied by the section header. This is problematic for two reasons:

  1. The full-width trigger area causes anchor links to flash as the user scrolls down the page.
  2. The height of the trigger area is very small, so the anchor would disappear and reappear in rapid succession as the user mouses in and out of it, including when they are moving their mouse towards it to click on it.

An alternative to reduce the flashing is to reduce the trigger area to just the header text (rather than the full width), as done in https://gerrit.wikimedia.org/r/#/c/191845/, but this makes the anchor links much less discoverable.

Other approaches to consider:

  • Introduce a delay before showing (and hiding?) the anchor links
  • Somehow increase the height of the trigger area
  • ...
Aklapper triaged this task as Low priority.Feb 20 2015, 10:31 AM
He7d3r added a subscriber: He7d3r.Feb 22 2015, 2:30 PM

See also
https://fr.wikipedia.org/wiki/MediaWiki:Gadget-AncreTitres.js
which provides internal links in wiki syntax (very convenient! :-)

Change 192458 had a related patch set uploaded (by Wctaiwan):
Add a small delay to anchor link trigger

https://gerrit.wikimedia.org/r/192458

Patch-For-Review

matmarex added a subscriber: matmarex.

Let's fold this into T18691, the discussion seems to be continuing there.