User Experience Design

In 7 Schritten zur optimalen mobile User Experience
Kommentare

Die User Experience vieler mobiler Applikationen und Webpages lässt zu wünschen übrig. Wegen einer unübersichtlichen Nutzeroberfläche springen viele User ab, was sich zum Beispiel auf die Conversion Rate negativ auswirken kann. Dennis Herzberger, Conversion Architect bei Web Arts, erklärt, wie die mobile User Experience in wenigen Schritten optimiert werden kann.

Wenn man sich über das Thema „Mobile Commerce“ unterhält, dauert es meist nicht lange bis das Stichwort „Responsive Web Design“ fällt. So geht es mir jedenfalls. Doch es kommt nicht immer auf die Technik an. Das „Mobilegeddon“ von Google soll ein Umdenken bewirken. Es geht nicht nur darum, Seiten abzustrafen die keine optimierten Smartphone-Seiten haben. Vielmehr sollen die Betreiber „gezwungen“ sein, sich über eine Mobile-Strategie Gedanken zu machen.

Ich habe die 100 Umsatzstärksten Onlineshops Deutschlands angeschaut und musste entsetzt feststellen, dass jede vierte Seite nicht angepasst auf dem Smartphone dargestellt wird.

mobile user experience_1

Quelle: http://www.konversionskraft.de/conversion-optimierung/infografik-mobile-commerce-checkup.html

In diesem Artikel möchte ich zeigen, dass eine mobile Webseite mehr als nur eine Seite ist, die mit einem Schraubstock zusammengedreht wurde, bis sie auf ein Smartphone Display passt. Zu einer optimale User Experience (Nutzererlebnis) gehört mehr, als Inhalte automatisch kleiner werden zu lassen und anders zu positionieren.

Das Smartphone ist ein All-Day-Device. Als ständiger Begleiter erfüllt es vielfältige Aufgaben. Wir können nicht vorschreiben, wie der Nutzer auf unsere Webseite gelangt, geschweige denn was er dort tun soll. Deshalb ist es im ersten Schritt sinnvoll sich in den Nutzer hineinzudenken und mit einem Framework zu analysieren, ob die bestehende mobile Webseite auch die Bedürfnisse der Nutzer erfüllt.

Das 7-Ebenen Modell

Um den inneren Dialog des Nutzers zu verstehen und widerspiegeln zu können, eignet sich das 7-Ebenen Modell von André Morys. Es hilft bei der Beantwortung folgender Fragen:

  • Welche Fragen hat die Zielgruppe im mobilen Umfeld?
  • Welchen Ängste haben die Besucher?
  • Welche Bedürfnisse sollten bedient werden?
  • Wie schafft man es, der Zielgruppe das Gefühl zu geben, dass die Webseite das richtige Angebot hat und man ihr vertrauen kann?
mobile user experience_2

Das 7-Ebenen Modell zur Analyse von (mobilen) Webseiten  http://static.konversionskraft.de/2015/02/7-Ebenen-Modell-konversionsKRAFT.png

Ebene 1 – Relevanz

Die Relevanz von mobilen Suchanfragen kann auf unterschiedliche Weise erreicht werden. Ist man unterwegs, muss es meist schnell und effizient ablaufen. Es gilt Probleme lösen zu können – Jetzt, sofort! Relevanz kann daher auf unterschiedlichen Ebenen erreicht werden: Zeitlich, räumlich und problemlösend. Welche Frage beschäftigt den Nutzer gerade im Moment? Welche Suchanfrage hilft im dabei?

Anwendungsbeispiel:

Ich bin mit meinem Auto unterwegs. Bei 140 km/h platzt mir der Reifen auf der Autobahn und wie es der Zufall will, fehlt mir der passende Schraubensatz. „Die gelben Engel lassen mich nicht im Stich“ denke ich. Weit und breit keine Notrufsäule. Schnell zum Smartphone greifen und „ADAC Pannenhilfe“ googeln.

Auf der Seite des ADAC sehe ich zwar, dass die Landingpage die Richtige ist, aber was soll ich denn tun? Jetzt jemanden anrufen, dass wäre super. Keine Click-to-Call Schaltfläche weit und breit. Auch keine Telefonnummer. Obwohl ich im ersten Moment dachte, ich sei falsch, finde ich weiter unten doch noch eine Möglichkeit zur Kontaktaufnahme.

01_Relevanz_ADAC

Call-to-Action nicht im sichtbaren Bereich

Die mobile Seite kann mich bei weiteren Fragen aktiv unterstützten. Wenn ich nicht weiß, wo genau der Unfall geschehen ist, kann mir die Webseite bspw. bei der Ortung helfen. Das wäre jetzt genau die richtige Funktion, um dem Pannenhelfer mitzuteilen, wo er mich findet.

