Content Jumping (und wie man es vermeidet)

Wenige Dinge sind im Web so ärgerlich, wie wenn sich das Seitenlayout unerwartet ändert oder verschiebt, während Sie versuchen, es anzusehen oder damit zu interagieren. Ob Sie versuchen, einen Artikel zu lesen, während er vor Ihnen herumzappelt, oder ob Sie versuchen, auf einen Link zu klicken, nur damit ein anderer ihn aus dem Weg drängt und Sie woandershin bringt, es ist immer frustrierend.

Diese Layout-Verschiebung ist besonders frustrierend auf Mobilgeräten, wo eine ausreichend große Änderung alle bekannten Inhalte vom Bildschirm verdrängen und dazu führen kann, dass ein Besucher vollständig die Orientierung verliert. Ich würde argumentieren, dass die Verschiebung des Seitenlayouts nach dem anfänglichen Rendering (ohne relevante Benutzerinteraktion) die unangenehmste Benutzererfahrung sein mag, die eine Website erzeugen kann. Ich bin überrascht, dass dies selbst auf wirklich namhaften Websites passiert, die ansonsten sehr gut gemacht sind. Die gute Nachricht ist, dass es behoben werden kann.

Glücklicherweise führen moderne Browser kein anfängliches Rendering durch, bis die Stylesheets geladen sind. Das bedeutet, dass wir mit etwas raffiniertem CSS viel tun können, um dieses Problem zu lösen.

Was verursacht Layout-Verschiebungen?

Am häufigsten sind sie das Ergebnis des Ladens von Ajax-Partials. Ajax ist asynchron, was bedeutet, dass nichts darauf wartet, dass es abgeschlossen ist. Aber wenn es abgeschlossen ist und die Ergebnisse in das Dokument eingefügt werden, kann dies zu einer Neuanordnung des Layouts führen und andere Elemente verschieben.

Dies ist besonders bei Anzeigen üblich, kann aber bei allen Layout-beeinflussenden Inhalten auftreten, die nach dem anfänglichen Rendering geladen werden, einschließlich Bildern oder sogar Schriftarten.

Ich bin auf dieses Problem auf Websites gestoßen, an denen ich selbst arbeite

Das erste Mal, als ich auf dieses Problem stieß, war es tatsächlich nicht wegen Anzeigen oder Bildern, sondern wegen gerenderten Vorlagen von unserem eigenen Server. Ich arbeitete bei Broadleaf Commerce an einer bestehenden Admin-Oberfläche, zu der wir Funktionen hinzufügten. Wir wollten nicht alles neu erstellen, indem wir etwas wie Angular verwendeten, aber wir wollten, dass einige Inhalte ohne Seitenaktualisierung aktualisiert werden konnten. Wir erstellten Ajax-Container, die an Serverrouten gebunden waren und einen Teil der Seite neu renderten und zurückgaben. Es funktionierte ziemlich gut, aber in einigen Fällen hatten wir mehrere dieser Abschnitte auf der Seite mit statischen Überschriften dazwischen. Einige Sekunden nach dem ersten Besuch sprangen die Überschriften (und manchmal andere statische Inhalte) nach unten – genau die jarring Layout-Verschiebung, die wir vermeiden wollen.

Behebung mit min-height

Um es zu beheben, benutzte ich die DevTools des Browsers, um die Höhe des resultierenden Inhalts zu messen und kodierte sie als min-height für den Container in der CSS.

Das bedeutete, dass das umgebende Layout mehr oder weniger in dem Zustand begann, in dem es enden würde, wobei die einzige Änderung das Innere der Inhaltsboxen war. Ich habe den Containern auch eine Hintergrundfarbe gegeben, um anzuzeigen, dass dort etwas sein würde. Diese einfachen Ergänzungen machten die Benutzeroberfläche viel konkreter und vorhersehbarer. Man könnte darüber streiten, ob die harte Kodierung der Mindesthöhe ratsam ist, da sie das Layout vom Inhalt entkoppelt. Deshalb haben wir min-height statt height verwendet. Wenn der Inhalt dazu führt, dass das Element höher wird, kann es das immer noch tun, was nicht ideal ist, aber etwas besser als nichts.

Hier ist ein Beispiel, wie das aussehen würde (erneut laden, um das verzögerte Laden von Anzeigen zu sehen)

Siehe den Stift Avoiding Content Jumps von CSS-Tricks (@css-tricks) auf CodePen.

Ein weiteres Beispiel: Ein Drittanbieter-Widget

