Stoppen Sie den Aufbau von Websites mit Infinite Scroll!

TL; DR: Während Infinite Scroll in einigen Fällen eine Lösung bietet, kann es für Benutzer weniger als ideal sein.

Unendlicher Bildlauf kann verwirrend und unkontrollierbar sein und Ihren Benutzern Stress bereiten.

In diesem Artikel erklären wir, warum Sie aufhören müssen, Websites mit Infinite Scroll zu erstellen. Aber um zu beginnen, schauen wir uns eine kurze Geschichte des Scrollens an.

Eine kurze Geschichte des Scrollens

Um zu verstehen, was Scroll wirklich ist, wollen wir sehen, woher der Begriff Scroll kommt.

Schriftrolle (n.): c. 1400, „Rolle Pergament oder Papier“

Schriftrollen wurden ursprünglich verwendet, wenn Informationen langwierig wurden (wie religiöse Inhalte). So viele Inhalte wurden schwierig zu verwalten, zu lesen und zu schreiben.

Als Computer in unser Leben kamen, brauchten wir noch eine Möglichkeit, durch große Inhalte zu navigieren.

Die Entwicklung von Schriftrollen in Computern

Zeilen (und Spalten)

In den frühen Jahren des Internets erfanden / erforschten UX-Designer viele Möglichkeiten, den Inhalt zu blättern / zu scrollen. Bevor das Web populär war, scrollten wir Linien auf unserem Bildschirm.

Horizontale Schriftrollen machten das Scrollen nicht nur zum Lesen des Inhalts, sondern auch zum Navigieren auf dem Computerbildschirm.

Windows (nicht das Betriebssystem)

Die Verwendung von Schriftrollen zum Navigieren auf dem Bildschirm ermutigte die Benutzer, Fenster zu erstellen. Mit Windows können Sie mehrere Inhalte gleichzeitig anzeigen.

Webseiten

Das Scrollen löst ein sehr grundlegendes Problem beim Durchsuchen von Webseiten. Das Scrollen kann jedoch viele Probleme für Benutzer verursachen und sich negativ auf die Benutzererfahrung auswirken. Schauen wir uns das genauer an.

Die erfundenen Erfahrungen zum Navigieren auf Webseiten

Ich werde versuchen zu definieren, wie Entwickler und Designer Erfahrungen erstellt haben, um Benutzer auf ihren Webseiten zu navigieren.

Beginnen wir mit dem Erlernen einiger Back-End-Paginierungssysteme:

Offset-basierte Paginierung

Dies ist das bekannteste Paginierungssystem. Bei dieser Technik müssen wir zuerst herausfinden, wie viele Elemente wir paginieren müssen:

-- All posts countSELECT COUNT(*) AS total FROM posts

Nachdem wir alle Elemente gezählt haben, müssen wir die Seiten berechnen. Nehmen wir an, wir zeigen 10 Elemente pro Seite:

-- First page itemsSELECT * FROM posts LIMIT 10

Und wenn wir zur Seite 3 springen möchten, müssen wir zuerst 30 Elemente mit überspringen OFFSET:

-- Third page itemsSELECT * FROM posts LIMIT 10 OFFSET 30

Und wir senden die Paginierungsinformationen wie folgt an den Kunden:

{ "pagination": { "items_count": 100, "current": 3, "total_pages": 10 }, "items": }

Vor- und Nachteile der Offset-basierten Paginierung

• 👍 Gut: Einfach zu jeder Seite zu springen
• 👍 Gut: Das Kundenerlebnis ist freier
• 👎 Schlecht: Leistungsprobleme
• 👎 Schlecht: Doppelte Elemente können angezeigt werden, wenn sich Daten ändern

Cursorbasierte Paginierung

Big Data machte es schwierig, die Tabellenzahl zu berechnen, da sie ständig wächst (denken Sie an Twitter). Daher haben Entwickler neuere Techniken entwickelt, um die Daten zu paginieren: Cursor.

Jede Zeile muss einen eindeutigen Cursor haben. Sie müssen nicht die gesamte Tabelle zählen, was es unmöglich macht, die tatsächliche Seitenzahl zu ermitteln:

