Shopify Usability: 10 Gesetze, die über Ihren Erfolg im E-Commerce entscheiden

Wer in einem Onlineshop suchen, raten oder warten muss, verlässt ihn eher. Usability, auf Deutsch Benutzerfreundlichkeit, beschreibt, wie leicht sich ein Onlineshop bedienen lässt: wie schnell Besucher finden, was sie suchen, und wie mühelos sie bis zur Bestellung kommen.

Für die Usability im E-Commerce gibt es eine Reihe von Gesetzen. Einige stammen aus der Gestaltpsychologie, andere aus der Forschung zur Mensch-Computer-Interaktion. Sie beruhen auf Forschung und Erfahrung und geben Ihnen eine Grundlage, um Shops, Websites und Apps benutzerfreundlicher zu gestalten. Für die Shopify Usability gelten sie genauso wie für jeden anderen Onlineshop: Shopify liefert den technischen Rahmen. Ob sich der Shop gut bedienen lässt, entscheiden Theme, Struktur und Inhalte.

Eine Website, die schwer zu bedienen ist, verlassen Besucher in vielen Fällen und kaufen woanders. Eine App, die zu kompliziert ist, nutzen sie ungern oder löschen sie wieder. Die zehn Gesetze in diesem Artikel sind ein Werkzeugkasten, mit dem Sie prüfen können, ob Ihr Shop für Ihre Kunden funktioniert. Zu jedem Gesetz finden Sie ein Beispiel aus dem Onlineshop und eine Prüffrage für Ihre eigenen Seiten.

Usability im E-Commerce: die 10 Gesetze im Überblick

1. Hicks Gesetz: Weniger Auswahl ist schneller
2. Fittssches Gesetz: Große, nahe Ziele sind leichter zu treffen
3. Gesetz der Prägnanz: Je einfacher, desto einleuchtender
4. Jakobs Gesetz: Erwartungen der Nutzer erfüllen
5. Millers Gesetz: Nur das wirklich Wichtige
6. Gesetz der Nähe: Was nah beieinander liegt, gehört zusammen
7. Gesetz der Ähnlichkeit: Orientierung durch Ähnlichkeit
8. Gesetz der Kontinuität: Das Auge folgt der Linie
9. Gesetz der Erfahrung: Wir erkennen, was wir kennen
10. Doherty-Schwelle: Reaktionszeit unter 400 Millisekunden

1. Hicks Gesetz: Weniger Auswahl ist schneller

Hicks Gesetz, auch Hick-Hyman-Gesetz genannt, geht auf die Psychologen William Edmund Hick und Ray Hyman zurück. Hick veröffentlichte seine Versuche 1952. Das Gesetz besagt: Die Zeit für eine Entscheidung steigt mit der Anzahl der Möglichkeiten, und zwar logarithmisch. Doppelt so viele Optionen bedeuten also nicht doppelt so viel Zeit, aber jede zusätzliche Option verlangsamt die Entscheidung. Bietet eine Oberfläche zu viele Optionen auf einmal, führt das zu Verwirrung und Frustration. Deshalb ist es oft sinnvoll, die Zahl der Optionen zu begrenzen, damit Nutzer schneller und sicherer handeln.

Im Onlineshop zeigt sich das vor allem in der Navigation und auf Kategorieseiten. Ein Hauptmenü mit sehr vielen gleichrangigen Punkten oder eine Kategorie mit mehreren hundert Produkten ohne Filter verlangt viele Entscheidungen auf einmal. Besser ist es, die Auswahl in Stufen anzubieten: wenige Hauptkategorien, darunter Unterkategorien, dazu Filter nach Größe, Farbe oder Preis. In Shopify richten Sie solche Filter mit der kostenlosen App Search & Discovery ein. Sichtbar werden sie, wenn Ihr Theme Filter unterstützt. Auf der Produktseite hilft eine hervorgehobene Empfehlung, zum Beispiel das passende Set oder die gängigste Variante.

Prüffrage: Wie viele Entscheidungen muss ein Besucher treffen, bevor er das erste passende Produkt sieht?

2. Fittssches Gesetz: Große, nahe Ziele sind leichter zu treffen

