Webdesign: 10 Tipps für deinen gelungenen Online-Auftritt

Wie sehr kann dein Online-Shop überzeugen? Wie wichtig ist das Design deines digitalen Auftritts? Worauf kommt es eigentlich an? Die Performance der Verkaufsplattform hängt stark von ihrer Benutzbarkeit und vom optischen Erscheinungsbild ab. Nicht nur wie deine Kunden darauf reagieren hängt davon ab, selbst das Ranking bei Google wird davon beeinflusst. Wir haben 10 Tipps für dich zusammengetragen, wie du deinen Online-Auftritt optimierst. Aber zuerst schauen wir uns an, was gutes Webdesign alles bringt.

Warum ist Webdesign so wichtig?

Lass uns darüber reden, was gutes Webdesign ausmacht. Wichtig ist zu allererst die Frage: Wen soll das Design ansprechen? Der erste Grundsatz in der Philosophie von Google lautet: „Der Nutzer steht an erster Stelle, alles Weitere folgt von selbst.“ Design und Usabilty sind dabei ganz eng verwoben. Worauf kommt es also an?

Ein solider erster Eindruck

Es ist wie im offline Leben. Der erste Eindruck bestimmt über den Rest der Begegnung. Wenn du einen unaufgeräumten und schlecht ausgeleuchteten Laden betrittst, wirst du da nicht lange bleiben und vermutlich nichts kaufen. Genau so geht es Kunden, die auf einen Onlineshop mit chaotischem Aufbau und schlechten Produktfotos stoßen. Bevor du deinen potenziellen Kunden also sofort wieder an die Konkurrenz verlierst, sollte dein Shop durch professionelles Design einen guten ersten Eindruck machen.

Vertrauen aufbauen

Viele Internetnutzer stehen neuen Onlineshops skeptisch gegenüber. Während die Großen der Branche wie Amazon, Zalando oder Otto bereits das uneingeschränkte Vertrauen der Nutzer genießen, müssen kleinere Onlinehändler hier oft Überzeugungsarbeit leisten. Professionelles Webdesign ist dafür wichtig: Laut einer Studie der Stanford University bewerten 75 % der Internetnutzer die Vertrauenswürdigkeit eines Unternehmens anhand des Websitedesigns.

Verschiedene Maßnahmen können das Vertrauen in deinen Onlineshop stärken. Bestimmte Design- und Usability-Elemente auf Webseiten vermitteln dem Käufer Sicherheit. Grundsätzlich gilt: Relevante Informationen dürfen nicht versteckt sein. Neben der typischen Position des Warenkorbs sollten Elemente wie die Navigationsleiste (oben links) oder die Informationen zu Impressum, AGB und Datenschutzerklärung sowie Kontaktoptionen (im Footer) an den gewohnten Stellen zu finden sein. Gerade die Links zu den Rechtstexten sollten stets von überall – also auch auf jeder Unterseite – ganz einfach auffindbar sein.

Auch echte Kundenbewertungen („social proof“), Gütesiegel, die Ausweisung renommierter Partner oder Marken können zur Vertrauensbildung beitragen. Für einen nachvollziehbaren Kaufprozess ist außerdem hilfreich bei mehr als zwei Schritten, diese sichtbar mitzuzählen, etwa mit einem Fortschrittsbalken. Mehr Infos zur Warenkorbgestaltung findest du übrigens in diesem Blogbeitrag.

Ein angenehmes Kauferlebnis

Kunden, die sich in deinem Onlineshop wohlfühlen, kaufen auch eher ein. Eine Studie der Webster University Vienna belegte kürzlich, dass das Design eines Onlineshops einen „signifikanten Einfluss auf die Freude am Einkaufen des Kunden“ haben kann. Nur so könne „die Bereitschaft zu impulsiven Online-Einkäufen geschaffen und geweckt werden“.

Benutzerfreundlichkeit

In den vergangenen Jahren ist die Benutzerfreundlichkeit – auch „Usability“ genannt – immer mehr in den Fokus von Webdesignern und -entwicklern geraten. Der Autor Steve Krug bringt es mit dem Satz „Don’t make me think“ auf den Punkt. Wenn ein potenzieller Kunde gezwungen ist, über Bedienung oder Navigation nachzudenken, ist er vielleicht schon verloren. Dein Shop muss intuitiv bedienbar sein und ein übersichtliches Layout aufweisen.

