Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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.

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Login to see the comments

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

×