Usability-Best-Practices für die Filterfunktion im Online-Shop

Usability-Best-Practices für die Filterfunktion im Online-Shop

Userlutions Team | Apr 28, 2017 | User-Experience-Tipps

Nutzen Sie beim Onlineshopping auch die Filterfunktion?

Ja? Kein Wunder, schließlich erleichtert Sie uns die Suche nach den passenden Produkten enorm:

Schlichtes weißes Businesshemd im mittleren Preisrahmen in Größe L

Rote Lackschuhe mit kleinem Absatz in Größe 39

13“ Laptop mit 8GB RAM, 2,4 GHz, unter 500€

Doch welche Anforderungen muss ein Filtersystem erfüllen, um die Nutzer beim Shopping ideal zu unterstützen und die Usability zu steigern?

Und wann, wie und wo sollten Filter überhaupt angeboten werden?

Aus unseren RapidUsertests konnten wir einige Best-Practices für gute Filter ableiten. Und wir geben Ihnen Tipps, wie Sie Ihre Filterfunktion auf Nutzerfreundlichkeit testen können.

Warum sollte ich eine Filterfunktion in meinem Online-Shop anbieten?

Filter dienen der Eingrenzung von Produkten. Gerade bei vielen Produkten bieten sie den Nutzern Orientierung, erhöhen die Usability und die Kaufentscheidung wird erleichtert.

Warum Filterfunktion einsetzen? Beispiel Asos

Abb. 1: Filter vereinfachen die Suche nach dem richtigen Produkt enorm. Bei 5.940 Kleidern, wie hier bei Asos sind sie unverzichtbar.

Welche Filter sollte ich in meinem Online-Shop anbieten?

Entscheidungskriterien beachten: Welche Filter Sie anbieten sollten, ist sehr von den Informationen abhängig, die für die Kaufentscheidung benötigt werden. Sie sollten sich bei der Filter-Auswahl an diesen Entscheidungskriterien des Nutzers orientieren. Die essentielle Frage lautet also: Was müssen meine Kunden über das Produkt wissen, um ihre Kaufentscheidung treffen zu können?
Auch innerhalb eines Shops können Produkte völlig unterschiedliche Entscheidungskriterien haben und damit andere Filter erfordern.

Fokus auf nicht-visuelle Eigenschaften: Sie sollten sich dabei vor allem auf Produkteigenschaften konzentrieren, die nicht durch das Produktfoto abgedeckt werden. Bei einem großen Angebot ist es aber sinnvoll, auch nach äußerlichen Eigenschaften, wie der Farbe, filtern zu können – wenn dies für die Kaufentscheidung relevant ist.

Sortierungsmöglichkeiten anbieten: Auch bei einem guten Filtersystem, sollten Sie Ihren Kunden ermöglichen, die gefilterten Ergebnisse nach bestimmten Kriterien zu sortieren (z.B. Preis, Bewertungen). Bei der Auswahl der Sortierungsmöglichkeiten helfen Ihnen auch die Entscheidungskriterien.

Eine kleine Studie zur Filterauswahl im Online-Shop lesen Sie hier: Welche Filter biete ich in einem Online-Shop an? Ein Usability-Insight

Wie finde ich die Entscheidungskriterien meiner Nutzer heraus?

Da die Auswahl der richtigen Filter und Sortierungen elementar für eine hohe Conversion-Rate sein kann, sollten Sie sich nicht auf Einzelmeinungen verlassen.

Wie Ihre Nutzer zu einer Kaufentscheidung kommen, können Sie mit User-Research herausfinden.

In einem Crowd-Usability-Test können Sie sich außerdem absichern, ob Sie sich für die richtigen Filter entschieden haben. Lassen Sie dazu die Tester dazu nach einem Produkt in Ihrem Shop suchen und fragen sie zu Beginn:

Was sind deine Kriterien für das, was du gleich suchst? Welche Informationen brauchst du, um deine Entscheidung zu treffen?

