Archiv für den Autor: Rene Mäkeler

Rene Mäkeler

Herr Mäkeler ist für die Frontend-Umsetzung zuständig. Seine Schwerpunkte reichen von der pixelgenauen Umsetzung über Interaktivität und Animationen bis hin zur Sicherstellung der Cross-Browser-Funktionalität.

share

Zu Besuch bei der Beyond Tellerrand – Tag 0

beyond tellerrand location duesseldorf

// Die Location.

In den vergangenen Tagen haben Alexander und ich an der „Beyond Tellerrand“ Konferenz in Düsseldorf teilgenommen. Die Reise begann für uns jedoch schon einen Tag früher, am Sonntag. Dort standen sowohl die Mozilla Roadshow als auch das Warm-Up zur Konferenz an. Beide fanden in den ästhetisch eingerichteten Büro-Räumen des Sponsors sipgate statt.

verplegung vom kuchen basar

// Lecker.

Nach der Anreise und einer kleinen Stärkung in Form von Kuchen ging es dann auch schon mit dem ersten Talk der Roadshow von Jan-Erik Rediger und dem Titel „WebAssembly for the rest of us“ los. WebAssembly ist ein neues Format für das Web, welches bereits in den Browsern Chrome und Firefox gelandet ist. Das Format selbst ähnelt der Low-Level-Sprache Assembly und kommt in einer kompakten Binärrepräsentation daher.

Die binäre Darstellung der Programme hat 2 bedeutende Folgen: Zum einen kann mit Hilfe eines entsprechenden Compilers Quelltext aus nativen Sprachen wie C und C++ in dieses Format umgewandelt werden. Dies eröffnet die neue Möglichkeit Anwendungen aus diesen Bereichen nun auch im Browser ausführen zu können. Zum anderen kann das Binärformat von WebAssembly wesentlich schneller vom Browser dekodiert werden als beispielsweise JavaScript geparst werden kann.

WebAssembly öffnet somit das Web als Medium für eine ganze Reihe neuer Anwendungsfälle, von live Bild- und Video-Bearbeitungen über CAD-Anwendungen bis hin zu neuen Verschlüsselungsverfahren. Dabei sollte betont werden, dass WebAssembly kein Ersatz für JavaScript ist, sondern stattdessen dieses komplementiert. Native Bibliotheken, welche vorher nicht in einem Web-Kontext verfügbar waren, können nun über entsprechende Schnittstellen im JavaScript verwendet werden.

Nach einer kurzen Pause ging es weiter mit dem zweiten Teil der Roadshow und Ola Gasidlos Talk mit dem Titel „I’m offline, cool! What now?“. Im Fokus der Präsentation stand die Offline-Verfügbarkeit von Web-Anwendungen. Ola weicht dabei von der herkömmlichen Argumentation, die Offline-Unterstützung wäre Teil des Progressive Enhancement, im Zuge dessen eine Web-Anwendung seinen Nutzern immer das beste Nutzungserlebnis bietet, welche das Gerät des entsprechenden Nutzers erlaubt. Stattdessen argumentiert Ola, dass die Offline-Verfügbarkeit das Standard-Verhalten einer Web-Anwendung sein sollte und erst der Zugriff auf das Netzwerk als Teil des Progressive Enhancement dient. Desweiteren wurde eine Reihe interessanter Projekte vorgestellt, welche die Wichtigkeit dieser Thematik, insbesondere in weniger fortgeschrittenen Ländern untermauert.

Obwohl die These von Ola durchaus interessant ist, ist sie doch in mindestens gleichem Maße diskussionswürdig. Denn mit der Einführung der Offline-Funktionalität einer Web-Anwendung geht auch immer ein gewisser Aufwand einher. Insbesondere auf Grund des noch eingeschränkten Supports von Service-Workers und des daraus resultierenden Bedarfs an alternativen Vorgehensweisen, um auch Geräte der iOS-Welt zu unterstützen, sollte dieser Aufwand nicht unterschätzt werden und während des Design-Prozesses kritisch hinterfragt werden, ob dieser im konkreten Fall Sinn macht.

Anschließend gab es Spezialitäten von Grill (superlecker!!!) und das ein oder andere kühle Getränk, welches sipgate den Besuchern zur Verfügung stellte.