Ein anderes Mal arbeitete ich an einer Kunden-Website, die für ihre Checkout-Seite die Braintree Drop-in UI (https://www.braintreepayments.com/products-and-features/drop-in-ui) verwenden wollte.

Es ist ein tolles kleines Widget, aber Sie werden feststellen, dass selbst auf Braintrees eigener Website der Inhalt beim Erweitern des Widgets verschoben wird. Um Braintree gerecht zu werden, geschieht dies mit einer sanften Übergang, was hilft, etwas Kontinuität zu wahren, aber die Seite, an der ich arbeitete, profitierte immer noch von einem Wrapper-Element mit einer min-height, um zu verhindern, dass etwas so Grundlegendes wie der Checkout-Button unerwartet herumspringt.

Behebung mit Übergängen

Die Verwendung sanfter Übergänge kann eine unerwartete Inhaltsänderung viel weniger störend machen.

.ad-wrapper {
  height: 0;
  overflow: hidden;
  transition: height 0.66s ease-out;
}
.ad-wrapper.loaded {
  height: 100px;
}

Siehe den Stift Avoiding Content Jumps von CSS-Tricks (@css-tricks) auf CodePen.

Der Nachteil ist, dass sie nur funktionieren, wenn Sie Dimensionen explizit festlegen; min- Eigenschaften und inhaltsbezogene Layoutänderungen werden nicht überblendet. Dennoch können Übergänge in Fällen verwendet werden, in denen Sie unvorhersehbar große Inhalte haben und es Ihnen nichts ausmacht, JavaScript zu verwenden, um deren Größe abzufragen und den Container entsprechend sanft zu skalieren.

Ein weiteres Beispiel: Schriftart-Ladeverschiebungen

In einem ungewöhnlicheren Fall arbeitete ich an einer Kunden-Website, die eine horizontal komprimierte Schriftart prominent nutzte. Das Problem war, dass sie geladen werden musste, sodass nach einigen Sekunden fast der gesamte Inhalt der Website plötzlich seine Größe änderte. Es war keine so drastische Verschiebung wie in den obigen Beispielen, aber da es fast alles auf der Seite betraf, war es viel störender. Am Ende fand ich diesen wirklich großartigen Artikel, der eine ausführliche, aber effektive font-family-Anweisung liefert, die websichere kondensierte Schriftarten für alle wichtigen Plattformen abdeckt. Aber bevor ich das fand, war min-height wieder mein Freund.

Beispiele aus dem Web

The Verge (mobil)

Ich bemerke auf The Verge, dass

1. Ihre Anzeige oben ist manchmal ein kleines Banner und manchmal eine größere Anzeige
2. Sie scheinen bereits eine min-height-Technik für die Banner-große Anzeige zu verwenden

Es ist möglich, dass ihre Anzeigen-API ihnen nicht sagt, wie groß die Anzeige sein wird. Wenn doch, sollten sie die min-height entsprechend anpassen. Wenn dies nicht möglich ist, tun sie vielleicht schon alles, was sie mit reinem CSS tun können. Obwohl selbst dann, würde ich argumentieren, dass aus UX-Sicht eine wirklich große Anzeige weiter unten im Inhalt platziert werden sollte und nicht ganz oben, und das Banner wäre oben passender. Andererseits ist es wahrscheinlich eine lukrative Einnahmequelle, dem Nutzer eine fast vollbildgroße Anzeige zu zeigen, sobald er die Hauptseite besucht.

Kotaku (mobil)

Bei Kotaku ist erwähnenswert, dass es ganz oben auf der Hauptseite keine Anzeige gibt, also gibt es beim ersten Besuch keinen Sprung. Wenn die Seite jedoch bereits nach unten gescrollt geladen wird (z. B. nach dem Zurückkehren nach dem Lesen eines Artikels), gibt es massive, desorientierende Sprünge, die durch große Anzeigen verursacht werden, die den gesamten Beitragstrom durchziehen. Sie scheinen alle die gleiche Größe zu haben, daher wäre dies eine einfache Lösung.

Zusammenfassung

Eines der wichtigsten Dinge, das man bei der Gestaltung jeder Benutzererfahrung beachten muss, ist das erwartete Verhalten. Wir erwarten, dass das Klicken auf einen blauen, unterstrichenen Textabschnitt uns zu einer anderen Seite führt. Wenn stattdessen ein Modal geöffnet wird oder gar nichts passiert, haben wir eine verwirrende und frustrierende Benutzererfahrung. Das Gleiche gilt für die Navigation auf der Seite, auf der wir uns bereits befinden. Wenn wir sehen, wie ein Artikel vor uns erscheint, erwarten wir, dass er still steht, es sei denn, wir scrollen ihn. Wenn wir einen Link oder eine Schaltfläche sehen, erwarten wir, dass sie dort ist, wenn wir versuchen, auf diesen Punkt zu tippen. Verstöße gegen diese grundlegenden Annahmen sind bestenfalls unangenehm, schlimmstenfalls frustrierend oder sogar desorientierend.