Bassier, Bergmann & Kindler "Dont Make Me Think About The Warenkorb" Best Practices im Design von (eCommerce-)Formularen

IA Konferenz 2009 Don’t make me think about the Warenkorb Best Practices im Design von (eCommerce-)Formularen 1

Das sind wir … Hallo! Denis Wildschütz und Oliver Wahler, Konzepter bei BB&K. 2

… und das ist unsere Agentur Bassier, Bergmann & Kindler Thomas Kindler und Michael Bassier, die geschäftsführenden Gesellschafter und Gründer von BB&K. 3

Wo ist eigentlich das Problem? Die Bedeutung von Warenkorb und Checkout 100% Startseite -34% Kategorieseite -24% Produktseite -33% Warenkorb Durchschnittliche Conversion: -6% Checkout 3% -3% 4

Wo ist eigentlich das Problem? Wissen wollen und wissen preisgeben Ich brauch‘ die Ich will das aber Info von dir. lieber für mich behalten. 5

Wo ist eigentlich das Problem? Das echte Leben Flickr.com: Alaskan Dude 6

Wo ist eigentlich das Problem? Der Idealfall Bestellbestätigung Warenkorb Produktseite Klick Klick 7

Wo ist eigentlich das Problem? Die Realität Bestellbestätigung Check-Out Warenkorb Produktseite Einge- ben Klick Klick 8

Wo ist eigentlich das Problem? Das Resultat 9

komplexität konsistenz kontext 10

Komplexität Der Kardinalfehler Nr. 1: Forced Registration Entfernen. $ 300.000.000 verdienen. Glücklich sein. 12

Get rid of half the words on each page. Then get rid of half of what‘s left. – Steve Krug 13

Komplexität Brauchen wir die Daten wirklich? Wozu wollen die meinen Geburtstag wissen? Und was ist eigentlich ein URL? ? 14

Der „Form Field Test“: Ist diese Information absolut notwendig, um die gegenwärtige Transaktion abzuschließen? 15

Komplexität Müssen wir das Kauferlebnis unterbrechen? Ich will doch nur mal schauen. ? 16

Komplexität Können wir die Daten auch anderweitig herbekommen? Och nö. Muss ich das wirklich eintippen? ? 17

Komplexität Guidance + Pfad zur Fertig- stellung zeigen + Überflüssige Ele- mente ausblenden + Bei komplexeren Formularen: vorher sagen, was benö- tigt wird + Lange Formulare speicherbar machen 18

Komplexität Mach‘s überdeutlich! Ach … so! © pierofix @ flickr 19

Komplexität Mach‘s überdeutlich! + Klare Headline & Beschreibung + Labels so kurz wie möglich + Sinnvolle Feldgrößen + Logische Gruppen erstellen 20

Komplexität Keine Überraschungen! + Keine Pop-ups! + Keine plötzlichen Veränderungen im Formularlayout! 21

Komplexität Erklär es ihnen! Ah, auf der Rückseite … ! 22

Komplexität Teste, ob es wirklich einfach zu verstehen ist. 23

„Poka-yoke“ ist dein Freund. 24

Komplexität „Prevention Devices“ © nataliej @ flickr 25

Komplexität Fehler gar nicht erst zulassen + Doppelklick abfangen + Submit-Button inaktiv schalten, solange Daten fehlen + Entscheidungen auf Submit-Buttons legen 26

Komplexität Smart Defaults + „Smart Defaults“ anbieten gegen „Paradox of choice” + Mit „Starterpaket“ befüllen (siehe iGoogle) + noch besser: personalisierte Defaults, basierend auf vorherigen Eingaben 27

Komplexität Flexiblen Input ermöglichen + Scripte, die Telefonnummern und URLs umwandeln + Intelligente Suche 28

Komplexität „Detection Devices“ © Cayusa @ flickr 29

Komplexität Fehlermeldungen – aber in gut. + Sprechen Sie Klartext. Kein Kauderwelsch, bitte. + Fehlermeldungen schreiben, die helfen anstatt zu beleidigen. + Deutliche visuelle Sprache („Double Emphasis“). 30

