So erhöhen Sie die Mobile Conversion auf Smartphone und Tablet schnell und zuverlässig

So erhöhen Sie die Mobile Conversion auf Smartphone und Tablet schnell und zuverlässig

Sophie Krüger in Testing-Tipps
Lesezeit: 3 Minuten · 26. November 2015
von | 26. November 2015 | Testing-Tipps

Weltweit liegt die Conversionrate auf Smartphones bei unter 1% und ist damit deutlich niedriger als auf Desktops. Dabei wird immer mehr investiert, um den eigenen Shop responsive zu gestalten und mobiloptimiert anzubieten. Das alleine scheint allerdings nicht zu reichen. Doch wie löst man diese Conversion-Falle und bringt mehr Nutzer dazu auch auf ihren mobilen Devices einzukaufen?

Mobil optimierte Webseiten allein führen nicht zu besseren Conversions

Immer mehr Traffic wird über Smartphone und Tablet generiert. Produktmanager stellt das vor große Herausforderungen, denn die Conversion-Rate auf mobilen Geräten ist oft noch sehr niedrig.

Der erste wichtige Schritt zur Conversion-Optimierung ist ein mobiloptimierter Shop. Jedoch ist die Konzipierung und Umsetzung eines solchen Shops in der Regel sehr zeitaufwändig und kostenintensiv und führt nicht zwingend zu verbesserten Kennzahlen. Oft wird der Traffic dadurch zwar gesteigert, doch die Conversion bleibt niedrig. Was also läuft falsch?

Im Team wird darüber diskutiert, wie die Kennzahlen verbessert werden können, es werden viele Hypothesen aufgestellt. Doch Entscheidungen zu treffen, fällt schwer. Welche Hypothesen sind die richtigen? Welche Maßnahmen haben wirklich einen Effekt auf die Conversionrate?

Herausforderungen beim Launch einer mobilen Webseite

Anfang des Jahres kam einer unserer Kunden, ein großes deutsches Handelsunternehmen, auf uns zu, da sie gerade ihre mobile Webseite überarbeiteten. Sie hatten dazu einen Prototyp entwickelt, der responsive auf allen Devices funktionieren sollte. Sie waren allerdings noch unsicher, wie die Webseite bei ihrer Zielgruppe ankommen würde und ob es noch Probleme bei der Nutzerfreundlichkeit der Seite gab.

Das vordergründige Ziel der neuen mobilen Webseite war es außerdem, die Conversion-Rate auf Smartphones nachhaltig zu verbessern. Aus diesen Gründen führten wir einen Crowd-Usability-Test durch.

Unsere Berater haben das Testdesign für den mobilen Crowd-Usability-Test aufgesetzt und mit unserem Kunden abgestimmt. So konnten wir für den Prototyp ein passendes Testkonzept für Smartphones maßschneidern. 10 Testpersonen, die der Hauptzielgruppe des Unternehmens entsprachen, testeten den Prototyp zu Hause auf ihren Smartphones. Es wurden dabei sowohl iOS-, also auch Android-Geräte verwendet.

Während der Durchführung des Tests wurde der Bildschirm aufgezeichnet und die Tester kommentierten die Nutzung der mobilen Webseite. Für unseren Kunden bedeutete dies, dass sie Videos mit Bildschirm- und Sprachaufzeichnungen ihrer Tester erhielten, die Aufschluss über Probleme in der Usability und Gründe für die niedrige Conversionrate boten.

Mit Usability-Tests Unsicherheiten beseitigen und interne Hypothesen überprüfen

Unser Kunde hatte bereits eigene Hypothesen zu den größten Conversion-Killern aufgestellt. Durch die Crowd-Usability-Tests auf Smartphones konnten sie diese Hypothesen überprüfen und neue unbekannte Nutzerprobleme aufdecken.


Für unseren Kunden bedeutete das:

  • der gesamte Kaufprozess wurde getestet, wodurch die Gründe, warum ihre Nutzer den Shop frühzeitig verlassen, aufgezeigt werden konnten
  • Potenziale zur Erhöhung der Conversionrate wurden entdeckt
  • der Testablauf war speziell auf die Situationunsere Kunden und seine mobile Webseite zugeschnitten.
  • Videos, in denen die eigenen Nutzer auf ihren Smartphones die mobile Webseite nutzten, zeigten die Bedürfnisse, Wünsche und Erwartungen der Zielgruppe auf

