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

Mitmachbarrieren im Web 2.0

Embed Size (px)

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

Page 1: Mitmachbarrieren im Web 2.0

Timo Wirth, Berlin | Mai 2009, AbI-Schulung „Web 2.0 und Barrierefreiheit“

Nutzerbeteiligung & Kommunikation: Mitmachbarrieren im Web 2.0

Page 2: Mitmachbarrieren im Web 2.0

2

OK Abbrechen Mehr Infos

Vortrag starten?

Page 3: Mitmachbarrieren im Web 2.0

3

OK Abbrechen Mehr Infos

Page 4: Mitmachbarrieren im Web 2.0

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

Page 5: Mitmachbarrieren im Web 2.0

Web 2.0?

Page 6: Mitmachbarrieren im Web 2.0

6

Page 7: Mitmachbarrieren im Web 2.0

Ajax?

Nein

Page 8: Mitmachbarrieren im Web 2.0

Mashups?

Nein

Page 9: Mitmachbarrieren im Web 2.0

Schatten, Verläufe, Spiegeleffekte?

Nein

Page 10: Mitmachbarrieren im Web 2.0

Interaktion

Page 11: Mitmachbarrieren im Web 2.0

Soziale Interaktion

Page 12: Mitmachbarrieren im Web 2.0

Kommunikation

Page 13: Mitmachbarrieren im Web 2.0

Mitmachen

Page 14: Mitmachbarrieren im Web 2.0

14

Page 15: Mitmachbarrieren im Web 2.0

Sie möchten mitdiskutieren?

Formular ausfüllen!

Page 16: Mitmachbarrieren im Web 2.0
Page 17: Mitmachbarrieren im Web 2.0

Sie möchten etwas einkaufen?

Formular ausfüllen!

Page 18: Mitmachbarrieren im Web 2.0

Im Web ist jede Interaktion eine über Formulare vermittelte.

Page 19: Mitmachbarrieren im Web 2.0

Vor jeder Interaktion steht ein Formular

Page 20: Mitmachbarrieren im Web 2.0

20

Page 21: Mitmachbarrieren im Web 2.0

Formulare sind immer im Weg

Page 22: Mitmachbarrieren im Web 2.0

22

Page 23: Mitmachbarrieren im Web 2.0

23

Page 24: Mitmachbarrieren im Web 2.0

Formulare = Unterbrechung

Page 25: Mitmachbarrieren im Web 2.0

Niemand füllt gerne Formulare aus

Page 26: Mitmachbarrieren im Web 2.0

26

Niemand füllt gerne Formulare aus

Page 27: Mitmachbarrieren im Web 2.0

Formulare können Menschen aussperren. Am Mitmachen hindern.

Page 28: Mitmachbarrieren im Web 2.0

28

Schlechtes Formulardesign erzeugt: > Frust > Abbrüche > Unzugänglichkeit

Schlechtes Formular-Design

Ergebnis: Schlechte Konversionsrate

Page 29: Mitmachbarrieren im Web 2.0

29

Wie können Formulare besser gestaltet werden?

Page 30: Mitmachbarrieren im Web 2.0

30

☺☺☺☺

Page 31: Mitmachbarrieren im Web 2.0

Formulare menschlicher machen durch bessere Kommunikation

Page 32: Mitmachbarrieren im Web 2.0

32

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

Page 33: Mitmachbarrieren im Web 2.0

9 Regeln für gute Gesprächsführung

Page 34: Mitmachbarrieren im Web 2.0

Regel 1: Sei freundlich & einladend

Page 35: Mitmachbarrieren im Web 2.0

35

Das Gegenteil von freundlich sieht so aus

Page 36: Mitmachbarrieren im Web 2.0

36

Page 37: Mitmachbarrieren im Web 2.0

37

Yahoo macht es gut.

Page 38: Mitmachbarrieren im Web 2.0

38

Page 39: Mitmachbarrieren im Web 2.0

Regel 2: Drück dich verständlich aus

Page 40: Mitmachbarrieren im Web 2.0

40

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

Sprich verständlich

Page 41: Mitmachbarrieren im Web 2.0

41

Page 42: Mitmachbarrieren im Web 2.0

42

Page 43: Mitmachbarrieren im Web 2.0

Code-Exkurs: HTML-Formulare

Page 44: Mitmachbarrieren im Web 2.0

44

Die Grundlagen Label / input

Exkurs: HTML Formulare

Page 45: Mitmachbarrieren im Web 2.0

45

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

Page 46: Mitmachbarrieren im Web 2.0

Regel 3: Sei zurückhaltend

Page 47: Mitmachbarrieren im Web 2.0

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

Page 48: Mitmachbarrieren im Web 2.0

48

Ziel: So schnell wie möglich die Anmeldung hinter sich bringen.

Sei zurückhaltend

Page 49: Mitmachbarrieren im Web 2.0

Regel 4: Gib Feedback

Page 50: Mitmachbarrieren im Web 2.0

50

Ein Reload allein ist kein Feedback

Gib Feedback

Page 51: Mitmachbarrieren im Web 2.0

51

Page 52: Mitmachbarrieren im Web 2.0

52

Page 53: Mitmachbarrieren im Web 2.0

53

Page 54: Mitmachbarrieren im Web 2.0

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

Page 55: Mitmachbarrieren im Web 2.0

55

Bad Practice

Sei hilfsbereit

Page 56: Mitmachbarrieren im Web 2.0

56

Page 57: Mitmachbarrieren im Web 2.0

57

Page 58: Mitmachbarrieren im Web 2.0

58

Page 59: Mitmachbarrieren im Web 2.0

59

Page 60: Mitmachbarrieren im Web 2.0

60

Page 61: Mitmachbarrieren im Web 2.0

61

Page 62: Mitmachbarrieren im Web 2.0

62

Page 63: Mitmachbarrieren im Web 2.0

63

Better Practice

Sei hilfsbereit

Page 64: Mitmachbarrieren im Web 2.0

64

Page 65: Mitmachbarrieren im Web 2.0

65

Page 66: Mitmachbarrieren im Web 2.0

66

Page 67: Mitmachbarrieren im Web 2.0

67

Page 68: Mitmachbarrieren im Web 2.0

68

Menschlich und hilfsbereit

Freundlich helfen

Page 69: Mitmachbarrieren im Web 2.0

69

Page 70: Mitmachbarrieren im Web 2.0

70

Worauf es ankommt: Die ideale Fehlermeldung

Sei hilfsbereit

Page 71: Mitmachbarrieren im Web 2.0

71

Im Fenstertitel bereits auf Fehler aufmerksam machen

Page 72: Mitmachbarrieren im Web 2.0

72

Mit der Überschrift auf das Problem hinweisen.

Page 73: Mitmachbarrieren im Web 2.0

73

Fehler auflisten

Page 74: Mitmachbarrieren im Web 2.0

74

Formularfelder markieren: Nicht allein durch Farbe

Page 75: Mitmachbarrieren im Web 2.0

Regel 6: Vermeide Fehler im Vorhinein

Page 76: Mitmachbarrieren im Web 2.0

76

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

Inline Validierung

Page 77: Mitmachbarrieren im Web 2.0

77

Page 78: Mitmachbarrieren im Web 2.0

78

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

Page 79: Mitmachbarrieren im Web 2.0

79

Besonders nützlich auch für Screenreader-Nutzer

Inline Validierung

Page 80: Mitmachbarrieren im Web 2.0

80

Page 81: Mitmachbarrieren im Web 2.0

Code-Exkurs: WAI-ARIA

Page 82: Mitmachbarrieren im Web 2.0

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

Page 83: Mitmachbarrieren im Web 2.0

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">

Page 84: Mitmachbarrieren im Web 2.0

Regel 7: Drück dich eindeutig aus.

Page 85: Mitmachbarrieren im Web 2.0

85

2 Alternativen sind nicht eindeutig

Drück dich eindeutig aus

Page 86: Mitmachbarrieren im Web 2.0

86

Page 87: Mitmachbarrieren im Web 2.0

87

Page 88: Mitmachbarrieren im Web 2.0

88

Page 89: Mitmachbarrieren im Web 2.0

89

Die primäre Aktion, der nächste Schritt sollte eindeutig sein.

Drück dich eindeutig aus

Page 90: Mitmachbarrieren im Web 2.0

90

Zeig Nutzern klar den Weg.

Drück dich eindeutig aus

Page 91: Mitmachbarrieren im Web 2.0

91

Nicht alles ist gleich wichtig.

Drück dich eindeutig aus

Page 92: Mitmachbarrieren im Web 2.0

92

Page 93: Mitmachbarrieren im Web 2.0

93

Page 94: Mitmachbarrieren im Web 2.0

94

Page 95: Mitmachbarrieren im Web 2.0

95

Page 96: Mitmachbarrieren im Web 2.0

Regel 7: Denk mit

Page 97: Mitmachbarrieren im Web 2.0

97

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

Denk mit

Page 98: Mitmachbarrieren im Web 2.0

98

Page 99: Mitmachbarrieren im Web 2.0

99

Page 100: Mitmachbarrieren im Web 2.0

100

Page 101: Mitmachbarrieren im Web 2.0

101

Page 102: Mitmachbarrieren im Web 2.0

102

Page 103: Mitmachbarrieren im Web 2.0

103

Page 104: Mitmachbarrieren im Web 2.0

104

Page 105: Mitmachbarrieren im Web 2.0

105

Page 106: Mitmachbarrieren im Web 2.0

106

Page 107: Mitmachbarrieren im Web 2.0

107

Page 108: Mitmachbarrieren im Web 2.0

108

Page 109: Mitmachbarrieren im Web 2.0

Regel 8: Mach das Gespräch abwechslungsreich

Page 110: Mitmachbarrieren im Web 2.0

110

Formular ausfüllen ist langweilig. Menschen fühlen sich bevormundet.

Abwechslungsreich / geistreich

Page 111: Mitmachbarrieren im Web 2.0

111

Schieberegler oftmals bringen die Nutzer schneller an Ziel.

Abwechslungsreich / geistreich

Page 112: Mitmachbarrieren im Web 2.0

112

Nutzer erhalten ein Gefühl von Selbstbestimmtheit.

Abwechslungsreich / geistreich

Page 113: Mitmachbarrieren im Web 2.0

113

Page 114: Mitmachbarrieren im Web 2.0

114

Page 115: Mitmachbarrieren im Web 2.0

115

Page 116: Mitmachbarrieren im Web 2.0

116

Page 117: Mitmachbarrieren im Web 2.0

117

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

Page 118: Mitmachbarrieren im Web 2.0

118

Page 119: Mitmachbarrieren im Web 2.0

119

Menschlich und informativ

Mach das Gespräch abwechslungsreich

Page 120: Mitmachbarrieren im Web 2.0

120

Page 121: Mitmachbarrieren im Web 2.0

Regel 9: Nimm dich zurück

Page 122: Mitmachbarrieren im Web 2.0

„Sign-up forms must die!“ Luke Wroblewski

Page 123: Mitmachbarrieren im Web 2.0

123

1: Schritt sollte nicht sein: Registrierungsformular ausfüllen.

Nimm dich zurück

Page 124: Mitmachbarrieren im Web 2.0

124

Lass die Nutzer erstmal den Dienst nutzen.

Nimm dich zurück

Page 125: Mitmachbarrieren im Web 2.0

125

Mache ihnen die Vorteile der Registrierung während der Benutzung klar.

Nimm dich zurück

Page 126: Mitmachbarrieren im Web 2.0

126

Erfasse notwendige Daten nebenbei.

Nimm dich zurück

Page 127: Mitmachbarrieren im Web 2.0

127

Registrierung erst dann, wenn es notwendig ist

Nimm dich zurück

Page 128: Mitmachbarrieren im Web 2.0

128

Page 129: Mitmachbarrieren im Web 2.0

129

Page 130: Mitmachbarrieren im Web 2.0

130

Page 131: Mitmachbarrieren im Web 2.0

weniger Formulare = weniger Barrieren

Page 132: Mitmachbarrieren im Web 2.0

132

Erhöhung der Konversionsrate.

Nimm dich zurück

Page 133: Mitmachbarrieren im Web 2.0

133

Zufriedene Nutzer & zufriedene Websitebetreiber

Nimm dich zurück

Page 134: Mitmachbarrieren im Web 2.0

Fazit

Page 135: Mitmachbarrieren im Web 2.0

135

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

Fazit

Page 136: Mitmachbarrieren im Web 2.0

136

Fragen?

Vielen Dank für Ihre Aufmerksamkeit.