Mobile First oder Context First? Wann Mobile First die falsche Strategie ist

Mobile First oder Context First? Wann Mobile First die falsche Strategie ist

Martin Schröter | 14. Oktober 2016 | User-Experience-Tipps

Steht man vor der Frage nach der idealen digitalen Strategie, hört man in letzter Zeit immer wieder den Begriff „Mobile First“. So geht es auch unserem UX-Berater Martin Schröter, der hier seine Erfahrungen und vor allem seine Meinung zu diesem Vorgehen mit Ihnen teilen möchte. Wann ist „Mobile First“ der richtige Ansatz und wann sollte man seine Verwendung noch einmal überdenken?

Ich schreibe diesen Artikel, weil ich mit einigen Missverständnissen aufräumen möchte. Missverständnisse bezüglich eines Begriffs, der uns in der digitalen Branche in den letzten Jahren immer häufiger begegnet: „Mobile First“.

Folgende Situation hatte ich schon häufiger in Projekten: Nehmen wir an es geht um den Relaunch einer Website – Es steht die Frage im Raum, welche digitale Strategie dabei verfolgt werden soll. Von Kundenseite heißt es dann oft sofort: „Mobile First!“

Diese Aussage wird dann untermauert mit aktuellen Statistiken zum mobilen Traffic auf Webseiten: „Viele Websites verzeichnen inzwischen mehr Aufrufe von Smartphones als von Desktop-Computern.“ oder „Der Verkauf von Smartphones hat den Verkauf von Laptops weltweit eingeholt.“

Ja, wir alle kennen diese Statistiken. Aber was sagen sie uns?

Was bedeutet Mobile First und wie wird der Begriff verwendet?

Bevor ich zurück zu diesen Statistiken komme, möchte ich ganz kurz erklären, was Mobile First eigentlich bedeutet.

Beim Mobile First Ansatz wird eine neue Website zuerst für mobile Geräte konzipiert und designt, bevor sie für die Desktop-Anwendung erweitert wird. Grundsätzlich klingt das erstmal gar nicht schlecht – wenn es richtig eingesetzt wird.

Die Frage „Mobile First oder nicht?“ zielt meiner Meinung nach aber an der eigentlich entscheidenden Frage vorbei, nämlich „Wem dient mein Produkt in welcher Situation und welches Problem löst es?“

Mobile First? – Context First!

Die Statistiken zeigen uns, dass Mobile ein unglaublich wichtiger Markt ist, der keinesfalls missachtet werden sollte. Was sie allerdings nicht verraten: Ist Mobile tatsächlich das, was die Nutzer meines Produktes brauchen?

Zu Beginn der Entwicklung eines neuen Produktes oder vor einem Relaunch sollte man sich daher die Frage stellen: „Was will mein Kunde mit meinem Produkt erreichen?“

Um diese Frage zu beantworten muss ich drei Dinge über mein Produkt ganz genau verstehen:

  • Wer nutzt das Produkt?
  • In welcher Situation wird das Produkt genutzt?
  • Welche Ziele verfolgt mein Kunde, wenn er dieses Produkt nutzt?

Dabei helfen uns Use Cases, Personas und Szenarien. Denn erst wenn wir verstehen, warum Menschen aus meiner Zielgruppe mein Produkt in einer ganz bestimmten Situation nutzen, können wir uns die Frage stellen, wie wir das Produkt umsetzen.

Ein Beispiel: Stellen wir uns vor, die fiktive Firma UX-Print hat ein Tool entwickelt, das dazu dient, großformatige Collagen zu erstellen und Fotos für den Posterdruck zu bearbeiten. Dem Nutzer werden eine Reihe sinnvoller Werkzeuge an die Hand gegeben, mit denen sich selbst kleinste Details der Bilder überarbeiten lassen.

Auf den kleinen Smartphone Bildschirmen dürfte das ein schwieriges Unterfangen sein. Es gibt schlichtweg Produkte, die für kleine Bildschirme nicht geeignet sind. Hier wäre „Mobile First“ daher fehl am Platz.

Wann mobile First nicht die richtige Strategie ist

Die Strategie „Mobile First“ ist fehl am Platz, wenn das Produkt für den Einsatz auf mobilen Geräten nicht geeignet ist, wie bei der Bearbeitung großformatiger Fotos.

Ich empfehle Ihnen stattdessen: Gestalten Sie eine informative Landingpage, die für mobile Geräte optimiert ist. Dort erklären Sie das Produkt, geben nützliche Tipps und bieten  ein Registrierungsformular an, mit dem man sich in wenigen Sekunden anmelden kann, um das Produkt dann auf einem größeren Bildschirm zu nutzen. So sind Sie trotzdem auf mobilen Geräten präsent, ohne den Nutzern eine schlechte User Experience zuzumuten.

Wann Mobile First die richtige Strategie ist

Sie sind zu dem Schluss gekommen, dass Ihre Nutzer das Produkt auf mobilen Geräten verwenden möchten und können?  Super! In diesem Fall ist die logische Frage tatsächlich: Wie kann ich mein Produkt auf dem kleinstmöglichsten Gerät mit dem größtmöglichen Nutzen darstellen und somit die beste User Experience bieten.