-- Get extra 1 item to get its cursor.SELECT * FROM posts ORDER BY id DESC LIMIT 11

Angenommen, jeder Beitrag hat ein eindeutiges Cursorfeld (oder in diesem Beispiel seine ID), um die Paginierung zu unterstützen. Der Client verfügt über Paginierungsinformationen wie folgt:

{ "pagination": { "next": 1234 // extra item's ID (cursor), null if end of data. }, "items": }

Und Sie können mit dem Cursor nach der nächsten Seite fragen:

-- Offsetting records using 1234 cursorSELECT * FROM posts WHERE id >= 1234 ORDER BY id LIMIT 11

Vor- und Nachteile der cursorbasierten Paginierung

• 👍 Gut: Performanter, keine Tabellenzahlen
• 👍 Gut: Das Anzeigen doppelter Elemente ist nicht möglich, wenn jemand eine Zeile in die Mitte der Tabelle einfügt
• 👎 Schlecht: Es ist unmöglich, zu einer Seite zu springen
• 👎 Schlecht: Der Client ist mit der Erfahrung nicht frei, die Gesamtseite und die aktuelle Seite werden nicht berechnet

Werfen wir einen Blick auf einige Navigationstechniken.

Die Erfahrung: klickbasiert

Die Technik: offset-basiert oder cursor-basiert

Dies wird hauptsächlich zum Navigieren in Blogs verwendet. Dies ist die älteste Version von Infinite Scrolling. Bei diesem Ansatz weiß der Benutzer möglicherweise nicht, wo der Inhalt endet.

Nummerierte Paginierung

Die Erfahrung: klickbasiert

Die Technik: offsetbasiert

Dies ist der (meiner Meinung nach) am besten verwendbare Navigationstyp. Es verwendet Offset-basierte Paginierung, mit der Sie zu der gewünschten Seite springen oder mit nur einem Klick zum Ende oder Anfang gehen können.

Google verwendet diese Art der Navigation in den Suchergebnissen:

Mehr laden

Die Erfahrung: Klick-Trigger-basiert

Die Technik: Cursor—basiert – kann auch offset-basiert sein, wäre aber umständlich

Dies ist eine der neuesten Paginierungstechniken und verwendet auch die vorherige Version von infinite Scrolls.

Im obigen Beispiel klickt der Benutzer auf die Schaltfläche „Mehr laden“, um weitere Inhalte anzuzeigen.

Unendliche Schriftrollen

Die Erfahrung: Scroll-basiert

Die Technik: Cursor-basiert — kann auch offset-basiert sein, wäre aber SEHR umständlich

Unendliche Schriftrollen sind die neueste Erfahrung von Cursor-basierten Paginierungstechniken.

Hugh E. Williams behauptet, er habe Infinite Scroll 2005 bei Microsoft erfunden.

Metafizzy hat auch ein Tool entwickelt, mit dem Entwickler unendliche Schriftrollen erstellen können.

Hören Sie auf, Websites mit unendlichem Bildlauf zu erstellen!

Bis zu diesem Abschnitt haben wir überprüft, wie wir hierher gekommen sind. Jetzt reden wir darüber, warum hier scheiße ist.

Footer finden

Footer ist eine sehr grundlegende Einheit der Webseitenanatomie, genau wie eine Kopfzeile. Websites enthalten einige detaillierte Informationen und Links in der Fußzeile, z. B. Telefonnummern, Adressen sowie Hilfe- und Support-Links. Wenn Benutzer nach diesen detaillierten Informationen suchen, scrollen sie meistens nach unten, um die Fußzeile zu finden.

Mit unendlichen Schriftrollen können Benutzer Schwierigkeiten haben, die Fußzeile zu finden. Infinite Scroll macht es unmöglich, das Ende der Seite zu finden. Nicht in der Lage zu sein, den unteren Rand einer Website zu erreichen, kann den Benutzer gestresst machen (was nicht großartig ist).

Die Websites mit einem unendlichen Feed (wie Twitter) lösen das Fußzeilenproblem, indem Sie diese erforderlichen Informationen und Links in die Seitenleiste einfügen. Die Seitenleiste ist eine Lösung für dieses Problem, aber keine gute. Die Fußzeile sollte in der Fußzeile bleiben.

Verwenden Sie keinen unendlichen Bildlauf, wenn Sie keine Zeitleiste oder keinen Feed haben

Social Media-Anwendungen arbeiten mit der Zeit. Die Absicht der Benutzer ist es, in der Vergangenheit zu navigieren. In diesem Fall erleichtert Infinite Scroll die Navigation. Hier ist Infinite Scroll gut für die Leistung, insbesondere in Mobilgeräten.

Wenn Sie jedoch eine E-Commerce-, Nachrichten-, Magazin- oder Blog-Website haben und der Benutzer beabsichtigt, sich in den Elementen oder Artikeln zu bewegen, wird Infinite Scroll für sie zu einem Albtraum. In einer zeitleistenbasierten Liste suchen die Leute meistens nicht nach einem Datum oder einem einzigartigen Moment. In elementbasierten Listen möchte der Benutzer ein Element finden. Unendliche Schriftrollen machen es Ihren Benutzern fast unmöglich, Ihre Artikel zu finden.

Benutzern mehr Kontrolle geben

Benutzer mögen die Benutzeroberflächen im Allgemeinen nicht, wenn sie das Gefühl haben, sie nicht steuern zu können.

Ein Scroll-Ereignis ist nicht sehr beabsichtigt, etwas zu tun. Personen navigieren auf der Seite und wenn sie eine Aktion aufrufen möchten, klicken oder berühren sie meistens (sogenannte Trigger). Sie informieren die UI über ihre Entscheidung. Aber Scroll wird ohne Entscheidung ausgelöst.

Unendliche Schriftrollen machen die Seiten für die Benutzer weniger kontrollierbar. Benutzer können auch auf springende Störungen stoßen.

Setzen Sie anstelle des unendlichen Bildlaufs eine Schaltfläche „Mehr laden“, die ein Auslöser ist. Dies gibt dem Benutzer die Kontrolle. (Ich würde eine nummerierte Paginierung im alten Stil bevorzugen, aber wir gehen davon aus, dass wir derzeit eine cursorbasierte Paginierung verwenden).

Benutzer können überall hingehen

Personen navigieren zwischen Seiten, setzen Lesezeichen für einige von ihnen, teilen Seiten mit ihren Freunden usw.

Unendliche Schriftrollen können den Zustand jedoch nicht durch sein Design beibehalten. Benutzer können ihren aktuellen Status nicht teilen – was auch bedeutet, dass Sie die Aktionen von Benutzern nicht mit Analysetools verfolgen können.

Wenn Ihre Back-End-Paginierungstechnik cursorbasiert ist, ist es fast unmöglich, dass Ihre Benutzer überall hingehen können. Wenn Sie eine E-Commerce-Website haben, geben Sie den Benutzern die Kontrolle, zu den gewünschten Produkten zu navigieren.

Wenn Sie in Ihrem Eintrag die Funktion „Sortieren nach“ haben, müssen Sie dem Benutzer außerdem eine Paginierung anzeigen. In einer alphabetisch geordneten Liste dürfen Sie Benutzer nicht zwingen, zu Produkten zu scrollen, die mit K beginnen.

Sie sollten Benutzern erlauben, zu sehen, wo sie sich befinden. Benutzer scrollen eine Zeit lang, und da es sich um ein zustandsloses Design handelt, wissen sie nicht, wie oft die „nächste Seite“ geladen wurde. Wenn sie die Seite aktualisieren, werden sie auf die ursprüngliche Seite zurückgesetzt. Der Benutzer muss dann wieder nach unten scrollen, um herauszufinden, wo er zuvor war.

Fazit

Unendliche Schriftrollen sind in einigen Fällen nett, aber sie sind normalerweise keine Problemlöser, sondern Problemmacher. UX-Leute sollten unendliches Scrollen nicht als Wundermittel betrachten, um ihre Paginierungsprobleme zu lösen. Hören Sie auf, Websites mit unendlichem Bildlauf zu erstellen.