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

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

3. … 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

4. 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

5. 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

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

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

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

9. Wo ist eigentlich das Problem?
Das Resultat
9

10. komplexität
konsistenz
kontext
10

11. komplexität
konsistenz
kontext
11

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

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

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

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

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

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

18. 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

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

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

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

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

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

24. „Poka-yoke“ ist dein Freund.
24

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

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

27. 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

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

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

30. 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

31. 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

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

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

34. komplexität
konsistenz
kontext
34

35. 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

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

37. Context over consistency.
– 37signals
37

38. komplexität
konsistenz
kontext
38

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

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

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

42. Kontext
Flexibilität vs. Klarheit
42

43. was wird
aus dem
formular?
43

44. Ausblick
Das verschwindende Formular
44

45. Ausblick
Das verschwindende Formular
45

46. Ausblick
Single Sign-On
46

47. Ausblick
Gradual Engagement
47

48. Literatur
48

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

50. 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

51. 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