Für das Handelsunternehmen ergaben sich viele Erkenntnisse, die Verbesserungspotenziale aufzeigten und einige ihrer internen Hypothesen bestätigten. Ein Beispiel: Unser Kunde hatte bereits vor den Tests den Verdacht geäußert, dass ihre großen, hochauflösende Bilder zu langen Ladezeiten führen könnten.

Tatsächliche hätten viele unserer Tester bereits bei der ersten längeren Ladezeit die mobile Webseite verlassen. Gerade bei mobilen Geräten, die häufig keinen Zugang zu schnellen Internetverbindungen haben, können Wartezeiten Nutzer abschrecken. Wir haben unserem Kunden daher empfohlen, das Bild auf der Produktdetailseite in einer kleineren Größe zu hinterlegen und dafür eine Detailansicht anzubieten.

UX-Experten unterstützen bei der Test-Auswertung

Da unserem Kunden die Zeit zur Auswertung fehlte, der Prototyp allerdings möglichst schnell angepasst werden sollte, unterstützen unsere Usability-Experten bei der Auswertung der Crowd-Usability-Tests auf Smartphones.


Für eine schnelle Conversion-Optimierung bedeutete die Expertenauswertung für unseren Kunden:

  • erhebliche Zeitersparnis – nur 2-3 Stunden müssen in ein Testing-Projekt gesteckt werden und es bleibt mehr Zeit für das Tagesgeschäft
  • Lösungsstrategien für die größten mobilen Conversion-Killer – Sie erhalten priorisierte und von Experten aufbereitete Handlungsempfehlungen
  • Betrachtung des Kaufprozesses über die Hypothesen hinaus
  • Conversion-Experten als Ansprechpartner
  • Ein mit vielen Screenshots und Erklärungen aufbereitetes und selbsterklärendes Dokument, das für die interne Kommunikation einfach weitergeleitet werden kann

Aktuell unterstützen wir bereits über 230 Webseitenbetreiber, Onlineshops und Agenturen bei der Optimierung ihres mobilen Onlineshops. Zu unseren Kunden gehören unter anderem auch Mister Spex, Check24, Deutsche Post, Zalando und Cyberport. Durch die schnell generierten Insights zur eigenen mobilen Nutzergruppe konnten erfolgreich Conversions und Umsätze gesteigert werden.

Mobile Crowd-Usability-Tests direkt online buchen

Um Ihnen eine noch schnellere und unkompliziertere Buchung zu ermöglichen, bieten wir seit Oktober 2015 auch eine Online-Buchung von Tests auf Smartphone und Tablet auf RapidUsertests.com an. Natürlich können Sie dabei weiterhin Ihren Crowd-Usability-Test von unseren Experten erstellen lassen. Unser UX-Berater und Produktmanager Hannes Johne hat den neuen Buchungsprozess hier für Sie zusammengefasst.

Absprungraten mobiler Shops durch optimierten Einstieg verringern

Absprungraten mobiler Shops durch optimierten Einstieg verringern

Userlutions Team in Mobile Usability
Lesezeit: 1 Minute · 22. Oktober 2014
von | 22. Oktober 2014 | Mobile Usability

Die Startseite eines Online-Shops ist das Tor, das den Kunden animieren soll sich genauer im Shop umzusehen. Dieses Tor muss einladend gestaltet sein, aber vor allem muss es dem Nutzer den Eingang in den Shop zeigen.

Gerade bei mobilen Online-Shops stellt der begrenzte Platz der Smartphone-Bildschirme dabei ein Problem dar. Dicht gedrängte Werbebilder, Hinweise zu Rabattaktionen und zahlreiche irreführende Navigationselemente drängen sich auf den kleinen Bildschirmen und “verstellen” den Weg in den eigentlichen Shop. Der Nutzer hat Schwierigkeiten das tatsächliche Sortiment des Online-Shops zu erkennen. Der Absprung zu einer anderen, übersichtlicheren mobilen Seite liegt da nahe.