Komplexität Noch besser: Inline Validation + Richtiges Format, z.B. bei E-Mail- Adressen? + Wie sicher ist mein Passwort? + Username noch verfügbar? + Maximale Zeichenanzahl in Echtzeit anzeigen + Autocomplete, z.B. Google Suggest 31

Komplexität „Fehler“ zu Chancen machen + 0 Results Pages + „Get Started“- Screens + Korrekturvor- schläge von Such- maschinen 32

Komplexität „Forgiving Software“ + Modale „Sind Sie sicher?“-Fenster vermeiden + Stattdessen Undo- Funktion anbieten + Daten aufheben, Versionshistorie speichern 33

Konsistenz “Design for Uniformity” + Klare „Scan Line“ + Visuelle Hierarchie + Starke horizontale Trenner eliminieren + Content/Chrome Ratio + Weißraum + „Irregularity“, um Akzente zu setzen © Rosenfeld Media 35

Konsistenz Konsistente Kommunikation + Primäre und sekundäre Aktionen + Fehler- und Erfolgsmeldungen + Hilfe 36

Context over consistency. – 37signals 37

Kontext In welchem Umfeld steht das Formular? + Users + Business + Application 39

Kontext Wie Erfahren sind unsere Nutzer? + Newbies schnell aufschlauen und Fehler korrigieren + Intermediates unterstützen + Experten Hilfe anbieten 40

Kontext Inputs: Welche wofür? + neuartig vs. bekannt + häufig vs. selten genutzt + Effizienz vs. Fehlertoleranz + Mainstream vs. Corner Case 41

Kontext Flexibilität vs. Klarheit 42

was wird aus dem formular? 43

Ausblick Das verschwindende Formular 44

Ausblick Das verschwindende Formular 45

Ausblick Single Sign-On 46

Ausblick Gradual Engagement 47

Literatur 48

Literatur Lesen Sie das: Luke Wroblewski: Robert Hoekman: Caroline Jarrett, Gerry Gaffney: Web Form Design Designing The Obvious Forms That Work 49

Vielen Dank. Bassier, Bergmann & Kindler Digital Sales and Brand Specialists GmbH Milastr. 2 Rheinlandstr. 11 Essener Str. 5 10437 Berlin 71636 Ludwigsburg 46047 Oberhausen Germany Germany Germany T +49 (0)30 / 47 37 269 - 0 T +49 (0)7141 / 64 386 - 0 T +49 (0)208 / 85 05 89 - 0 F +49 (0)30 / 47 37 269 - 99 F +49 (0)7141 / 64 386 - 66 F +49 (0)208 / 85 05 89 - 9 ▌visit www.bb-k.com 50

Alle Angaben basieren auf dem derzeitigen Kenntnisstand. Änderungen vorbehalten. Dieses Dokument der Bassier, Bergmann & Kindler, Digital Sales and Brand Specialists GmbH ist ausschließlich für den Adressaten bzw. Auftraggeber bestimmt. Es bleibt bis zur einer ausdrücklichen Übertragung von Nutzungsrechten Eigentum der Agentur. Jede Bearbeitung, Verwertung, Vervielfältigung und/oder gewerbsmäßige Verbreitung des Werkes ist nur mit Einverständnis der Agentur zulässig. All content is based on the current state of communication. Subject to change. This document of Bassier, Bergmann & Kindler, Digital Sales and Brand Specialists GmbH is only intended for the client. It belongs to the agency until its explicit transfer of usage rights. Any adaptation, utilization, copy and/or professional spreading has to be approved by the agency. 51

http://www.slideshare.net	22
http://www.soup.io	2
http://try.soup.io	1

Bassier, Bergmann & Kindler "Dont Make Me Think About The Warenkorb" Best Practices im Design von (eCommerce-)Formularen

by Oliver Wahler

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 25

Statistics

Bassier, Bergmann & Kindler "Dont Make Me Think About The Warenkorb" Best Practices im Design von (eCommerce-)Formularen Presentation Transcript