Aber auch hier gilt: Fragen Sie Ihre Nutzer. Finden Sie heraus, wie Ihr Produkt auf welchem Gerät genutzt wird und in welcher Situation. Denn auf dem Smartphone können ganz andere Funktionen sinnvoll sein als auf einem Desktop-Computer. Und unterwegs nutzen wir mobile Geräte anders als zu Hause.

Denn: Mobile First ist Mittel zum Zweck, nie aber der Zweck selbst.

Ein Beispiel: Die wenigstens Menschen werden die Download-Funktion in einem App-Store nutzen, wenn sie unterwegs nach neuen Apps stöbern. Schon gar nicht, wenn die jeweilige App mehrere MB groß ist und die Gefahr besteht, mobile Daten aufzufressen. In dieser Situation wäre eine „Speichern“-Funktion für die Nutzer viel interessanter. Oder eine Erinnerungsfunktion. Oder eine Funktion, die den Download automatisch startet, sobald man sich im heimischen WLAN befindet. Oder … Ihnen fallen sicherlich noch andere sinnvolle Funktionen ein.

Wann Mobile First die richtige Strategie ist

„Mobile First“ ist die richtige Strategie, wenn das Produkt häufig auf mobilen Geräten eingesetzt wird, zum Beispiel weil die Nutzer es unterwegs verwenden.

Fazit – Auswirkungen auf die Produktentwicklung

Was heißt das nun für die Produktentwicklung? Wir müssen weg von Trendbegriffen und hin zu den Menschen, für die wir Produkte entwickeln. Die Fragen, die wir stellen müssen: Für wen baue ich das Produkt? In welchen Situationen wird mein Produkt genutzt? Und vor allem: Welches Problem löst mein Produkt?

Um diesen Fragen auf den Grund zu gehen, lohnen sich User Research Methoden, aus denen gezielt Use Cases, Personas und Szenarien abgeleitet werden und den langfristigen Erfolg eines Produktes sicherstellen. Was Personas sind, erklären wir auf unserem Agentur-Blog.

Stimmen Sie mir zu oder sind Sie vielleicht völlig anderer Meinung? Dann schreiben Sie gerne einen Kommentar, was Sie von dem Mobile-First-Ansatz halten!

Die optimale mobile Navigation? Teil 4: Die Seitennavigation

Die optimale mobile Navigation? Teil 4: Die Seitennavigation

Martin Schröter | 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 | 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.

M-Commerce: So ermöglichen Sie den Übergang von mobilem Stöbern zum PC-Shopping

M-Commerce: So ermöglichen Sie den Übergang von mobilem Stöbern zum PC-Shopping

Userlutions Team | 9. Juli 2014 | Mobile Usability

Bei einem unserer letzten RapidUsertests für Smartphones beobachteten wir, dass Nutzer sich zwar mobil über das Produkt informieren, aber den tatsächlichen Kauf erst viel später durchführen wollten. Sie fanden jedoch keine Möglichkeit, sich die angesehenen Produkte für den späteren Kauf auf dem heimischen PC zu merken.

Kunden wechseln vom Smartphone auf Desktop oder Tablet

Unsere Beobachtung wird durch Daten einer Google-Studie unterstützt:

  • 93% der Nutzer haben beim Stöbern mit dem Smartphone eine Kaufabsicht
  • aber nur 17% kaufen anschließend tatsächlich mit dem Smartphone ein
  • 45% der Nutzer wechseln auf ihren heimische Desktop-PC oder ihr Tablet und erwerben das Produkt dort

Bei einem Großteil der Smartphone-Nutzer besteht beim Online-Shopping also eine Kaufabsicht – für den eigentlichen Kauf wird jedoch das Gerät gewechselt. Werden die Nutzer hierbei nicht optimal unterstützt, gibt es 2 Hürden: Sie müssen sich später erinnern und den Artikel erneut suchen. Diese Hürden sind für den Kunden unnötig und damit ein Conversionkiller.

Wie können Online-Shops den Gerätewechsel unterstützen?

Vor allem Online-Shops sollten ihre Kunden beim Wechsel vom Smartphone auf den heimischen Desktop oder das Tablet unterstützen. Folgende Möglichkeiten bieten sich an:

1. Speichern Sie automatisch den Warenkorb für eingeloggte User – wechselt der Nutzer auf ein anderes Gerät und loggt sich dort ein, kann der Einkauf direkt fortgesetzt werden.

2. Geben Sie nicht-eingeloggten Usern eine Möglichkeit sich Artikel zu merken und diese Merkliste einfach per Mail zu versenden. Die mobile Webseite von Cyberport bietet z.B. eine einfache Möglichkeit zum Speichern einer Merkliste an. Diese kann anschließend per Mail versendet werden, so dass sie auf einem anderen Gerät weitergenutzt werden kann.

Abb.1: Der Merkzettel der mobilen Cyberport-Webseite lässt sich per Mail versenden