Der Psychologe Paul Fitts zeigte 1954: Die Zeit, die jemand braucht, um ein Ziel anzusteuern, hängt von der Entfernung und der Größe des Ziels ab. Je näher das Ziel liegt, desto schneller ist es erreicht. Je größer es ist, desto leichter lässt es sich treffen. Schnelle Bewegungen auf kleine Ziele führen dagegen häufiger zu Fehlern.

Am Smartphone ist das täglich spürbar. Die wichtigsten Schaltflächen sollten groß genug sein, um sie sicher mit dem Daumen zu treffen, ausreichend Abstand zu anderen Elementen haben und dort liegen, wo der Daumen ohnehin ist. Im Shop betrifft das vor allem den Button „In den Warenkorb“, die Variantenauswahl, das Warenkorb-Symbol und die Buttons im Checkout. Kleine Größenkästchen, die dicht nebeneinanderstehen, sind ein typischer Fall: Wer daneben tippt, wählt die falsche Größe.

Prüffrage: Lässt sich der wichtigste Button jeder Seite am Handy mit einer Hand sicher treffen?

3. Gesetz der Prägnanz: Je einfacher, desto einleuchtender

Menschen neigen dazu, komplexe visuelle Eindrücke so zu ordnen, dass eine einfache, symmetrische und gut strukturierte Gestalt entsteht. Die Gestaltpsychologie spricht auch vom Gesetz der guten Gestalt: Wir nehmen bevorzugt Formen wahr, die einprägsam und einfach aufgebaut sind. Deshalb bevorzugen Nutzer klare, geordnete Informationen gegenüber überladenen Seiten. Eine Website oder App mit klarer Struktur, ausgewogenen Abständen, einheitlichen Farben und geordneten Elementen wirkt ansprechender.

Das Gesetz der Prägnanz hilft, visuelles Chaos zu vermeiden, damit Besucher Informationen schnell und mühelos aufnehmen. Ein Beispiel aus dem Shop: Eine Produktseite, auf der Bewertungen, Siegel, Rabatthinweise, Lieferzeit und mehrere Banner gleichzeitig um Aufmerksamkeit kämpfen, wirkt unruhig, auch wenn jedes Element für sich sinnvoll ist. Wenige, klar gegliederte Blöcke mit einheitlichen Abständen lassen sich schneller erfassen.

Prüffrage: Erkennt ein neuer Besucher auf Ihrer Produktseite in wenigen Sekunden, was das Produkt ist, was es kostet und wie er es kauft?

4. Jakobs Gesetz: Erwartungen der Nutzer erfüllen

Jakobs Gesetz ist nach Jakob Nielsen benannt, Mitgründer der Nielsen Norman Group. Seine Beobachtung: Nutzer verbringen die meiste Zeit auf anderen Websites. Deshalb erwarten sie, dass Ihre Website so funktioniert wie die, die sie schon kennen. Menschen übertragen ihre Erfahrungen mit ähnlichen Produkten auf neue Systeme.

Wer auf etablierte Muster setzt, macht es Nutzern leichter. Verwendet ein Shop Navigationsmuster, die Kunden aus anderen Shops kennen, finden sie sich sofort zurecht und müssen nichts Neues lernen. Das senkt die Lernkurve, und Besucher fühlen sich schneller sicher. Im E-Commerce heißt das zum Beispiel: Logo oben links als Link zur Startseite, Suche und Warenkorb oben rechts, Filter auf der Kategorieseite in einer Seitenleiste oder am Handy als ausklappbares Feld. Eigenwillige Lösungen an diesen Stellen kosten Orientierung, auch wenn sie gut aussehen.

Daraus folgt auch: Große Änderungen sollten Sie behutsam einführen. Bei einem Relaunch müssen wiederkehrende Kunden die wichtigsten Wege wiederfinden.

Prüffrage: Würde ein Kunde, der noch nie bei Ihnen war, Suche, Warenkorb und Kundenkonto ohne Nachdenken finden?

5. Millers Gesetz: Nur das wirklich Wichtige