Wie viele Filter sollte ich anbieten?

Auch die nötige Anzahl der Filter ist von Produkt und Angebot abhängig. Hier einige Faustregeln:

  • Bieten Sie die Filter an, die für die meisten Nutzer entscheidend sind. Zu viele Filter können die Suche auch schnell unübersichtlich machen.
  • Je mehr Produkte Sie in einer Kategorie anbieten, desto detaillierter sollte die Filtermöglichkeit sein.
  • Für mehr Übersichtlichkeit: Platzieren Sie die relevantesten Filter (die auf jeden Fall jeder braucht) nach oben.

Falls Sie nur sehr wenige Produkte anbieten, brauchen Sie eventuell keine Filter. In diesem Fall sollten die wichtigsten Entscheidungskriterien aber schon auf der Übersichtsseite sichtbar sein.

Wo sollten die Filter platziert werden?

Die meisten Shops platzieren die Filter auf der linken Seite oder oberhalb der Produktübersicht. So gehen Sie sicher, dass die Filterfunktion nicht übersehen wird.

Vorteile der Platzierung links:

  • Die etablierteste Variante
  • Es ist leichter, mehrere Filter gleichzeitig auszuwählen
  • Die Nutzer müssen nicht jedes Mal wieder ganz nach oben scrollen, um die Filter anzupassen.

 

Warum die Filterfunktion links sein sollte

Abb. 2: Mister Spex platziert die Filter auf der linken Seite, so wie die meisten Onlineshops.

 

Vorteile der Platzierung oben:

  • Sie sind auffälliger platziert, so dass auch ungeübte Filternutzer sie nicht übersehen.
  • Die Reihenfolge der Filter ist nicht so bedeutend, wie auf der linken Seite, da die Filter zum Teil auch nebeneinander platziert werden.

 

Warum die Filterfunktion oben sein sollte

Abb. 3: Zalando platziert die Filter oberhalb der Produktübersicht.

Wie sollte ich die Filterfunktion darstellen?

Je nach Art des Filters haben sich Schieberegler und Checkboxen bewährt. Außerdem wichtig:

Live-Aktualisierungen: In Usability-Tests von Desktop-Seiten haben sich Live-Aktualisierungen als nützlich erwiesen. Wird ein neuer Filter ausgewählt sollte sich die Produktübersicht also bereits aktualisieren, allerdings ohne dass die gesamte Seite neugeladen wird. Diese Best-Practice gilt allerdings nicht für mobile Shops (dazu unten mehr).

Anzahl der Produkte anzeigen: In jedem Fall sollte angezeigt werden, wie viele Produkte sich in einem Filter befinden, z.B. wie viele Produkte es von einer bestimmten Marke gibt. (z.B. Otto)

Kein Ergebnis: Tritt der Fall ein, dass nach einer Filterung keine Ergebnisse mehr angezeigt werden konnten, sollten Sie dem Nutzer einen guten Ausweg anbieten. (z.B. „Wenn Sie [diesen Filter] aufheben, bekommen Sie wieder Ergebnisse.“)

 

Otto zeigt die Produktanzahl des Filters an

Abb. 4: Otto.de zeigt an, wie viele Produkte sich innerhalb eines Filters befinden. Die Anzahl wird bei jeder Filterauswahl aktualisiert.

Welche Besonderheiten gibt es bei mobilen Geräten?

Auf den kleinen Displays von mobilen Geräten gibt es einige Besonderheiten bei der Darstellung von Filtern:

  • Für die Filteransicht sollte die gesamte Größe des Bildschirms genutzt werden. Ein Akkordeon-Menü macht die Ansicht übersichtlich. (Abb. 5)
  • Anders als am Desktop sollte sich die Ansicht NICHT nach jeder Filterauswahl aktualisieren, sonst drohen Orientierungsverlust und Frustration bei langen Ladezeiten. Verwenden Sie stattdessen einen Button „Filter anwenden“, der während der Filterwahl immer sichtbar ist.
  • Vermeiden Sie „Doppeltes Scrollen“. Wenn die gesamte Seite gescrollt werden kann, sollten die Filter also keine eigene unabhängige Scroll-Möglichkeit haben.
    In einem Akkordeon-Menü kann dies verhindert werden, indem Sie alle Optionen eines Filters anzeigen, wenn dieser ausgeklappt wird. Bei sehr vielen Optionen können Sie dann z.B. die 20 meistgenutzten Optionen anzeigen und am Ende der Liste einen „mehr“-Button anbieten, um alle weiteren Optionen anzuzeigen.