3. Stellen Sie sicher, dass der Link zur Desktop-Version eines Produkts auch immer zum Produkt führt und nicht nur auf die Startseite Ihres Online-Shops, so dass ein Versenden des Links per Mail dem Nutzer erlaubt, sich einzelne Produktseiten zu merken.

Fazit

Kunden stöbern gerne und oft mit dem Smartphone, aber die Mehrzahl der tatsächlichen Käufe findet weiterhin auf dem heimischen Desktop oder Tablet statt. Online-Shops müssen Nutzer bei diesem Gerätewechsel unterstützen.

Die optimale mobile Navigation? Der Einstieg über Kategorien – Teil 2

Die optimale mobile Navigation? Der Einstieg über Kategorien – Teil 2

Martin Schröter | 2. Juli 2014 | Mobile Usability

Im ersten Teil dieser Serie zum Thema mobile Navigation sind wir auf die verschiedenen Herausforderungen eingegangen, die sich aus der Anpassung von Navigationstypen an Smartphones und Tablets ergeben.

In den kommenden Artikeln stellen wir Ihnen daher drei verschiedene Navigationskonzepte vor, die sich für mobile Geräte eignen. Diese unterscheiden sich hinsichtlich ihrer Anwendungsfälle, ihrer Struktur und ihrem Aufbau. Als erstes präsentieren wir Ihnen den Einstieg über Kategorien, der sehr häufig in mobilen Online-Shops verwendet wird.

Ideal für mobile Shops mit großem Produktsortiment

Insbesondere große Online-Shops wie Amazon nutzen den Einstieg über Kategorien, um ihren Kunden die größtmögliche Übersicht zu bieten. Dies scheint aufgrund der breiten Produktpalette des Online-Händlers auch die sinnvollste Lösung zu sein, da die vielen Hauptkategorien und Unterkategorien (bis zu 10!) unmöglich in einem aufklappbaren Menü unterzubringen sind.


Aufbau der mobilen Navigation über Kategorien

Amazon platziert die wichtigsten Hauptkategorien auf der Startseite (siehe Screenshot). Sind die Besucher beispielsweise auf der Suche nach Digitalkameras können Sie in der Hauptkategorie “Elektronik & Foto” ein Untermenü aufklappen, das weitere Unterkategorien enthält. Bei Klick auf die Unterkategorie “Kamera & Foto” werden Sie auf eine neue Seite weitergeleitet. Dort finden Sie erneut ein Kategoriemenü auf, das wiederum Unterkategorien enthält. Erst durch das Aufrufen der entsprechenden Hauptkategorie gelangen die Besucher wieder auf die höhergelegene Ebene zurück.

 

Abb. 1: Einstieg über Kategorien auf der mobilen Amazon-Seite


Welche Vorteile hat diese mobile Navigation?

Mag dies zunächst sehr kompliziert klingen, liegt der Vorteil klar auf der Hand: Selbst eine sehr komplexe Navigationsstruktur lässt sich so gut darstellen. Die Nutzer dringen damit immer weiter in die Seitenstruktur ein, ohne aus den Augen zu verlieren, wo sie sich gerade auf der Seite befinden.


Gibt es Nachteile beim Einstieg über Kategorien?

Andererseits ist bei diesem Navigationstypen nicht das komplette Produktsortiment – sprich alle Kategorien – direkt sichtbar. Wollen Nutzer beispielsweise nach einem TV Gerät suchen, müssen sie zurück auf die Startseite gehen. Hier hilft allerdings die hervorragende Suchfunktion von Amazon, die direkt über den Kategorien platziert ist und dank einfacher Bedienung schnell zum gesuchten Produkt führt.


Grafische Darstellung der Kategorien über Teaserbilder

Es bietet sich zudem an, die Kategorien grafisch zu unterstützen: Teaserbilder machen deutlich, was sich hinter der jeweiligen Kategorie versteckt und laden so zum Stöbern ein. Ein gelungenes Beispiel ist der Online Shop von Esprit, der eine ausschließlich grafische Kategoriennavigation nutzt. Doch auch hier ist Vorsicht geboten: Zu viele Bilder lassen die Navigation schnell überladen wirken und es sollte gut überlegt werden, welche Bilder zusätzliches Verständnis schaffen und wann auf Bilder verzichtet werden sollte. Gleiches gilt übrigens auch für die Nutzung von Icons.

Abb. 2: Einstieg über Teaser bei dem mobilen Esprit-Shop

Fazit – Wie optimal ist diese mobile Navigation?

Der Einstieg über Kategorien lohnt sich für sehr komplexe Shop-Systeme mit einer Vielzahl an Haupt- und Unterkategorien. Vor allem in Kombination mit einer guten Suchfunktion gewährleistet diese Art der Navigation ein bedienungsfreundliches und übersichtliches Nutzererlebnis. Für kleinere Shops eignen sich hingegen Top- oder Seitennavigationen, die wir Ihnen in den nächsten Teilen vorstellen werden.

Seite 1 von 212