UI Design für Onlineshops: Wie sich das Gestaltungs­raster auf die Konversion auswirkt

Ein Gastbeitrag von Markus Remscheid

So gut wie allen modernen E-Commerce-Seiten liegt ein Gestaltungsraster zu Grunde. Obwohl nur unsichtbares Hilfsmittel für Webdesigner, hat die Wahl des richtigen Grids entscheidenden Einfluß auf die Einkaufs­erfahrung. Und die wiederum wirkt sich auf die Konversionsrate aus. Was Online­shop­betreiber beachten und wissen sollten, zeigen wir hier.

Die Funktionsweise von Gestaltungsrastern

Das Userinterface eines Onlineshops besteht aus unzähligen visuellen Bausteinen. Elemente wie Bilder, Überschriften, Fließtexte, Buttons und Formularfelder zu ordnen und sinnvoll zu strukturieren ist eine der Hauptaufgaben im Visual Design. Webdesigner setzen dafür Gestaltungsraster als Hilfestellung ein. Das Raster besteht aus optischen vertikalen Hilfslinien, an denen die Einzelelemente ausgerichtet werden. So muß der Webdesigner die Elemente nicht frei auf der Fläche positionieren und kann so leichter eine ordnende und übersichtliche Struktur schaffen. Besonders beliebt sind 12-spaltige Raster (so wie das inzwischen in die Jahre gekommene 960 Grid System), da diese besonders flexibel einsetzbar sind. Aber auch 3-, 4- oder 8-spaltige Raster werden häufig eingesetzt.

Lesen Sie auch ...

Kurz erklärt – Onlinezugangsgesetz (OZG)

Das Onlinezugangsgesetz soll dafür sorgen, dass die Interaktion von Einzelpersonen oder Unternehmen mit Behörden leichter, schneller und auf die heutige Zeit angepasst wird. Das...

Zum Stand der Digitalisierung in Deutschland

Elmar Giglinger ist Unternehmer, Berater, Geschäftsführer und Programmdirektor. Er unterstützt Betriebe bei ihrer digitalen Transformation und zeigt auf, wie effiziente interne und externe Kommunikation...

Schematische Darstellung eines 3- und 4-spaltigen Gestaltungsrasters
Schematische Darstellung einer Artikelseite im 3- und 4-spaltigen Raster

Fallstricke beim Einsatz von Rastersystemen

Eine Rastergrundlage nimmt dem Gestalter viele Designentscheidung ab und sorgt für ein konsistentes UI Design, auch über einen kompletten Webauftritt hinweg. Diese Hilfestellung resultiert allerdings auch in einer Limitierung der Gestaltungsfreiheit. So läßt sich nicht mehr jede Layoutidee umsetzen, da im Rahmen des Rasters gewisse Bildgrößen, Textspaltenbreiten und Positionierungen vorgegeben sind.

Die Struktur des Rasters sollte deshalb zu Beginn eines jeden Relaunches gut überlegt sein. So wird die Situation vermieden, während des Designprozesses feststellen zu müssen, das sich bestimmte Inhalte entweder gar nicht oder nicht optimal abbilden lassen.

Lesen Sie auch ...

Twitter-Townhall-Meeting zur Digitalisierung

Die Botschafter der nordischen Länder setzen von jeher auf eine enge Zusammenarbeit. Diese gute Tradition wird auch während der Corona-Krise beibehalten. Jetzt wollen sie...

Querschnitt durch die Digitalisierung – Die Ausstellung „Neuland: Ich, wir und die Digitalisierung“

Mit etwas Verspätung startete in Frankfurt die Ausstellung "Neuland: ich, wir und die Digitalisierung". Diese beschäftigt sich mit dem, was im digitalen Bereich war,...

Folgendes Negativbeispiel illustriert, wie sich eine ungünstige Rastergrundlage auf die Artikeldarstellung auswirken kann:

Gezeigt ist ein Ausschnitt der Artikelübersichtsseite des DFB-Fanshops. Der 3-spaltige Aufbau sorgt für eine unausgewogene Gewichtung der Elemente: der Navigationsspalte steht unangemessen viel Raum zu, während die Artikel nur in zwei Spalten dargestellt werden.

Artikelübersicht des DFB-Merchandise-Shops mit 3-spaltigem Raster

Lesen Sie auch ...

Zum Stand der Digitalisierung in Deutschland

Elmar Giglinger ist Unternehmer, Berater, Geschäftsführer und Programmdirektor. Er unterstützt Betriebe bei ihrer digitalen Transformation und zeigt auf, wie effiziente interne und externe Kommunikation...

