Google: 10 Tipps für ein besseres Nutzererlebnis im mobilen Online-Shop

Für viele Online-Händler hat die Corona-Pandemie für das eigene Business durchaus verschiedene Vorteile mit sich gebracht, denn immer mehr Menschen setzen auf digitale Erlebnisse – und surfen bzw. shoppen inzwischen längst selbstverständlicher mit dem Smartphone. „Viele sind inzwischen auf den Geschmack gekommen und schätzen beispielsweise die Lieferungen nach Hause, mehr Auswahl an Produkten oder verschiedene Bezahloptionen, die sie im Geschäft nicht haben“, erklärt Christina Aigner, Web Specialist und UX Lead bei Google, im Gespräch mit OnlinehändlerNews. Das gelte vor allem für jene, die vorher lieber offline geshoppt haben. 

Allerdings tätigen auch sieben von zehn Personen keinen Kauf auf einer mobilen Website, wie eine Studie zeigt, die Google mit dem Marktforschungsunternehmen SKIM zwischen August 2019 und August 2020 durchgeführt hatte. Hemmnisse sind die Ladegeschwindigkeit oder die Auffindbarkeit von Produkten und Inhalten. Beides stoße wiederum auf die Ungeduld vieler mobiler Kaufwilliger, die das Smartphone oftmals nebenher – etwa bei der Fahrt mit dem Bus – bedienen, führt die Expertin für Nutzererfahrung (User Experience, UX) weiter aus.

Aus diesem Grund müssen Kaufvorgänge auf mobilen Webseiten deutlich stabiler und ansprechender laufen. Oder mit anderen Worten: Eine bessere Nutzererfahrung hebt die Umsätze – mit den passenden UX-Maßnahmen können Google zufolge gut 20 Prozent mehr Conversions erzielt werden. Wir haben gemeinsam mit der UX-Expertin die wichtigsten Tipps zusammengetragen. 

1. Geschwindigkeit gegen Ungeduld

Fast drei Viertel aller Smartphone-Nutzer erwarten Google zufolge, dass sie sofort und direkt die Informationen oder Funktionen auf ihrem Gerät abrufen können, die sie gerade benötigen. Nicht ohne Grund legt der Internetkonzern im Suchmaschinen-Ranking inzwischen Wert auf die sogenannten Core Web Vitals: 54 Prozent der Nutzer sind bei zunehmender Ladezeit einer mobilen Website mehr und mehr frustriert, was sich direkt auf den Umsatz auswirkt. Ist die Seitenladezeit nur um eine Sekunde verzögert, kann dies zu einer Senkung der Conversion Rate um bis zu 20 Prozent führen, so Google. Um mögliche Stellschrauben für kürzere Ladezeiten zu identifizieren, stellt das Unternehmen u. a. das Tool Test My Site bereit. Mehrere Tipps zur Optimierung hat beispielsweise auch das Analysetool Sistrix zusammengetragen.

2. Die stärkste Botschaft gehört an die wichtigste Position

Der zweitwichtigste Faktor einer guten Usability auf mobilen Websites ist die Auffindbarkeit von Informationen. Was wichtig ist, gehört auf die Spitzenposition einer Webseite – und zwar so, dass es leicht und klar erkennbar ist. Nutzerinnen und Nutzer lesen nämlich nur rund 20 Prozent der Wörter auf einer Seite. „Stellen Sie also sicher, dass Sie eine starke Botschaft haben, die die Vorteile klar benennt, und rücken Sie diese in den Fokus“, rät Christina Aigner. Wie das aussehen kann, machen große Shops wie MediaMarkt, Zalando oder About You vor:

Was beim Scan einer Seite tatsächlich gelesen wird, sind Überschriften. Daher sollten Händler den Fokus bei diesen Texten stets auf das wichtigste Angebot bzw. Leistungsversprechen, die sogenannte Value Proposition, legen. „Diese muss die drei wichtigsten Fragen beantworten: Was gibt es bei diesem Händler? Warum sollten Nutzer:innen bei diesem Händler bleiben? Wo können sie die Produkte kaufen? Sie müssen also schon auf der Startseite erkennen: Hier bekomme ich etwas, was ich woanders so nicht bekomme“, führt die Web-Spezialistin aus. Daneben sollten die wichtigsten Services und Optionen, mit denen die Suche fortgesetzt werden kann, ins Auge fallen. 