Die Filterfunktion im Desktop-Portal von Booking.com

Die Filterfunktion der Booking.com App mit Filter-Anwenden-Button

Abb. 5: Auf der Desktop-Seite aktualisiert Booking.com die Ergebnisse bei jeder Filter-Auswahl. In Ihrer App gibt es hingegen einen „Ergebnisse anzeigen“-Button. Die gefilterten Unterkünfte werden also erst angezeigt, nachdem alle benötigten Filter ausgewählt wurden.

Usability-Tests von Filtern – Best Practices

Auch wenn Sie alle diese Hinweise beachtet haben, sollten sie die Nutzerfreundlichkeit Ihrer Filterfunktion mit Ihrer Zielgruppe testen. Werden die Filter gefunden und genutzt? Bieten Sie wirklich alle notwendigen Filter an? Sind die Filterergebnisse erwartungskonform?

Deshalb hier noch einige Tipps für Usability-Tests der Filterfunktion:

  • Stellen Sie die Aufgaben aus der Perspektive des Nutzern, so dass er sich mit der Produktsuche identifizieren kann:„Suche nach einer Hose, die deinen (Preis-)Vorstellungen entspricht und die du selbst kaufen würdest.“Vermeiden Sie dabei aber Schlüsselwörter wie „filtere“, „grenze ein“, um zu sehen, ob die Filter gefunden und genutzt werden. Nur so können Sie natürliche Nutzerverhalten beobachten.
  • Gehen Sie in einer nachfolgenden Aufgabe oder der Nachbefragung noch einmal auf die Filterfunktion ein:„Hast du die Filterfunktion genutzt? Haben dir noch weitere Filtermöglichkeiten gefehlt?“

Zusammenfassung: Was bei der Filterfunktion im Online-Shop beachtet werden muss

Die Filterfunktion erleichtert es Ihren Kunden, ein Produkt zu finden, das ihren Vorstellungen entspricht. Das müssen Sie für eine gute Usability beachten:

  • Entscheidungskriterien Ihrer Kunden analysieren
  • Filter anhand der wichtigsten Entscheidungskriterien auswählen
  • Relevanteste Filter oben platzieren
  • Filterfunktion links oder oberhalb der Produktübersicht platzieren
  • Auf Desktop: Live-Aktualisierung
  • Auf mobile: „Filter anwenden“-Button
  • Usability-Tests der Filterfunktion durchführen

Weiterlesen: Viele weitere Tipps, wie Sie Ihren Onlineshop optimieren können

Welche Filter bieten Sie in Ihrem Online-Shop an? Haben Sie noch weitere Best-Practices? Schreiben Sie uns einen Kommentar 🙂

Multi-Device-Testing: Die drei Faktoren der Multi-Device-Experience

Multi-Device-Testing: Die drei Faktoren der Multi-Device-Experience

Maria Müller | Nov 15, 2016 | User-Experience-Tipps

Wir leben in einer digitalisierten Welt: 90% unserer Aktivitäten finden auf Bildschirmen statt. Dabei beschränken wir uns schon lange nicht mehr auf ein einziges Gerät. Ganz selbstverständlich wechseln wir vom Laptop zum Smartphone, von dort zum Tablet und wieder zurück. Einen Film am Smart-TV  beginnen und im Zug mit Laptop oder Tablet zu Ende schauen; eine Chat-Unterhaltung unterwegs auf dem Smartphone anfangen und zu Hause am Desktop-PC fortsetzen – ständig haben wir Multi-Device-Experiences, nutzen also den gleichen Dienst auf mehreren Geräten. Aber was macht eine GUTE Multi-Device-Experience aus? Welche Faktoren müssen Sie berücksichtigen, um Ihren Nutzern ein gutes Nutzungserlebnis zu bereiten?

