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 Bas...
Wo ist eigentlich das Problem?
Die Bedeutung von Warenkorb und Checkout



                                               ...
Wo ist eigentlich das Problem?
Wissen wollen und wissen preisgeben




                                 Ich brauch‘ die   ...
Wo ist eigentlich das Problem?
 Das echte Leben




Flickr.com: Alaskan Dude


 6
Wo ist eigentlich das Problem?
Der Idealfall




                                                             Bestellbestä...
Wo ist eigentlich das Problem?
Die Realität




                                                                          ...
Wo ist eigentlich das Problem?
Das Resultat




9
komplexität
konsistenz
kontext


10
komplexität
konsistenz
kontext


11
Komplexität
Der Kardinalfehler Nr. 1: Forced Registration




                                                            ...
Get rid of half the words
          on each page.

      Then get rid of half of
          what‘s left.
                  ...
Komplexität
Brauchen wir die Daten wirklich?




                                     Wozu wollen die
                    ...
Der „Form Field Test“:

        Ist diese Information
     absolut notwendig, um die
     gegenwärtige Transaktion
       ...
Komplexität
Müssen wir das Kauferlebnis unterbrechen?




                                            Ich will doch nur
  ...
Komplexität
Können wir die Daten auch anderweitig herbekommen?




                                              Och nö. M...
Komplexität
Guidance




              + Pfad zur Fertig-
                stellung zeigen

              + Überflüssige El...
Komplexität
  Mach‘s überdeutlich!




                         Ach … so!



© pierofix @ flickr


  19
Komplexität
Mach‘s überdeutlich!




                       + Klare Headline &
                         Beschreibung

    ...
Komplexität
Keine Überraschungen!




                        + Keine Pop-ups!
                        + Keine plötzlichen...
Komplexität
Erklär es ihnen!




                    Ah, auf der
                   Rückseite …




                      ...
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
                            ...
Komplexität
Smart Defaults




                 + „Smart Defaults“
                   anbieten gegen
                   „P...
Komplexität
Flexiblen Input ermöglichen




                              + Scripte, die
                                T...
Komplexität
 „Detection Devices“




© Cayusa @ flickr


 29
Komplexität
Fehlermeldungen – aber in gut.




                                 + Sprechen Sie
                           ...
Komplexität
Noch besser: Inline Validation




                                 + Richtiges Format,
                      ...
Komplexität
„Fehler“ zu Chancen machen




                             + 0 Results Pages
                             + „...
Komplexität
„Forgiving Software“




                       + Modale „Sind Sie
                         sicher?“-Fenster
 ...
komplexität
konsistenz
kontext


34
Konsistenz
 “Design for Uniformity”




                           + Klare „Scan Line“
                           + Visuel...
Konsistenz
Konsistente Kommunikation




                            + Primäre und
                              sekundäre...
Context over consistency.

                        – 37signals




37
komplexität
konsistenz
kontext


38
Kontext
In welchem Umfeld steht das Formular?




                                        + Users
                        ...
Kontext
Wie Erfahren sind unsere Nutzer?




                                   + Newbies schnell
                        ...
Kontext
Inputs: Welche wofür?




                        + neuartig vs.
                           bekannt

             ...
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...
Vielen Dank.




Bassier, Bergmann & Kindler
Digital Sales and Brand Specialists GmbH


Milastr. 2                        ...
Alle Angaben basieren auf dem derzeitigen Kenntnisstand. Änderungen vorbehalten.
 Dieses Dokument der Bassier, Bergmann & ...
Nächste SlideShare
Wird geladen in …5
×

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

3.872 Aufrufe

Veröffentlicht am

Vortrag auf der IA Konferenz 2009 in Hamburg; Denis Wildschütz, Oliver Wahler

Oft unterschätzt, aber selten wirklich gut: Formulare sind die „heimlichen Helden“ einer Website. Ohne sie läuft nichts. Wir werfen einen Blick auf bewährte Patterns und aktuelle Entwicklungen im Design von Webformularen und zeigen Beispiele für Do’s und Dont’s, die sich leicht auf die eigene Arbeit übertragen lassen.

