Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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 & ...
Prochain SlideShare
Chargement dans…5
×

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

4 342 vues

Publié le

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.

Publié dans : Design
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • (Unlimited)....ACCESS WEBSITE Over for All Ebooks ................ accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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

×