verpflegung bei der beyond tellerrand 2017

// Wir wurden gut versorgt.

getränke station duesseldorf beyond tellerrand

// Die Getränke waren auch kalt gestellt.

Nach weiter Stärkung an Buffet und Bar ging es dann in die letzte Runde des Abends. Simon Höher beschrieb in seinem Talk „Human-centric concepts of technology, culture, and society in a global context“ die Herausforderungen, welche mit aktuellen Entwicklungen im Bereich Internet-of-Things und Artificial Intelligence einhergehen. Diese illustrierte er an einer Reihe von Praxis-Beispielen, welche mitunter zu Ungläubigkeit und Kopfschütteln bei den Zuhörern führen konnten. Sie zeigen jedoch, wie wichtig es ist auch als Entwickler Verantwortung für sein Tun zu übernehmen und an manchen Stellen auch einmal kritisch zu hinterfragen, woran wir gerade arbeiten.

Den Abschluss des Abends bildete eine kleine Führung durch die Büro-Räume (danke Anna!) sowie viele illustre Gespräche mit anderen Gästen. Ein wahrlich gelungener Auftakt für die „Beyond Tellerrand“. Eindrücke von den Tagen 1 und 2 folgen…

share

UX im Checkout: Probleme und Lösungen

Im vergangenen November hatte ich die Ehre, an einem Workshop des Smashing Magazine unter der Leitung von Vitaly Friedman teilzunehmen. Neben anderen stellte das Thema „UX im E-Commerce-Checkout“ einen der Hauptblöcke des Workshops dar. Dies war für mich aus dem Grund besonders interessant, da wir erst kurze Zeit vorher mit dem responsiven Relaunch des Checkouts eines unserer Kunden live gegangen sind und vieles daher noch sehr frisch in Erinnerung war. Mit dem dort präsentierten  Wissen und etwas Abstand kann ich mittlerweile sagen, dass wir einige Aspekte damals schon sehr gut umgesetzt haben, aber an anderen Stellen durchaus noch Optimierungspotenzial bestanden hätte.

Aktuellen Studien zufolge liegt die Abbruchrate im Bereich der E-Commerce-Shops bei durchschnittlich 69,23% [1]. Wird diese Zahl bereinigt um den Anteil der Nutzer, welche lediglich durch den Shop browsen, ohne den Checkout-Prozess überhaupt zu initiieren, ergibt sich ein Bild aus verschiedensten Faktoren, die zum Abbruch durch den Kunden führen können. Dazu gehören auch Faktoren, auf die wir als Entwickler wenig bis gar keinen Einfluss haben, beispielsweise die Retouren-Politik (10%) des Shops oder unzureichende Payment-Möglichkeiten (8%). Auf der anderen Seite sind für die Mehrheit der Abbrüche aber Punkte aus dem Bereich User Experience verantwortlich, die wir selbst aktiv mitgestalten können und sollten. Im Folgenden möchte ich deshalb 3 Problemstellungen, die wesentlich größere Auswirkungen auf die Abbruchrate haben, vorstellen und entsprechende Lösungsansätze beschreiben:

Versteckte Kosten

Überraschungen auf der Abrechnung stellen mit 61% den meist genannten Grund für den Abbruch einer Bestellung dar. Diese Problematik beginnt bereits auf den Produktseiten. Werden beispielsweise verschiedene Waren in unterschiedlichen Quantitäten verkauft, sollte darauf geachtet werden, dass sowohl der Einzelpreis als auch der Gesamtpreis der derzeitigen Auswahl für den Kunden sichtbar ist. Um zusätzliche Verwirrung zu vermeiden und den Vergleich von Produkten und Preisen zu erleichtern, bietet es sich insbesondere für Shops an, die eine Vielzahl von Ländern bedienen, den Kunden beim erstmaligen Besuch der Webseite nach seinem Herkunftsland und/oder seiner bevorzugten Währung zu fragen.