Bei der Optimierung der Multi-Device-Experience müssen drei wichtige Faktoren berücksichtigt werden: Komposition, Kontinuität und Konsistenz. Im Folgenden stelle ich diese drei Faktoren vor und gebe Tipps, wie sie erfolgreich umgesetzt werden können. Beginnen wir also mit dem ersten Faktor – der Komposition.

1. Die Komposition – Welche Funktionen auf welchem Gerät?

Viele Anwendungen, wie beispielsweise Facebook, bieten ihren Nutzern nicht alle Funktionen auf allen Geräten an. Den vollen Funktionsumfang gibt es oft nur in der Desktopansicht. Gibt es auf einem Gerät Features, die es auf anderen nicht gibt, bezeichnet man das als die Komposition. Diese Funktionsverteilung kann ein Segen sein, wenn sie die App verschlankt und auf die sinnvollen Use-Cases reduziert; sobald der Nutzer aber Features vermisst, die er auf anderen Geräten kennt, schmälert das die User Experience. Um letzteres zu vermeiden, sollten Sie herausfinden, welche Funktionen die Nutzer auf allen Geräten brauchen und welche zu entbehren sind. Wie wird die Anwendung im Alltag genutzt, was fehlt den Nutzern, welche Features lassen sie mobil links liegen?

Ein extremes Beispiel der Feature-Komposition zeigt sich bei der Adobe-App Capture: Sie dient als Ergänzung zu diversen Adobe-Desktop-Anwendungen und nutzt die Smartphone-Kamera, um Farbschemas aus der Umgebung zu erfassen. Diese können dann mit einem Klick in die Desktop-Programme importiert werden. Die App ergänzt also die Desktop-Programm mit einem Feature, das sie selbst nicht haben – ideal auf den Nutzungskontext angepasst.

Multi-Device-Experience Faktor Komposition

Komposition: Ihnen muss klar sein, was die Nutzer auf welchem Gerät machen, um zu entscheiden, welche Funktionen wo gebraucht werden.

2. Die Kontinuität – Ein fließender Übergang von Device zu Device

Sie haben zu Hause auf der Couch eine Folge Ihrer Lieblingsserie angefangen, müssen zu einem Termin, aber wollen unbedingt wissen, wie es weitergeht? Kein Problem, schauen Sie einfach auf dem Handy weiter. Diese Synchronisierung zwischen den Geräten wird auch als Kontinuität bezeichnet und ist ein essentieller Bestandteil der Multi-Device-Experience. Viele Streaming-Dienste funktionieren auf diese Weise, zum Beispiel Netflix; aber auch Cloud-Speicherdienste, wie Dropbox, nutzen diese Methode. Einzige Voraussetzung dafür ist, dass der Nutzer auf allen Geräten mit demselben Account eingeloggt ist.

Die Synchronisierung muss allerdings für den Nutzer so flüssig wie möglich ablaufen. Finden Sie heraus, wie Ihre Nutzer von Gerät zu Gerät wechseln, überlegen Sie welche Probleme auftreten könnten und wie Sie darauf reagieren. Beispiel: Dropbox sendet eine Warnung, sobald zwei Personen gleichzeitig dieselbe Datei öffnen und bearbeiten.

Multi-Device-Experience Faktor Kontinuität

Kontinuität: Sie müssen wissen, wie Ihre Nutzer von Gerät zu Gerät wechseln, um ein ideale Synchronisierung zu gewährleisten.

3. Die Konsistenz – Das gleiche „Look and Feel“ auf allen Devices

