Die meisten modernen Online-Shops unterliegen einem gewissen Gestaltungsraster. Dieses Raster dient dem Webdesigner in erster Linie als Hilfsmittel. Wird eine gute Wahl für das passende Grid getroffen, so hat diese Entscheidung auch Einfluss auf die Kundschaft. Nachfolgend wird Schritt für Schritt aufgezeigt, worauf Shopbetreiber unbedingt bei der Gestaltung des Onlineshops achten sollten.

Eine gute Planung ist Voraussetzung

Eine Vielzahl von Faktoren entscheiden letztendlich darüber, ob sich ein Kunde im Onlineshop wohlfühlt. Dazu zählen beispielsweise verschiedene Elemente wie passende Bilder, ausdrucksstarke Überschriften, gelungene Fließtexte, aber auch Buttons und Formularfelder. Sind diese Bereiche strukturiert angeordnet, fällt es dem Besucher leicht, sich im Shop zurechtzufinden.

Der Webdesigner muss diese Elemente jedoch zunächst zusammenstellen. Dafür nutzt dieser ein Gestaltungsraster. Mit diesem Raster lassen sich mittels Hilfslinien die einzelnen Bereiche gezielt bestimmen und unterbringen. Folglich setzt der Webdesigner die Komponenten nicht willkürlich ein, sondern kann die freien Flächen leicht und übersichtlich mit Seiteninhalten füllen. Besonderer Beliebtheit erfreut sich mittlerweile das 960 Grid System, das mit einem Raster von 12 Spalten arbeitet. Dieses System ist flexibel verwendbar und deshalb begehrt. Nichtsdestotrotz finden auch Raster mit 3, 4 oder 8 Spalten weiterhin Anklang.

Stolperfallen beim Rastersystem geschickt umgehen

Dank der gelungenen Rastergrundlage wird nicht nur dem Webgestalter die Designfrage abgenommen, auch die Besucher finden sich schnell und unkompliziert im Onlineshop zurecht. Verschiedene Layout lassen sich praktisch umsetzen. Auch Bilder, Texte und weitere Elemente können gleichmäßig angebracht werden. Dementsprechend sorgt ein stimmiges UI-Design für einen harmonischen Internetauftritt. Damit der Onlineshop jedoch auch gelingt, sind einige Vorgaben zu beachten.

Die Rasterstruktur sollte von Anfang an gut überdacht sein. Somit laufen Webdesigner und Onlineshop-Besitzer hernach nicht Gefahr, dass das Design nicht gefällt oder Inhalte nicht optimal wiedergegeben werden können. Letzteres könnte der Fall sein, wenn beispielsweise die Navigationsleiste mehr Platz erhält als wichtige Texte oder Bilder, die beim Kunden das Interesse wecken sollten. Verhalten sich die einzelnen Shop-Bestandteile ausgewogen und proportioniert, wirkt auch das Gesamtbild auf den Käufer einheitlich und im richtigen Verhältnis.

Was passiert jedoch, wenn der Kunde eine unübersichtliche Seite besucht? Entweder verlässt er den Onlineshop, um eine bessere Seite zu finden, oder er klickt sich müßig durch alle Bereiche. Der letzte Punkt sorgt jedoch dafür, dass der Besucher unzufrieden ist. Woran mag das liegen? Der Betrachter wünscht sich mehr Übersicht. Er möchte mehr wahrnehmen und nicht ewig durch Seiten scrollen müssen, um seinen Wunsch erfüllt zu wissen. Je besser die Seite strukturiert ist, desto wohler fühlt sich letztlich auch der Kunde. Das Resultat: Er empfiehlt die Seite bei Verwandten, Kollegen und Freunden weiter und wird auch gern selbst weitere Käufe vornehmen.

Tipp: Für eine optimale Darstellung, die den Kunden nicht zu überfordert, ist der Einsatz von drei bis vier Rastern ideal.

Verschachtelte Raster sorgen für mehr Kundenzufriedenheit

Ein guter Webdesigner schafft mit dem Einsatz von sogenannten „nested“ (verschachtelten) Rastersystemen einen erfolgreichen und effektiven Onlineshop. Mit aktuellen CSS Frameworks wie beispielsweise Bootstrap, die die verschachtelten Grid-Techniken unterstützen, bieten sich viele verschiedene Design-Varianten.

In diesem speziellen System lässt sich nicht nur die Navigation perfekt integrieren, sondern auch der gewünscht Content. Das Verhältnis erfolgt fließend, was dazu führt, dass der Kunde mühelos seine Einkäufe tätigen kann.

Rasteroptimierung wirkt sich auf die Interaktion des Kunden aus

Eine ausdrucksstarke Rasterdarstellung kann in vielerlei Hinsicht die Interaktion des Kunden beeinflussen. Dass dem wirklich so ist, beweist zum Beispiel die Internetpräsenz von Bonprix, einer Tochtergesellschaft des OTTO Konzerns. Vor der Aktualisierung wurde der Shop mit einem Raster von vier Spalten versehen – ungeachtet dessen, ob der Besucher den Online-Shop auf einem kleinen Laptop oder auf einem großen PC-Monitor betrachtete: Es wurden immer vier Spalten verwendet, sodass oft viel Weißraum angezeigt wurde.

Nach einer Seitenoptimierung kam eine weitere Rasterreihe hinzu, die sich je nach Monitorgröße einbindet.

Auch der Sheego-Onlineshop verwendet solch ein nested Raster. Somit bleibt die Navigationsleiste bestehen, nimmt allerdings nicht zu viel Raum ein. Das Resultat erlaubt mehr Platz für Produkte. Der Kunde wird somit nicht von störenden Elementen behindert, sondern seine Aufmerksamkeit auf Waren oder andere Bereiche, die wünschenswert sind, gelenkt. Das gesamte Layout wirkt folglich stimmiger, Besucher finden zudem schneller, was sie suchen.

Hinweis: Ein Onlineshop, der lediglich dem Rasteraufbau folgt, wirkt auf den Betrachter langweilig. Wird Platz zudem verschenkt, kommt schnell Unruhe in den Onlineshop. Wichtig ist hier, mit ein wenig Feingefühl zu arbeiten und die passende Mischung zu finden. Eine solide Struktur mit einem Hauch von Finesse bringt den Onlineshop auf Erfolgskurs.

Responsive Grid für den modernen Onlineshop

Die meisten Onlineshops werden nach dem Modell des responsive Grids aufgebaut. In diesem Rahmen setzt der Webdesigner Breakpoints ein, die für die Displaybreite zuständig sind. Ändert sich die Monitorgröße des Betrachters, so ändert sich ebenso das Grid. Das führt dazu, dass sich das Layout in der Darstellung anpasst. Demnach kann der Onlineshop auf dem Smartphone 4 Spalten umfassen, auf einem Laptop hingegen 12 Spalten einnehmen. Somit wird für den Kunden gewährleistet, dass der Onlineshop auf dem Endgerät optimal aufgeführt wird. Das Ergebnis ist ein zufriedener Kunde, der den Onlineshop bestimmt weiterempfehlen und wieder besuchen wird.