Einstieg über Kategorien verhindert Absprünge

In unserer Studie zur mobilen Lufthansa-Webseite haben wir herausgefunden, dass sich Nutzer vor allem dann besser auf mobilen Webseiten zurecht finden, wenn der Einstieg über deutlich sichtbare Kategorien erfolgt. Die Kategorien zeigten den Nutzern sofort, was auf der mobilen Webseite möglich ist. Das klare Wording ließ erkennen in welcher Kategorie sie nach Informationen suchen mussten. Die Nutzer waren sehr zufrieden, gesuchte Informationen mit nur einem Klick und ohne langes Suchen sofort zu finden.

Abb. 1: Mobile Lufthansa-Startseite mit Kategorie-Einstieg

Wie Sie den Einstieg über Kategorien gestalten

Stellen Sie die Kategorien als klare Button mit einer eindeutigen Beschriftung dar. Sie sollten auf der Startseite sofort sichtbar sein. Nutzen Sie zusätzlich zur Beschriftung der Kategorie ein passendes Bild oder Icon.

Dies kann zum Einen ein Teaser für Ihr Sortiment sein und zum Anderen die Kategorie in ihrer Bedeutung verdeutlichen. Die Bilder beanspruchen allerdings viel Platz, sodass bei dieser Möglichkeit weniger Einstiegskategorien angeboten werden sollten, um den Startbildschirm nicht zu überfrachten und um langes Scrollen zu vermeiden.

Abb. 2: Links: Einstieg über große klickbare Kategoriefenster. Rechts: Einstieg über Kategorie-Teaser mit Option für mehr Ergebnisse

Regelmäßiges Testen kann Sie dabei unterstützen weitere Optimierungspotentiale für einen gelungenen Einstieg in Ihren mobilen Onlineshop zu finden. Außerdem können Sie mithilfe eines Nutzertests auf mobilen Geräten feststellen, ob die Bezeichnungen für Ihre Kategorien verständlich und eindeutig sind.

Sie möchten Ihre mobile Webseite bzw. Ihren mobilen Onlineshop testen? Dann kontaktieren Sie uns!

3 schnelle Tipps zur Optimierung Ihrer Texte für mobile Displays

3 schnelle Tipps zur Optimierung Ihrer Texte für mobile Displays

Martin Schröter in Mobile Usability
Lesezeit: 2 Minuten · 17. September 2014
von | 17. September 2014 | Mobile Usability

Eine Studie der University of Alberta hat ergeben, dass das Verarbeiten von Informationen auf mobilen Displays um 108% schwieriger ist als auf Desktop-PCs. Dies liegt daran, dass mobile Nutzer aufgrund der geringeren Displaygröße von Smartphones und Tablets weniger Text sehen und häufiger Scrollen und Blättern müssen als am PC.

Mobile Nutzer wollen kurze Texte lesen

Dazu ein Beispiel aus unseren RapidUsertests: Ein Nutzer will einen Flug über sein Smartphone buchen. Auf der Webseite des Anbieters will er sich während des Buchungsprozesses über die Gepäckbestimmungen informieren, die sehr weit unten auf der Seite platziert sind. Genau hier treten drei Probleme auf:

  • Das Scrollen bis zum Seitenende kostet Zeit und währenddessen schwindet die Merkfähigkeit
  • Das lenkt die Aufmerksamkeit auf die Aufgabe, die richtie Textstelle am Seitenende zu finden
  • Scrollt der Nutzer schließlich wieder hoch, muss er die eingangs betrachtete Textstelle – den Buchungsprozess – erneut finden

Mobile Nutzer verbringen also viel Zeit damit sich auf den Webseiten zurechtzufinden und können so weniger Informationen verarbeiten als am Desktop-PC. Außerdem konnten wir beobachten, dass mobile Nutzer schlichtweg keine Zeit und Lust haben, sich lange Texte auf ihren mobilen Geräten durchzulesen.