Wer bis vor kurzem die App Meetup verwendet hat, wird sie nicht unbedingt mit der dazugehörigen Website in Verbindung gebracht haben. In der App fehlte das Logo und es wurde ein anderer Rotton verwendet als in der Desktop-Version.  Dieses Vorgehen verstößt gegen das dritte Prinzip der Multi-Device-Experience: die Konsistenz. Hierbei geht es darum, dass der Dienst sofort wiedererkannt wird – egal auf welchem Gerät er geöffnet wird. Das trägt zum Branding bei und schmälert gleichzeitig den Lernaufwand für die Nutzer. Farbgebung, Buttonbeschriftungen, Gestaltung der Elemente… das alles sollte einheitlich gestaltet sein, damit sich die Nutzer auf allen Geräten sofort zurechtfinden. Wer beispielsweise die Facebook-App öffnet, erkennt sofort den typischen blauen Header von der Desktopversion wieder.

Auch Meetup hat in einem Redesign App und Desktopversion aneinander angeglichen: Das Logo wird nun in verkürzter Version auch in der App dargestellt, die Farbgebung ist einheitlich und außerdem verwendet die Navigation auf allen Geräten die gleichen Icons, die auch überall einheitlich benannt sind.

Multi-Device-Experience Faktor Konsistenz

Konsistenz: Ihre Nutzer müssen die Anwendung auf allen Geräten wiedererkennen und sich ohne vergrößerten Lernaufwand zurechtfinden können.

Mit User Research die geeignete Multi-Device-Strategie finden

Vor allem für die Prinzipien Komposition und Kontinuität sollten Sie durch User Research herausfinden, welche Geräte die Nutzer für welche Aktionen verwenden und wie sie zwischen den Geräten hin und her wechseln. In welcher Situation befinden sie sich? Sind sie konzentriert oder unkonzentriert? Sitzen sie gemütlich auf der Couch oder stehen sie gedrängt in einer vollen U-Bahn? Um diese Multi-Device-Experience eindeutig zu evaluieren, ist ein realistischer Nutzungskontext wichtig. Usability-Tests im Labor können daher eigentlich ausgeschlossen werden. Im Idealfall finden die Tests im Alltag der Nutzer statt, mit ihren eigenen Geräten und in ihrer natürlichen Umgebung.

Für die Evaluation der Multi-Device-Experience gibt es verschiedene Möglichkeiten:

  • Häufig wird die Multi-Device-Experience anhand von reiner Datenanalyse untersucht, beispielsweise mit Google-Analytics und anderen Tools. So lässt sich herausfinden, was wann auf welchem Gerät passiert. Die Gründe und Probleme der Probanden bleiben dabei jedoch unergründet.
  • Mit einem einmaligen Remote-Usability-Test können bereits einige dieser Probleme aufgedeckt werden. Vor allem die Kontinuität und die Konsistenz lassen sich mit dieser Methodik überprüfen.
  • Um auch die Multi-Device-Experience der Funktionsverteilung, sprich die Komposition, zu testen, empfehlen wir Langzeit-Studien. Die Nutzer werden dazu aufgefordert eine Anwendung auf ihren verschiedenen Geräten über einen längeren Zeitraum zu nutzen und ihre Gedanken festzuhalten. Hier zu eignen sich Tagebuchstudien oder Langzeit-Crowd-Usability-Tests.
  • Tipp: Befindet sich die Anwendung noch in der Entwicklung, geben Wettbewerber-Tests Einblicke, wie Nutzer Konkurrenz-Dienste verwenden und was ihnen auf bestimmten Geräten fehlt.

Fazit: Eine gute Multi-Device-Experience setzt Kenntnisse der Nutzerbedürfnisse voraus