Dem Kunden sollten gleichzeitig möglichst früh und detailliert sämtliche Kostenpunkte (Produkte, Versand, Zölle, …) präsentiert werden. Er sollte sich nicht erst durch einen mehrstufigen Checkout-Prozess klicken müssen, um diese Informationen zu erhalten, denn auch dies verursacht einen erheblichen Teil von Bestellabbrüchen (24%). Sind einige dieser Variablen nicht bekannt, so sollten diese dennoch mit einem geschätzten Wert gelistet und die Tatsache, dass es sich dabei um eine Schätzung handelt, erkenntlich gemacht werden. Dadurch ist der Kunde zumindest über den Kostenpunkt informiert.

Um diesem Problem zu begegnen, eignet sich zum Beispiel der Einsatz eines Drop-Down-Carts. Dies ermöglicht eine frühzeitige und schnell erreichbare Vorschau der Kosten und erleichtert damit seine weitere Entscheidungsfindung.

Beispiel: Drop-Down-Basket

Ein weiterer häufiger Fehler ist das Nichtvorhandensein von Versandzeit oder -kosten im Rahmen der Auswahl der verschiedenen Versandoptionen. Beide sollten immer ersichtlich sein, um dem Nutzer eine informierte Entscheidung frei von jeglichen Zweifeln und Unklarheiten zu ermöglichen:

Das Vorhandensein sämtlicher Informationen erleichtert die Entscheidungsfindung

Erzwungene Account-Erstellung

Schon deutlich abgeschlagen aber mit 35% immer noch einer der Hauptfaktoren für den Abbruch eines Bestellvorgangs ist die forcierte Erstellung eines Accounts. Dies wird von vielen Kunden als unnötiger Aufwand ohne ersichtlichen Mehrwert wahrgenommen. Getreu dem Motto „nur ein weiterer Account in meiner eh schon viel zu langen Liste“. Und da wir hier unter uns sind: Zumindest mir passiert es oft genug, dass ich für einen solchen aus Zwang erstellten Account Monate oder Jahre später sowieso die Passwort-Recovery benutzen muss, um mich überhaupt wieder einloggen zu können.

Um dieser Gefahr entgegenzuwirken sollte der Checkout als Gast als Standardvariante gesetzt sein. Der geeignete Zeitpunkt zur Account-Erstellung befindet sich stattdessen ganz am anderen Ende der Bestellung. So kann beispielsweise dem Kunden nach Bestellabschluss eine Zusammenfassung seiner Bestellung sowie ein freundlicher Hinweis im Stile von „Möchten Sie noch einen Account erstellen? Tragen Sie einfach hier ihr Passwort ein.“ angeboten werden. Idealerweise wird diese Aufforderungen noch mit einem Anreiz oder Bonus (Incentive) unterstrichen. Dies ermöglicht dem Kunden eine schmerzfreie Bestellung und bietet ihm gleichzeitig die Option, mit einem Klick im Anschluss einen Account anzulegen.

Ein damit zusammenhängender Punkt ist die E-Mail-Verifizierung. Auch hier möchte ich wieder ehrlich sein: Ich copy-paste, doh! Aber Studien zeigen, ich bin in guter Gesellschaft, denn 60% aller Nutzer eines Shops tuen selbiges im Verlauf des Checkout-Prozesses. Dies trifft vor allem für mobile Geräte zu, auf denen die Eingabe von E-Mail-Adressen traditionell schwerer fällt. Die erzwungene Verifikation stellt somit nur eine weitere Fehlerquelle und damit potenziellen Frust dar. Ein besserer Ansatz wäre die Verifizierung zu entfernen, die E-Mail-Adresse inline zu validieren und abschließend im Zuge der Bestellzusammenfassung den Nutzer noch einmal seine E-Mail-Adresse visuell verifizieren zu lassen und ihm dort die Möglichkeit zur Korrektur zu geben.

Komplizierter und langer Checkout-Prozess

Einer aktuellen Studie von Baymard [2] zufolge umfasst der durchschnittliche Checkout-Prozess eines E-Commerce-Shops 5,42 Steps bis zum Bestellabschluss. Des Weiteren enthält der durchschnittliche Checkout 23,48 Formular-Elemente und 14,88 Formular-(Text)Felder. Diese Zahlen sind dahingehend von Bedeutung, dass 27% der Nutzer einen Bestellvorgang abbrechen, weil der Checkout zu lang und/oder kompliziert gestaltet ist.

Die durchschnittliche Zahl der Schritte im Checkout-Prozess ist in den letzten Jahren konstant gestiegen [2]

