View
4.676
Download
0
Category
Preview:
DESCRIPTION
Mitmachen ist das, was das Web.2.0 ausmacht. Interaktion und Kommunikation ist im Web aber nie direkt, sondern immer nur über Formulare vermittelt möglich. Die Gestaltung von Formularen entscheidet darüber, ob Diskussionen in Blogs stattfinden können, Einkäufe getätigt werden oder eine Anmeldung überhaupt möglich ist. Oft stellen sich Formulare als Mitmach-Barrieren heraus. Durch mangelnde Zugänglichkeit und schlechtes Design wird Interaktion verhindert und die Lust am Mitmachen genommen. Welche Fehler werden immer wieder gemacht? Wie könne Formulare leicht zugänglich gestaltet werden? Wie können technische Formulare menschlicher werden? Wie können Formulare so gestaltet werden, dass sie nicht abschrecken oder blockieren sondern zum Mitmachen einladen, die Interaktion fördern und im besten Fall gar nicht als Formulare wahrgenommen werden? Denn im Vordergrund steht das Mitmachen und nicht das Formulare ausfüllen.
Citation preview
Timo Wirth, Berlin | Mai 2009, AbI-Schulung „Web 2.0 und Barrierefreiheit“
Nutzerbeteiligung & Kommunikation: Mitmachbarrieren im Web 2.0
2
OK Abbrechen Mehr Infos
Vortrag starten?
3
OK Abbrechen Mehr Infos
4
Über mich
Timo WirthSenior Webentwickler
Teamleiter Frontend, Aperto AG
Baue und gestalte Websites seit 1998
Accessibility seit 2003
Xing: https://www.xing.com/profile/Timo_Wirth2
Blog: www.vorsprungdurchwebstandards.de www.blog.aperto.de
Twitter: twitter.com/javajim
Web 2.0?
6
Ajax?
Nein
Mashups?
Nein
Schatten, Verläufe, Spiegeleffekte?
Nein
Interaktion
Soziale Interaktion
Kommunikation
Mitmachen
14
Sie möchten mitdiskutieren?
Formular ausfüllen!
Sie möchten etwas einkaufen?
Formular ausfüllen!
Im Web ist jede Interaktion eine über Formulare vermittelte.
Vor jeder Interaktion steht ein Formular
20
Formulare sind immer im Weg
22
23
Formulare = Unterbrechung
Niemand füllt gerne Formulare aus
26
Niemand füllt gerne Formulare aus
Formulare können Menschen aussperren. Am Mitmachen hindern.
28
Schlechtes Formulardesign erzeugt: > Frust > Abbrüche > Unzugänglichkeit
Schlechtes Formular-Design
Ergebnis: Schlechte Konversionsrate
29
Wie können Formulare besser gestaltet werden?
30
☺☺☺☺
Formulare menschlicher machen durch bessere Kommunikation
32
Formulare sind kein Datenbank-Prozess. Sie sind der Anfang eines Gesprächs.
9 Regeln für gute Gesprächsführung
Regel 1: Sei freundlich & einladend
35
Das Gegenteil von freundlich sieht so aus
36
37
Yahoo macht es gut.
38
Regel 2: Drück dich verständlich aus
40
Sprich nicht datenbank - sprich eine verständliche, alltägliche Sprache.
Sprich verständlich
41
42
Code-Exkurs: HTML-Formulare
44
Die Grundlagen Label / input
Exkurs: HTML Formulare
45
<label for=„beschriftung“>Beschriftung </label > <input id=„beschriftung“ type=„text“ /> <input type=„submit“ value=„Senden“ />
Regel 3: Sei zurückhaltend
47
> Frag nur so viel wie nötig.
> Wird die Information wirklich benötigt?
> Kann die Information nicht automatisch abgefragt werden?
> Reicht es die Informationen später zu erhalten?
Sei zurückhaltend
48
Ziel: So schnell wie möglich die Anmeldung hinter sich bringen.
Sei zurückhaltend
Regel 4: Gib Feedback
50
Ein Reload allein ist kein Feedback
Gib Feedback
51
52
53
Regel 5: Sei hilfsbereit, wenn etwas schief gelaufen ist.
55
Bad Practice
Sei hilfsbereit
56
57
58
59
60
61
62
63
Better Practice
Sei hilfsbereit
64
65
66
67
68
Menschlich und hilfsbereit
Freundlich helfen
69
70
Worauf es ankommt: Die ideale Fehlermeldung
Sei hilfsbereit
71
Im Fenstertitel bereits auf Fehler aufmerksam machen
72
Mit der Überschrift auf das Problem hinweisen.
73
Fehler auflisten
74
Formularfelder markieren: Nicht allein durch Farbe
Regel 6: Vermeide Fehler im Vorhinein
76
Bereits während der Eingabe höflich auf Fehler hinweisen.
Inline Validierung
77
78
https://www.test.de/meintest/registrierung/anmelden/
79
Besonders nützlich auch für Screenreader-Nutzer
Inline Validierung
80
Code-Exkurs: WAI-ARIA
82
WAI-ARIA = Accessible Rich Internet Applications
> Aria machen dynamische Inhalte und komplexe Applikationen für Screenreader nutzbar
> HTML-Erweiterungen, die Funktionen, Beziehungen, Zustände und Rollen von Elementen kommunizieren
Exkurs: WAI-ARIA
83
<label for=„passwort“>Passwort</label> <input id=„passwort“ aria-required=„true“ > <label for=„passwort“ role=„alert“>Die beiden Passwörter stimmen nicht überein </label>
<ul id="nav" role="navigation">
Regel 7: Drück dich eindeutig aus.
85
2 Alternativen sind nicht eindeutig
Drück dich eindeutig aus
86
87
88
89
Die primäre Aktion, der nächste Schritt sollte eindeutig sein.
Drück dich eindeutig aus
90
Zeig Nutzern klar den Weg.
Drück dich eindeutig aus
91
Nicht alles ist gleich wichtig.
Drück dich eindeutig aus
92
93
94
95
Regel 7: Denk mit
97
Inline-Tips und Overlays unterstützen die Nutzer, wenn sie gebraucht werden.
Denk mit
98
99
100
101
102
103
104
105
106
107
108
Regel 8: Mach das Gespräch abwechslungsreich
110
Formular ausfüllen ist langweilig. Menschen fühlen sich bevormundet.
Abwechslungsreich / geistreich
111
Schieberegler oftmals bringen die Nutzer schneller an Ziel.
Abwechslungsreich / geistreich
112
Nutzer erhalten ein Gefühl von Selbstbestimmtheit.
Abwechslungsreich / geistreich
113
114
115
116
117
http://www.siemens-kaffee.de/content/de/kaffee-kultur/kaffee-konfigurator.html
118
119
Menschlich und informativ
Mach das Gespräch abwechslungsreich
120
Regel 9: Nimm dich zurück
„Sign-up forms must die!“ Luke Wroblewski
123
1: Schritt sollte nicht sein: Registrierungsformular ausfüllen.
Nimm dich zurück
124
Lass die Nutzer erstmal den Dienst nutzen.
Nimm dich zurück
125
Mache ihnen die Vorteile der Registrierung während der Benutzung klar.
Nimm dich zurück
126
Erfasse notwendige Daten nebenbei.
Nimm dich zurück
127
Registrierung erst dann, wenn es notwendig ist
Nimm dich zurück
128
129
130
weniger Formulare = weniger Barrieren
132
Erhöhung der Konversionsrate.
Nimm dich zurück
133
Zufriedene Nutzer & zufriedene Websitebetreiber
Nimm dich zurück
Fazit
135
Gutes Formular-Design erhöht den Absatz und bringt Menschen zusammen.
Fazit
136
Fragen?
Vielen Dank für Ihre Aufmerksamkeit.
Recommended