Der Psychologe George Miller beschrieb 1956, dass Menschen im Arbeitsgedächtnis durchschnittlich etwa sieben Einheiten gleichzeitig halten können, plus oder minus zwei. Daher der Name „magische Zahl 7 ± 2“. Werden wir mit mehr Informationen, Optionen oder Elementen konfrontiert, fühlen wir uns schneller überfordert.

Für die Gestaltung heißt das: Überladen Sie die Oberfläche nicht, damit die kognitive Belastung gering bleibt. Das gilt besonders für Menüpunkte. Die Informationen sollen sich leicht aufnehmen und verarbeiten lassen. Hilfreich ist es, Inhalte in Gruppen zu ordnen: Eine lange Liste von Produktmerkmalen wird übersichtlicher, wenn sie in Abschnitte wie Material, Maße und Pflege geteilt ist.

Ein wichtiger Hinweis: Die Zahl Sieben ist keine feste Obergrenze für Menüpunkte. Wie viel jemand gleichzeitig erfassen kann, hängt von Vorwissen und Situation ab. Nutzen Sie die Regel als Erinnerung, Informationen zu bündeln, nicht als Rechenvorgabe.

Prüffrage: Wie viele Punkte hat Ihr Hauptmenü, und ließen sich einige davon sinnvoll zusammenfassen?

6. Gesetz der Nähe: Was nah beieinander liegt, gehört zusammen

Nach diesem Gestaltgesetz werden Elemente mit geringem Abstand zueinander als zusammengehörig wahrgenommen. Gestalter nutzen das, um Informationen, die zusammengehören, eng beieinander zu platzieren. Sehen Sie auf einer Website zwei Schaltflächen direkt nebeneinander, gehen Sie automatisch davon aus, dass sie zusammengehören oder eine ähnliche Funktion haben. Das macht Seiten verständlicher und lässt sie geordneter wirken.

Im Shop ist der Abstand oft wichtiger als jede Linie oder Box. Steht der Preis näher am Nachbarprodukt als am eigenen Produktbild, ordnen Besucher ihn falsch zu. Auf der Produktseite gehören Preis, Grundpreis, Versandhinweis und Button zusammen, und das sollte auch der Abstand zeigen. In Formularen gehört die Beschriftung nah an ihr eigenes Feld, nicht in die Mitte zwischen zwei Feldern.

Prüffrage: Ist auf Ihren Produktkarten auf den ersten Blick klar, welcher Preis zu welchem Produkt gehört?

7. Gesetz der Ähnlichkeit: Orientierung durch Ähnlichkeit

Teilen verschiedene Elemente einer Oberfläche ähnliche Farben, Formen, Größen oder andere visuelle Eigenschaften, nehmen wir an, dass sie zusammengehören.

Dieses Prinzip nutzen Gestalter, um Informationen zu gruppieren oder voneinander zu trennen. In einer Produktliste können zum Beispiel Produkte derselben Kategorie ähnliche Farben oder Symbole tragen, damit sie als Gruppe erkennbar sind. So lassen sich Informationen leichter einordnen und Muster schneller erkennen.

Die Kehrseite: Ähnlichkeit verspricht Gleichheit. Sehen alle Links und Buttons gleich aus, egal ob sie etwas in den Warenkorb legen oder nur weitere Informationen öffnen, verlieren Besucher die Orientierung. Geben Sie jeder Funktion ein festes Aussehen und bleiben Sie im ganzen Shop dabei. Der Button zum Kaufen sollte überall gleich aussehen und sich von allen anderen unterscheiden.

Prüffrage: Sehen alle Elemente, die dasselbe tun, auf allen Seiten gleich aus?

8. Gesetz der Kontinuität: Das Auge folgt der Linie

Menschen nehmen Linien und Muster als fortlaufend wahr, auch wenn sie von anderen Elementen unterbrochen werden. In der Gestaltpsychologie heißt das auch Gesetz der guten Fortsetzung: Linien werden so gesehen, als folgten sie dem einfachsten Weg. Unser Gehirn verarbeitet visuelle Informationen fließend und logisch, selbst wenn kleine Unterbrechungen vorhanden sind.