Um eine gute Multi-Device-Experience zu bieten müssen Sie Ihre Nutzer auf drei Ebenen kennen: Ihnen muss klar sein, was die Nutzer auf welchem Gerät machen, um zu entscheiden, welche Funktionen wo gebraucht werden (Komposition). Sie müssen wissen, wie Ihre Nutzer von Gerät zu Gerät wechseln, um eine ideale Synchronisierung zu gewährleisten (Kontinuität). Und Ihre Nutzer müssen die Anwendung auf allen Geräten wiedererkennen und sich ohne vergrößerten Lernaufwand zurechtfinden können (Konsistenz). Mit diesem Vorgehen garantieren Sie Ihren Nutzern eine positive User Experience mit Ihrem Produkt in allen verschiedenen Nutzungskontexten.

Wie optimieren Sie die Multi-Device-Experience für Ihre Kunden?

Quellen:

Keine ungetesteten Apps und responsive Webseiten mehr

Keine ungetesteten Apps und responsive Webseiten mehr

Hannes Johne | Nov 4, 2015 | Neue Features

Mit RapidUsertests jetzt einfach Usability-Tests auf Smartphone und Tablet durchführen

Obwohl der mobile Traffic bei einigen Seitenbetreibern 50% aller Seitenaufrufe ausmacht und täglich mehr als 1000 neue Apps veröffentlicht werden, sind wichtige Nutzertests auf Smartphone oder Tablet oftmals aufwendig, zeitintensiv und teuer. Deshalb bieten wir seit heute die Buchung von RapidUsertests für Ihre mobile Webseite, App oder Ihren Prototyp an, um genauso schnell und unkompliziert Nutzervideos zu erhalten wie bei Desktop-Tests. Wie das geht und was sonst am Buchungsprozess verbessert wurde, erfahren Sie in diesem Artikel.

1. Websites in einem Rutsch Cross-Device testen

Sie können beim Buchen nun direkt angeben, auf welcher Plattform die Nutzer Ihre Website testen sollen: Desktop, Smartphone, Tablet oder in Kombination! Bei mobilen Geräten kann zusätzlich das Betriebssystem eingeschränkt werden.

Cross-Device-Tests mit RapidUsertests

Cross-Device-Tests mit RapidUsertests

 

2. iOS und Android-Apps testen – auch Prototypen!

App-Tests für iOS und Android lassen sich nun genauso einfach wie Website-Tests buchen. Ist die App bereits im Store, tragen Sie den Store-Link ein und wieviele Smartphone- und Tablet-Nutzer teilnehmen sollen. Bei unveröffentlichten Android-Apps geben sie stattdessen den Link zur APK-Datei an. Auch iOS-Prototypen können getestet werden: dazu buchen Sie einfach die Anzahl der gewünschten iPhone- oder iPad-Nutzer – wir kontaktieren Sie anschließend, um mit Ihnen gemeinsam die App über eine Testumgebung wie Testflight bereitzustellen.

Testen Sie App-Prototypen mit RapidUsertests

Testen Sie App-Prototypen mit RapidUsertests

3. Zielgruppenalter flexibler eingeben

Das Alter der gewünschten Tester können Sie nun auf 5er-Schritte genau eingrenzen: Intervalle wie 18-25, 30-45 oder auch 50+ sind damit möglich.

Wählen Sie das Alter Ihrer Zielgruppe aus

Wählen Sie das Alter Ihrer Zielgruppe aus

4. Aufgaben für Nutzer lesbarer formatieren

Erhöhen Sie die Testqualität, indem die Aufgaben durch verbesserte Formatierungsmöglichkeiten leichter verstanden werden. Zeigen Sie wichtige Angaben fett an oder formatieren Sie Schrittfolgen als Aufzählung. Auch Links können eingefügt werden.

Machen Sie Ihre Aufgabenstellungen mit Formatierungen verständlicher

Machen Sie Ihre Aufgabenstellungen mit Formatierungen verständlicher

5. Abweichende Rechnungsadresse verwenden

Die Rechnung soll nicht an Sie sondern an eine andere Person oder Abteilung gehen? Kein Problem, geben Sie in Schritt 2 bei der Anmeldung einfach eine abweichende Rechnungsadresse an.

Geben Sie eine abweichende Rechnungsadresse an