Dennoch haben viele Webseitenbetreiber ihre Seiten noch nicht auf die mobilen Nutzerbedürfnisse ausgerichtet – und das obwohl die Zahl der mobilen Aufrufe von Online-Shops bereits die der Desktop-PCs übersteigt.

So optimieren Sie Ihre Texte für mobile Displays

1. Kommen Sie gleich auf den Punkt! Überflüssige Texte, wie eine umfangreiche Einleitung, werden die Nutzer überspringen. Halten Sie die Texte daher stets kurz und prägnant.

2. Platzieren Sie Details lieber auf sekundären Seiten, welche die Nutzer aufrufen können, wenn sie gezielt danach suchen. Wenn Sie dennoch nicht auf diese Details verzichten möchten, verwenden Sie aufklappbare Bereiche, deren Inhalt für die Nutzer komfortabel ein- und ausblendbar ist.

Abb. 1 & 2: Links: Mobil optimierter Text mit anwählbaren Unterpunkten. Rechts: Mobil optimierte Produktdetailseite mit Stichpunkten und Unterpunkten


3. Sorgen Sie für eine übersichtliche Darstellung:

  • Nutzen Sie Gliederungspunkte
  • Markieren Sie Schlüsselwörter fett
  • Verwenden Sie Zwischenüberschriften, um Texte sinnvoll zu gliedern

P.S. Diese Tipps können Sie zudem ebenso erfolgreich für Texte auf „normalen“ Webseiten anwenden.

Fazit

In unseren mobilen RapidUsertests hat sich die Darstellung der wichtigsten Informationen in Tabellenform als besonders effizient erwiesen.
Auch bei der mobilen Optimierung von Texten gilt: Weniger ist mehr! Gehen Sie auf die Bedürfnisse der mobilen Nutzer ein und präsentieren Sie Ihre Texte kurz, prägnant und übersichtlich.

Mithilfe von mobilen Usability-Tests lassen sich Probleme, die sich aus der mobilen Nutzung von Webseiten ergeben, besonders gut herausarbeiten und Optimierungspotentiale früh erkennen.

Die optimale mobile Navigation? Teil 4: Die Seitennavigation

Die optimale mobile Navigation? Teil 4: Die Seitennavigation

Martin Schröter in Mobile Usability
Lesezeit: 3 Minuten · 30. Juli 2014
von | 30. Juli 2014 | Mobile Usability

Wenn Sie darüber nachdenken, Ihre Webseite für mobile Geräte wie Smartphones oder Tablets zu optimieren, sollten Sie sich vor allem mit der Darstellung der Navigation Gedanken machen. Eine der beliebtesten und benutzerfreundlichsten Formen der Navigation ist die Seitennavigation oder auch “Off Canvas” Navigation genannt, die wir Ihnen im Folgenden vorstellen.

Seitennavigation sorgt für übersichtliche Darstellung

Nicht erst seit Facebook die Seitennavigation auf seiner mobilen Webseite nutzt, gehört sie zu den beliebtesten Navigationsformen. Auch bekannte Online-Shops wie Mister Spex oder Cyberport verwenden die Seitennavigation auf ihren mobilen Plattformen. Die Off Canvas Navigation ist besonders geeignet für kleine und mittelgroße Online-Shops, weil mit ihr eine begrenzte Anzahl an Kategorien – es sollten nicht mehr als sieben Hauptkategorien sein – übersichtlich dargestellt werden kann.

Aufbau der mobilen Seitennavigation

Das Menü der Seitennavigation ist links oder rechts im Header positioniert und öffnet sich bei Tap auf den entsprechenden Button, woraufhin der komplette Inhaltsbereich zur Seite verdrängt wird.

 

Abb. 1: Seitenavigation mit eingeklappten Kategorien Abb. 2: Seitennavigation mit ausgeklappten Sportbrillen-Bereich

Ähnlich wie die Top-Navigation können die Kategorien ein- und ausgeklappt werden. Sind Nutzer beispielsweise auf der Suche nach Laufbrillen im Online-Shop von Mister Spex können Sie die Kategorie Sportbrille wählen, die sich öffnet und Unterkategorien zum Vorschein bringt. Erst bei Klick auf die entsprechende Unterkategorie wird die Seite neu geladen und der Seiteninhalt angezeigt – die Seitennavigation klappt dann automatisch zu.

