SlideShare una empresa de Scribd logo
1 de 51
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 Bassier,
                               die geschäftsführenden Gesellschafter
                               und Gründer von BB&K.




3
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
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
Wo ist eigentlich das Problem?
 Das echte Leben




Flickr.com: Alaskan Dude


 6
Wo ist eigentlich das Problem?
Der Idealfall




                                                             Bestellbestätigung




                                         Warenkorb




          Produktseite

                                                     Klick



                                 Klick




7
Wo ist eigentlich das Problem?
Die Realität




                                                                                  Bestellbestätigung


                                                             Check-Out


                                         Warenkorb


          Produktseite
                                                                         Einge-
                                                                          ben

                                                     Klick



                                 Klick




8
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




                                                              Entfernen.




                                                $ 300.000.000 verdienen.




                                                          Glücklich sein.
12
Get rid of half the words
          on each page.

      Then get rid of half of
          what‘s left.
                        – Steve Krug




13
Komplexität
Brauchen wir die Daten wirklich?




                                     Wozu wollen die
                                   meinen Geburtstag
                                   wissen? Und was ist
                                   eigentlich ein URL?


                                                         ?




14
Der „Form Field Test“:

        Ist diese Information
     absolut notwendig, um die
     gegenwärtige Transaktion
           abzuschließen?




15
Komplexität
Müssen wir das Kauferlebnis unterbrechen?




                                            Ich will doch nur
                                              mal schauen.




                                                                ?




16
Komplexität
Können wir die Daten auch anderweitig herbekommen?




                                              Och nö. Muss ich
                                                das wirklich
                                                 eintippen?



                                                                 ?




17
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
Komplexität
  Mach‘s überdeutlich!




                         Ach … so!



© pierofix @ flickr


  19
Komplexität
Mach‘s überdeutlich!




                       + Klare Headline &
                         Beschreibung

                       + Labels so kurz wie
                         möglich

                       + Sinnvolle
                         Feldgrößen

                       + Logische Gruppen
                         erstellen




20
Komplexität
Keine Überraschungen!




                        + Keine Pop-ups!
                        + Keine plötzlichen
                          Veränderungen im
                          Formularlayout!




21
Komplexität
Erklär es ihnen!




                    Ah, auf der
                   Rückseite …




                                  !




22
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
                                   abfangen

                                 + Submit-Button
                                   inaktiv schalten,
                                   solange Daten
                                   fehlen

                                 + Entscheidungen
                                   auf Submit-Buttons
                                   legen




26
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
Komplexität
Flexiblen Input ermöglichen




                              + Scripte, die
                                Telefonnummern
                                und URLs
                                umwandeln

                              + Intelligente Suche




28
Komplexität
 „Detection Devices“




© Cayusa @ flickr


 29
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
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
Komplexität
„Fehler“ zu Chancen machen




                             + 0 Results Pages
                             + „Get Started“-
                               Screens

                             + Korrekturvor-
                               schläge von Such-
                               maschinen




32
Komplexität
„Forgiving Software“




                       + Modale „Sind Sie
                         sicher?“-Fenster
                         vermeiden

                       + Stattdessen Undo-
                         Funktion anbieten

                       + Daten aufheben,
                         Versionshistorie
                         speichern




33
komplexität
konsistenz
kontext


34
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
Konsistenz
Konsistente Kommunikation




                            + Primäre und
                              sekundäre
                              Aktionen

                            + Fehler- und
                              Erfolgsmeldungen

                            + Hilfe




36
Context over consistency.

                        – 37signals




37
komplexität
konsistenz
kontext


38
Kontext
In welchem Umfeld steht das Formular?




                                        + Users
                                        + Business
                                        + Application




39
Kontext
Wie Erfahren sind unsere Nutzer?




                                   + Newbies schnell
                                     aufschlauen und
                                     Fehler korrigieren

                                   + Intermediates
                                     unterstützen

                                   + Experten Hilfe
                                     anbieten




40
Kontext
Inputs: Welche wofür?




                        + neuartig vs.
                           bekannt

                        + häufig vs. selten
                           genutzt

                        + Effizienz vs.
                           Fehlertoleranz

                        + Mainstream vs.
                           Corner Case




41
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    Designing The Obvious   Forms That Work



49
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
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

Más contenido relacionado

Destacado

Practica 6 azaelmoreno
Practica 6 azaelmorenoPractica 6 azaelmoreno
Practica 6 azaelmorenoazaelmoreno24
 
Protocolo de calidad en los nuevos exámenes prácticos.
Protocolo de calidad en los nuevos exámenes prácticos.Protocolo de calidad en los nuevos exámenes prácticos.
Protocolo de calidad en los nuevos exámenes prácticos.Autoescuela Aguilar
 
Declaración universal ddhh
Declaración universal ddhhDeclaración universal ddhh
Declaración universal ddhhignacia2545
 