Übrigens: „Je personalisierter der Händler jemanden ansprechen kann, desto eher ist dieser auch bereit, in dem Shop zu kaufen“, ergänzt sie. Knapp zwei Drittel der User würden eine solch persönliche Botschaft beim Shoppen erwarten, wie eine Befragung von Google und Ipsos Ende 2020 zeigte.

3. Die Suche nach dem Produkt vereinfachen

Wer dann den Shop allerdings lange nach dem passenden Produkt durchforsten muss, indem ständig durch Kategorieseiten oder Produkte gescrollt oder geklickt wird, ermüdet leicht und verliert die Lust am Kauf. Bezeichnet wird dieser Effekt auch aus „Scroll Fatigue“, der sich immer dann bemerkbar macht, wenn sich das Suchen, Auswerten und Finden spezifischer Informationen monoton, übermäßig zeitaufwendig und ziellos gestaltet. 

Neben der Suchfunktion können eine optimierte Navigation sowie passende Filter und Scroll-Methoden unterstützen. „Statt ständig nach oben oder unten zu scrollen, ist es besser, wenn User:innen nach links oder rechts scrollen. Sinnvoll ist das vor allem innerhalb derselben Kategorie“, so der Profitipp von Christina Aigner. Filter, die in dem jeweiligen Kontext sinnvoll erscheinen, sollten direkt dort auftauchen, wo sie benötigt werden, um bei vielen Produkten die Auswahl einzugrenzen. „Das kann beispielsweise ein Preis-Filter in einer bestimmten Kategorie oder Farbfilter bei einem Produkt sein.“

Auf vielen Webseiten können User zudem ewig nach unten scrollen und es werden immer mehr Artikel angezeigt. Um hier der Ermüdung entgegenzuwirken, sollte entweder auf mehrere nummerierte Seiten mit einer begrenzten Anzahl von Artikeln oder einen Button mit einer konkreten Information wie „Zeige 27 weitere Artikel“ zurückgegriffen werden. Hilfreich für die Entscheidungsfindung können zudem Produktvergleiche sein, ergänzt sie: „Das ist besonders ratsam, wenn die Produkte sehr komplex sind und viele verschiedene Eigenschaften haben, wie etwa Smartphones.“ Gut sei es, wenn zwei Produkte und deren Features nebeneinander direkt verglichen werden können.

Dass sich auch Nachbesserungen im Seitenmenü lohnen, zeigt sich etwa am Beispiel des Modehändlers H&M, der über mobile Geräte weniger Absatz von Baby- und Kinderkleidung registrierte. „Wir haben entdeckt, dass die Navigation auf unserer mobilen Website die Eltern verwirrt hat“, erläutert Martin Lechev, Produktdesigner und Navigationsspezialist bei H&M, bei Thinkwithgoogle. „Die Bezeichnungen unserer Kategorien, etwa ‚Neugeborene‘, ‚Babys‘, ‚Kinder‘ und der spezielle Abschnitt für die H&M-Marke ‚Kids Exclusive‘ waren für die Eltern nicht eindeutig. Sie wussten nicht, wo sie mit der Suche beginnen sollten. Unsere Untersuchung hat ergeben, dass diese Segmentierung und die Markenstrategie nicht funktioniert haben.“ Im Anschluss reduzierte H&M die Kategorien, fortan gab es nur noch „Babys“ und „Kinder“ und verbesserte die Filteroptionen, etwa auch für Größen oder nachhaltige Materialien. 

4. Keine Treffer, keine Conversions

In puncto Auffindbarkeit von Produkten sollte es auf der mobilen Startseite zudem einfach sein, zur Produktsuche zu wechseln. Die Suchfunktion sollte stets prominent platziert sein. 

Nützlich ist innerhalb der Suche des Weiteren eine Funktion zur Autovervollständigung von Anfragen, die zum Beispiel bei Tippfehlern passende Begriffe oder Kategorien vorschlägt. Zu vermeiden ist hingegen die Anzeige „Keine Treffer“ in den Suchergebnissen – die Formulierung weckt bei den Userinnen und Usern das Gefühl, erfolglos zu suchen. Es sollten also stets Ergebnisse und Alternativen gelistet werden – also etwa statt den gewünschten schwarzen auch blaue Hosen zur Auswahl stehen. 

