coUNDco Die Zukunft der Webformulare

Mai 2011eBusiness KongressDie Zukunft der WebformulareReferenten:Florian Wieser, wieser@coUNDco.chDr. Christopher H. Müller, mueller@ergonomen.chStefano Vannotti, stefano.vannotti@zhdk.ch 1

Ihre ReferentenWer wir sind Beratung Usability DesignFlorian Wieser Dr. Christopher H. Müller Stefano Vannotti Interaction DesignerPartner & Online Stratege CEO Doktorand, Wissenschaftlicher MitarbeitercoUNDco AG Die Ergonomen Usability AG Zürcher Hochschule der Künstewww.xing.com/profile/Florian_Wieser2 https://www.xing.com/profile/Christopher_Mueller2 https://www.xing.com/profile/Stefano_Vannotti 2

FragestellungenWebformulare! Zukunft? Tatsächlich?Können wir auf Webformulare verzichten?Machen Webformulare heute Spass?Lassen sich Formulare auch anders gestalten?Wie erzielen wir bessere Konversionsraten?Gibt es eine Typologie der Webformulare?Welche Technologien und Tools kann man nutzen? 3

In den kommenden 90 Minuten_Einführung in unser konzeptionelles Formularframework _Kontexte. Erlebniskette. Nutzungssituationen. Handlungsmuster. Geschäftsziele._Anwendungsfälle & Formular-Erlebnisketten _Cases. Topologie. Best Practice_Eigene Formular-Erlebniskette entwickeln & Fazit _Publikums Case. Zukunft. Next Steps 4

Google Forms live http://bit.ly/fdH8Ko 5

workFrame http://www.ﬂickr.com/photos/intvgene/370973576/

Kontexte 7

Kontexte Nutzungs-Kontext Nutzer Anbieter Entwickler Geschäftsziel-Kontext Entwicklungs-Kontext 8

Beispiel Klimastiftung Schweiz Nutzer Anbieter Entwicklerxt 9

Beispiel Klimastiftung Schweiz Nutzer Anbieter Entwickler 2 Dimensionen völlig unklar!xt 10

Beispiel Klimastiftung Schweiz vorher zu viel Nutzer Anbieter Entwickler zu spät unnötigxt ungewohnt zu blöd 11

Beispiel Klimastiftung Schweiz Nutzer Anbieter Entwicklerxt 12

Beispiel Klimastiftung Schweiz neu Nutzer opt. Formular = weniger Telefonsupport! Anbieter Entwicklerxt 13

ProblemstellungPerspektiven: Fokus Formular Formular WOW! GRRRR! BOAH! Anbieter Nutzer Entwickler 14

Vor-Phase Formular Nach-PhaseFormular gestalten = Erlebniskette gestalten 15

Erlebniskette: Handlungs-Muster Nutzer Chapter 1: What users do 1. Safe Exploration 2. Instant Gratiﬁcation 3. Satisﬁcing 4. Changes in Midstream 5. Deferred Choices 6. Incremental Construction 7. Habituation Zwischendrin mal etwas verstehen tut gut! 8. Microbreaks und motiviert wieder von Neuem 9. Spatial Memory 10. Prospective Memory 11. Streamlined Repetition Nutzer Mentale Modelle/ Vorstellungen bilden 12. Keyboard Only können ist enorm wichtig: Kennst du die 13. Other People’s Advice Vorstellung, das Bild im Kopf deines Users? --> Also: User fragen 14. Personal Recommendations Buch-Link: http://amzn.to/fXUtJn 16

Erlebniskette: Nutzungsituationen (User-Mission) Nutzer 17

ErlebnisketteUser/Customer Experience (Nutzer-Perspektive) Vor-Phase Formular Nach-Phase Befähigung Selbstvertrauen Zufriedenheit Anbieter Nutzer Entwickler 18

Erlebniskette: Dramaturgie/Storytelling Game Levels Climax DramaturgyAnbieter loss in motivation Web forms Games Frustration through monotony Movie / Novel Time Gestaltung auf einer Zeitachse 19