Die Studie zeigt gleichzeitig, dass die Anzahl der Formularelemente für die allgemeine User Experience während des Checkout-Prozesses wichtiger ist als die Gesamtzahl der Checkout-Steps. Dies liegt darin begründet, dass eine hohe Anzahl von (initial sichtbaren) Formular-Elementen den Kunden eingeschüchtert oder gar überwältigt zurücklassen kann. Gleichzeitig zeigen aber Usability-Tests, dass eine Vielzahl der Seiten diese Anzahl problemlos um 20-60% reduzieren könnte.

Die drei folgenden Techniken eignen sich zur Reduzierung der Form-Elemente ohne dabei die Usability negativ zu beeinflussen:

  1. Ausblenden optionaler Felder:
    Die Angabe zusätzlicher Adressinformationen oder eines Firmennamens ist nur für einen geringen Teil der Kunden relevant. In diesem Fall bietet sich die Darstellung innerhalb eines zusammengeklappten Elements an, das bei Bedarf ausgeklappt werden kann.

    Optionale Felder sollten initial ausgeblendet werden [2]

  2. Felder für „vollständige Namen“ 
    Das omnipräsente Muster, den eigenen Namen in separate Felder für Vor- und Nachname aufteilen zu müssen, stellt Usability-Tests zufolge eine häufige Fehlerquelle dar, die zwar nicht direkt zum Abbruch des Bestellvorgangs, aber sehr wohl zur Unterbrechung des Eingabeprozesses führt. Die Einführung eines Feldes für den vollständigen Namen geht jedoch mit dem natürlichen Verständnis des eigenen Namens einher. Des Weiteren ist diese Variante flexibler in Hinsicht auf eventuelle zweite Vornamen oder Titel und bietet daher Potenzial für weitere Feldeinsparungen.

    Amazon verzichtet auf getrennte Felder für Vor- und Nachname

  3. Rechnungsadresse als Lieferadresse:
    Für durchschnittlichen Customer-to-Business-Kunden entspricht die Lieferadresse meist der Rechnungsadresse. In diesem Fall sollte dies auch initial so gesetzt sein, wodurch ein kompletter Satz von Adressfeldern ausgeblendet werden kann. Dies entspricht in einem durchschnittlichen Checkout 37% der Gesamtzahl aller Formular-Felder. Mit dem Entfernen dieser Option können diese wieder eingeblendet und dem Kunden zur Bearbeitung bereitgestellt werden.

    Die Rechnungsadresse sollte standardmäßig als Lieferadresse gesetzt sein, weitere Felder werden erst bei Bedarf angezeigt

Für mobile Geräte sollte zudem darauf geachtet werden, dass der Kontext der Eingabefelder (z.B. Registrierung vs. Gast) sowie zugehörige Label immer vollständig sichtbar sind und die Inputs eine adäquate Länge (z.B. 30 Zeichen für E-Mail- und Adress-Felder) haben. Mit dem Setzen korrekter Input-Types kann die Eingabe für mobile Nutzer zusätzlich vereinfacht werden.

Das sind sie also, die drei größten Pain-Points im Bereich des E-Commerce-Checkouts. Natürlich gibt es noch weitere und auch zu den oben genannten lässt sich noch viel mehr schreiben. Aber das soll es soweit erst einmal gewesen sein.

Offensichtlich ist es nicht immer möglich, alle Punkte adäquat umzusetzen. Sei es bedingt durch die jeweilige Technologie hinter dem Shop oder weil Abteilung XYZ mal wieder mehr Daten vom Kunden haben will. Doch auch in diesen Fälle sollte man, im Interesse der UX der Nutzer und damit auch des langfristigen Erfolgs unserer Kunden, „um jedes einzelne Feld kämpfen“ (Zitat: Vitaly Friedman).

Nichtsdestotrotz hoffe ich, dass jeder, der es bis hierhin geschafft hat, etwas mitnehmen konnte und vielleicht bei der Umsetzung des nächsten Checkouts die Bedeutung dieser Punkte für die Usability und User Experience des Kunden, und damit zwangsweise auch für den Erfolg des Shops, im Hinterkopf hat.

[1] https://baymard.com/lists/cart-abandonment-rate

[2] https://baymard.com/blog/checkout-flow-average-form-fields