Bei der Gestaltung von Benutzeroberflächen hilft das, Besucher durch eine Seite zu führen. Linien, Formen oder eine klare Achse lenken den Blick, und Bilder oder Textfelder können sie unterbrechen, ohne dass der Zusammenhang verloren geht. Ein Beispiel ist ein Produktslider, dessen letztes Bild am Rand angeschnitten ist: Besucher verstehen, dass es weitergeht, und wischen. Auch ein Fortschrittsbalken im Checkout oder eine nummerierte Schrittfolge nutzt das Gesetz der Kontinuität.

Prüffrage: Folgt der Blick auf Ihrer Startseite einer klaren Linie bis zum nächsten sinnvollen Schritt?

9. Gesetz der Erfahrung: Wir erkennen, was wir kennen

Das Gesetz der Erfahrung wird in der deutschsprachigen Gestaltungslehre häufig zu den Gestaltgesetzen gezählt. Es beschreibt, dass wir Unbekanntes und Unvollständiges mithilfe dessen deuten, was wir schon kennen. Ein Wort mit fehlenden Buchstaben können wir trotzdem lesen, ein stark vereinfachtes Symbol trotzdem erkennen. Für die Gestaltung heißt das: Produkte und Oberflächen sollten auf den Fähigkeiten, Erfahrungen und Erwartungen der Nutzer aufbauen. Wer auf vertraute Formen zurückgreift, verkürzt die Zeit, die Besucher zum Verstehen brauchen.

Stellen Sie sich vor, Sie öffnen eine App, die denselben Aufbau und dieselbe Navigation hat wie andere Apps, die Sie kennen. Sie wissen intuitiv, wo Sie bestimmte Funktionen finden, weil die Gestaltung Ihren bisherigen Erfahrungen entspricht. Damit ist das Gesetz der Erfahrung eng mit Jakobs Gesetz verwandt: Jakobs Gesetz betrifft ganze Abläufe, das Gesetz der Erfahrung schon die Wahrnehmung einzelner Zeichen und Formen.

Beispiele für das Gesetz der Erfahrung im Onlineshop

• Ein Einkaufswagen oder eine Tasche oben rechts steht für den Warenkorb, eine kleine Zahl daran für die Anzahl der Artikel.
• Eine Lupe steht für die Suche, ein Herz für die Merkliste, drei waagerechte Striche für das Menü am Handy.
• Unterstrichener oder farbig hervorgehobener Text wird als Link gelesen.
• Sterne unter einem Produkt werden als Bewertung verstanden, auch ohne Erklärung.
• Ein Schloss-Symbol im Checkout lesen viele als Zeichen für eine sichere Verbindung.

Wer eines dieser Zeichen anders verwendet, zum Beispiel ein Herz für den Warenkorb, zwingt Besucher zum Umdenken. Das kostet Zeit und Vertrauen.

Prüffrage: Würde ein Besucher jedes Symbol in Ihrem Shop auch ohne Beschriftung richtig deuten? Wenn nicht, beschriften Sie es.

10. Die Doherty-Schwelle: Reaktionszeit und schnelle Ladezeiten

Eine zügig ladende Website ist nicht nur für die Sichtbarkeit bei Google wichtig. Besucher sind ungeduldig. Die Doherty-Schwelle setzt bei 400 Millisekunden den Zeitrahmen, in dem Nutzer eine Rückmeldung erwarten, zum Beispiel nach einem Klick auf einen Button. Überschreitet die Reaktionszeit diese Grenze, droht das Interesse verloren zu gehen.

Usability und Reaktionszeit: die Grenze von 400 Millisekunden

Der Wert geht auf Walter J. Doherty und Ahrvind J. Thadani zurück. Sie veröffentlichten 1982 im IBM Systems Journal Forschungsergebnisse, nach denen Computer innerhalb von 400 Millisekunden antworten sollten statt innerhalb der bis dahin üblichen zwei Sekunden. Lag die Antwortzeit darunter, arbeiteten Nutzer produktiver, weil weder Mensch noch Rechner auf den anderen warten musste.

Für die Usability im Onlineshop heißt das: Jede Aktion braucht innerhalb dieser Zeit eine sichtbare Reaktion. Das gilt für den Klick auf „In den Warenkorb“, für das Setzen eines Filters und für die Auswahl einer Variante. Passiert nach dem Tippen nichts, tippen Besucher erneut oder halten den Shop für defekt.