Erlebniskette: Dramaturgie/StorytellingAnbieter Product Product Product Award Night Launch 1 Presenting the Presenting the nominees 2011 Launch 2 Launch 3 nominees 2012Go 2011 2012 20

Erlebniskette: Geschäftsziele Umsatz steigern Kundenbindung fördernAnbieter Neukunden-Akquise Aufmerksamkeit erregen Personendaten sammeln Geschäftsziele Mehr legale Aufenthalter Bekanntheit erlangen aus dem Publikum? Zusatzversicherung verkaufen Geld sparen Basisversicherung abschliessen Zeit sparen Kunden-Involvierungsgrad erhöhen Absatz steigern 21

Erlebniskette: GestaltungEntwickler Entwickler-Team Stühle Gestaltung «erlebbarer» Qualitäten Go Formulare Häuser Formular ? Nutzer Formular-Artefakt Formular-Erlebnis Produkt Erfahrung materiell immateriell 22

Erlebniskette: GestaltungEntwickler Vergangenheit Zukunft Gute und schlechte Erinnerungen Nutzer Prospektive Wünsche und Ängste weit / nah unmittelbar / längerfristig für Gestaltung von ...Formular-Erfahrungen ...Formular-Emotionen ...Formular-Interaktionen ...Formular-Nachhaltigkeit ...Formular-Innovation 23 technisch

Erlebniskette: GestaltungEntwickler Go Anbieter Nutzer Vorher Nachher Formular-Erlebnisketten Gestaltung Zeit / Spannung = Dramaturgie Geschäftsziele Technologische Möglichkeiten Nutzerbedürfnisse Entwickler Akteure als Designpartner ganzheitlich - iterativ - kollaborativ 24

Formular-Erlebniskette Framework Vor-Phase Formular Nach-Phase Nutzer1 Mission Geschäftsziele Schritte bis zum Formular Urs Mary Peter Andrea 25

Formular-Erlebniskette Framework Kontext Vor-Phase Formular Nach-Phase 2 Mission Geschäftsziele Schritte bis zum Formular Urs Mary Peter Andrea 26

Formular-Erlebniskette Framework A Vor-Phase Formular Nach-Phase 3 Mission Geschäftsziele Schritte bis zum Formular Kaufentscheid ist klar. 1. Suche (Suchmaschine Ich will das Wir wollen 1 Mio. für Vergleich) iPhone 5 haben iPhones in der 2. Suche in Lieblings- Schweiz verkaufen Shop > Konﬁguration Urs des Produkts Wir wollen den Plakat, Flyer, E-Mail, Ich will diese Kunden-Dialog auf- Persönliche Reise gewinnen bauen und brauchen Empfehlung, Social ihre Kontaktdaten Networks, News-Artikel Mary Befähigung. Ich will in der Wir wollen legale Wissen erlangen, was Schweizer ausländische braucht es? arbeiten Arbeitskräfte Welches Formular gilt Peter für MEINEN Case? Ich brauche Wir wollen unsere eine Kranken- Zusatzversicherungen vgl. Shopping Schritte versicherung verkaufen Andrea 27

Formular-Erlebniskette Framework B Vor-Phase Formular Nach-Phase 3 Formular Typen Konzeptionelles Design Technologische Umsetzung Integration «Das Formular 1» 1 Click Formular peripherer Services Urs «Das Formular Win - Win Front & Back Integration von ohne Stage Connect Services Eigenschaften» Mary «Der König unter informativ, Print CSS vs. PDF den Formularen» adaptiv, iterativ Peter Wizard - Dynamische «Der nette Entscheidungs- / Informations- Konﬁgurator» Verkaufshilfen packete Andrea 28