5. Design für das passende Smartphone-Modell 

Auch die Darstellung der einzelnen Elemente auf der Webseite ist der SKIM-Studie nach immerhin gut 60 Prozent der mobilen Online-Kundschaft wichtig. So suchen zwar viele Nutzer Produkte auf dem Handy, wollen den Kauf dann aber lieber auf einem größeren Bildschirm – etwa auf dem Laptop – abschließen, damit sie beim Kaufabschluss nichts übersehen. Das gilt etwa für Hinweise zur Bezahlung oder zum Versand. 

Auch das Smartphone-Modell sollte beim Webdesign berücksichtigt werden. Im Device Atlas sind etwa die am häufigsten genutzten Handy-Größen nach Ländern gelistet – demnach werden hierzulande gerne kleinere 4,7-Zoll-Geräte verwendet. In Google Analytics können Händler solche Geräteinformationen auch für ihre Shop-Seite abrufen. Für das Design ist diese Information deshalb wichtig, weil User zuerst die Inhalte oberhalb der Scroll-Kante („Above the Fold“) wahrnehmen – also das, was sie ohne zu scrollen auf den ersten Blick auf dem Display sehen können. „In diesem sichtbaren Bereich sollten immer die wichtigsten Inhalte platziert sein. Die Scroll-Kante variiert jedoch je nach Displaygröße, darauf sollte also bei der Gestaltung geachtet werden“, so die Empfehlung von Christina Aigner.  

Welches Smartphone-Modell jemand nutzt, ist zudem in Hinblick auf die Ladezeit wichtig: „Viele Entscheidungstragende nutzen ihr eigenes Smartphone, um die Darstellung der Seite auf dem Mobilgerät zu testen und zu beurteilen. Von solchen Selbsttests ist abzuraten, da die Geschwindigkeit des eigenen Geräts oft nicht dem entspricht, was User:innen auf ihren Geräten erleben“, mahnt Christina Aigner. Ist das Testgerät beispielsweise ein neueres iPhone, das im stabilen WLAN genutzt wird, könne dies leicht die Wahrnehmung zur Seitengeschwindigkeit verzerren. 

6. Wie benutzen Menschen ihr Smartphone? 

Neben dem Handymodell sind auch die typischen Nutzungsgewohnheiten der Shop-Besucherinnen und -Besucher für ein nutzerfreundliches Design ausschlaggebend. Steven Hoober auf UXmatters analysiert beispielsweise, wie Menschen ihr Telefon halten. Zwar ändert sich dies auch je nach Gerät, Bedarf und Kontext, es lassen sich aber folgende Tendenzen erkennen:

• 75 Prozent der Nutzer berühren den Bildschirm nur mit einem Daumen.
• 49 Prozent der Nutzer halten ihr Telefon mit einer Hand.
• 36 Prozent der Nutzer halten ihr Handy mit beiden Händen, u. a. um eine höhere Stabilität bei der Handhabung zu erhalten.
• 10 Prozent der Nutzer halten ihr Telefon in einer Hand und tippen mit einem Finger der anderen Hand.

Sehr ausführlich beschreibt auch ein Beitrag auf dem Portal A List Apart, auf welche Weise wir unsere Geräte typischerweise verwenden.

Für jene, die das Smartphone nur mit einer Hand bedienen, ist es beispielsweise schwierig, mit ihrem Daumen Aktionen in der oberen linken Ecke des Bildschirms auszuführen, erläutert Christina Aigner zum Thema. „Händler sollten dort also definitiv nicht den Call-To-Action platzieren – sondern eher dort, wo User auch problemlos hinnavigieren können“, empfiehlt sie. Hoober beobachtete, „dass Menschen auf mobilen Touch-Geräten nicht wie auf dem Desktop von links oben nach rechts unten scannen. Sie berühren den Bildschirm auch nicht in der umgekehrten Richtung – von rechts unten nach links oben –, weil die Reichweite ihres Daumens begrenzt ist. Stattdessen ziehen sie es vor, die Mitte des Bildschirms zu betrachten und zu berühren“, schreibt er in seiner Analyse.