Qué es un proyecto educativo
Qué es un proyecto educativoQué es un proyecto educativo
Qué es un proyecto educativocatheguzb
 
¿Que son los nuevos medios...
¿Que son los nuevos medios...¿Que son los nuevos medios...
¿Que son los nuevos medios...mi_re_ia
 
NGO-Meter: Ergebnisse für das Gesamtjahr 2012
NGO-Meter: Ergebnisse für das Gesamtjahr 2012NGO-Meter: Ergebnisse für das Gesamtjahr 2012
NGO-Meter: Ergebnisse für das Gesamtjahr 2012betterplace lab
 
Adobe photoshop práctica
Adobe photoshop prácticaAdobe photoshop práctica
Adobe photoshop prácticahiker1212
 
Comp aplicada ii trabajo n° 1
Comp aplicada ii trabajo n° 1Comp aplicada ii trabajo n° 1
Comp aplicada ii trabajo n° 1LuzLunaBustamante
 
Virus informático y seguridad informática
Virus informático y seguridad informáticaVirus informático y seguridad informática
Virus informático y seguridad informáticaSebastián Pérez
 
Qué es un proyecto educativo
Qué es un proyecto educativoQué es un proyecto educativo
Qué es un proyecto educativocatheguzb
 
Diálogos de saberes en puerto berrio. septiembre 25 de 2012.
Diálogos de saberes en puerto berrio. septiembre 25 de 2012.Diálogos de saberes en puerto berrio. septiembre 25 de 2012.
Diálogos de saberes en puerto berrio. septiembre 25 de 2012.Proyectotutoriasudea
 
Ley de fomento_industrial
Ley de fomento_industrialLey de fomento_industrial
Ley de fomento_industrialdiegodavid70092
 

Destacado (20)

Practica 6 azaelmoreno
Practica 6 azaelmorenoPractica 6 azaelmoreno
Practica 6 azaelmoreno
 
Protocolo de calidad en los nuevos exámenes prácticos.
Protocolo de calidad en los nuevos exámenes prácticos.Protocolo de calidad en los nuevos exámenes prácticos.
Protocolo de calidad en los nuevos exámenes prácticos.
 
57 dinamicas de juego de UNICEF
57 dinamicas de juego de UNICEF57 dinamicas de juego de UNICEF
57 dinamicas de juego de UNICEF
 
Declaración universal ddhh
Declaración universal ddhhDeclaración universal ddhh
Declaración universal ddhh
 
Qué es un proyecto educativo
Qué es un proyecto educativoQué es un proyecto educativo
Qué es un proyecto educativo
 
¿Que son los nuevos medios...
¿Que son los nuevos medios...¿Que son los nuevos medios...
¿Que son los nuevos medios...
 
2. promotores
2.  promotores2.  promotores
2. promotores
 
Biologuia
BiologuiaBiologuia
Biologuia
 
NGO-Meter: Ergebnisse für das Gesamtjahr 2012
NGO-Meter: Ergebnisse für das Gesamtjahr 2012NGO-Meter: Ergebnisse für das Gesamtjahr 2012
NGO-Meter: Ergebnisse für das Gesamtjahr 2012
 
Adobe photoshop práctica
Adobe photoshop prácticaAdobe photoshop práctica
Adobe photoshop práctica
 
Estudio sobre epoc y atencion primaria
Estudio sobre epoc y atencion primariaEstudio sobre epoc y atencion primaria
Estudio sobre epoc y atencion primaria
 
Comp aplicada ii trabajo n° 1
Comp aplicada ii trabajo n° 1Comp aplicada ii trabajo n° 1
Comp aplicada ii trabajo n° 1
 
Matematicas y educacion indigena i
Matematicas y educacion indigena iMatematicas y educacion indigena i
Matematicas y educacion indigena i
 
Diapositiva tecno max (1)
Diapositiva tecno max (1)Diapositiva tecno max (1)
Diapositiva tecno max (1)
 
Virus informático y seguridad informática
Virus informático y seguridad informáticaVirus informático y seguridad informática
Virus informático y seguridad informática
 
Qué es un proyecto educativo
Qué es un proyecto educativoQué es un proyecto educativo
Qué es un proyecto educativo
 
Diálogos de saberes en puerto berrio. septiembre 25 de 2012.
Diálogos de saberes en puerto berrio. septiembre 25 de 2012.Diálogos de saberes en puerto berrio. septiembre 25 de 2012.
Diálogos de saberes en puerto berrio. septiembre 25 de 2012.
 
Ley de fomento_industrial
Ley de fomento_industrialLey de fomento_industrial
Ley de fomento_industrial
 
01 CATÁLOGO DE BOLÍGRAFOS
01 CATÁLOGO DE BOLÍGRAFOS01 CATÁLOGO DE BOLÍGRAFOS
01 CATÁLOGO DE BOLÍGRAFOS
 
Labmetrics april 14
Labmetrics april 14Labmetrics april 14
Labmetrics april 14
 

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