Produkte und Marke in Szene setzen

Passt dein Design zu deiner Marke und deinen Produkten? Verkaufst du Schmuck, passt vielleicht ein filigranes Design. Wenn du Mountain Bikes anbietest, sollte die Gestaltung Dynamik vermitteln. Frage dich immer: Welchen Eindruck, welche Stimmung soll dein Design beim Kunden hervorrufen? Was sind die Versprechen deiner Marke, die du im Shop vermitteln willst?

Wiedererkennungswert

Dein Onlineshop soll selbstverständlich unverkennbar sein und aus der Masse hervorstechen. Natürlich kannst du ein neutrales Design wählen. Besser ist es aber, wenn du durch prägnante Elemente oder farbliche Akzente einen einzigartigen Shop erschaffst.

Modernes Design

Design ist eine schnelllebige Angelegenheit. Was vor drei Jahren noch modern war, wirkt heute schon angestaubt. Passe dein Design deshalb von Zeit zu Zeit an. Das heißt nicht, dass du jeden Designtrend mitmachen sollst. Behalte einfach deine erfolgreichsten Wettbewerber im Auge und nimm immer mal wieder behutsam Designanpassungen vor.

1. Das KISS-Prinzip: Keep it simple, stupid.

Beim Designen deiner E-Commerce-Website ist einfach oft der beste Weg. Je mehr Elemente du auf der Seite hast (Farben, Werbebanner, Popups), desto mehr lenken sie vom Eigentlichen, nämlich dem Verkauf, ab.

Du brauchst kein Schnickschnack auf deiner Website – das lenkt nur ab. Halte dein Design klar, sauber und simpel. Konzentriere dich einfach auf den Verkauf.

2. Branding

Branding ist ein großer Vertrauensfaktor. Es zeigt deinen Kunden sofort, wer du bist. Unterscheide dich von deinen Mitbewerbern. Was machst du anders, besser? Wie positionierst du dich? Was sind deine Werte? Definiere, was dich ausmacht und kommuniziere das in deinem Design.

3. Kenne deine Kunden.

Wenn deine Shop-Website eine Verbindung zu deiner Zielgruppe herstellen soll, musst du denken wie deine Zielgruppe. Letztendlich erwarten deine potenziellen Kunden nur wenig beim Onlinekauf – eine Seite, die sich leicht navigieren lässt, ansprechend gestaltet ist und das Shoppen einfach, unkompliziert und problemlos macht.

Versetze dich während des Designens in die Lage deiner Besucher. Mit welchem Layout können sie am einfachsten navigieren? Wie kannst du deine Produkte organisieren, damit es für den Endnutzer am meisten Sinn ergibt? Wie kannst du den Checkout-Prozess erleichtern?

4. Inspirieren durch Farben

Farben rufen unterschiedliche Emotionen hervor. Du kannst sie sogar verkaufssteigernd einsetzen. Rot erzeugt Leidenschaft, Aufregung und Lust. Das sind Gefühle, die den Kaufwunsch anregen. So kann eine roter Button deine Conversions um 34 % steigern. Im Gegensatz dazu steht Blau. Etwa die Hälfte aller Logos enthält die Farbe Blau. Blau steht für Vertrauen und Glaubwürdigkeit. Gelb wirkt indes warm, optimistisch und heiter, kann aber auch als aggressiv wahrgenommen werden.

Die Farben, die du wählst, sollten die Werte des Unternehmens widerspiegeln. Ein tieferer Blick in die Psychologie der Farben lohnt sich.

Ebenso wichtig ist es, beim Farbdesign keine Hürden einzubauen und beispielsweise eine Rot-Grün-Sehschwäche zu berücksichtigen. Auch die Lesbarkeit sollte erhalten bleiben. Entscheidend für die Lesbarkeit ist das Verhältnis des Kontrasts zwischen Text- und Hintergrundfarbe.

5. Bildsprache

In der Welt des Webdesigns ist bekannt, dass Bilder Conversions erhöhen. Eine Studie hat gezeigt, dass relevantere Bilder in einem Website-Design Conversions um über 40 % erhöhen. Und das trifft auf E-Commerce sogar noch mehr zu. Niemand will ein Produkt ungesehen kaufen. Wenn die Menschen deine Produkte kaufen sollen, musst du ihnen zeigen, was sie kaufen, indem du hochwertige Bilder verwendest.

