Mobile Motivation Index – 5+1 Werkzeuge für mobile User Experience

Eine mobile Webseite gehört nicht mehr nur zum guten Ton. Vielmehr sollte sie fester Bestandteil der Unternehmensstrategie sein. Ein Indikator für die Notwendigkeit ist der steigende Traffic von Smartphones. Retailer stehen hier vor der besonderen Herausforderung, welche Anforderungen der Kunde an eine reduzierte Variante der Webseite hegt. Ein immens wichtiger Trigger ist die User Experience (UX). Wie kann diese nun gemessen werden? Hier setzt der Mobile Motivational Index an. Er ist ein Framework, um die UX zu bewerten und verbessern.
  • Erfahren Sie in dieser Reihe wie der Mobile Motivational Index funktioniert.
  • Überprüfen Sie die UX Ihrer mobilen Webseite und verbessern Sie den Impact.

Warum ein Framework?

Warum ist es wichtig ein Tool wie den Mobile Motivation Index zu nutzen?

Ein Smartphone ist einfach zu bedienen. Der Kunde nutzt lediglich seinen Finger, um an das gewünscht Ziel zu kommen. Der gesamte Prozess spielt sich auf einem kleinen Display ab. Somit kann es doch nicht schwer sein, einen Onlineshop dafür zu entwerfen. Erst recht eine Webseite ist schnell umgesetzt. Falsch!

Gerade die Tatsache, dass viel Content auf wenig Fläche dargestellt werden muss, stellt Designer und Konzepter gleichermaßen vor eine große Herausforderung. Der MMI setzt genau an dieser Stelle an und fungiert als Framework zur Optimierung der Seite.

Kurz vorgestellt

Die Testkandidaten dieser dreiteiligen Reihe vertreiben Waren im Segment Technik und Unterhaltungselektronik. Allen voran Media Markt, welcher mit über 650 Ladengeschäften eher spezialisiert ist, Waren direkt am Point of Sale zu verkaufen. Der auf Online-Versand spezialisierte Shop Redcoon wurde 2003 in Aschaffenburg gegründet und fühlt sich inzwischen in neun europäischen Ländern heimisch. Die Eigenschaften dieser beiden Retailer vereint Alternate aus Linden. Bereits 1997 startet das Unternehmen mit seinem Internet Auftritt. Dieser ist heute das Hauptstandbein neben einem lokalen Geschäft.

Testkandidaten für Mobile Motivation Index

Testkandidaten für den Mobile Motivation Index

Die 5+1 Werkzeuge für die mobile Optimierung

Welche Faktoren sind entscheidend für die Umsetzung einer optimierten mobilen Webseite? Diese Frage möchte ich mit dem Mobile Motivation Index beantworten. Ideengeber ist Ole Gregersen, welcher den Motivational Index zuerst einsetzte. Beide Frameworks schließen sich natürlich nicht aus. Der Mobile Index ist als Ergänzung zu sehen. Vergeben werden maximal 3 Punkte in jeder Kategorie.

Hide

No matter how beautiful, no matter how cool your interface, it would be better if there were less of it. – Alan Cooper

Der Nutzer will nicht von einer Informationsflut überrollt werden, wenn er Ihre Seite besucht. Denn die eigentliche Kunst besteht darin, die Seite auf das wichtigste zu reduzieren. Ein minimales Design trägt zur schnellen Orientierung bei. Weiterer Vorteil der sich daraus ergeben muss, ist eine geringe Ladezeit der Seite. Man denke immer daran: das Smartphone ist ubiquitär einsetzbar.

Light / Easy

Der erste Eindruck einer Seite ist der wichtigste. Innerhalb weniger Millisekunden haben sich die Besucher ein eigenes Wertebild der Seite geschaffen, ohne inhaltliche Details wahrzunehmen (Halo-Effekt). Smartphone Konsumenten sind vom Typus meist schnell und funktional veranlagt. Dies muss die mobile Seite ebenfalls ausstrahlen, indem sofort ersichtlich wird, was den Kunden erwartet. Ein aufgeräumtes Design mit Elementen, welche schnell erfasst werden können, trägt massiv zu einem leichten und einfachen Eindruck bei.

Efficiency

Regulär ist eine Webseite hierarchisch breit aufgebaut. Diese Baumstruktur gilt es aufzulösen und flach zu gestalten. So muss der Nutzer den Eindruck gewinnen, dass er schnell und einfach an sein Ziel gelangt. Vorzugsweise in wenigen Schritten (Maximal 4-5 Taps).

Sitemap eines mobilen Webshops

Sitemap eines mobilen Webshops

Readability

