View
4.536
Download
2
Category
Preview:
DESCRIPTION
In Zusammenarbeit mit den Ergonomen und der Zürcher Hochschule er Künste, bereich Interaction Design wurde dieses Referat entwickelt und am eBusiness Kongress in Zürich gehalten. Niemand hat Lust, online ein Formular auszufüllen und doch sind Formulare im Netz omnipräsent; angefangen bei Googles Suche, über Facebooks Statusnachrichtfeld bis hin zum Online-Autoversicherungsabschluss. Nur warum machen diese Formulare so unterschiedlich Spass? Was braucht es seitens Konzept, Design und Technologie, um mit einem Formular zu besseren Conversions zu kommen?
Citation preview
eBusiness Kongress
Die Zukunft der Webformulare
Mai 2011
Florian Wieser, wieser@coUNDco.chDr. Christopher H. Müller, mueller@ergonomen.ch Stefano Vannotti, stefano.vannotti@zhdk.ch
Referenten:
1
2
Wer wir sindIhre Referenten
Florian WieserPartner & Online StrategecoUNDco AG
Dr. Christopher H. MüllerCEODie Ergonomen Usability AG
Stefano VannottiInteraction Designer Doktorand, Wissenschaftlicher MitarbeiterZürcher Hochschule der Künste
www.xing.com/profile/Florian_Wieser2 https://www.xing.com/profile/Christopher_Mueller2 https://www.xing.com/profile/Stefano_Vannotti
Beratung Usability Design
3
Webformulare! 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?
Fragestellungen
4
_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
In den kommenden 90 Minuten
5
Google Forms live
http://bit.ly/fdH8Ko
Framework
http
://w
ww
.flic
kr.c
om/p
hoto
s/in
tvge
ne/3
7097
3576
/
7
Kontexte
Geschäftsziel-Kontext Entwicklungs-Kontext
Nutzungs-Kontext
8
Kontexte
Anbieter Entwickler
Nutzer
9
Beispiel Klimastiftung Schweiz
Geschäftsziel-Kontext
Anbieter Entwickler
Nutzer
10
Beispiel Klimastiftung Schweiz
Geschäftsziel-Kontext
Anbieter Entwickler
Nutzer
2 Dimensionen völlig unklar!
11
Beispiel Klimastiftung Schweiz
Geschäftsziel-Kontext
Anbieter Entwickler
Nutzer
vorher
zu viel
zu spät
unnötig
ungewohnt
zu blöd
12
Beispiel Klimastiftung Schweiz
Geschäftsziel-Kontext
Anbieter Entwickler
Nutzer
13
Beispiel Klimastiftung Schweiz
Geschäftsziel-Kontext
Anbieter Entwickler
Nutzer
neu
opt. Formular = weniger Telefonsupport!
14
Problemstellung
Formular
Perspektiven: Fokus Formular
Anbieter EntwicklerNutzer
WOW! GRRRR! BOAH!
15
Vor-Phase Formular Nach-Phase
Formular gestalten = Erlebniskette gestalten
16
Erlebniskette: Handlungs-Muster
Chapter 1: What users do1. Safe Exploration2. Instant Gratification3. Satisficing4. Changes in Midstream5. Deferred Choices6. Incremental Construction7. Habituation8. Microbreaks9. Spatial Memory10. Prospective Memory11. Streamlined Repetition12. Keyboard Only13. Other People’s Advice14. Personal Recommendations
http://amzn.to/fXUtJn
Buch-Link:
Nutzer
Nutzer
Zwischendrin mal etwas verstehen tut gut! und motiviert wieder von Neuem
Mentale Modelle/ Vorstellungen bilden können ist enorm wichtig: Kennst du die Vorstellung, das Bild im Kopf deines Users? --> Also: User fragen
17
Erlebniskette: Nutzungsituationen (User-Mission)
Nutzer
18
Erlebniskette
Vor-Phase Formular Nach-Phase
User/Customer Experience (Nutzer-Perspektive)
Befähigung Selbstvertrauen Zufriedenheit
Anbieter EntwicklerNutzer
19
Erlebniskette: Dramaturgie/Storytelling
Anbieter
Gestaltung auf einer Zeitachse
Time
Dramaturgy
Web forms
Movie / Novel
Games
loss in motivation
Frustration through monotony
ClimaxGame Levels
20
Erlebniskette: Dramaturgie/Storytelling
Anbieter
Go
2011 2012
Product Launch 1 Product
Launch 2Product Launch 3
Presenting the nominees 2011
Award Night Presenting the nominees 2012
21
Erlebniskette: Geschäftsziele
Umsatz steigern
Neukunden-Akquise
Kundenbindung fördern
Personendaten sammeln
Mehr legale Aufenthalter
Zusatzversicherung verkaufen
Basisversicherung abschliessen
Absatz steigern
Bekanntheit erlangen
Aufmerksamkeit erregen
Kunden-Involvierungsgrad erhöhen
Zeit sparen
Geld sparen
Anbieter
Geschäftsziele aus dem Publikum?
22
Erlebniskette: Gestaltung
Entwickler
Go
Formulare
Stühle
Häuser
Formular-ArtefaktProdukt
materiell
Formular-ErlebnisErfahrung
immateriell
Formular Nutzer?
Entwickler-Team
Gestaltung «erlebbarer» Qualitäten
23
Erlebniskette: Gestaltung
Entwickler
technisch
Vergangenheit Zukunft
Gute und schlechte Erinnerungenweit / nah
Prospektive Wünsche und Ängsteunmittelbar / längerfristig
Nutzer
Gestaltung von ...Formular-Erfahrungen...Formular-Emotionen...Formular-Interaktionen...Formular-Nachhaltigkeit...Formular-Innovation
für
24
Erlebniskette: Gestaltung
Entwickler
Anbieter
Entwickler
Nutzer
Formular-Erlebnisketten GestaltungZeit / Spannung = DramaturgieGeschäftszieleTechnologische MöglichkeitenNutzerbedürfnisseAkteure als Designpartner
ganzheitlich - iterativ - kollaborativ
Vorher Nachher
Go
Formular Nach-Phase
25
Formular-Erlebniskette Framework
Vor-Phase
Urs
Mary
Peter
Andrea
Mission Geschäftsziele Schritte bis zum Formular
1Nutzer
Formular Nach-Phase Vor-Phase
26
Formular-Erlebniskette Framework
Urs
Mary
Peter
Andrea
Mission Geschäftsziele Schritte bis zum Formular2
Kontext
Formular Nach-Phase Vor-Phase
27
Formular-Erlebniskette Framework
Urs
Mary
Peter
Andrea
Mission Geschäftsziele Schritte bis zum Formular
3
A
Ich will das iPhone 5 haben
Ich will diese Reise gewinnen
Ich will in der Schweizer arbeiten
Ich brauche eine Kranken-versicherung
Wir wollen 1 Mio. iPhones in der Schweiz verkaufen
Wir wollen den Kunden-Dialog auf-bauen und brauchen ihre Kontaktdaten
Wir wollen legale ausländische Arbeitskräfte
Wir wollen unsere Zusatzversicherungen verkaufen
Kaufentscheid ist klar. 1. Suche (Suchmaschine für Vergleich)2. Suche in Lieblings-Shop > Konfiguration des Produkts
Plakat, Flyer, E-Mail, Persönliche Empfehlung, Social Networks, News-Artikel
Befähigung. Wissen erlangen, was braucht es?Welches Formular gilt für MEINEN Case?
vgl. Shopping Schritte
Formular Nach-Phase Vor-Phase
28
Formular-Erlebniskette Framework
Urs
Mary
Peter
Andrea
Formular Typen Konzeptionelles Design Technologische Umsetzung
3
B
«Das Formular 1»
«Das Formular ohne
Eigenschaften»
«Der König unter den Formularen»
«Der nette Konfigurator»
1 Click Formular
Win - WinFront & Back
Stage
informativ, adaptiv, iterativ
Wizard - Entscheidungs- /Verkaufshilfen
Integration peripherer Services
Integration von Connect Services
Print CSS vs. PDF
Dynamische Informations-
packete
Formular Nach-Phase Vor-Phase
29
Formular-Erlebniskette Framework
Urs
Mary
Peter
Andrea
Analog
Kommunikation
Digital
Neue Kette
3
C
Konfigurations-ZusammenfassungAufklärung über nächste vertraglichen SchritteDirekte Kontaktedaten des Beraters
Teilnahmebestätigung Gewinn-Chancen erhöhenWeitere Informationen anfordern und auch erhaltenEmpfehlung aktivieren
Bestell-Bestätigung, Empfehlung aktivieren, Zusatz-Infos über Account (Bonuspunktestand)
Aufklärung über nächste vertraglichen SchritteErwartungshaltung managenWeitere Schritte nach Erhalt der Anträge (Prüfung)
Das Paket und Aufbereitung des Inhalts
Übergabe an Gewinner.Übergabe als Erlebnis
Je persönlicher desto angenehm.Kontaktdaten mit Person für weitere Fragen.
Verträge gekennzeichnet, wo Unterschrift anzubringen ist.(Service)
Plug & playRabatt einlösen auf neue Bestellung
Vom Gewinn erzählen
Kürzere Wartezeit als angegeben bis Erhalt des Bescheids und Zulassungen
Finale Verträge vorgelocht zur Ablage. Info zu weiteren Dienst-leistungen mit persönlichem Code für Spezialtarif
Anwendungs
fälle
http
://w
ww
.flic
kr.c
om/p
hoto
s/m
attim
attil
a/4
00
1215
128/
31
_Case: E-Shop_Case: Promotion_Case: Verwaltung_Case: Dienstleistung
Anwendungsfälle
32
Case: E-Shop
http://www.flickr.com/photos/gandhiji40/399633115/
1. Stöbern, Konfigurieren, Träumen2. 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 habe
33
Case: Promotion
http://www.flickr.com/photos/metrolibraryarchive/4052806563/
• Hedonistischer Aspekt im Vordergrund• Ich will etwas gratis bekommen• Businessziel "an Daten heran kommen" darf Gewinnfreude und Spieldrang nicht schmälern• Minimale Datenabfrage
34
Case: Verwaltung
http://www.flickr.com/photos/pagedooley/1161507336/
• Das MUSS-Formular• Zeitersparnis durch klare Handlungsanweisungen• Mehr Handlungssicherheit• Vereinheitlichung der Formulare für die ganze CH
35
Case: Dienstleistung
http://www.flickr.com/photos/bleicher/102266012/
• Ziele der Benutzer deutlicher unterstützen• Zusatzversicherungen klarer abgrenzen von Basis- Versicherung • Mehr Transparenz für Kunden • Entscheidungsfindung vereinfachen (Komplexität der Optionen verringern)
36
_Neugestaltung der Formular-Erlebniskette_Konzeptuelles Interaction & Service Design_State of the Art Technologien & Mobilität_Tools & Ihre Anwendung_Zusammenarbeit in der Formularentwicklung
Best Practices
37
Neugestaltung der Formular-Erlebniskette
Vor-Phase Formular Nach-Phase
38
Neugestaltung der Formular-Erlebniskette
Corporate
DE
FR
Naming
call2action
Teilnehmer
Formular Nach-PhaseVor-Phase
Alles vorhanden, aber nicht orchestriert!
39
Neugestaltung der Formular-Erlebniskette
Formular Nach-PhaseVor-Phase
Eigene Promotion-Welt:* Promotionfokus, nicht Brand und nicht Produkt* etablieren der Protagonisten (Aufgabe, Preise, Avatar)* Einbindung der Social Plugins (Was läuft auf Facebook/Twitter rund um die Promotion)* Direkte Teilnahmemöglichkeit(vorallem für Nicht-Facebook-User)www.danio.chwww.danone.ch/daniowww.wowsoguet.chwww.waouhcestbon.ch
Werbemittel auf Drittplattformen linken auf die Microsite
Promotion Microsite Facebook Page
Facebook TextAds linken auf die Facebook Page
Eigene Promotion-Welt:* Welcome Tab* Wettbewerb als Facebook App* Pinnwand als Dialog Plattform
facebook.com/promotionnamefacebook.com/direktercall2action
Promotion Microsite
Facebook Page
1
234
1
234
Klarer Auftrag* Motivierende Titel der Felder, vorallem wo Inhalt abgefragt wird (Beschreibungstext, Foto Upload)
Promotion Microsite
Facebook Page Persönliche Facebook Pinnwand
Bestätigung & eigener Beitrag sichtbar
Bestätigung & eigener Beitrag sichtbar
Empfehlung & Dialog (Tell a friend)
Teilnahme-bekundung
Facebook Page
Aufforderung zum Dialog
40
Neugestaltung der Formular-Erlebniskette
41
Neugestaltung der Formular-Erlebniskette
42
Konzeptuelles Interaction & Service Design
Lukew.com:“Ron and his team ran some A/B testing online that compared a traditional Web form layout with a narrative "Mad Libs" format. In Vast.com's testing, Mad Libs style forms increased conversion across the board by 25-40%. “ > http://en.wikipedia.org/wiki/Mad_Libs
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 Evaluation
43
Konzeptuelles Interaction & Service Design
klassisch innovativ
mehrseitig
DAS Webformular
Go
einseitig
Lückentext
Go
Formular-Paradigmen
Go
1-2-3-Formular
Go
Akkordeon-Formular
1
2
3
4
44
Konzeptuelles Interaction & Service Design
Webformular-Patterns
Label
Bitte Namen eingeben
Label
Absenden
Meyer
Datum
Wichtiger Hinweis für das Ausfüllen des Feldes
oder Abbrechen
Wichtiger Hinweis für das Ausfüllen des Feldes
Positionierung?
Positionierung / Informationsmenge?
Art der Eingabewerkzeuge?Strukturierte vs. offene Eingaben?
Verschiedene Zustände?
Button oder Link?
123 !
Art und Zeitpunkt der Validierung?
45
Konzeptuelles Interaction & Service Design
Kontext: Verkauf einer Krankenversicherung
Vision: «Das XXL-Krankenservice-Formular»
Formulartyp: Kalkulator / Konfigurator
Charakteristik: informativ, adaptiv...
Paradigma: 1-2-3 Formular / Akkordeon Formular
Patterns: mit oder ohne Labels etc.
Formular-Varianten
46
State of the Art Technologien & Mobilität
NIWEA - Native Interoperable Web Apps
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
47
State of the Art Technologien & Mobilität
emailnumberurlphonerangedate, datetime, weekcolorsearch
HTML 5Elemente
autofocusrequiredplaceholdermaxlengthpatternminmaxstep
HTML 5Attribute
validinvalidin-rangeout-of-rangerequiredoptional
CSS 3Pseudo-Klassen
jQueryModernizer
ToolsCross-Browser
<form>
<input type="email">
<input type="submit" value="Go">
</form>
emailrequired
valid
48
State of the Art Technologien & Mobilität
emailnumberurlphonerangedate, datetime, weekcolorsearch
HTML 5Elemente
autofocusrequiredplaceholdermaxlengthpatternminmaxstep
HTML 5Attribute
validinvalidin-rangeout-of-rangerequiredoptional
CSS 3Pseudo-Klassen
jQueryModernizer
ToolsCross-Browser
<form>
<input name="q" type="search">
<input type="submit" value="Search">
</form>
search
autofocus
49
State of the Art Technologien & Mobilität
emailnumberurlphonerangedate, datetime, weekcolorsearch
HTML 5Elemente
autofocusrequiredplaceholdermaxlengthpatternminmaxstep
HTML 5Attribute
validinvalidin-rangeout-of-rangerequiredoptional
CSS 3Pseudo-Klassen
jQueryModernizer
ToolsCross-Browser
<form>
<input name="foo" placehoder=">Your name">
<input type="submit" value="Go">
</form>
placeholder
50
Tools & Ihre Anwendung
• Am Beispiel “Google Forms” wird das Erstellen eines Umfrage-Formulars gezeigt• Real-time Umfrage im Selbstversuch• Weitere Tools und Preis-Staffelungen
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
64
Google Forms live
http://bit.ly/fdH8Ko
65
Google Forms
66
Weitere Online Formular Services
www.wufoo.com
67
Weitere Online Formular Services
www.formstack.com
68
Nutzung der vorgestellten Tools
• Formular-Anwendungen• Prototyping• Interne Prozesse
http://www.formstack.com/what-it-does.htmlhttp://wufoo.com/examples/
69
Kollaborative Prozess Entwicklung
www.lucidchart.com
Google Docs - Draw
• 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
Anwenden
Fazit
http
://w
ww
.flic
kr.c
om/p
hoto
s/m
ax_p
hoto
grap
hy/4
436
2152
62/
71
Formular Erlebnis-Matrix
?Fragen
oder
Lassen Sie uns die Methode auf einen Publikums-Case anwenden.
?
Anwendung
72
Formular Erlebnis-Matrix
Formular Nach-Phase Vor-Phase
?
Mission Geschäftsziele Schritte bis zum Formular
73
Formular Erlebnis-Matrix
Formular Nach-Phase Vor-Phase
Formular Typen Konzeptionelles Design Technologische Umsetzung
?
74
Formular Erlebnis-Matrix
?
Formular Nach-Phase Vor-Phase
Analog
Kommunikation
Digital
Neue Kette
75
Formulare der Zukunft
1. Formulare müssen als Teil einer umfassenden Erlebniskette gedacht werden
2. 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)
76
Unsere Next Steps
Vielen Dank
Anbieter EntwicklerNutzer
www.slideshare.net/floto/
www.xing.com/profile/Florian_Wieser2
www.facebook.com/fwieser
www.twitter.com/floto
www.facebook.com/coUNDcoAG
www.twitter.com/coUNDco
Florian WieserPartnerOnline Stratege coUNDco AG
www.coUNDco.ch/blog
Diese Präsentation finden Sie auch auf slideshare:
Dr. Christopher H. MüllerCEODie Ergonomen Usability AG
Stefano VannottiInteraction Designer Doktorand, Wissenschaftl. MitarbeiterZürcher Hochschule der Künste
https://www.xing.com/profile/Christopher_Mueller2 https://www.xing.com/profile/Stefano_Vannotti
www.ergonomen.ch
http://iad.zhdk.chwww.twitter.com/ChrsMueller
www.ergonomen.wordpress.com
www.coUNDco.ch
Meet us @
Recommended