Ebene 2 – Vertrauen

Man gelangt auf eine Webseite, mit einem unschlagbar gutem Produktpreis oder einem sehr guten Angebot. Doch der Preis alleine sagt nocht nichts darüber aus, ob der Anbieter auch vertrauenswürdig ist. Es braucht also externe Reize (Vertrauenssignale) die zeigen, dass man dem Anbieter vertrauen kann. Starke Marken haben sich einen gewissen Grad an Bekanntheit aufgebaut. Unbekannte Marken oder Anbieter müssen hier deutlich mehr Überzeugungsarbeit leisten durch Verwenden folgender Signale:

  • Gütesiegel
  • TÜV Abzeichen
  • Testberichte
  • etc.

Nicht zuletzt prägt das Design der mobilen Seite den ersten Eindruck und schafft damit Vertrauen. Das Design sollte also immer professionell wirken.

Anwendungsbeispiel:

Auch der Suche nach einer passenden Bank für eine Kontoeröffnung lande ich bei der Targo Bank. Auch wenn dort das Signal „Deutschlands Beste Bank“ steht, ist es nicht ohne einen gewissen Aufwand möglich, mich auf der nicht mobil optimierten Seite zu informieren.

02_Vertrauen_targo-nomobile

Keine mobile Landingpage bei der Targo Bank

Nächster Kandidat – ING DiBa. Hier sehe ich auf den ersten Blick die Vorteile, welche ich bei einer Kontoeröffnung habe. Auch das Design ist ansprechend und wirkt, für eine Bank passend, klar und strukturiert. Am Ende der Seite zeigt mir die Bank auch eine Auszeichung, die mein Vertrauen stärkt.

02_Vertrauen_IngDiBa_1

Die ersten Werteversprechen und Vorteile überzeugen

02_Vertrauen_IngDiBa_2

Auszeichnungen, Gütesiegel und Testurteile schaffen Vertrauen

 Ebene 3 – Orientierung

Wie findet sich der Nutzer in dem Onlineshop auf einem kleinen Bildschirm zurecht? Die meisten Webseiten wurden für einen breiten Desktop-Bildschirm entworfen. Bei einem breiten Produktsortiment will die Navigation durch das gesamte Portfolio wohl überlegt sein. Orientierung auf einem kleinem Endgerät zu schaffen, ist also nicht trivial.

Anwendungsbeispiel:

Ein geführter Einstieg in die passende Zielkategorie sollte nach Möglichkeit nicht mit einem Seitenwechsel verbunden sein, sondern einfach und effizient über die Navigation funktionieren.

Decathlon schafft es, eine einfache Navigation mit Icons zu verwenden, welche den Nutzer gezielt nach seinem Bedürfnis abfragt und in die passende Zielkategorie leitet.

03_Orientierung_Decathlon_Menu

Einfache und effiziente Menüführung bei Decathlon

Lande ich allerdings durch eine Suchanfrage auf einem Online-Shop und sehe, dass dieser 486 Paar Schuhe für mich bereit hält, muss ich dich Möglichkeit haben diese Menge an Schuhen auf meine Bedürfnisse einzuschränken.

03_Orientierung_Mirapodo

Das Sortiment wird durch Filter eingeschränkt und lässt sich effizienter durchsuchen

Ebene 4 – Stimulanz

Wie gelingt es, die Zielgruppe zu aktivieren und die Produkte oder Dienstleistungen einem Neukunden schmackhaft zu machen? So schmackhaft, dass er nicht widerstehen kann, das Angebot anzunehmen? Stimulanz ist nicht nur den stationären Computern vorbehalten, sondern kann auch auf Smartphones erreicht werden.

Wichtig: Gegebene Werteversprechen müssen eingehalten werden!

Modomoto bietet eine kostenlose Stilberatung für Männer an, wählt die passende Mode aus und versendet diese kostenlos. Ein verlockendes Angebot. Es zeigt mir das es einfach geht, kostenlos ist und ich kein Risiko eingehe. Ich bekomme also viel Service (kostenlos) und spare Zeit, da ich nicht selbst einkaufen gehen muss. Wenn Modomoto einen guten Job macht, gewinnen sie mich eventuell als Kunden.

04_Stimulanz_Modomoto

Auf der mobilen Seite von Modomoto wird der Besucher animiert sofort zu starten

Ebene 5 – Sicherheit