Überwachung am Arbeitsplatz – Mitarbeiter-Tracking kommt immer mehr in Mode

Durch die Corona-Krise arbeiten die Menschen vermehrt im Homeoffice. Das kommt bei allen Beteiligten so gut an, dass die Unternehmen diese Arbeitsweise teilweise dauerhaft...

Der Onlineshop-Besucher wünscht sich eine Übersichtsseite, die möglichst viele Artikel auf einer Seite zeigt. So kann er sich einen Überblick über das Sortiment verschaffen, ohne sich durch viele Unterseiten klicken zu müssen. Gleichzeitig sollten Artikelabbildungen in einer angemessenen Größe gezeigt werden, die es dem Betrachter erlaubt, bereits Details in den Artikelabbildungen wahrnehmen zu können. So werden dem stöbernden Shopbesucher viele Klicks erspart, da er nur auf die Detailseite wechseln muß, wenn ein vertieftes Interesse an einem bestimmten Artikel geweckt ist. Für die Darstellung auf Desktop­computern sind drei bis vier Artikelreihen meist ideal. 

Durch den Einsatz eines einfachen 4-spaltigen Rasters, würde sich die Darstellung des DFB-Fanshops bereits deutlich verbessern, wie unser Entwurf zeigt

Artikelübersicht des DFB-Onlineshops mit 4-spaltigem Raster

Der Trick mit verschachtelten Rastern

Fortgeschrittene Designer können mit dem Einsatz verschachtelter Rasterssysteme eine noch feinstufigere Aufteilung erzielen. So lassen sich Navigations- und Contentbereich ins optimale Verhältnis bringen.
Moderne CSS Frameworks wie bootstrap unterstützen die „Nested Grid“-Technik, so dass dem Designer hier alle Möglichkeiten offen stehen. 

Konstruktion eines verschachtelten Rasters mit 5-spaltigem Aussen- und 3-spaltigem Innenraster
Konstruktionsbeispiel eines „Nested Grids“ mit 5-spaltigem Aussenraster: die vier rechten Spalten fassten wir zu einer Spalte zusammen und setzten dort ein 3-spaltiges Raster ein

Wendet man nun diese verschachtelte Rasterkonstruktion auf den DFB-Merchandise-Shop an, ändern sich die Verhältnisse wie gewünscht: die Navigationsspalte nimmt nur noch minimalen Platz in Anspruch, während wertvoller Raum für die Artikelbilder geschaffen wird. Die Nutzererfahrung wird gesteigert, die größeren Bilder sprechen emotional stärker an. 

Artikelübersicht des DFB-Merchandise-Shops mit Gegenüberstellung von 3- und 5-spaltigem Raster
Artikelübersicht des DFB-Merchandise-Shops mit Gegenüberstellung von 3- und 5-spaltigem Raster

Auswirkung der Rasterdarstellung auf die Konversion

Das sich die Rasterdarstellung signifikant auf die Conversion auswirken kann, beweist der umsatzstarke Internetshop von bonprix. Die Übersichtsseite des Shops der OTTO-Tochter nutzte ursprünglich eine fixe 4-spaltige Artikeldarstellung, selbst dann, wenn die Seite auf einem großen Monitor betrachtet wurde und viel Weißraum ungenutzt blieb. 

Für genau diesen Fall erstellten wir eine optimierte Version: läßt es die zur Verfügung stehende Fläche zu, wird den 4 Artikelreihen einfach eine weitere hinzugefügt. Dementsprechend sind mehr Artikel im „First View“ sichtbar. Ein A/B-Test ergab, das die Version mit dieser besonderen Logik tatsächlich deutlich besser konvertierte. Und das mit einer nur kleinen Optimierung, die mit relativ geringem Aufwand umgesetzt werden konnte.

Gegenüberstellung von zwei Rastervarianten der bonprix-Übersichtsseite für einen A/B-Test
In einem A/B-Test zeigte sich, dass die Variante mit zusätzlicher Artikelspalte deutlich besser konvertierte

Weiteres Beispiel aus der Praxis:

Auch der neue sheego-Onlineshop setzt verschachtelte Raster ein. So nimmt die Navigationsspalte nur minimalen Raum ein, während mehr wertvoller Platz für Produktabbildungen zur Verfügung steht:

Neue Darstellung der Artikelübersicht des sheego-Shops

Im Vergleich: der alte sheego-Shop nutzte einen einfachen 4-spaltigen Aufbau. Das Resultat: weniger Raum für Bilder, geringere emotionale Wirkung

