• E-Commerce
Mehr

    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.

    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.

    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

    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.

    Markus Remscheid
    Markus Remscheid
    Markus Remscheid ist UX/UI-Designer und Gründer von H2D2. Da viele Onlineshops zwar technisch funktionieren aber kein Kauferlebnis bieten, hat sich der H2D2-Chef zum Ziel gesetzt, attraktive Online-Marktplätze zu gestalten, die Menschen begeistert anziehen. Angefangen hatte alles 2003 mit der Betreuung der E-Commerce Pioniere Frontlineshop und später des innovativen Startups der OTTO Gruppe yalook. Inzwischen zählen auch inter­nationale Multi-Channel Anbieter wie bonprix zu seinen Auftraggebern.
    Anzeigekostenlose ERP Software

    Veranstaltungen

    Product Management Festival Europe

    Product Management Festival Europe – das Neueste zum Thema Produktmanagement

    Wenn es im Bereich des Produktmanagements etwas Neues gibt, dann ist auf dem Product Management Festival Europe zum ersten Mal die Rede davon. Hier...
    Flagbit E-Commerce Forum

    Flagbit E-Commerce Forum – gemeinsam die Zukunft des Onlinehandels gestalten

    Das Flagbit E-Commerce Forum hat sich mittlerweile zu einer wichtigen Veranstaltung der E-Commerce Branche entwickelt. Händler, Hersteller und interessierte Laien halten den Termin immer...
    Data Driven Business

    Data Driven Business – dreifach Konferenz zur richtigen Nutzung von Daten

    Data Driven Business ist eine dreifach Konferenz, die sich mit der Customer Journey, Daten im Geschäftsalltag und Predictive Analytics auseinandersetzt. Die Konferenz richtet sich...
    Marketing Underground

    Marketing Underground – ehrliche Leidenschaft für alle Facetten des Marketings

    Wichtig! Update zum Event (11.10.2019) DIE MARKETING UNDERGROUND KONFERENZ WURDE IN DEN ERSTEN TAG INTEGRIERT Weitere Informationen finden Sie hier: https://www.campixx.de/marketing-underground/konferenz/ Auf ihrer Premiere im Dezember bringt die Marketing...
    eosearchSummit

    eoSearchSummit – Suchmaschinen-Konferenz zum Thema Search Marketing

    Die Suchmaschinen-Konferenz "eoSearchSummit" hat sich ganz dem Thema Search Marketing verschrieben. Am 06.02.2020 findet das Event erstmalig statt. Wahre Branchengrößen haben sich angekündigt, um...
    E-Commerce Berlin Expo 2020

    E-Commerce Berlin Expo 2020 – Schmelztiegel des Onlinehandels

    Die E-Commerce Berlin Expo ist ein internationales Event, das Interessierte aus ganz Europa anspricht. Sie stellt somit einen Schmelztiegel des Onlinehandels dar, der Expertinnen...
    Command Control

    Command Control – Cyber Resilience neu gedacht

    Das Expertentreffen Command Control findet im Jahr 2020 bereits zum zweiten Mal statt. Der Gipfel beschäftigt sich mit dem Thema Cyber-Sicherheit und nimmt in...
    AnzeigePodcast Advertising Platform

    Ähnliche Beiträge

    1 Comment

    1
    Hinterlassen Sie einen Kommentar und starten Sie eine Diskussion!

    avatar
    1 Kommentar Themen
    0 Themen Antworten
    0 Follower
     
    Kommentar, auf das am meisten reagiert wurde
    Beliebtestes Kommentar Thema
    0 Kommentatoren
    Rasterfahndung für Online-Shops: Welches Design-Grid ist das richtige? - Blog für den Onlinehandel Letzte Kommentartoren
      Abonnieren  
    neueste älteste meiste Bewertungen
    Benachrichtige mich bei
    trackback
    Rasterfahndung für Online-Shops: Welches Design-Grid ist das richtige? - Blog für den Onlinehandel

    […] 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. […]

    Jetzt Alexa Skill aktivieren

    digital-magazin alexa Skill