UI Design für Onlineshops: So wirkt sich der Internetauftritt auf Kunden aus

Die Oberfläche eines Onlineshops entscheidet mit darüber, ob jemand kauft — nicht weil Gestaltung Geschmackssache wäre, sondern weil sie bestimmt, wie schnell sich ein Besucher zurechtfindet. Dahinter steht in den meisten Fällen ein Gestaltungsraster. Was es leistet, wo es an Grenzen stößt und welche Anforderungen seit 2025 gesetzlich dazugekommen sind.

Warum überhaupt ein Raster

Eine Shopseite besteht aus vielen Einzelteilen: Produktbilder, Überschriften, Beschreibungstexte, Preise, Buttons, Formularfelder, Filter, Bewertungen. Ohne feste Ordnung landet jedes davon dort, wo es beim Bauen gerade gepasst hat — und der Besucher muss auf jeder Seite neu suchen, wo der Preis steht.

Ein Raster legt Spaltenbreiten und Abstände einmal fest, und alle Elemente richten sich daran aus. Der praktische Gewinn liegt weniger in der Ästhetik als in der Wiedererkennung: Wenn der Kauf-Button auf jeder Produktseite an derselben Stelle sitzt, muss ihn niemand suchen. Diese Vorhersagbarkeit ist der eigentliche Grund, warum Raster funktionieren.

Zwölf Spalten haben sich als Standard durchgesetzt, weil sich zwölf glatt durch zwei, drei, vier und sechs teilen lässt — damit sind halbe, drittel und viertel Breiten ohne krumme Werte möglich. Das aus der Frühzeit responsiver Gestaltung stammende 960 Grid System hat diese Aufteilung populär gemacht; heute steckt sie in CSS-Frameworks wie Bootstrap und lässt sich mit CSS Grid und Flexbox auch ohne Framework direkt umsetzen.

Wo Raster schiefgehen

Ein Raster nimmt Entscheidungen ab, aber es trifft keine. Die typischen Fehler entstehen dort, wo es mechanisch angewendet wird.

Falsche Gewichtung. Wenn die Navigationsleiste ein Drittel der Seitenbreite belegt und die Produkte sich den Rest teilen, stimmt das Verhältnis nicht — unabhängig davon, wie sauber die Spalten ausgerichtet sind. Der Platz gehört dem, was verkauft.

Gleichförmigkeit. Eine Seite, auf der jedes Element gleich groß ist, hat keine Hierarchie. Der Blick findet keinen Einstieg, weil nichts wichtiger aussieht als der Rest. Ein Raster verträgt Ausbrüche und braucht sie sogar: ein breiteres Hauptbild, ein hervorgehobener Bereich, unterschiedliche Kachelgrößen in einer Kategorieliste.

Verschenkte Fläche. Wird eine feste Spaltenzahl auf jeder Bildschirmgröße durchgehalten, entstehen auf großen Monitoren breite leere Ränder, während auf kleineren alles zusammengequetscht wird. Verschachtelte Raster, bei denen ein Bereich innerhalb einer Spalte erneut unterteilt wird, lösen das für komplexe Seiten wie Produktdetails mit Varianten, Versandhinweisen und Bewertungsblock.

Responsives Layout: was sich tatsächlich ändert

Ein häufiges Missverständnis: Nicht die Zahl der Rasterspalten ändert sich mit der Bildschirmbreite, sondern wie viele davon ein Element belegt. Das Raster bleibt zwölfteilig; eine Produktkachel spannt am Desktop drei Spalten, auf dem Tablet sechs und auf dem Smartphone alle zwölf. Aus vier nebeneinanderstehenden Produkten werden so zwei, dann eines — ohne dass sich die Grundordnung ändert.

Die Punkte, an denen umgeschaltet wird, heißen Breakpoints. Sie werden sinnvollerweise nicht an konkreten Gerätemodellen festgemacht, sondern dort gesetzt, wo das Layout tatsächlich unangenehm wird — moderne CSS-Funktionen wie minmax() und auto-fit erlauben es sogar, ganz ohne feste Umbruchpunkte auszukommen.

Wichtiger als die Technik ist, was in der schmalsten Ansicht oben steht. Auf dem Smartphone ist der sichtbare Bereich klein, und was dort nicht hinpasst, wird oft nie gesehen. Auf einer Produktseite gehören dorthin Bild, Preis, Verfügbarkeit und die Möglichkeit zu kaufen — nicht ein bildschirmfüllendes Werbebanner. Was dabei zu beachten ist, beschreibt der Wiki-Eintrag Above the fold.