Wichtigste Inhalte, mit denen eine Seite steht und fällt, sind ganz klar Texte und Bilder. Texte sollten für die Lesbarkeit besonders für den kleinen Smartphone Bildschirm optimiert sein. So kann die Schriftgröße, als auch die Textweite bspw. durch responsive Webdesign angepasst werden. Auch das Prinzip Skim, Scan, Read sollte mobil nicht verloren gehen.

Bilder tragen weiterhin dazu bei, Inhalte grafisch zu unterstreichen und schaffen damit Orientierung. Sie können auch stimulanter Einstieg in eine bestimmte Kategorie sein. In jedem Fall muss bei kleinen Bilder klar zu erkennen sein, ob sich dahinter ein Link verbirgt. Es kann bspw. für eine gesamte Kategorie stehen oder aber für Cross-Selling genutzt werden.

Touchability

Die Navigation findet mit dem Finger statt. Darum ist dies einer der wichtigsten Faktoren. Elemente, welche vom Kunden bedient werden sollen, müssen dafür auch entsprechend gestaltet werden. Eine Fingerfreundliche Größe von 44 x 44 Pixeln wird von Apple empfohlen. Damit lassen sich die kleinsten Buttons auch von den größten Fingern bedienen. Auch Text-Links sind Links, welche gerne für weiterführende Informationen im Footer genutzt werden. Diese müssen auch entsprechend gekennzeichnet werden und fingerfreundlich sein.

Gestures

Ob Tap, Swipe oder Pinch – Gesten gehören einfach zum Bedienkonzept. Seitens des Betriebssystems werden sie vorausgesetzt, um ein Smartphone adäquat zu nutzen. So sind gewisse Funktionalitäten inzwischen trivial und werden auf einer mobile Seite erwartet. Beispielsweise das durchschauen von Bilder geschieht bevorzugt durch eine Wisch-Bewegung (Swipe).

Gesten sind im Mobile Motivation Index die Bonus-Disziplin. So können Bonuspunkte gesammelt werden, sofern alle anderen fünf Faktoren einwandfrei erfüllt wurden.

Der Mobile Motivation Index im Einsatz

Um die Funktionsweise zu demonstrieren, erläutere ich sie an der Startseite unserer Kandidaten.

Alternate

Startseite Alternate Mobile

Hide: Gegenüber der regulären Seite sind lediglich Funktionen für einen schellen Einstieg in die Produktwelt zu finden – 3 Punkte

Light / Easy: Ein Suchschlitz und der Einstieg über Kategorien sowie drei Buttons im Header-Bereich: schnelle Orientierung und klare Botschaft, was die Seite vom Kunden möchte – 2,5 Punkte

Efficiency: Wird im nächsten Blogpost bewertet – 0 Punkte

Readability: Texte sind deutlich lesbar. Die Icons der Buttons im Header sind jedoch schwer zu entschlüsseln. – 2 Punkte

Touchablility: Buttons sind eindeutig zu erkennen und groß genug. Die Texte im Footer sind jedoch etwas gequetscht – 2 Punkte

Gestures: Nicht vorhanden – 0 Punkte

Gesamt: 9,5 Punkte

 

Media Markt

Startseite Media Markt Mobile

Hide: Die Startseite ist nicht auf das wesentliche Reduziert. Newsletter und Top-Angebote lenken ab. – 1,5 Punkte

Light / Easy: Die Botschaft, dass es ein Webshop ist, wird nicht sofort klar. Auch die Marktsuche irritiert. – 1,5 Punkte

Efficiency: Wird im nächsten Blogpost bewertet – 0 Punkte

Readability: Preise stehen eindeutig im Vordergrund. Farbliche Kontraste und die Schriftgröße sorgen für schwere Lesbarkeit – 0,5 Punkte

Touchablility: Login und Registrieren Funktion sowie die die Marktsuche sind nicht als Buttons zu erkennen und schlecht bedienbar. Trotzdem lassen sich Suche und Kategorien tappen – 1 Punkte

Gestures: Teaser und Cross-Selling lassen sich via Swipe problemlos bedienen – keine Bonuspunkte aufgrund der Defizite.

Gesamt: 4,5 Punkte

 

Redcoon

Startseite Redcoon Mobile

Hide: Die Seite ich auf die minimale Funktionalität reduziert: Einkaufen. – 2,5 Punkte

Light / Easy:

Bei den Teasern wird nicht klar, ob dies Angebote sind oder wahllos gewählte Produkte. Der Einstieg in die Themen ist trotzdem simpel. – 2 Punkte

Efficiency: Wird im nächsten Blogpost bewertet – 0 Punkte

Readability: Das Siegel sowie die Produktbeschreibung nahe den Angeboten sind schlecht lesbar. Ebenso die Texte im Footer – 1 Punkt

Touchablility: Der Merkzettel und Warenkorb sind recht klein geraten. – 2 Punkte