Formular-Erlebniskette Framework C Vor-Phase Formular Nach-Phase 3 Digital Analog Neue Kette Kommunikation Print Plug & play Bestell-Bestätigung, Empfehlung Rabatt einlösen aktivieren, Zusatz-Infos über Account Das Paket und Aufbereitung des auf neue Urs (Bonuspunktestand) Inhalts Bestellung Teilnahmebestätigung Gewinn-Chancen erhöhen Übergabe an Weitere Informationen anfordern Gewinner. Vom Gewinn und auch erhalten Übergabe als erzählen Empfehlung aktivieren Erlebnis Mary Je persönlicher Aufklärung über nächste desto angenehm. Kürzere Wartezeit vertraglichen Schritte Kontaktdaten mit als angegeben bis Erwartungshaltung managen Person für Erhalt des Weitere Schritte nach Erhalt der weitere Fragen. Bescheids und Anträge (Prüfung) Zulassungen Peter Verträge Finale Verträge Konﬁgurations-Zusammenfassung gekennzeichnet, vorgelocht zur Aufklärung über nächste wo Unterschrift Ablage. Info zu vertraglichen Schritte anzubringen ist. weiteren Dienst- Direkte Kontaktedaten des Beraters (Service) leistungen mit Andrea persönlichem Code für Spezialtarif 29

fälleAnwen dungs http://www.ﬂickr.com/photos/mattimattila/4001215128/

Anwendungsfälle_Case: E-Shop_Case: Promotion_Case: Verwaltung_Case: Dienstleistung 31

Case: E-Shop 1. Stöbern, Konfigurieren, Träumen 2. Entscheiden (in den Warenkorb) 3. Check-out: jetzt will ich bestellen 4. Viel Denken müssen verunsichert mich. 5. Fulfillment: Bestellbestätigung & die Bestellung kommt rasch und genau so, wie ich mir das vorgestellt habehttp://www.flickr.com/photos/gandhiji40/399633115/ 32

Case: Promotion • Hedonistischer Aspekt im Vordergrund • Ich will etwas gratis bekommen • Businessziel "an Daten heran kommen" darf Gewinnfreude und Spieldrang nicht schmälern • Minimale Datenabfrage http://www.ﬂickr.com/photos/metrolibraryarchive/4052806563/ 33

Case: Verwaltung • Das MUSS-Formular • Zeitersparnis durch klare Handlungsanweisungen • Mehr Handlungssicherheit • Vereinheitlichung der Formulare für die ganze CH http://www.ﬂickr.com/photos/pagedooley/1161507336/ 34

Case: Dienstleistung • Ziele der Benutzer deutlicher unterstützen • Zusatzversicherungen klarer abgrenzen von Basis- Versicherung • Mehr Transparenz für Kunden • Entscheidungsﬁndung vereinfachen (Komplexität der Optionen verringern) http://www.ﬂickr.com/photos/bleicher/102266012/ 35

Best Practices_Neugestaltung der Formular-Erlebniskette_Konzeptuelles Interaction & Service Design_State of the Art Technologien & Mobilität_Tools & Ihre Anwendung_Zusammenarbeit in der Formularentwicklung 36

Neugestaltung der Formular-Erlebniskette Vor-Phase Formular Nach-Phase 37

Neugestaltung der Formular-Erlebniskette Vor-Phase Formular Nach-Phase Naming Corporate Teilnehmer DE call2action Alles vorhanden, aber nicht orchestriert! FR 38

Neugestaltung der Formular-Erlebniskette Vor-Phase Formular Nach-Phase Werbemittel auf Facebook TextAds linken Drittplattformen linken auf auf die Facebook Page Empfehlung & Dialog die Microsite Promotion Microsite (Tell a friend) 1 2 Promotion Microsite 3 Bestätigung & 4 Promotion Microsite Facebook Page eigener Beitrag sichtbar Facebook Page 1 2 Facebook Page PersönlicheEigene Promotion-Welt: Eigene Promotion-Welt: 3 Facebook* Promotionfokus, nicht Brand * Welcome Tab 4 Bestätigung & Pinnwandund nicht Produkt * Wettbewerb als Facebook App eigener Beitrag Teilnahme-* etablieren der Protagonisten * Pinnwand als Dialog Plattform sichtbar Klarer Auftrag bekundung(Aufgabe, Preise, Avatar) * Motivierende Titel der* Einbindung der Social Plugins facebook.com/promotionname Felder, vorallem wo Inhalt(Was läuft auf Facebook/Twitter facebook.com/direktercall2action abgefragt wirdrund um die Promotion) (Beschreibungstext, Foto Facebook Page* Direkte Teilnahmemöglichkeit Upload)(vorallem für Nicht-Facebook-User) Aufforderungwww.danio.ch zum Dialogwww.danone.ch/daniowww.wowsoguet.chwww.waouhcestbon.ch 39

