Übertechnisierte Anchor Links

• Anchor Links sind im Grunde nur eine Struktur aus Button-Klick → Scrollen zur Überschrift, aber bei der tatsächlichen Implementierung treten Probleme auf
• Überschriften im unteren Seitenbereich scrollen nicht exakt an den oberen Rand des Viewports, was die UX verschlechtert
• Um das zu lösen, werden verschiedene Ansätze ausprobiert und schrittweise zu immer ausgefeilteren und komplexeren Verfahren weiterentwickelt

Einfache Lösung: Padding hinzufügen

• Zusätzlicher Abstand sorgt dafür, dass Überschriften im unteren Bereich beim Scrollen erreicht werden können
• Durch Berechnung eines Delta-Werts und anschließendes Hinzufügen von Padding lässt sich das Problem beheben
• Das Design-Team könnte jedoch unnötigen Leerraum ablehnen

Praktische Lösung: Trigger-Linie verschieben

• Die Trigger-Linie wird weiter nach unten im Viewport verschoben, damit auch untere Überschriften sie erreichen
• Das Problem dabei: Die Überschrift landet ganz unten im Viewport, wodurch die Lesbarkeit leidet

Verbesserungsansatz: Virtuellen Trigger-Punkt erzeugen

• Die tatsächliche Position der Überschrift bleibt unverändert, nur die Auslöseposition wird auf eine nach oben verschobene virtuelle Position gelegt
• Dadurch entsteht Flexibilität, weil sich für jede Überschrift unterschiedliche Anpassungen anwenden lassen
• Bei der ersten Überschrift entsteht jedoch ein neues Problem, weil sie zu weit nach oben verschoben wird → individuelle Anpassung erforderlich

Besserer Ansatz: Proportionales Verschieben der Trigger-Position

• Nicht alle Trigger werden gleich stark verschoben: Die erste Überschrift bleibt unverändert, die letzte wird maximal verschoben
• Dazwischenliegende Überschriften werden je nach Position proportional verschoben
• Damit werden die Bedingungen Reihenfolge der Überschriften beibehalten und Erreichbarkeit per Scrollen garantiert erfüllt
• Diese Methode ist einfach und praktisch und funktioniert in den meisten Fällen angemessen

Fortgeschrittener Ansatz: Optimierung mit benutzerdefinierter Mapping-Funktion

• Da die Trigger-Position willkürlich auf 25 % gesetzt wurde, kann die virtuelle Position zu stark von der ursprünglichen Position abweichen
• Um das zu lösen, wird ein Optimierungsansatz mit MSE (Mean Squared Error) eingeführt

Aufbau der Verlustfunktion

• Anchor Penalty: Wie stark die virtuelle Überschriftenposition von der ursprünglichen Position abweicht
• Section Penalty: Wie stark sich die Distanz zwischen Abschnitten (die Scroll-Länge) verändert
• Durch Gewichtung dieser beiden Werte wird die optimale Trigger-Position bestimmt

Randbedingungen

• Innerhalb des Seitenbereichs bleiben
• Die erste Überschrift wird nicht nach oben verschoben
• Die Reihenfolge der Überschriften bleibt erhalten

Erkenntnis: Grenzen des einfachen proportionalen Verschiebens

• Auf sehr langen Seiten (z. B. die gesamte Bibel) entsteht eine Ineffizienz, weil kleine Verschiebungen über die gesamte Länge kumuliert angewendet werden müssen
• Je länger die Seite ist, desto größer kann der Fehler werden und sich negativ auf die UX auswirken

Endgültige Lösung: Variable Mapping-Funktion auf Basis von Smoothstep

• Die Position jeder Überschrift wird auf einen Wert zwischen 0 und 1 normiert, auf dessen Basis der Anpassungsfaktor berechnet wird
• Mit der Smoothstep-Funktion (S(x) = 3x² - 2x³) wird ein sanfter Übergang umgesetzt
• Durch Festlegen der Startposition a beginnt die Verschiebung erst ab einem bestimmten Punkt und steigt danach sanft an
  • Beispiel: Bei a = 0.4 werden die oberen 40 % der Überschriften nicht verschoben, die unteren 60 % schrittweise angepasst
