Schnelle Ladezeiten sind heutzutage maßgeblich für die Kundenzufriedenheit und die Konversion. Neben der tatsächlichen Ladegeschwindigkeit Ihrer Seite gibt es allerdings noch einen weiteren wichtigen Faktor – die gefühlte Performance.

Während der Page Speed einer Website von vielen technischen Faktoren abhängt, ist die subjektiv empfundene Ladezeit vor allem eine Sache des Designs. Durch ein gut durchdachtes User-Interface und eine gute User-Experience können Sie beeinflussen, wie schnell die Nutzer Ihren Onlineshop wahrnehmen.

In diesem Blog-Beitrag erklären wir, wie Sie durch das richtige Design die Performance Ihres Onlineauftritts maximieren.

Tatsächliche vs. gefühlte Performance

Eine heute allgemein akzeptierte Seiten-Ladezeit liegt, laut Google, bei knappen zwei bis drei Sekunden. Steigen die Ladezeiten über diese Marke, verlassen bereits über 40 % der Besucher die Seite und kehren mit vermutlich auch nicht wieder zurück.

In einer weiteren Studie hat Google zudem herausgefunden, dass bereits eine Verbesserung der Seitenladezeit um 0,1 Sekunden positive Auswirkungen auf Seitenaufrufe, Konversionsraten und den durchschnittlichen Bestellwert von Onlineshops zeigt. 

Ein sehr wichtiger Aspekt der Konversion-Optimierung liegt darin, die Seitenladezeiten technisch so weit wie möglich zu reduzieren. Beim Faktor Zeit sollte jedoch nicht außer Acht gelassen werden, dass hier zwischen objektiver und subjektiv wahrgenommener Zeit zu unterscheiden ist. Für die objektiv messbare Ladegeschwindigkeit gibt es zwar viele Optimierungsmaßnahmen, diese stoßen allerdings irgendwann an ihre technischen Grenzen. Die Aufgabe von Frontend-Entwicklern und UX-Designern besteht nun darin, die Website so zu gestalten, dass sie von den Nutzern subjektiv als schneller wahrgenommen wird, als sie in tatsächlich ist.

Können Sie die gefühlte Ladezeit Ihrer Website verbessern?

Die gefühlte Performance ist vor allem eine Frage der Usability und der User Experience – je besser und schneller sich die Nutzer auf Ihrer Seite zurechtfinden, desto positiver wird auch die Seitengeschwindigkeit wahrgenommen.

Überlegen Sie sich genau, wo und wie Sie welche Design-Elemente einsetzen, um die Kunden intuitiv durch Ihren Onlineshop zu führen. Wenn Ihr Kunde sich nicht gut auf der Seite orientieren kann, das Design sie überfordert oder Elemente nicht richtig erkennbar sind, leidet auch die gefühlte Performance darunter. 

Das Prinzip der 3-Ebenen

Indem Sie Ihr Design in drei verschiedene Ebenen unterteilen, können Sie die einzelnen Elemente besser voneinander trennen – die untere Ebene enthält die Branding-Elemente, die mittlere Ebene den Hauptinhalt und die oberste Ebene die Navigations- und Checkout-Elemente. Durch dieses Prinzip wissen die Nutzer immer, wo sie sich gerade auf der Seite befinden. 

Die Navigation

Eine intuitive und effiziente Usability führt Ihre Kunden gezielt durch die Customer Journey. Die Customer Journey bezeichnet die „Reise“, bis zum Kaufabschluss. Das vielleicht wichtigste Element für eine gute Bedienbarkeit Ihres Onlineshops ist dabei die Navigation. 

Das Ziel der Navigation ist es, die Zielgruppe in möglichst wenigen Schritten zum Kauf des Wunschproduktes zu führen. Hierbei gibt es drei Möglichkeiten, wie die Kunden sich zwischen den verschiedenen Seitentypen bewegen können:

• Abwärts in der Hierarchie des Onlineshops, um auf tieferen Inhalt zuzugreifen, d.h. von einem übergeordneten Seitentyp (z.B. Startseite) zu einem untergeordneten Seitentyp (z.B. Kategorie).
• Nacheinander durch eine geordnete Folge von Seiten-Typen, z. B. beim Checkout-Prozess.
• Direkt von einem Seitentypen zu einem anderen tief im Onlineshop, z.B. von der Startseite direkt auf ein Produkt.

Die sogenannte “Rückwärtsnavigation” bezieht sich hingegen, wie der Name schon sagt, auf die Rückwärtsbewegung zwischen den verschiedenen Seitentypen. Dabei werden die Nutzer chronologisch durch den letzten Seitenverlauf geführt. Auf dem Desktop lässt sich das sehr gut durch die sogenannte Breadcrumb-Navigation darstellen. Diese hilft den Kunden dabei, sich insbesondere bei komplexen Seitenstrukturen zurechtzufinden und schnell zu übergeordneten Seiten oder anderen Unterseiten zu gelangen.