Geben Sie eine abweichende Rechnungsadresse an

Jetzt buchen und Ihre mobile Usability verbessern!

Nutzen Sie unsere neue Buchungsseite, um Websites und Apps auf dem Desktop und mobilen Geräten zu testen. Desktoptests kosten weiterhin 49 EUR pro Tester, mobile Nutzer kosten 98 EUR.

Hier finden Sie alle bisherigen Feature-Updates.

Absprungraten mobiler Shops durch optimierten Einstieg verringern

Absprungraten mobiler Shops durch optimierten Einstieg verringern

Userlutions Team | Okt 22, 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!

Mobile UX: So erhöhen Sie die Conversion Ihrer Formulare

Mobile UX: So erhöhen Sie die Conversion Ihrer Formulare

Ilka Marhenke | Okt 1, 2014 | Mobile Usability

Wer kennt das nicht – Lange, unübersichtliche Formulare, die das Buchen oder Bestellen über das Smartphone fast unmöglich machen.
Wenn das bestellte Paket beim Nachbarn landet, weil man bei der Hausnummer verrutscht ist, ist das sicher kein Weltuntergang. Wenn man jedoch aus Versehen einen Flug nach Melbourne, Florida bucht, obwohl man in die australische Metropole wollte, sieht das schon ganz anders aus.

Tippen und Scrollen erschweren die Dateneingabe

Ein RapidUsertest der mobilen Webseite von Lufthansa hat 3 Probleme gezeigt, die typisch sind für Formularen auf mobilen Geräte.

  1. Mühsames Tippen in langen Formularfeldern führt auf mobilen Geräten zu Tippfehlern.
  2. Langes Scrollen erschwert die Dateneingabe sowie die Orientierung auf der Webseite.
  3. Die On-Screen-Tastatur verdeckt den Großteil des Bildschirms und sorgt dafür, dass Nutzer schnell den Überblick verlieren und den Vorgang abbrechen.

Abb. 1: Die fehlende automatische Großschreibung des Anfangsbuchstabens erhöht den Nutzer-Aufwand

Wie kann ich die Formulareingabe übersichtlicher gestalten?

  • Vermeiden Sie unnötige Pflichtfelder und optionale Angaben, um das Formular übersichtlich zu halten
  • Zeigen Sie die Labels direkt in den Eingabefeldern an, um Platz zu sparen (Achten Sie dabei darauf, dass diese erst verschwinden sobald der Nutzer beginnt zu tippen. So behält er immer den Überblick, welche Daten gerade abgefragt werden.)
  • Benutzen Sie Pop-ups und verlinkte Fragezeichen anstelle langer Info-Texte, um unnötiges Scrollen zu vermeiden
  • Geben Sie dem Nutzer anhand einer Fortschrittsanzeige eine bessere Orientierung

Abb. Links: Beispiel einer übersichtlichen mobilen Kalenderansicht. Rechts: Auto-Suggest, welches schon nach Eingabe von zwei Buchstaben sinnvolle Vorschläge zur Auswahl liefert

Wie kann ich unnötiges Tippen und Scrollen vermeiden?

  • Verwenden Sie, wenn möglich, Picker und Drop Downs anstelle von Eingabefeldern
  • Ermöglichen Sie ein Auto-Suggest, welches dem Nutzer konkrete Suchvorschläge bietet sowie automatisches Großschreiben
  • Nutzen Sie für Datumsangaben Kalender, die ausreichend groß für gute Tippbarkeit sind, aber ausreichend klein, um eine Monatsübersicht zu bieten
  • Verwenden Sie eine Kontext-sensitive Tastatur, die automatisch je nach Bedarf auf Zahlen oder Sonderzeichen umschaltet

Um herauszufinden, welche Angaben aus Nutzersicht überflüssig sind und warum Nutzer das Ausfüllen eines mobilen Formulars möglicherweise abbrechen, eignen sich Nutzertest mit der jeweiligen Zielgruppe.

Seite 1 von 41234