Barrierefreiheit ist seit 2025 Pflicht

Der größte Einschnitt für die Shopgestaltung seit Erscheinen dieses Beitrags kommt nicht aus der Technik, sondern aus dem Gesetz. Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG). Es setzt den European Accessibility Act in deutsches Recht um und erfasst Dienstleistungen im elektronischen Geschäftsverkehr — also Onlineshops, die sich an Verbraucher richten. Maßgeblich ist die Norm EN 301 549, die ihrerseits auf die Web Content Accessibility Guidelines verweist. Für Kleinstunternehmen sieht das Gesetz Ausnahmen vor.

Ob ein konkreter Shop unter das Gesetz fällt und welche Ausnahme greift, ist eine juristische Frage. Was sich davon unabhängig sagen lässt, ist, welche Anforderungen sich technisch daraus ergeben:

• Bedienbarkeit per Tastatur. Jeder Schritt bis zur Bestellung muss ohne Maus funktionieren, und die aktuelle Position muss dabei sichtbar sein. Ein Fokusrahmen, der per CSS entfernt wurde, weil er stört, ist der häufigste Einzelfehler in Shops.
• Ausreichende Kontraste. Für normalen Text gilt ein Kontrastverhältnis von mindestens 4,5:1. Hellgraue Schrift auf weißem Grund fällt regelmäßig durch — und ist auch für Menschen ohne Sehbeeinträchtigung anstrengend, sobald sie draußen aufs Display schauen.
• Beschriftete Formularfelder. Ein Platzhaltertext im Feld ist keine Beschriftung: Er verschwindet beim Tippen und wird von Screenreadern unterschiedlich behandelt. Jedes Feld braucht ein zugeordnetes label.
• Verständliche Fehlermeldungen. Sie müssen benennen, welches Feld betroffen ist und was zu tun ist — nicht nur rot einfärben. Farbe allein darf nie der einzige Informationsträger sein.
• Alternativtexte für Bilder, die Information tragen. Ein Produktbild braucht eine Beschreibung, ein rein dekoratives Muster nicht.
• Sinnvolle Dokumentstruktur. Überschriftenebenen in der richtigen Reihenfolge, Listen als Listen ausgezeichnet, Bedienelemente als Buttons statt als angeklickte div-Container.

Der Aufwand dafür ist geringer, als die Liste vermuten lässt, wenn er von Anfang an eingeplant wird — und deutlich höher, wenn ein fertiger Shop nachträglich umgebaut werden muss.

Was Barrierefreiheit nebenbei bewirkt

Diese Anforderungen werden häufig als Pflichtübung für eine kleine Zielgruppe gelesen. Das ist ein Denkfehler. Ein Checkout, der sich vollständig per Tastatur bedienen lässt, ist für Vielbesteller schneller. Klare Fehlermeldungen senken Abbrüche bei allen. Ausreichende Kontraste helfen jedem, der sein Telefon in der Sonne benutzt. Und eine saubere Dokumentstruktur ist genau das, was Suchmaschinen auswerten, um den Aufbau einer Seite zu verstehen.

Die Situationen, in denen jemand vorübergehend eingeschränkt ist, sind zudem häufiger als die dauerhaften: eine Hand am Einkaufswagen, laute Umgebung ohne Kopfhörer, gebrochener Arm, müde Augen am Abend. Gestaltung, die mit Einschränkungen umgehen kann, ist einfach robustere Gestaltung.

Was daraus folgt

Ein Raster ist Handwerkszeug, kein Konzept. Es sorgt dafür, dass eine Seite ruhig und vorhersehbar wirkt; es ersetzt nicht die Entscheidung darüber, was wichtig ist und was nicht. Und seit 2025 kommt eine zweite Ebene dazu, die nicht verhandelbar ist: Die Oberfläche muss auch dann funktionieren, wenn sie nicht mit Maus, Farbwahrnehmung und gutem Sehvermögen bedient wird.

Wie wir Oberflächen für Shops und Anwendungen entwerfen, steht auf der Seite zum User Interface Design. Welche Rolle Gestaltung insgesamt für den Erfolg einer Website spielt, behandelt der Beitrag Wie wichtig ist das Design einer Website? — und wie sich Änderungen an der Oberfläche überprüfen statt vermuten lassen, steht unter Conversion-Optimierung. Den Rahmen für ein ganzes Shopprojekt beschreibt unsere Seite Onlineshop erstellen lassen.