Professionelle Bilder von deinen Produkten (aus verschiedenen Perspektiven) tragen viel dazu bei, Vertrauen bei deinen Kunden aufzubauen. Wenn es keine Bilder von einem Produkt gibt, das sie kaufen wollen (oder nur einzelne Bilder in schlechter Qualität), werden sie mit dem Kauf eher zögern und deine Conversions sinken.

6. Weniger ist mehr.

Du hast wahrscheinlich viel über deine Produkte zu erzählen. Das ist aber weniger hilfreich, als du vielleicht denkst. Vielfach belegter Fakt ist, dass Besucher von Online-Shops etwa 20 % des Texts lesen. Text wird eher überflogen, um die wichtigsten Infos herauszufiltern. Erspare deinen Kunden die Arbeit.

Gestalte deine Inhalte möglichst übersichtlich. Als nützlich hat es sich auch erwiesen, Inhalte zu unterteilen und das Format erfassbar zu halten. Hebe wichtige Informationen hervor, fasse dich kurz und lockere Beschreibungen beispielsweise mit Bulletpoints auf. Optische Anker wie Trennlinien, farblich getrennte Abschnitte oder Überschriften helfen den Nutzern, sich überhaupt bzw. schnell zurechtzufinden und zu erkennen, ob das Passende in deinem Onlineshop dabei ist. Je besser deine Zielgruppe die relevanten Informationen aufnehmen kann, desto mehr wirst du verkaufen.

Beweise Mut zur Lücke. Nicht jeder Platz auf der Shop- bzw. Startseite muss zwingend gefüllt sein. Weißraum – auch als Freifläche, Leerraum oder Negativraum bezeichnet – trägt maßgeblich dazu bei, den Blick auf das Wesentliche zu richten. Die Freifläche musst du allerdings gezielt einsetzen: Wenn das Ziel eine Conversion ist, sollte nicht unbedingt das Logo oder das Angebot davon umgeben sein, sondern der Call to Action.  

7. Ein professioneller Gesamteindruck

Die Grundaussage deiner E-Commerce-Seite besteht darin, dass du deine Website-Besucher bittest, etwas von dir zu kaufen. Und als Gegenleistung bittest du sie um sensible Informationen wie ihre Kreditkartendaten. Womit sie sich nicht wohlfühlen werden, wenn deine Seite nicht professionell wirkt.

In eine professionelle Website zu investieren ist ein Muss, wenn du bei deinen Kunden Vertrauen aufbauen willst. Was wir mit professionell meinen? Deine Website hat keine Tipp- oder Rechtschreibfehler. Deine Schriftart, Farbpalette und dein Footer-Design stimmen auf jeder Seite überein. All deine Produktlinks und Buttons funktionieren. Deine Fotos sehen nicht so aus, als hättest du sie mit einem alten iPhone 5 aufgenommen, und das ganzheitliche Design der Seite wirkt nicht, als hättest du es von Geocities aus dem Jahre 1997.

Der Punkt ist, wenn du willst, dass deine Kunden dich ernst nehmen, musst du ihnen zeigen, dass du dich selbst ernst nimmst – und der einzige Weg dies zu tun, ist mit einem professionellen Webdesign.

8. Social Proof – Gruppendynamik

Im Vergleich Website zu Webshop ist Vertrauen ein großes Thema. Der sogenannte Social Proof zeigt das Kundenfeedback – quasi die Onlineversion von Mundpropaganda, die für Käufer ein wichtiger Vertrauensfaktor ist. Strebe also immer so viele 5-Sterne-Bewertungen wie möglich an. Ein eigener Bereich für Referenzen führt mit dazu, dass du eher als vertrauenswürdig eingestuft wirst. Als Ergebnis steigt deine Conversion Rate.

9. Simple Navigation

Nichts killt deine Verkaufschancen wie klobige Produktseiten. Wenn deine Besucher sich durch zehn verschiedene Menüs klicken müssen, bevor sie das gesuchte Produkt finden, wirst du sie schnell an die Konkurrenz verlieren.

Sorge dafür, dass deine Produktkategorien und Produktseiten leicht zu navigieren sind. Baue Filter für Farbe, Größe, Produkttyp und Ähnliches ein. Je leichter deine Kategorien und Seiten zu navigieren sind, umso einfacher wird es für deine Kunden zu finden, wonach sie suchen und etwas zu kaufen.

