coUNDco Die Zukunft der Webformulare

eBusiness Kongress

Die Zukunft der Webformulare

Mai 2011

Florian Wieser, [email protected]. Christopher H. Müller, [email protected] Stefano Vannotti, [email protected]

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



Anbieter Entwickler

Nutzer

2 Dimensionen völlig unklar!

11



Anbieter Entwickler

Nutzer

vorher

zu viel

zu spät

unnötig

ungewohnt

zu blöd

12



Anbieter Entwickler

Nutzer

13



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


User/Customer Experience (Nutzer-Perspektive)

Befähigung Selbstvertrauen Zufriedenheit


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


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


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


Urs

Mary

Peter

Andrea

Mission Geschäftsziele Schritte bis zum Formular2

Kontext


27


Urs

Mary

Peter

Andrea


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


28


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


29


Urs

Mary

Peter

Andrea

Analog

Kommunikation

Digital

Print

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


38


Corporate

DE

FR

Naming

call2action

Teilnehmer

Formular Nach-PhaseVor-Phase

Alles vorhanden, aber nicht orchestriert!

39


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


41


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


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


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


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


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



HTML 5Elemente


HTML 5Attribute


CSS 3Pseudo-Klassen

jQueryModernizer

ToolsCross-Browser

<form>

<input name="q" type="search">

<input type="submit" value="Search">

</form>

search

autofocus

49



HTML 5Elemente


HTML 5Attribute


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



?


73



Formular Typen Konzeptionelles Design Technologische Umsetzung

?

74


?


Analog

Kommunikation

Digital

Print

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


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 @