Veröffentlicht in: Design
0 Kommentare
24 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.872
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
29
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
24
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

  1. 1. IA Konferenz 2009 Don’t make me think about the Warenkorb Best Practices im Design von (eCommerce-)Formularen 1
  2. 2. Das sind wir … Hallo! Denis Wildschütz und Oliver Wahler, Konzepter bei BB&K. 2
  3. 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. 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. 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. 6. Wo ist eigentlich das Problem? Das echte Leben Flickr.com: Alaskan Dude 6
  7. 7. Wo ist eigentlich das Problem? Der Idealfall Bestellbestätigung Warenkorb Produktseite Klick Klick 7
  8. 8. Wo ist eigentlich das Problem? Die Realität Bestellbestätigung Check-Out Warenkorb Produktseite Einge- ben Klick Klick 8
  9. 9. Wo ist eigentlich das Problem? Das Resultat 9
  10. 10. komplexität konsistenz kontext 10
  11. 11. komplexität konsistenz kontext 11
  12. 12. Komplexität Der Kardinalfehler Nr. 1: Forced Registration Entfernen. $ 300.000.000 verdienen. Glücklich sein. 12
  13. 13. Get rid of half the words on each page. Then get rid of half of what‘s left. – Steve Krug 13
  14. 14. Komplexität Brauchen wir die Daten wirklich? Wozu wollen die meinen Geburtstag wissen? Und was ist eigentlich ein URL? ? 14
  15. 15. Der „Form Field Test“: Ist diese Information absolut notwendig, um die gegenwärtige Transaktion abzuschließen? 15
  16. 16. Komplexität Müssen wir das Kauferlebnis unterbrechen? Ich will doch nur mal schauen. ? 16
  17. 17. Komplexität Können wir die Daten auch anderweitig herbekommen? Och nö. Muss ich das wirklich eintippen? ? 17
  18. 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. 19. Komplexität Mach‘s überdeutlich! Ach … so! © pierofix @ flickr 19
  20. 20. Komplexität Mach‘s überdeutlich! + Klare Headline & Beschreibung + Labels so kurz wie möglich + Sinnvolle Feldgrößen + Logische Gruppen erstellen 20
  21. 21. Komplexität Keine Überraschungen! + Keine Pop-ups! + Keine plötzlichen Veränderungen im Formularlayout! 21
  22. 22. Komplexität Erklär es ihnen! Ah, auf der Rückseite … ! 22
  23. 23. Komplexität Teste, ob es wirklich einfach zu verstehen ist. 23
  24. 24. „Poka-yoke“ ist dein Freund. 24
  25. 25. Komplexität „Prevention Devices“ © nataliej @ flickr 25
  26. 26. Komplexität Fehler gar nicht erst zulassen + Doppelklick abfangen + Submit-Button inaktiv schalten, solange Daten fehlen + Entscheidungen auf Submit-Buttons legen 26
  27. 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. 28. Komplexität Flexiblen Input ermöglichen + Scripte, die Telefonnummern und URLs umwandeln + Intelligente Suche 28
  29. 29. Komplexität „Detection Devices“ © Cayusa @ flickr 29
  30. 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. 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. 32. Komplexität „Fehler“ zu Chancen machen + 0 Results Pages + „Get Started“- Screens + Korrekturvor- schläge von Such- maschinen 32
  33. 33. Komplexität „Forgiving Software“ + Modale „Sind Sie sicher?“-Fenster vermeiden + Stattdessen Undo- Funktion anbieten + Daten aufheben, Versionshistorie speichern 33
  34. 34. komplexität konsistenz kontext 34
  35. 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. 36. Konsistenz Konsistente Kommunikation + Primäre und sekundäre Aktionen + Fehler- und Erfolgsmeldungen + Hilfe 36
  37. 37. Context over consistency. – 37signals 37
  38. 38. komplexität konsistenz kontext 38
  39. 39. Kontext In welchem Umfeld steht das Formular? + Users + Business + Application 39
  40. 40. Kontext Wie Erfahren sind unsere Nutzer? + Newbies schnell aufschlauen und Fehler korrigieren + Intermediates unterstützen + Experten Hilfe anbieten 40
  41. 41. Kontext Inputs: Welche wofür? + neuartig vs. bekannt + häufig vs. selten genutzt + Effizienz vs. Fehlertoleranz + Mainstream vs. Corner Case 41
  42. 42. Kontext Flexibilität vs. Klarheit 42
  43. 43. was wird aus dem formular? 43
  44. 44. Ausblick Das verschwindende Formular 44
  45. 45. Ausblick Das verschwindende Formular 45
  46. 46. Ausblick Single Sign-On 46
  47. 47. Ausblick Gradual Engagement 47
  48. 48. Literatur 48
  49. 49. Literatur Lesen Sie das: Luke Wroblewski: Robert Hoekman: Caroline Jarrett, Gerry Gaffney: Web Form Design Designing The Obvious Forms That Work 49
  50. 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. 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

×