Your SlideShare is downloading. ×
Bassier, Bergmann & Kindler "Dont Make Me Think About The Warenkorb" Best Practices im Design von (eCommerce-)Formularen
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

3,238
views

Published on

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

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.

Published in: Design

0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,238
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
24
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×