• Jetzt unverbindlich anfragen
    Online durchstarten.
    Ich bin damit einverstanden, dass mich Agentur Anmut GmbH kontaktiert (telefonisch oder per E-Mail) und meine angegebenen Daten speichert. Ihre Daten werden vertraulich behandelt und nicht an Dritte weitergegeben. Weitere Informationen finden Sie in unseren Datenschutzbestimmungen.

Professionelles Shopdesign – So gestalten Sie Ihren Webshop benutzerfreundlich

Egal ob Webseite oder Webshop – das Design bleibt eine der ausschlaggebendsten Entscheidungshilfen für den Besucher, wenn dieser einen Blick auf Ihren Content wirft. Es beeinflusst die Wahrnehmung Ihres Unternehmens, der Produkte und auch letztendlich, ob sich ein Kunde zum Kauf entschließt. Oder ob er den Shop unverrichteter Dinge wieder verlässt.

Der Internetnutzer als Kunde steht im Mittelpunkt jeder Überlegung zum Thema Design. Nur wenn ein Onlineshop nach dessen Bedürfnissen ausgerichtet ist, kann eine Kundenbindung zu Ihrem Unternehmen entstehen und dafür sorgen, dass es nicht bei einem einmaligen Besuch bleibt. Daher empfiehlt sich generell ein Design, dass dem Besucher ein benutzerfreundliches und angenehmes Kauferlebnis bereitet.

Wie definiert sich also gutes Webshop-Design? Im Folgenden haben wir für Sie eine Liste mit Tipps zusammengestellt, anhand derer Sie etappenweise überprüfen können, ob Ihr Shop zum Kaufen einlädt oder eher abschreckt. Dabei handelt es sich um Grundaspekte, die trotz differenzierten individuellen Merkmalen auf so gut wie jeden Onlineshop angewandt werden können.

Ihr Unternehmen: Die Corporate Identity

Als „Corporate Identity“ bezeichnet man im Allgemeinen das Auftreten einer Firma in der Öffentlichkeit und welche Alleinstellungsmerkmale, Leistungen und Philosophie diese vertritt. Dazu gehören auch das Logo, Farbwahl und Slogans. Die Corporate Identity ist essentiell, damit ein Kunde Ihre Firma wiedererkennt. Deshalb sollte Ihr Logo im oberen Bereich der Webseite platziert werden, wo man es sofort sehen kann. Layout und Farbschema sind ebenfalls wichtige Faktoren, die sich idealerweise kontinuierlich auf der Seite durchziehen.

Außerdem können Sie zusätzlich darauf achten, dass Sie Logo und Farbschema Ihres Shops auf andere Kanäle übertragen – sowohl in Social Media, Newsletter oder auch Flyer. Dadurch entsteht ein einheitliches Bild von Ihrem Unternehmen und Benutzer können Sie besser identifizieren.

Der erste Eindruck: Above the fold

Sobald ein Benutzer Ihren Webshop aufruft, ist der obere Teil der Startseite das erste, was er zu sehen bekommt. Diesen Teil nennt man auch „above the fold“. Er dient dazu, die Aufmerksamkeit der Besucher zu gewinnen und sie dazu zu bringen, sich auch den Rest der Seite anzusehen. Dies geschieht beispielsweise durch Pfeile nach unten oder visuelle Anweisungen. Gestalten Sie den Bereich so, dass man neugierig wird und weiterschauen möchte.

Above the fold dient außerdem dem Besucher als ersten Eindruck zu Ihrem Unternehmen. Es sollte ihm daher sofort ersichtlich sein, was ihn in Ihrem Shop erwartet und noch zu entdecken gibt. Ihr Logo sollte auf jeden Fall zu sehen sein, außerdem noch ein Slogan oder eine kurze Beschreibung. Auch große Produktabbildungen oder Slider sind mittlerweile sehr beliebt, um den Fokus des Shops zu verdeutlichen.

Doch Vorsicht: Achten Sie darauf, den Bereich nicht mit zu vielen Informationen zu füllen. Das kann schnell einen gegenteiligen Effekt haben und den Besucher überfordern. Weniger ist mehr – beschränken Sie sich lieber auf die wesentlichen Aspekte und animieren Sie zum Weiterlesen, um mehr zu erfahren.

„Der Internetnutzer als Kunde steht im Mittelpunkt jeder Überlegung zum Thema Design.“

Der Aufbau: Navigation

Benutzerfreundlichkeit besticht nicht zuletzt durch Übersichtlichkeit. Ein leicht verständliches und gut strukturiertes Menü hilft dem Besucher bei der Orientierung. Unterpunkte dienen dazu, Ihr Angebot in verschiedene Kategorien zu verteilen und den Kunden nicht damit zu erschlagen. Suchen Sie für diese Punkte eine sinnvolle Unterteilung und präzise, knappe Formulierungen.