Eine Grafik von Metal Toad veranschaulicht beispielsweise die einzelnen erreichbaren Zonen auf unterschiedlich großen Geräten: 

Um die Erreichbarkeit von Inhalten sicherzustellen, sollte auch die typische Fingerbreite beachtet werden, rät Aigner. Der Daumen eines Erwachsenen ist ca. 2,5 cm breit, der Zeigefinger zwischen 16 und 20 mm. Für die Abmessungen von Elementen zur Auslösung einzelner Aktionen (z. B. Buttons für Call to Actions) sollten demnach mindestens 9,2 mm bzw. bei mehreren Aktionen mindestens 9,6 mm einkalkuliert werden,  wie u. a. das SmashingMagazin ausführt. 

7. Barrierefreiheit

Ein nicht zu vernachlässigendes Thema für nutzerfreundliches Design ist die Barrierefreiheit von Webseiten (Accessibility). So sollten beispielsweise bei der Farbwahl auch Faktoren wie Rot-Grün-Sehschwächen berücksichtigt werden. 

Nachbessern lässt sich beispielsweise beim oft genutzten „Burger-Menü“, also die typische Darstellung der drei übereinander liegenden, waagerechten Linien, die stellvertretend eine ausklappbare Navigation bzw. Sitemap anzeigen. Die UX-Expertin rät dazu, sämtliche solcher grafischen Elemente zu beschriften – in diesem Fall also mindestens „Menü“ darunter zu schreiben. Gut beschriftet werden sollten auch Formulare, die für den Bestellprozess ausgefüllt werden müssen: Statt nur des einfachen Freifeldes sollte beispielhaft dabei stehen, welche Angaben in dem entsprechenden Formularfeld gewünscht sind, welche davon verpflichtend oder optional auszufüllen sind und wie diese aussehen sollen.

8. Bildsprache: Realistisch und hilfreich

Neben der Auffindbarkeit und Verständlichkeit von Informationen ist auch die Attraktivität der Darstellung ein wesentlicher UX-Faktor. „Innerhalb von Millisekunden entscheiden Nutzer:innen über den ersten Eindruck einer Seite. Ist dieser schlecht, kehren sie in der Regel nicht zurück“, so Aigner. Entsprechend sollten Shopbetreiber hohen Wert auf ihre Sprache – sowohl in Wort als auch Bild – legen. Ihr Profitipp: „User lieben Bilder. Fließtexte sind auf dem Smartphone ein No-Go, da sie kaum jemand liest. Um die Webseite allerdings durch zahlreiche Fotos nicht zu verlangsamen, müssen diese stets komprimiert und im richtigen Format, zum Beispiel WebP mit JPEG als Fallback (Alternativlösung) ausgespielt werden.“

Zudem sollten Bilder, die außerhalb des mobilen Bildschirms (Viewport) sind, unbedingt nachgelagert geladen werden: „Durch dieses sogenannte Lazyloading kann ein verlangsamender Effekt auf die Ladegeschwindigkeit verhindert werden.“ Geht ein Element zulasten einer schnellen Performance, sollte eine andere Lösung gefunden werden. „Bei diesem Thema sollten die Technik- bzw. Entwicklungs- und Design-Abteilung eng zusammenarbeiten“, so Aigner.

Bilder sollten Produkte so realistisch wie möglich darstellen und sie beispielsweise in verschiedenen Farbvarianten, aus unterschiedlichen Winkeln oder ggf. in Bewegung abbilden. „Das ist wichtig, damit Kund:innen beim Kaufprozess nicht verunsichert oder aber bei Erhalt des Produkts nicht enttäuscht werden.“ Dies veranschaulicht ein Praxisfall des niederländischen E-Bike-Herstellers VanMoof: Damit sich mehr Besucherinnen und Besucher angesprochen fühlen, setzt das Unternehmen inzwischen verstärkt auf Fotos von E-Bikes samt Fahrradfahrern ein. Statt abstrakter Designs wurden realistische Fotos von Design-Details integriert. Vorher-Nachher-Eindrücke von VanMoofs Umgestaltung gibt es auf ThinkwithGoogle. 

9. Offline-Verfügbarkeit und schnelle Performance  