Gestures: Die Produkte lassen sich durch Swipe wechseln. Weitere Produkte links und rechts im Anschnitt lassen erkennen, dass es mehr Angebote zu entdecken gibt. – 1 Punkt

Gesamt: 8,5 Punkte

Zusammenfassung

Der Zwischenstand nach Analyse der Startseite:

Platz 1: Alternate besitzt eine klare, fast schon sterile Startseite. Der Einstieg geschieht schnell und problemlos.

Platz 2: Redcoon hat mit seiner Startseite und en Angeboten überzeugt. Die Produkte können durch Gesten gewechselt werden.

Platz 3: Media Markt nutzt zu viele Elemente, welche vom eigentlichen stöbern bzw. gezielten Suchen nach Produkten ablenken.

 

Seien Sie gespannt auf die komplette Analyse im nächsten Post.

 

Nutzen Sie den kostenlosen Download der Auswertungstabelle und überprüfen Sie ihre eigene mobile Webseite.

Mobile Motivation Index Download

Ich freue mich auf Ihre Kommentare und Anregungen.

Weiterführende Links

Teil 2: Mobile Motivation Index – Mobile Produktdetailseiten unter der Lupe 

Teil 3: Mobile Motivation Index – 5 Faktoren für den mobilen Kaufabschluss + kostenlosem eBook Download

  • Send to Kindle
  • https://www.konversionskraft.de/?p=15513
Dennis Herzberger Als Senior Conversion Architect bei der Web Arts AG hat sich Dennis Herzberger der Usability und User Experience von Webseiten gewidmet. Sein leidenschaftlicher Fokus liegt auf der Konzeption und Optimierung von mobilen Webseiten und Onlineshops. Folgen Sie ihm auf Twitter.

, , , , ,

8 Reaktionen auf  “Mobile Motivation Index – 5+1 Werkzeuge für mobile User Experience”

Kommentare

  1. Oliver Oliver

    1) Alternate 9,5 Punkte
    2) Redcoon 8,5 Punkte
    3) MediaMarkt 4,5 Punkte…
    war auch ohne Taschenrechner nicht schwer 🙂

  2. Dennis Herzberger Dennis Herzberger

    Hi Oliver,
    sehr aufmerksam gelesen und gerechnet. Danke 😉 Ergebnisse sind korrigiert und in einem Download zusammen gefasst.

  3. Johannes Schubert Johannes Schubert

    Es ist auf jeden Fall mal eine interessante Herangehensweise, mit möglichst objektiven Kriterien mobile Shops zu untersuchen. Allerdings bin ich mir nicht so sicher, wie nützlich es ist, ausgerechnet die Startseite zu bewerten. Erfahrungsgemäß landen in unserem Shop weit über 90% der User direkt auf eine Produktbeschreibung, da sie via Google einen speziellen Artikel suchen…
    Klar, bei großen (bekannten) Läden erscheint die Untersuchung der Startseite durchaus sinnvoll, weil Leute mitunter direkt die Shop-URL eingeben. Aber für eine „vergleichende“ Bewertung der Nutzbarkeit für den normalen User (der via Google auf die unterschiedlichsten Shops gelangt) ist dies m.E. nicht zweckmäßig. Hier müssten wohl eigentlich die Produktbeschreibungsseiten eine höhere Relevanz erhalten, oder?

  4. Dennis Herzberger Dennis Herzberger

    Hallo Herr Schubert,
    besonders im mobilen Sektor gebe ich Ihnen recht, dass ein direkter Einstieg über google erfolgt. Der Artikel ist als dreiteilige Serie geplant. In diesem Teil soll beispielhaft erläutert werden, wie das Framework funktioniert. Natürlich kann man diesen auf einzelne Seiten oder den gesamten Shop anwenden. Die zu vergleichenden Seiten sollten konsistent sein (also Produktdetailseite, Checkout, Startseite).

    Den passenden Artikel für die Produktdetailseite finden Sie hier: Mobile Motivation Index – Mobile Produktdetailseiten unter der Lupe

    Im letzten Teil folgt der Checkout-Prozess.

Trackbacks/Pingbacks

  1. […] 5+1 Werkzeuge für mobile User Experience […]

  2. […] sich der Mobile Motivation Index. Wie der Mobile Motivation Index anzuwenden ist, lesen Sie im ersten Teil. In diesem Teil stehen die mobilen Produktdetailseiten von Alternate, Media Markt und Redcoon auf […]

  3. […] Mobile Motivation Index – Teil 1 – 5+1 Werkzeuge für mobile User Experience […]

  4. […] Mobile Motivation Index – 5+1 Faktoren für mobile Webseiten […]

Hinterlassen Sie einen Kommentar