Alte Darstellung der Artikelübersicht des sheego-Shops

Auch einmal ausbrechen

Bilder und Elemente bewußt aus dem Raster ausbrechen lassen, sind ein wirksames Mittel, um gezielt Aufmerk­­samkeit auf bestimmte Bereiche eines Onlineshops zu lenken. Nutzen läßt sich dieser Effekt z.B. für Rabatt-Störer oder Flags. Werden diese frei platziert, ziehen sie das Auge förmlich an. Zudem das Webdesign insgesamt von freien Elementen profitiert. Sie lassen das Layout lebendiger wirken und sorgen für optische Spannung. Ein Onlineshop, der zu streng nach Raster aufgebaut ist, wirkt schnell steif und langweilig. Hier ist Fingerspitzengefühl des Webdesigners gefragt. Die richtige Mischung von strukturiert und frei platzierten Elementen zu finden, ist der Schlüssel zum Erfolg.

Elemente die ausserhalb des Rasters platziert sind, ziehen die Aufmerksamkeit des Betrachters an. Dieser Effekt kann z.B. bewußt für den Einsatz von Störern genutzt werden

 

§-Spalten Online-Shop mit StörerBildelemente, die über die ganze Breite des Bildschirms reichen, lockern das Raster auf und entfalten eine starke Bildwirkung.

 

Bildelemente, die über die ganze Breite des Bildschirms reichen, lockern das Raster aufResponsive Grids im E-Commerce

Moderne Onlineshops werden heute meist auf Basis responsiver Grids gestaltet. Im Responsive Webdesign legt der UI-Designer Breakpoints fest, die eine bestimmte Displaybreite definieren. Werden diese über- oder unterschritten, ändert sich das Grid und das Layout bricht auf eine andere Darstellung um. So kann z.B. die Startseite eines Onlineshops auf einem Smartphone 4-spaltig dargestellt werden, während auf einem großen Monitor eine 12-spaltige Darstellung zum Einsatz kommt. So wird gewährleistet, das ein Onlineshop auf jedem Endgerät, sei es Smartphone, Tablet oder Laptop, optimal angezeigt wird. 

Responsive Design hat die Gestaltung von Onlineshops komplizierter gemacht. Dies zeigt sich z.B. auch darin, das es noch viele etablierte Onlineshops gibt, die noch nicht auf eine responsive Darstellung umgestellt haben. In einem nächsten Blogartikel möchten wir deshalb einen Überblick geben, was beim Responsive Design zu beachten ist und wie ein Responsive Design Prozess aussehen kann.

Fazit:

Große Bilder sind eindrucksvoller als kleine und sorgen für den gewünschten Wow!-Effekt beim Betrachter. Besonders Modeshops, die Kaufbegeisterung über Bilder wecken, profitieren von diesem Effekt. Der Mehrwert von Übersichtsseiten zeigt sich dagegen in einer möglichst großen Anzahl von Abbildungen im „First View“. Best Practise im E-Commerce Design bedeutet, Bildern so viel Platz wie möglich einzuräumen. Navigations- und Bedienelementen dagegen nicht mehr Platz als nötig.

Dabei hilft ein gutes Grid, das Navigations- und Contentbereiche ins rechte Verhältnis setzt. Obwohl nur unsichtbares Hilfsmittel für Gestalter, hat das Raster so direkten Einfluss auf Nutzererfahrung und emotionaler Wirkung eines Shops. Und diese Faktoren wirken sich auf die Konversionsrate aus.

Bei Onlineshop-Relaunches lautet deshalb unsere Empfehlung: auch das vorhandene Grid sollte einem kritischen Blick unterzogen und gegebenenfalls optimiert werden. Das Gute dabei: selbst kleine Änderungen können zu großen Verbesserungen führen. Und die wiederum zu meßbar mehr Erfolg.

1 Kommentar

  1. […] Schönere Bilder, Videos, interaktive Elemente, Virtual Reality, Personalisierung – Trend-Tipps zum Thema E-Commerce-Design gibt es genauso viele wie es Shopdesign-Experten gibt. Über all diesen hübschen Features wird aber gerne mal die Layout-Basis des Shops vergessen. Dabei hat dieses „Shop-Grid“ selbst einen ganz entscheidenden Einfluss darauf, wie ein Shop wirkt und – vor allem – wie er konvertiert, wie Markus Remscheid, UX/UI-Designer und Gründer von H2D2, kürzlich in einem lesenswerten Gastbeitrag für das E-Commerce-Blog betont hat. […]