Eine Möglichkeit, schnell, zuverlässig und intuitiv bedienbare Shops für mobile Geräte zu bieten, sind sogenannte Progressive Web Apps (PWA). Eine PWA wird genau wie eine typische App im Vollbild auf dem Smartphone ausgeführt – sie muss aber nicht extra aus einem App-Store heruntergeladen werden, sondern ist über den Browser des Mobilgerätes abrufbar. 

Das Format hat verschiedene Vorteile: Webseiten, die als PWA verfügbar gemacht wurden, werden auch dann angezeigt, wenn keine Internetverbindung besteht bzw. diese kurzzeitig abbricht – was ja zwischenzeitlich beim Surfen in U-Bahn, Zug oder Fahrstuhl der Fall sein kann. Außerdem können PWA Push-Benachrichtigungen an Nutzer schicken. Da bestimmte Inhalte zwischengespeichert werden und schneller laden, erhöht sich auch die Bedienungsgeschwindigkeit. Christina Aigner stellt noch einen weiteren positiven Aspekt der Funktion heraus: „Wer mobil shoppt, unterbricht gegebenenfalls auch proaktiv den Kaufprozess und möchte zu einem späteren Zeitpunkt wieder an derselben Stelle einsteigen. Das klappt bei einer PWA: Die jeweilige Shop-Seite lässt sich zum Homescreen auf dem Smartphone hinzufügen und kann später wieder aufrufen werden.“ Ausführliche Informationen zur Erstellung von Progressive Web Apps stellt Google bereit. 

Umgesetzt haben dies beispielsweise Marktguru – oder auch About You, wie in folgendem YouTube-Video nachvollziehbar wird: 

10. Letzte Hürden vor dem Kauf nehmen 

Damit nicht auf den letzten Metern vor dem Kauf noch nach wichtigen Informationen gesucht werden muss, sollte bereits frühzeitig im Kaufprozess – also etwa bereits bei der Produktsuche – angezeigt werden, was tatsächlich in welcher Form verfügbar ist. Ebenso offensichtlich sollten Hinweise auf (deutlich längere) Lieferzeiten, Versandoptionen oder die Rückgabezeit sein. „Ehrliche und transparente Kommunikation ist besonders wichtig, weil Nutzer:innen mit schlechten Erfahrungen mit hoher Wahrscheinlichkeit nicht in einen Shop zurückkehren – dafür gibt es im Web einfach zu viele Alternativen“, erklärt die Spezialistin. Darüber hinaus können Hinweise und Initiativen zu Nachhaltigkeitsbemühungen das Kundenvertrauen stärken. 

Beim Checkout gehe es dann ebenfalls wieder um Geschwindigkeit und Einfachheit. Denn einer der Hauptgründe, warum User mit Online-Shops schlechte Erfahrungen machen, ist die Tatsache, dass eine Registrierung oder ein Shop-Login notwendig sind. Webseiten sollten also Möglichkeiten bieten, ohne Konto eine Conversion auszuführen. Mittels Gastzugang, Social SignIn und Autofill-Optionen könne auch diesen Bedürfnissen Rechnung getragen werden. „Bei der Abfrage von Informationen gilt: Je weniger, desto besser. Alles, was nicht kritisch ist, sollte wegfallen“, so Aigner. Für die Bezahlung rät sie zu Smart-Payment-Solutions, also zu Anbietern wie etwa Google Pay oder Apple Pay, die ein komplettes System für Online-Zahlungen per Smartphone bereitstellen – da diese die Conversions noch einmal erhöhen würden. 

Über unsere Interviewpartnerin: 

Christina Aigner arbeitet seit 5 Jahren bei Google und hilft als Web Specialist und UX Lead den größten Werbekunden aus Zentraleuropa, Conversion-Raten zu optimieren. Dabei fokussiert sie ihre Beratungstätigkeit auf die Themen Web Performance (Core Web Vitals), UX und moderne Web-Technologien wie PWA.

Zahlreiche professionelle Erfahrungen, die Christina vor Google bereits in der Finanz-, Beauty- als auch E-Mobility-Industrie gesammelt hat, helfen ihr, maßgeschneiderte Lösungen für eine Vielzahl an unterschiedlichen Business-Modellen zu finden. Ihr Schwerpunkt liegt aktuell auf Retail- & Lead-Gen-Kunden.