Wenn es länger dauert: Wartezeit sichtbar machen

Dauern Aktionen auf Ihrer Website dennoch länger, sollten Besucher sehen, dass ihre Eingabe im Hintergrund verarbeitet wird. Das gelingt zum Beispiel mit einem Ladebalken, einer kurzen Animation oder einem Button, der seinen Zustand ändert. Fortschrittsbalken machen Wartezeiten erträglicher, unabhängig davon, wie genau sie den Fortschritt anzeigen.

Eine schnelle Ladezeit verbessert die Benutzererfahrung und erhöht die Chance, dass Besucher bleiben. Google bewertet die Nutzererfahrung einer Seite unter anderem mit den Core Web Vitals. Sie messen Ladezeit (Largest Contentful Paint), Reaktionsfähigkeit (Interaction to Next Paint, kurz INP) und visuelle Stabilität (Cumulative Layout Shift). Gute Werte gehören laut Google zu dem, was seine Ranking-Systeme belohnen wollen, als ein Aspekt unter vielen und ohne Garantie für bestimmte Platzierungen. Für die Reaktionsfähigkeit nennt Google als Zielwert einen INP unter 200 Millisekunden.

Die Kombination aus schneller Seite und sichtbarer Rückmeldung hält die Aufmerksamkeit, auch wenn einzelne Aktionen etwas länger dauern.

Prüffrage: Reagiert jeder Button in Ihrem Shop am Handy sofort sichtbar, auch bei schwacher Verbindung?

Shopify Usability in der Praxis: wo die Gesetze im Onlineshop wirken

Die zehn Gesetze wirken selten einzeln. Auf einer Produktseite greifen fast alle gleichzeitig. Diese Zuordnung hilft, wenn Sie Ihren Shop Seite für Seite durchgehen:

• Navigation und Startseite: Hicks Gesetz und Millers Gesetz. Wenige, klar benannte Hauptpunkte statt eines Menüs, das alles auf einmal zeigt.
• Kategorieseiten: Hicks Gesetz, Gesetz der Nähe und Gesetz der Ähnlichkeit. Filter, einheitliche Produktkarten und eindeutig zugeordnete Preise.
• Produktseite: Fittssches Gesetz, Gesetz der Prägnanz und Gesetz der Nähe. Ein großer, gut erreichbarer Kaufbutton, Preis und Lieferinformation direkt daneben, keine konkurrierenden Elemente.
• Warenkorb und Checkout: Jakobs Gesetz, Gesetz der Kontinuität und Doherty-Schwelle. Vertraute Abläufe, erkennbare Schritte, sofortige Rückmeldung.
• Am Handy: alle zehn, vor allem aber Fitts und Doherty. Hier sind die Bildschirme kleiner und die Verbindung oft langsamer.

Usability ist dabei nicht alles. Ein Shop kann sich leicht bedienen lassen und trotzdem wenig verkaufen, wenn Besucher dem Angebot nicht trauen oder eine wichtige Frage offenbleibt. Wie wir Bedienbarkeit, Vertrauen und Kaufentscheidung zusammen prüfen, beschreibt unsere 545-Methode.

Fazit: Benutzerfreundlichkeit im E-Commerce ist kein Zufall

Alle zehn Gesetze haben dasselbe Ziel: Ein Shop soll sich so leicht bedienen lassen, dass Besucher nicht über die Bedienung nachdenken, sondern über das Produkt. Dann wird eine Website, eine App oder ein Shop übersichtlich und verständlich, und Besucher sind froh, ihn gefunden zu haben, statt frustriert zu gehen. Wer die Usability-Gesetze berücksichtigt, stellt sicher, dass ein Shop den Anforderungen seiner Nutzer gerecht wird.

Nehmen Sie sich dafür die Prüffragen aus diesem Artikel vor und gehen Sie Ihren Shop Seite für Seite durch, und zwar am Handy. Jede Frage, die Sie mit Nein beantworten, ist ein konkreter Ansatzpunkt.