Um zu verhindern, dass die Struktur zu verschachtelt wird, können Sie versuchen, mit maximal drei Ebenen zu arbeiten. Aber diese Weise ist für den ungeduldigen Besucher alles innerhalb von zwei Klicks erreichbar oder Mouse-over erreichbar.

Das Herz des Shops: Die Produkte

Im Fokus des Besuchers stehen Ihre Produkte. Es lohnt sich für Webshops daher immens, in hochwertige Produktbilder zu investieren. Schließlich kann der potentielle Kunde nicht wie im wirklichen Laden das Produkt von allen Seiten betrachten, sondern hat lediglich die Bilder als Anhaltspunkt. Oft sind es auch die Details, die man näher betrachten möchte. Vier oder fünf Bilder aus vielen verschiedenen Perspektiven stellen einen soliden Durchschnitt dar.

In der Produktbeschreibung sollten Sie idealerweise keine eigene Wertung mit einfließen lassen. Bleiben Sie objektiv und geben sie dem Nutzer so viele Informationen wie nur möglich, ohne dabei einen Roman zu schreiben. Stichpunktartige Auflistungen sind knapp und präzise.

Noch ein Tipp zur Suchmaschinenoptimierung: Wenn Sie das Bild direkt richtig benennen, ersparen Sie sich später viel Arbeit und bekommen bessere Suchergebnisse bei Google. Ein Beispiel wäre „das-ist-ein-musterprodukt-mit-keyword.jpg“ statt „IMG008.jpg“. Das ist nur ein kleiner Arbeitsschritt, bewirkt aber eine insgesamt höhere Reichweite.

Die Visualisierung: Grafiken

Text allein kann auf Dauer ziemlich eintönig für den Benutzer werden. Mit der richtigen Gestaltung kann man ihn ansprechender aufbereiten, beispielsweise durch Grafiken oder Icons. Diese können Fakte, wie zum Beispiel Ihre Alleinstellungsmerkmale, visualisieren und den Textfluss um einige umständliche Erläuterungen reduzieren. Icons haben eine internationale Bedeutung und sind dadurch für den Internetnutzer intuitiv verständlich.

Auch hier ist es meist besser, minimalistisch zu bleiben und den Nutzer nicht mit zu vielen Grafiken zu irritieren – schließlich soll der Fokus auf den Produktbildern bleiben. Auch Farbverläufe oder Schattenwürfe sind Effekte, die unnötig ablenken. Verbessern Sie die Lesbarkeit lieber durch hohe Kontraste.

Webshop - Design Übersicht

Die Kaufoption: Call to Action

Der Besucher sollte bei seinem Einkauf zu jedem Zeitpunkt wissen, was als nächster Schritt ansteht. Hier helfen deutlich sichtbare Buttons mit der „Call to Action”-Botschaft. Größe und Farbwahl solche Buttons hervorheben und den Benutzer führen. Farben lösen oft unbewusste Emotionen aus, die wir mit Ihnen assoziieren – grüne Häkchen verbindet man mit etwas Positivem, rot ist hingegen eine Signalfarbe und steht oft für Warnungen. Durch die richtigen Farben verstehen wir vieles, ohne den Text zuvor gelesen zu haben.

Durch die gesetzliche Button-Lösung seit 2012 muss ein Nutzer sofort erkennen können, dass ein Klick Geld kosten wird. Beschriften Sie Ihre Buttons deshalb eindeutig, um rechtlich auf der sicheren Seite zu sein. Beispiel wären „In den Warenkorb“ oder „Jetzt kaufen“.

Auch mobil erreichbar: Responsive Design

Mittlerweile surfen immer mehr Menschen mobil und der Desktop-Monitor gerät zusehends in den Hintergrund. Selbst wenn die Nutzer daheim auf ihrer Couch liegen, greifen Sie eher zum Tablet als zum Computer. „Responsive Design” bedeutet, dass sich das Layout der Internetseite automatisch an verschieden große Bildschirme anpasst.

Damit Ihre Produkte und Texte auf den tragbaren Endgeräten nicht zu klein und unleserlich dargestellt werden, sollten Sie auf anpassungsfähige Elemente setzen, die sich je nach Bildschirm ändern. So bleiben auch Buttons in einer touchfähigen Größe.

Unser Fazit!

Wenn Sie all diese Merkmale beachten, steht einem benutzerfreundlichen Design nichts mehr im Wege. Führen Sie den Kunden durch eine gute Struktur in Navigation und Layout durch Ihren Shop. Bleiben Sie mit dem Fokus bei Ihren Produkten und zeigen Sie diese von ihrer besten Seite. Auch bereits bestehende Webshops können unter diesen Gesichtspunkten überarbeitet und weiterentwickelt werden.

Sie benötigen Unterstützung?
Gerne stehen wir Ihnen mit Rat und Tat zur Seite und helfen bei der Optimierung Ihrer Webseite.