Vorteile der Off Canvas Navigation

Ähnlich wie die Top-Navigation hat die Seiten-Navigation gegenüber dem Einstieg über Kategorien den Vorteil, dass durch die ein- und ausklappbaren Menüpunkte alle angebotenen Kategorien immer sichtbar sind. Dies gewährleistet eine große Übersichtlichkeit und gute Orientierung der suchenden Nutzer.

Die Tatsache, dass der komplette Seiteninhalt bei Aufrufen der Navigation verdrängt wird mag zunächst wenig intuitiv erscheinen. Ist diese Logik aber einmal verstanden, ist die Bedienbarkeit recht einfach und bequem.

Nachteile beim Einstieg über die Seitennavigation

Einen echten Nachteil hat die Seitennavigation nicht. Ein potentielles Risiko jedoch kann die Darstellung des Menü Icons sein, welches oben rechts oder links im Header positioniert ist. Dieses sollte stets gut als solches identifizierbar sein, denn hier liegt schließlich der Hauptfokus.

In unseren mobilen Usabilitytests kam u.a. heraus, dass viele Nutzer das Menü-Icon gar nicht als solches erkannt haben. Folge: Sie wussten nicht, wo sie durch das Sortiment navigieren können und brachen den Besuch ab. In unserem Artikel zum Hamburger Icon verraten wir Ihnen drei ganz einfache Tricks, mit denen Sie gewährleisten, dass das Menü-Icon als solches wahrgenommen wird und Nutzer auf Ihrer Seite bleiben.

Fazit: Durch Usability-Tests individuelle Anforderungen klären! Ähnlich wie die Top-Navigation lässt sich die Seitennavigation sehr gut für kleine und mittelgroße Online-Shops verwenden. Dabei sollte darauf geachtet werden, dass die Anzahl der Haupt- und Unterkategorien auf das Wesentliche reduziert ist.

Aus dem Vergleich der drei Navigationsformen wird deutlich: Die ideale mobile Navigation hängt immer von den individuellen Bedürfnissen (“Use Cases”) ab, die sich aus den Anforderungen der Nutzergruppe ableiten. Um die Komplexität und den Zeitaufwand solcher Anforderungsanalysen zu reduzieren, empfehlen sich Usability-Tests:

  • Mithilfe von RapidUsertests lässt sich herausfinden, ob die Navigation von Ihren Nutzern als intuitiv bedienbar wahrgenommen wird.
  • Durch “Card-Sorting” lässt sich herausarbeiten, wie viele und welche die sinnvollsten Kategorien für Ihre mobile Navigation sind
  • Mithilfe von Eyetracking lässt sich zeigen, ob die Navigation an der strategisch richtigen Stelle positioniert ist und von den Nutzern sofort als solche erkannt wird.

 

Die optimale mobile Navigation? Teil 3: Die Top-Navigation

Die optimale mobile Navigation? Teil 3: Die Top-Navigation

Martin Schröter in Mobile Usability
Lesezeit: 2 Minuten · 16. Juli 2014
von | 16. Juli 2014 | Mobile Usability

Wenn Sie einen kleinen oder mittelgroßen Online-Shop besitzen und diesen mobil optimieren wollen, haben Sie sich wahrscheinlich schon Gedanken über die Darstellung der Navigation gemacht. Diese ist sozusagen das Herzstück Ihrer Webseite und verdient daher besondere Aufmerksamkeit.

Weil vor allem Smartphones Displays nur begrenzten Platz bieten, bedarf es mobiler Lösungen, die einerseits übersichtlich und platzsparend sind, gleichzeitig aber den gesamten Inhalt darstellen. Hier bietet sich mit der sogenannten Top-Navigation, oder auch “Toogle” Navigation genannt, eine übersichtlich Navigationsform an.

Top-Navigation sorgt für übersichtliche User Experience

Während Online-Shops mit einer breiten Produktpalette den Einstieg über Kategorien nutzen, um ihren Besuchern die größtmögliche Orientierung zu bieten, empfiehlt es sich für kleinere und mittelgroße Online-Shops auf die Top-Navigation zurückzugreifen. Vor allem auf bestimmte Produktekategorien spezialisierte Anbieter wie Rossmann oder A.T.U. nutzen diese Form der Navigation.

