Mit dem richtigen Design die gefühlte Performance maximieren

Von Ann-Kathrin Hofmann und Dennis Schaa
19. Januar 2021
Lesezeit: 5 Minuten

Eine schnelle Ladezeit ist maßgeblich für die Kundenzufriedenheit und die Conversion Rate Ihres Onlineshops. Neben der tatsächlichen Seitenladegeschwindigkeit gibt es jedoch noch einen weiteren wichtigen Faktor für eine positive Nutzererfahrung: die gefühlte Performance.

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

In diesem Blog-Beitrag erläutern wir, wie Sie durch das richtige Design die gefühlte Performance Ihres Onlineshops 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 hoher Wahrscheinlichkeit 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 wichtiger Aspekt der Conversion-Optimierung liegt also 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 (z.B. bieten Progressive Web Apps (PWA) hier spannende Möglichkeiten), diese stoßen allerdings irgendwann an ihre technologischen Grenzen. Die Aufgabe von Frontend-Entwickler:innen und UX-Designer:innen besteht nun darin, die Website so zu gestalten, dass sie von den Nutzer:innen subjektiv als schneller wahrgenommen wird, als sie in Wirklichkeit ist.

Wie 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:innen auf Ihrer Seite zurechtfinden, desto positiver wird auch die subjektive Seitengeschwindigkeit wahrgenommen.

Überlegen Sie sich daher genau, wo und wie Sie welche Design-Elemente einsetzen, um die Kund:innen intuitiv durch Ihren Onlineshop zu führen. Denn wenn diese sich nicht gut auf der Seite orientieren können, das Design sie überfordert oder Elemente nicht richtig erkennbar sind, leidet auch die gefühlte Performance darunter. 

Mit folgenden Tipps gestalten Sie Ihren Onlineshop übersichtlicher und verbessern so die intuitive Bedienbarkeit sowie die gefühlte Page Speed:

Das 3-Ebenen-Prinzip

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:innen immer, wo sie sich gerade auf der Seite befinden. 

Die Navigation

Eine intuitive und effiziente Usability führt Ihre Kund:innen gezielt durch die Customer Journey bis zum Kaufabschluss. Das entscheidende Element für eine gute Bedienbarkeit Ihres Onlineshops ist dabei die Navigation. 

Ziel der Navigation ist es, die Zielgruppe in möglichst wenigen Schritten zum Kauf des Wunschproduktes zu führen. Am besten eignet sich dafür die sogenannte “Vorwärtsnavigation”. Hierbei gibt es drei Möglichkeiten, wie die Kund:innen 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:innen chronologisch durch den letzten Seitenverlauf geleitet. Auf dem Desktop lässt sich das sehr gut durch die sogenannte Breadcrumb-Navigation darstellen. Diese hilft den Anwender:innen dabei, sich insbesondere bei komplexen Seitenstrukturen zurechtzufinden und schnell zu übergeordneten Seiten oder anderen Unterseiten zu gelangen.

Ein weitere Aspekt, 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:innen Inhalte im Onlineshop schnell und einfach finden. Das ist insbesondere für große Onlineshops mit umfangreichen Produktsortimenten unabdingbar. 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. Er sollte deshalb für die Nutzer:innen 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. Das zeigt den Kund:innen, 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:innen durch den gesamten Kaufprozess leitet. Wie Sie das Design des Checkout-Prozesses optimieren können, erklären wir Ihnen in diesem Blog-Beitrag.

Typografie

Auch die Typografie ist ein wichtiger Bestandteil bei der Gestaltung des Onlineshops. Durch Ihre individuelle Schriftart 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 performantere 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.

Komponenten

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 Kund:Innen dabei helfen, sich schnell und einfach im Onlineshop zu orientieren.

Die sogenannten Primärbuttons leiten ihre Zielgruppe durch die Vorwärtsnavigation gezielt zum Kaufabschluss. Wählen Sie für diese eine bestimmte Farbe aus, um den Kund:Innen ein Wiedererkennungsmerkmal zu bieten und sie so Schritt für Schritt durch die Customer Journey zu führen. 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. 

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 Zielgruppe 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 reduzieren ‒ beispielsweise durch den Einsatz web-optimierte Fonts oder die Komprimierung von Bildern. Weitere Tipps dazu haben wir in diesem Blog-Beitrag für Sie zusammengefasst.

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, hochperformanter Onlineshop entsteht also aus einer Symbiose aus Design und Technik.

Mehr aus unserem Blog

Shop the Look: Der Onlineshop als Inspirationsquelle
28. April 2021 · Lesezeit: 3 Minuten

Bildlastige Social-Media-Plattformen wie Pinterest und Instagram erleben seit einigen Jahren einen massiven Hype, der auch für den E-Commerce eine wichtige …

Weiterlesen
Wie eine gute User Experience Ihren Umsatz steigern kann
12. Januar 2021 · Lesezeit: 10 Minuten

Früher ging es im E-Commerce primär um eine gute Usability, also eine funktionale und technisch einwandfrei bedienbare Benutzeroberfläche. Erkenntnisse der …

Weiterlesen
6 Design-Tipps, mit denen Sie Ihr Google-Ranking verbessern
17. Dezember 2020 · Lesezeit: 5 Minuten

Ein in die Jahre gekommenes Shop-Design oder eine schlechte Bedienbarkeit Ihrer Website kann Ihr Suchmaschinen-Ranking negativ beeinflussen. Sie verlieren dadurch …

Weiterlesen
Shopware 6.4: Die wichtigsten Neuerungen für Shopbetreiber:innen
5. Mai 2021 · Lesezeit: 2 Minuten

Mit der Version 6.4. hat Shopware am 4. Mai das ‒ nach eigener Aussage ‒ größte Release seit Veröffentlichung von …

Weiterlesen
Headless CMS: Was Unternehmen wissen müssen
10. März 2021 · Lesezeit: 5 Minuten

Was ist ein Headless CMS und wozu brauche ich das?

Content Management Systeme (CMS) wie WordPress oder Drupal ermöglichen es …

Weiterlesen
Composable Commerce: So sorgen Shop-Betreiber:innen für besonders hohe Performance
18. Mai 2021 · Lesezeit: 2 Minuten

Im Zuge der Pandemie haben Unternehmen extreme Herausforderungen zu meistern. So verlagert sich das Business nahezu komplett in den Online-Bereich …

Weiterlesen
Was macht eigentlich eine HR-Managerin bei dmf?
6. Oktober 2021 · Lesezeit: 3 Minuten

Manuela Nickel kümmert sich seit Mai diesen Jahres ums Personal bei dmf. Wozu eine Agentur mit 30 Mitarbeiter:innen eine HR-Managerin …

Weiterlesen
Was macht ein Magento-Entwickler bei dmf?
27. Juli 2021 · Lesezeit: 3 Minuten

Max Kretschmer und Daniel Briegert sind neu bei dmf. Sie arbeiten als Backend-Entwickler für Magento-Shops. Okay. Und was genau macht …

Weiterlesen

Hallo, mein Name ist Anika Le.

Wenn Sie Fragen haben, melden Sie sich gerne bei uns.

+49 511 76 38 44 90 hallo@digitalmanufaktur.com

1