Ein weiteren Punkt, den Sie bei der Erstellung der Navigation beachten müssen, ist die optimale Anpassung an das jeweilige Endgerät. Für Desktop und Tablet wird üblicherweise eine Standard-Navigationsleiste mit einem Mega-Menü zur Darstellung aller Kategorien verwendet. Für den kleineren Smartphone-Display eignet sich hingegen besser eine Off-Canvas-Navigation, die nur auf „Anfrage“ angezeigt wird.

Die Suche

Durch eine intelligente Suchfunktion können die Nutzer Inhalte im Onlineshop schnell und einfach finden. Das ist besonders für große Onlineshops mit umfangreichen Produktsortimenten ein must-have. Für kleinere Shops mit weniger Produkten kann es hingegen sinnvoller sein, die Navigation zu optimieren, als eine Suchfunktion zu integrieren. 

Machen Sie sich daher schon beim Design Ihres Onlineshops Gedanken dazu, ob Sie eine Produktsuche benötigen und welche Funktionen und Filteroptionen dabei für Ihr Produktsortiment wichtig sind.

Warenkorb & Checkout

Der Warenkorb ist das entscheidende Element für den erfolgreichen Kaufabschluss. Dieser sollte deshalb für die Nutzer immer in Interaktions-Reichweite sein und jederzeit aufgerufen werden können. Wenn ein Produkt dem Warenkorb hinzugefügt oder aus dem Warenkorb entfernt wird, sollte dieser sofort dynamisch aktualisiert werden. Dies zeigt den Kunden, dass die Änderung direkt umgesetzt wurde, was wiederum die subjektiv wahrgenommene Geschwindigkeit der Seite verbessert.

Durch Klicken auf das Warenkorb-Symbol öffnet sich die “Checkout-Ebene”, die zum Warenkorb-Bildschirm führt und die Nutzer durch den gesamten Kaufprozess leitet.

Typografie

Auch die Typografie ist ein wichtiger Bestandteil bei der Gestaltung des Onlineshops. Durch Ihre individuelle Schriftarten können Sie Ihr Corporate Design online abbilden und den Wiedererkennungswert Ihrer Seite steigern. Aber nicht jede Schriftart ist auch fürs Web geeignet und kann dadurch die Seitenladezeit verlangsamen. Wenn Ihre gewählte Schrift die Seitenperformance reduziert, sollten Sie stattdessen auf eine ähnliche, dafür aber optimierte Schriftart setzen. 

Dafür können Sie z. B. auf die web-optimierten Google Fonts zurückgreifen. Dort können Sie aus über 900 kostenlosen Fonts die passende für Ihren Onlineshop auswählen.

Designkomponenten

Eine wichtige Rolle, um die Usability und damit die gefühlte Performance Ihrer Website zu erhöhen, spielen auch einzelne Design-Komponenten wie die Buttons. Mit einer durchdachten Farbgestaltung können Sie Ihren Kunden dabei helfen, sich schnell und einfach im Onlineshop zurecht zu finden.

Die sogenannten Primärbuttons oder Hauptbuttons leiten ihre Kunden durch die Vorwärtsnavigation gezielt zum Kaufabschluss. Wählen Sie für diese eine bestimmte Farbe aus, um den Kunden ein Wiedererkennungsmerkmal zu bieten und sie so Schritt für Schritt durch die Customer-Journey. Für die sogenannten Sekundärbuttons, welche für die Rückwärtsnavigation eingesetzt werden, wählen Sie idealerweise eine andere Farbe aus.

Die Gestaltung der Buttons kann selbstverständlich variiert werden. Beispielsweise können Sie auch für die wichtigen Checkout-Buttons (von „In den Warenkorb“ bis hin zu „Kauf abschließen“) immer dieselbe Farbe verwenden, dies macht dann Sinn, wenn Sie Ihr Corporate Design durchsetzen möchten. 

Darüber hinaus lassen sich neben der Farbe auch Größe und Form der Buttons individuell anpassen. Am besten führen Sie A/B-Tests durch, um die für Ihre Kunden erfolgreichste Gestaltung der Buttons und anderer Design-Komponenten zu ermitteln.

Fazit

Die Optimierung der Seiten-Performance ist ein entscheidender Faktor für Erfolg im E-Commerce. Neben einer Vielzahl technischer Maßnahmen können Sie auch mit cleveren Design-Tricks die Ladegeschwindigkeit Ihres Onlineshops minimieren ‒ beispielsweise durch den Einsatz von web-optimierten Fonts oder die Komprimierung von Bildern.

Mindestens genauso wichtig wie die tatsächliche Performance ist jedoch auch die gefühlte Performance Ihres Shops, welche mit einer intuitiven Usability und sehr guten User Experience einhergeht. Die gefühlte Performance Ihrer Website können Sie mithilfe verschiedener Design-Maßnahmen optimieren. Ein erfolgreicher, hochkarätiger Onlineshop entsteht also aus einer Symbiose aus Design und Technik.