Kurz vor dem Kauf kommt der Moment der Entscheidung: Ist es hier wirklich sicher, wenn ich bestelle? Der Käufer muss ein gutes und sicheres Gefühl haben, dass beim Klick auf den Kaufen-Button alles reibungslos ablaufen wird. Etwaige Fragen oder Unklarheiten gilt es entgegen zu wirken:

  • Wie kann ich den Artikel bei Nichtgefallen zurück senden?
  • Wie kompliziert wird das?
  • Was passiert bei einer Rückgabe?

Anwendungsbeispiel:

Hier arbeitet Fashion ID vorbildlich, um dem Nutzer die Ängste vor der Bestellung zu nehmen. Die dargestellten Vorteile vermitteln das Gefühl, dass ich problemlos bestellen und die Artikel ggf. einfach und kostenfrei wieder zurück senden kann. Die Kauf-Barriere wird also auf ein Minimum reduziert.

05_Sicherheit_FashionID

Im Footer von Fashion ID werden vielfältige Faktoren gezeigt, die für Sicherheit sorgen. Dazu zählen auch Zahlungsarten und vertrauenswürdige Siegel

Ebene 6 – Komfort

Ist die Kaufentscheidung getroffen, soll die Bestellung auch möglichst einfach und komfortabel von statten gehen. Keiner möchte sich mit langen Formularen auf einem Smartphone abmühen müssen.

Anwendungsbeispiel:

Die Beschaffung auf dem Smartphone ist meist impulsgetrieben. Ich möchte also nur diesen einen Kopfhörer kaufen und das bitte möglichst einfach und unkompliziert. Bei Comtech bekomme ich die Möglichkeit dazu, indem ein Quick-Buy über PayPal oder Amazon angeboten wird. Ich werde als Nutzer aktiv bei dem Kauf unterstützt, denn die notwendigen Daten für den Versand liegen bereits PayPal vor. So geht die Bezahlung und der Versand schnell von der Hand.

06_Komfort_Comtech-QuickBuy

Ein Schnellkauf über PayPal oder Amazon sorgen für Komfort, da der Bestellprozess entfällt

Ebene 7 – Bewertung

Nach der Bestellung wird bewertet, wie das Einkaufserlebnis war. Ging es denn so einfach und unkompliziert, dass ich dort wieder bestellen werde? Es dürfen keine Zweifel bleiben, ob die Bestellung ausgelöst wurde und das Produkt bei mir ankommt. Eine Informations-Mail sollte natürlich auch für mein Smartphone optimiert sein.

Um weitere Produktbewertungen zu generieren bietet Amazon in seinen After-Sales-Mails die einfache Möglichkeit, den Artikel in der E-Mail schnell und einfach zu bewerten.

07_Bewertung_Amazon

Aktives Einfordern von Bewertungen bei Amazon

Kurz zusammengefasst

Das 7-Ebenen Modell hilft als Framework dabei, die Motive und Erwartungen von Nutzern zu hinterfragen und aufzudecken. Bei der Planung des Inhaltes muss darauf geachtet werden, dass alle Faktoren erfüllt sind. Die kurze Checkliste:

1) Relevanz:
Bin ich hier richtig und hilft mir die Seite dabei, mein Problem in der aktuellen Situation zu lösen?

2) Vertrauen:
Ist der Anbieter vertrauenswürdig? Vertrauen wird durch ein solides Webdesign, einer bekannten Marke oder durch unabhängige Gütesiegel geschaffen.

3) Orientierung:
Schafft es der Nutzer schnell an sein Ziel zu kommen? Gute Filter und eine solide Navigation unterstützen dabei.

4) Stimulanz:
Schafft es der Anbieter, dass ein Angebot für mich unwiderstehlich wird? Bilder und schlagkräftige Argumente sollen die Zielgruppe aktivieren.

5) Sicherheit:
Kann ich bedenkenlos Kaufen? Die Vorteile des Onlineshops können als Einwandbehandlung genutzt werden. Zahlungsarten geben die Sicherheit, dass ich im Kaufprozess auf keine Überraschungen stoße.

6) Komfort:
Wie schwer wird das zu bedienen sein? Besonders auf einem Smartphone sind Formularfelder nicht gerne gesehen. Unterstützen Sie den Nutzer dabei, einfach und mit wenig Aufwand an sein Ziel zu gelangen. Reduzieren Sie dabei die notwendigen Informationen auf ein Minimum.

7) Bewertung:
Nach der Bestellung wird begutachtet, ob der Prozess richtig angestoßen wurde. Bestätigungsmails und Rezensionen gehören zum After-Sales Prozess. Deshalb sollten diese Mails auch auf dem Smartphone lesbar sein. Bleiben Sie in guter Erinnerung bei Ihrem Neukunden.

Aufmacherbild: Silhouette of an old bicycle on square wheels. via Shutterstock / Urheberrecht: NorSob

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -