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.

1. Nutzerbeteiligung & Kommunikation:
Mitmachbarrieren im Web 2.0
Timo Wirth, Berlin | Mai 2009, AbI-Schulung „Web 2.0 und Barrierefreiheit“

2. Vortrag starten?
OK Abbrechen Mehr Infos
2

3. OK Abbrechen Mehr Infos
3

4. Über mich
Timo Wirth
Senior 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
4

5. Web 2.0?

6. 6

7. Ajax?
Nein

8. Mashups?
Nein

9. Schatten, Verläufe, Spiegeleffekte?
Nein

10. Interaktion

11. Soziale Interaktion

12. Kommunikation

13. Mitmachen

14. 14

15. Formular
ausfüllen!
Sie möchten mitdiskutieren?

17. Formular
ausfüllen!
Sie möchten etwas einkaufen?

18. Im Web ist jede Interaktion eine über
Formulare vermittelte.

19. Vor jeder Interaktion steht
ein Formular

20. 20

21. Formulare sind immer im Weg

22. 22

23. 23

24. Formulare = Unterbrechung

25. Niemand füllt gerne Formulare aus

26. Niemand füllt gerne Formulare aus
26

27. Formulare können Menschen aussperren.
Am Mitmachen hindern.

28. Schlechtes Formular-Design
Schlechtes Formulardesign erzeugt:
> Frust
> Abbrüche
> Unzugänglichkeit
Ergebnis: Schlechte Konversionsrate
28

29. Wie können Formulare besser gestaltet
werden?
29

30. ☺☺☺☺
30

31. Formulare menschlicher machen
durch bessere Kommunikation

32. Formulare sind kein Datenbank-Prozess.
Sie sind der Anfang eines Gesprächs.
32

33. 9 Regeln für gute Gesprächsführung

34. Regel 1:
Sei freundlich & einladend

35. Das Gegenteil von freundlich sieht so aus
35

36. 36

37. Yahoo macht es gut.
37

38. 38

39. Regel 2:
Drück dich verständlich aus

40. Sprich verständlich
Sprich nicht datenbank - sprich eine
verständliche, alltägliche Sprache.
40

41. 41

42. 42

43. Code-Exkurs:
HTML-Formulare

44. Exkurs: HTML Formulare
Die Grundlagen
Label / input
44

45. <label for=„beschriftung“>Beschriftung </label >
<input id=„beschriftung“ type=„text“ />
<input type=„submit“ value=„Senden“ />
45

46. Regel 3:
Sei zurückhaltend

47. Sei zurückhaltend
> 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?
47

48. Sei zurückhaltend
Ziel:
So schnell wie möglich die Anmeldung
hinter sich bringen.
48

49. Regel 4:
Gib Feedback

50. Gib Feedback
Ein Reload allein ist kein Feedback
50

51. 51

52. 52

53. 53

54. Regel 5:
Sei hilfsbereit, wenn etwas schief
gelaufen ist.

55. Sei hilfsbereit
Bad Practice
55

56. 56

57. 57

58. 58

59. 59

60. 60

61. 61

62. 62

63. Sei hilfsbereit
Better Practice
63

64. 64

65. 65

66. 66

67. 67

68. Freundlich helfen
Menschlich und hilfsbereit
68

69. 69

70. Sei hilfsbereit
Worauf es ankommt: Die ideale
Fehlermeldung
70

71. Im Fenstertitel bereits auf Fehler aufmerksam machen
71

72. Mit der Überschrift auf das Problem hinweisen.
72

73. Fehler auflisten
73

74. Formularfelder markieren: Nicht allein durch Farbe
74

75. Regel 6:
Vermeide Fehler im Vorhinein

76. Inline Validierung
Bereits während der Eingabe höflich auf
Fehler hinweisen.
76

77. 77

78. https://www.test.de/meintest/registrierung/anmelden/
78

79. Inline Validierung
Besonders nützlich auch für
Screenreader-Nutzer
79

80. 80

81. Code-Exkurs:
WAI-ARIA

82. Exkurs: WAI-ARIA
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
82

83. <ul id=quot;navquot; role=quot;navigationquot;>
<label for=„passwort“>Passwort</label>
<input id=„passwort“ aria-required=„true“ >
<label for=„passwort“ role=„alert“>Die beiden
Passwörter stimmen nicht überein </label>
83

84. Regel 7:
Drück dich eindeutig aus.

85. Drück dich eindeutig aus
2 Alternativen sind nicht eindeutig
85

86. 86

87. 87

88. 88

89. Drück dich eindeutig aus
Die primäre Aktion, der nächste Schritt
sollte eindeutig sein.
89

90. Drück dich eindeutig aus
Zeig Nutzern klar den Weg.
90

91. Drück dich eindeutig aus
Nicht alles ist gleich wichtig.
91

92. 92

93. 93

94. 94

95. 95

96. Regel 7:
Denk mit

97. Denk mit
Inline-Tips und Overlays unterstützen die
Nutzer, wenn sie gebraucht werden.
97

98. 98

99. 99

100. 100

101. 101

102. 102

103. 103

104. 104

105. 105

106. 106

107. 107

108. 108

109. Regel 8:
Mach das Gespräch abwechslungsreich

110. Abwechslungsreich / geistreich
Formular ausfüllen ist langweilig.
Menschen fühlen sich bevormundet.
110

111. Abwechslungsreich / geistreich
Schieberegler oftmals bringen die Nutzer
schneller an Ziel.
111

112. Abwechslungsreich / geistreich
Nutzer erhalten ein Gefühl von
Selbstbestimmtheit.
112

113. 113

114. 114

115. 115

116. 116

117. http://www.siemens-kaffee.de/content/de/kaffee-kultur/kaffee-konfigurator.html
117

118. 118

119. Mach das Gespräch abwechslungsreich
Menschlich und informativ
119

120. 120

121. Regel 9:
Nimm dich zurück

122. „Sign-up forms must die!“
Luke Wroblewski

123. Nimm dich zurück
1: Schritt sollte nicht sein:
Registrierungsformular ausfüllen.
123

124. Nimm dich zurück
Lass die Nutzer erstmal den Dienst
nutzen.
124

125. Nimm dich zurück
Mache ihnen die Vorteile der
Registrierung während der Benutzung
klar.
125

126. Nimm dich zurück
Erfasse notwendige Daten nebenbei.
126

127. Nimm dich zurück
Registrierung erst dann, wenn es
notwendig ist
127

128. 128

129. 129

130. 130

131. weniger Formulare = weniger Barrieren

132. Nimm dich zurück
Erhöhung der Konversionsrate.
132

133. Nimm dich zurück
Zufriedene Nutzer &
zufriedene Websitebetreiber
133

134. Fazit

135. Fazit
Gutes Formular-Design erhöht den Absatz
und bringt Menschen zusammen.
135

136. Fragen?
Vielen Dank für Ihre Aufmerksamkeit.
136