Neugestaltung der Formular-Erlebniskette 40

Neugestaltung der Formular-Erlebniskette 41

Konzeptuelles Interaction & Service Design Vorgehen in der Formular-Designkonzeption 1. Bewusstsein für die umfassende Formular- Erlebniskette - OK! 2. Visionärer Arbeitstitel («das Formular 1») 3. Wahl möglicher Formular-Paradigmen 4. Wahl geeigneter Formular-Patterns 5. Erstellen von Designvarianten; überprüft durch formative EvaluationLukew.com:“Ron and his team ran some A/B testing online that compared atraditional Web form layout with a narrative "Mad Libs" format. InVast.coms testing, Mad Libs style forms increased conversion acrossthe board by 25-40%. “ > http://en.wikipedia.org/wiki/Mad_Libs 42

Konzeptuelles Interaction & Service DesignFormular-Paradigmen einseitig 1 Go 2 Go Go 3 DAS Lückentext 4 Webformular Akkordeon-Formular klassisch innovativ Go 1-2-3-Formular mehrseitig 43

Konzeptuelles Interaction & Service Design Webformular-Patterns Positionierung / Informationsmenge?Positionierung? Label Wichtiger Hinweis für das Ausfüllen des Feldes Art und Zeitpunkt der Validierung? Label Bitte Namen eingeben Meyer 123 ! Wichtiger Hinweis für das Ausfüllen des Feldes Art der Eingabewerkzeuge? Strukturierte vs. Datum offene Eingaben? Verschiedene Absenden oder Abbrechen Zustände? Button oder Link? 44

Konzeptuelles Interaction & Service DesignFormular-VariantenKontext: Verkauf einer KrankenversicherungVision: «Das XXL-Krankenservice-Formular»Formulartyp: Kalkulator / KonﬁguratorCharakteristik: informativ, adaptiv...Paradigma: 1-2-3 Formular / Akkordeon FormularPatterns: mit oder ohne Labels etc. 45

State of the Art Technologien & Mobilität Vorgehen in der technischen Umsetzung 1. Erlebniskette - OK! 2. Interaktionskonzept - OK! 3. Umfassender Kontext-Check 4. Abgleich mit technologischen Möglichkeiten 5. Eingebettete prototypische Umsetzung NIWEA - Native Interoperable Web Apps 46

State of the Art Technologien & Mobilität HTML 5 HTML 5 CSS 3 Tools Elemente Attribute Pseudo-Klassen Cross-Browser email autofocus valid jQuery number required invalid Modernizer url placeholder in-range phone maxlength out-of-range range pattern required date, datetime, week min optional color max search step<form> <input type="email"> <input type="submit" value="Go"></form> 47

State of the Art Technologien & Mobilität HTML 5 HTML 5 CSS 3 Tools Elemente Attribute Pseudo-Klassen Cross-Browser email autofocus valid jQuery number required invalid Modernizer url placeholder in-range phone maxlength out-of-range range pattern required date, datetime, week min optional color max search step<form> <input name="q" type="search"> <input type="submit" value="Search"></form> 48

State of the Art Technologien & Mobilität HTML 5 HTML 5 CSS 3 Tools Elemente Attribute Pseudo-Klassen Cross-Browser email autofocus valid jQuery number required invalid Modernizer url placeholder in-range phone maxlength out-of-range range pattern required date, datetime, week min optional color max search step<form> <input name="foo" placehoder=">Your name"> <input type="submit" value="Go"></form> 49