Diesen Beitrag kommentieren:

Bitte geben Sie Ihren Kommentar ein
Bitte geben Sie hier Ihren Namen ein

AnzeigeWerbung in Podcasts

Beliebte Beiträge

Zahlungsprozesse: Amazon Payments vs. Paypal

Wohl kaum jemand, der sich regelmäßig im Internet bewegt und auch online bestellt wird ein Paypal-Konto nicht sein eigen nennen. Die Vorteile sind (fast)...

Käufer, Produkte und Shoppingverhalten – so nutzen die Deutschen den E-Commerce

Für Unternehmen im E-Commerce ist es entscheidend, die eigene Zielgruppe beziehungsweise die eigenen Kunden zu kennen. Deswegen sind Infografiken wie die von Netzshopping so...

Wie Sie Journalisten dazu bringen, Ihnen zuzuhören

Die allermeisten Pressemitteilungen werden nie gelesen – weil Journalisten, wie auch Redakteure davon geradezu überschwemmt werden. Was also tun, um die Aufmerksamkeit von Journalisten...

Newsletter - wöchentlich digital informiert werden

Unser Newsletter schickt Ihnen die News der letzten Woche zusammengefasst in Ihr Postfach.

Veranstaltungen

Online Marketing Konferenz All-in-one trotzt der Krise

Dass Konferenzen in Zeiten von Corona durchaus möglich sind, beweist das Online Marketing Event All-in-one, das am 18.06.2020 ab 14:30 stattfindet und von SEMrush-Connect...

Neuer Umgang mit Daten – Data Driven Business Konferenz

Im November 2020 findet die Data Driven Business Konferenz statt. Diese möchte Wege aufzeigen, um mit einer optimalen Nutzung von Daten den Kunden ins...

Empfehlung der Redaktion

Digitalisierung: Was ist das? Eine Definition.

Diesen Artikel lieber hören? Gelesen von Peter Brown. Hörbar gemacht von Obwohl sie in nahezu allen unseren Lebens- und Arbeitsbereichen eine große Rolle spielt, ist die...

Aufgaben eines CDO – als Störenfried die Digitalisierung voranbringen

Diesen Artikel vorlesen lassen: Die Metajobsuchmaschine Joblift hat die Stellenausschreibungen für CDOs (Chief Digital Officer) der letzten zwei Jahre unter die Lupe genommen. Hierbei haben...

HubSpot – der ultimative Wegweiser für die erfolgreiche Nutzung von HubSpot

HubSpot ist ein börsennotiertes Software-Unternehmen aus den Vereinigten Staaten, mit dem Fokus auf Marketing-Software für Inbound Marketing und Sales und im Juni 2006 gegründet...

Was ist SEMrush? – Alle Funktionen im Überblick

Alles begann im Jahr 2008 als sich eine kleine Gruppe aus IT- und SEO-Spezialisten mit einer gemeinsamen Mission zu einem Unternehmen zusammenschlossen und den...

5 SEO Tipps für Online Shops

5 Online Shop SEO Tipps für bessere Rankings und mehr Umsatz im Jahr 2015. Mit diesen Tipps ist jeder Online Shop Betreiber auf der sicheren Seite.

Value Model Canvas: Erweiterung des Business Model Canvas

Diesen Artikel vorlesen lassen? Value Model Canvas - Unternehmensidentität clever definieren Seit rund zehn Jahren hat sich das Business Model Canvas (BMC) als Hilfsmittel für das...

Produktmanagement im E-Commerce

Die Zukunft sieht vernetzt aus ... und zwar in Form von E-Dienstleistungen. Alles muss elektronisch und digitalisiert sein. Das hat auch seine guten Gründe....

Digital Leadership – die Digitalisierung stellt neue Ansprüche an Führungskräfte

Diesen Artikel hören? Die schöne neue Digitalwelt verlangt eine Neuausrichtung der Arbeitswelt. Das gilt sowohl für die an den Unternehmensprozessen beteiligten Mitarbeiter als auch für...

Bing Ads: Erfolg mit dem Werbeprogramm von Microsoft

Bing Ads heißt das Microsoft Werbeprogramm für Bing und Yahoo! Die beiden Suchmaschinen betreiben ihre Werbung schon länger über das gemeinsame Yahoo! Bing Network....

Jetzt Alexa Skill aktivieren!

Anzeigedigital-magazin alexa Skill

Ähnliche Beiträge

UI Design für Onlineshops: Wie sich das Gestaltungs­raster auf die Konversion auswirkt

Teile diesen Artikel per Email