• Das Ergebnis: Überschriften im oberen Bereich behalten ihre ursprüngliche Position, Überschriften im unteren Bereich erhalten die maximale Anpassung → natürlichere UX

Validierung und Abschluss

• Die endgültige Implementierung ist eine Lösung, die gestalterische Präzision und praktische Nutzbarkeit ausbalanciert
• Natürlich kann das Feedback von Designer:innen auch lauten: „...Hauptsache, es funktioniert einfach.“
• Aber zumindest bleibt dieser Blogbeitrag als Dokument außergewöhnlich sorgfältiger Ingenieursarbeit für immer in Erinnerung

[GN⁺]

Hacker-News-Kommentare

• Als Backend-Entwickler bin ich manchmal überrascht, wie komplex Frontend-Arbeit sein kann

  • Toller Artikel und gut umgesetzt, aber ich frage mich, ob man für simples Scrollen wirklich so viel Komplexität einführen muss

• Frage nach dem UX-Zweck der Anzeige des „aktiven Anchors“ in der Seitennavigation

  • Wenn sich Leser mitten in einem langen Abschnitt befinden, kann sie sie an den aktuellen Abschnitt erinnern, dessen Überschrift gerade nicht sichtbar ist
  • Das bedeutet, dass es nicht nach der Überschrift funktioniert, an der vorbeigescrollt wurde, sondern nach dem Abschnitt, der auf dem Bildschirm sichtbar ist
  • Wenn kleine Abschnitte nicht den Großteil des Bildschirms einnehmen, ist die Aktiv-Markierung möglicherweise nicht nützlich

• Die wichtigste UX-Funktion von Anchor-Links ist, dass man sie anderen schicken und als Lesezeichen speichern können sollte

  • Die Möglichkeit, einen bestimmten Abschnitt mit einem Lesezeichen zu versehen, ist viel praktischer, als vom Seitenanfang aus dorthin zu scrollen oder auf einen Anchor-Link zu klicken
  • Diese Website bietet diese Funktion nicht, weil sie keine #anchor-name-URL verwendet

• Ich habe darauf geklickt, weil mich Anchors/permanente Links in Jira nerven, aber das hier ist ähnlich und doch anders

  • Man kann nicht per Tastatur zu den Anchors navigieren
  • Frage an den Autor: Warum wurde auf einem nicht interaktiven Element ein JS-Event-Listener verwendet statt eines HTML-``-Elements?

• Es wäre ideal, unter dem Inhalt der Hauptseite Padding hinzuzufügen

  • Das löst das Problem, dass das Ende des Inhalts am unteren Rand des Viewports klebt
  • Auf Mobilgeräten wäre ein Abstand von 90vh passend, auf größeren Bildschirmen 50vh
  • Auf dem Desktop könnten 90vh Abstand seltsam wirken

• In modernen Browsern kann man mit Textfragmenten bestimmte Teile einer Seite hervorheben

  • In Chrome markiert man einfach Text, klickt mit der rechten Maustaste und wählt „Link kopieren“
  • Ich nutze das täglich, um statt Anchors bestimmte Textstellen hervorzuheben

• Es ist auch möglich, mehrere „aktive“ Zustände zuzulassen

  • Wenn der Inhalt lang ist, können die Header von zwei Abschnitten beide als „aktiv“ gelten
  • Bei kurzen Inhalten könnten dann zu viele Bereiche hervorgehoben werden

• Es macht Spaß, die anderen Kommentare zu lesen

  • Auf Mobilgeräten ist das Site-Design interessant und die Problemlösung wird klar vermittelt
  • Es ist erfrischend, einen Blog mit technischen Inhalten ohne Pop-ups zu lesen

• In Firefox Desktop hebt die „schöne Lösung“ den „mittleren Abschnitt“ hervor

  • Die Schlussfolgerung ist vollständig sichtbar, obwohl das Seitenende noch nicht erreicht ist
  • Die Antwort ist, alle auf dem Bildschirm sichtbaren Anchors hervorzuheben

• Der Artikel ist sauber, und das Blog-Design ist noch interessanter

  • Die rechtsbündige Ausrichtung gefällt mir nicht, aber die Inline-Aktivierung im linken Pop-up ist sehr cool