Aufbau der mobilen Top-Navigation

Im Online-Shop von A.T.U. wird verschiedenes Kfz-Zubehör angeboten. Die Hauptkategorien (Sommerreifen, Batterien, Tuning, etc.) sind gut sichtbar nahe des Headers positioniert. Bei “Tap” auf einen Menüpunkt klappt dieser aus und die Unterkategorien kommen zum Vorschein. Sind Besucher beispielsweise auf der Suche nach einem Autoradio finden sie dieses über die entsprechende Unterkategorie in der Hauptkategorie “Hifi & Navigation”. Der übrige Content verschiebt sich dabei nach unten.

  • Idealerweise ist die Top-Navigation im Header positioniert.
  • Der Header kann fixiert sein, sodass er sich beim Scrollen mitbewegt und immer im sichtbaren Bereich bleibt.

Vorteile dieser mobile Navigation

Die Top-Navigation hat gegenüber dem Einstieg über Kategorien den klaren Vorteil, dass immer alle Kategorien sichtbar sind. Egal auf welcher Seite sich der Nutzer gerade befindet oder welchen Produkt er sich anschaut, über die Top-Navigation kann er unkompliziert zu einer ganz anderen Kategorie springen. Und das direkt von seiner jetzigen Seitenposition aus. Dies sichert eine hohe Übersichtlichkeit und unterstützt die Orientierung auf der Webseite. Dies lädt zum Stöbern ein und verringert das Risiko, dass die Besucher die Seite verlassen.

Nachteile bei Einstieg über die Top-Navigation

Ein Nachteil kann jedoch sein, dass die Navigation aufgrund zahlreicher Kategorien sehr viel Platz einnimmt. Dies hat zur Folge, dass Besucher deutlich öfter Scrollen müssen als beispielsweise beim Einstieg über Kategorien. Im Falle des Online-Shops von A.T.U. sind sehr viele Kategorien in der Navigation vorhanden. Sind diese zusätzlich noch ausgeklappt, bedeutet dies einen hohen Scroll-Aufwand für die Besucher. Dies kann schnell zu Unübersichtlichkeit und Frustration führen.

Auch gilt:

  • Je tiefer die Navigationshierarchie der Webseite, d.h. je mehr Unterkategorien vorhanden sind, desto größerer der Scrollaufwand und desto geringer die Übersichtlichkeit.
  • Aus diesem Grunde ist es stets ratsam eine maximale Anzahl an Haupt- und Unterkategorien festzulegen: Hier empfehlen wir maximal 7 Hauptkategorien und höchstens drei Hierarchieebenen.

Grafische Darstellung über Icons

Das Kategorienverständnis der Navigation kann durch Icons unterstützt werden (siehe Bildbeispiel unten: Rossmann). Aber achten Sie stets darauf nur solche Icons zu verwenden, die zusätzliches Verständnis schaffen – sonst erreichen Sie den gegenteiligen Effekt. Eine Spielart der Top-Navigation ist zudem die Overlay Navigation. Sie unterscheidet sich jedoch nur hinsichtlich der Darstellung: Auch sie wird im Header positioniert, überdeckt beim Öffnen aber den Content durch ein Overlay und verschiebt ihn nicht nach unten (siehe Beispielbild unten: Nike Online Shop).

Abb. 1: Navigation mit Icons auf der mobilen Rossmann-Seite Abb. 2: Einstieg über Overlay-Navigation auf der mobilen Nike-Seite

Fazit – Wie optimal ist die Top-Navigation?

Die Top- bzw. Overlay-Navigation eignet sich besonders gut für kleine und mittelgroße Online-Shops die sich auf ein übersichtliches Produktsortiment konzentrieren. Wird darauf geachtet, dass die Navigationsstruktur logisch aufgebaut und die Hierarchie ausbalanciert ist, kann diese Art der Navigation ein schnelles Verständnis der Webseite und große Übersichtlichkeit schaffen.

Seite 1 von 3123