Tools & Ihre Anwendung• Am Beispiel “Google Forms” wird das Erstellen eines Umfrage-Formulars gezeigt• Real-time Umfrage im Selbstversuch• Weitere Tools und Preis-Staffelungen 50

Google Forms 51

Google Forms 52

Google Forms 53

Google Forms 54

Google Forms 55

Google Forms 56

Google Forms 57

Google Forms 58

Google Forms 59

Google Forms 60

Google Forms 61

Google Forms 62

Google Forms 63

Google Forms live http://bit.ly/fdH8Ko 64

Google Forms 65

Weitere Online Formular Services www.wufoo.com 66

Weitere Online Formular Services www.formstack.com 67

Nutzung der vorgestellten Tools • Formular-Anwendungen http://www.formstack.com/what-it-does.html • Prototyping http://wufoo.com/examples/ • Interne Prozesse 68

Kollaborative Prozess Entwicklung www.lucidchart.com• 3 Experten - Die jeweilige Position der Expertise halten• Benutzerzentrierte Entwicklung des Formulars• Perspektiven der anderen einnehmen• Formular-Erlebniskette Denken einsetzen• Gefahren? Formular wendet sich gegen eine der 3 Parteien Google Docs - Draw 69

zit Fadenwen An http://www.ﬂickr.com/photos/max_photography/4436215262/

Formular Erlebnis-Matrix Fragen Anwendung ? Lassen Sie uns die Methode auf einen Publikums-Case anwenden. ? oder 71

Formular Erlebnis-Matrix Vor-Phase Formular Nach-Phase Mission Geschäftsziele Schritte bis zum Formular ? 72

Formular Erlebnis-Matrix Vor-Phase Formular Nach-Phase Formular Typen Konzeptionelles Design Technologische Umsetzung ? 73

Formular Erlebnis-Matrix Vor-Phase Formular Nach-Phase Digital Analog Neue Kette Kommunikation Print ? 74

Formulare der Zukunft1. Formulare müssen als Teil einer umfassenden Erlebniskette gedacht werden2. Der Kontext der Nutzung ist zentral für die Wahrnehmung der Benutzungsfreundlichkeit (Positionierung des Formulars, Typologie & Geschäftsziele)3. Gezielte Wahl der Technologie (Webstandards & Mobilität)4.Nutzung bestehender Werkzeuge (Prototyping)5. Benutzeranforderungen und -Ziele berücksichtigen (Methode: User Centered Design) & integratives, kollaboratives Vorgehen (TeamWork) 75

Unsere Next Steps 76

Vielen Dank Anbieter Nutzer Entwickler

Meet us @Florian Wieser Dr. Christopher H. Müller Stefano Vannotti Interaction DesignerPartner CEO Doktorand, Wissenschaftl. MitarbeiterOnline Stratege coUNDco AG Die Ergonomen Usability AG Zürcher Hochschule der Künstewww.xing.com/profile/Florian_Wieser2 https://www.xing.com/profile/Christopher_Mueller2 https://www.xing.com/profile/Stefano_Vannotti www.twitter.com/floto www.twitter.com/ChrsMueller http://iad.zhdk.ch www.twitter.com/coUNDco www.facebook.com/fwieser www.ergonomen.wordpress.com www.facebook.com/coUNDcoAG www.coUNDco.ch/blog www.ergonomen.ch www.coUNDco.ch Diese Präsentation finden Sie auch auf slideshare: www.slideshare.net/floto/

http://www.coundco.ch	1177
http://centerforstorytelling.org	226
http://www.centerforstorytelling.org	152
http://coundco.ch	74
http://www.florianwieser.com	11
http://forstorytelling.net	5
http://flavors.me	4
http://translate.googleusercontent.com	3
http://webcache.googleusercontent.com	2
http://centerforstorytelling.com	2
url_unknown	2
http://www.centerforstorytelling.com	2

coUNDco Die Zukunft der Webformulare

by Florian Wieser on May 12, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

12 Embeds 1,660

Statistics

coUNDco Die Zukunft der Webformulare — Presentation Transcript