Dropdown-Menüs, auch Aufklapp- oder Pulldown-Menü genannt, können u. a. in der Navigationsleiste Ordnung schaffen. Damit diese auch auf Mobilgeräten gut angezeigt werden, solltest du auf zu viele Unterpunkte und Ebenen verzichten. Google ist wichtig, dass das Menü auf einem mobilen Display komplett auf einen Blick erfasst werden kann.

Bei der Navigation ist zudem Beständigkeit geboten: Die wichtigsten Menü- und Navigationselemente sollten auf jeder Seite dieselben, sichtbar und leicht zugänglich sein. Wenn es Unterpunkte zu den Top-Kategorien gibt, ordne sie alphabetisch. 

Wie steht es um den Warenkorb? Es ist sinnvoll nach dem Hinzufügen eines Produkts in den Warenkorb nicht direkt zu diesem weitergeleitet wird – auch Google warnt davor ausdrücklich. Stattdessen kann oben rechts – wo der Warenkorb bekanntermaßen hingehört – ein Zähler darauf hinweisen, dass diesem etwas hinzugefügt wurde. Auch Popups, die beim Hinzufügen eines Produkts im Warenkorb aufploppen, sind in vielen Shops bereits Standard. Hier sollte darauf geachtet werden, dass der Kunde die Wahl hat, direkt zur Kasse zu gehen oder aber weiter einzukaufen.

Filter können auch innerhalb der Kategorien und bei den Suchergebnisseiten helfen, die Auswahl der Produkte einzuschränken. Dies verringert nach Angaben von Google die Absprungrate.

10. Checkout-Prozess

Ein schwerfälliger Checkout steht im E-Commerce auf der Fehlerliste gleich nach der unlogischen Navigation. Generell muss der gesamte Prozess des Kaufens im Handumdrehen und ohne innere Widerstände durchlaufen werden können.

Dazu gehört im Besonderen der Checkout-Prozess. Gestalten ihn klar, einfach und schmerzfrei. Das beinhaltet, dass man sich als Gast einloggen kann und sämtliche bevorzugten Pay-Systeme integriert sind. Wenn sich der Kunde registrieren möchte, biete ihm eine Auto-Fill-Möglichkeit. Informationen über Lieferdatum, Zusatzkosten und Stornierungs- und Rücksendebedingungen müssen dem Besucher glasklar sein. Nach dem Kauf erwartet der Kunde eine Bestätigung und Dankesbotschaft.

Bonustipp: Think mobile first.

Mobilgeräte haben den Desktop als beliebtesten Weg, das Internet zu nutzen, abgelöst. Sogar beim Shopping.

Wenn du Kunden abholen willst, die auf ihren Smartphones und Tablets einkaufen, muss dein Webdesign komplett responsive sein. Ansonsten wirst du diese wertvollen mobilen Besucher nicht davon überzeugen, dass deine Seite der Ort ist, auf dem sie einkaufen wollen. Darum gilt fürs Design: Mobile First.

Ready? Los geht's!

Ein Onlineshop gestaltet sich nicht von selbst. Dahinter steckt jede Menge Konzept- und Designarbeit. Mit diesen 10 Tipps und Inputs für deine Überlegungen bist du jedoch gut vorbereitet, um eine ansprechende Seite auf die Beine und ins Netz zu stellen. Eine Website, die nicht nur großartig aussieht, sondern auch gut verkauft. Apropos Verkaufen: Je besser das Design deiner Webseite, desto mehr Bestellungen werden über deinen Onlineshop eingehen. Und genau hier setzt unsere clevere Versandsoftware SimpleSell an. SimpleSell verbindet deine Onlineshops und Versanddienstleister. Dabei hilft dir unserer smarter Massenlabeldruck, Hunderte Versandlabels mit nur einem einzigen Klick zu erstellen. Außerdem lassen sich deine neu gewonnenen Bestellungen super-schnell und automatisiert dank unseren intelligenten Versandregeln, der SKU-Sortierung und Bearbeitungsnummern bearbeiten. So sparst du dir Zeit und Geld – jeden Tag! Worauf wartest du also noch? Starte jetzt kostenlos und unverbindlich durch!