...

Mitmachbarrieren im Web 2.0

by aperto-ag

on

Report

Category:

Design

Download: 0

Comment: 0

4,673

views

Comments

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.
Download Mitmachbarrieren im Web 2.0

Transcript

  • 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?
  • 16. Formular ausfüllen! Sie möchten etwas einkaufen?
  • 17. Im Web ist jede Interaktion eine über Formulare vermittelte.
  • 18. Vor jeder Interaktion steht ein Formular
  • 19. 20
  • 20. Formulare sind immer im Weg
  • 21. 22
  • 22. 23
  • 23. Formulare = Unterbrechung
  • 24. Niemand füllt gerne Formulare aus
  • 25. Niemand füllt gerne Formulare aus 26
  • 26. Formulare können Menschen aussperren. Am Mitmachen hindern.
  • 27. Schlechtes Formular-Design Schlechtes Formulardesign erzeugt: > Frust > Abbrüche > Unzugänglichkeit Ergebnis: Schlechte Konversionsrate 28
  • 28. Wie können Formulare besser gestaltet werden? 29
  • 29. ☺☺☺☺ 30
  • 30. Formulare menschlicher machen durch bessere Kommunikation
  • 31. Formulare sind kein Datenbank-Prozess. Sie sind der Anfang eines Gesprächs. 32
  • 32. 9 Regeln für gute Gesprächsführung
  • 33. Regel 1: Sei freundlich & einladend
  • 34. Das Gegenteil von freundlich sieht so aus 35
  • 35. 36
  • 36. Yahoo macht es gut. 37
  • 37. 38
  • 38. Regel 2: Drück dich verständlich aus
  • 39. Sprich verständlich Sprich nicht datenbank - sprich eine verständliche, alltägliche Sprache. 40
  • 40. 41
  • 41. 42
  • 42. Code-Exkurs: HTML-Formulare
  • 43. Exkurs: HTML Formulare Die Grundlagen Label / input 44
  • 44. <label for=„beschriftung“>Beschriftung </label > <input id=„beschriftung“ type=„text“ /> <input type=„submit“ value=„Senden“ /> 45
  • 45. Regel 3: Sei zurückhaltend
  • 46. 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
  • 47. Sei zurückhaltend Ziel: So schnell wie möglich die Anmeldung hinter sich bringen. 48
  • 48. Regel 4: Gib Feedback
  • 49. Gib Feedback Ein Reload allein ist kein Feedback 50
  • 50. 51
  • 51. 52
  • 52. 53
  • 53. Regel 5: Sei hilfsbereit, wenn etwas schief gelaufen ist.
  • 54. Sei hilfsbereit Bad Practice 55
  • 55. 56
  • 56. 57
  • 57. 58
  • 58. 59
  • 59. 60
  • 60. 61
  • 61. 62
  • 62. Sei hilfsbereit Better Practice 63
  • 63. 64
  • 64. 65
  • 65. 66
  • 66. 67
  • 67. Freundlich helfen Menschlich und hilfsbereit 68
  • 68. 69
  • 69. Sei hilfsbereit Worauf es ankommt: Die ideale Fehlermeldung 70
  • 70. Im Fenstertitel bereits auf Fehler aufmerksam machen 71
  • 71. Mit der Überschrift auf das Problem hinweisen. 72
  • 72. Fehler auflisten 73
  • 73. Formularfelder markieren: Nicht allein durch Farbe 74
  • 74. Regel 6: Vermeide Fehler im Vorhinein
  • 75. Inline Validierung Bereits während der Eingabe höflich auf Fehler hinweisen. 76
  • 76. 77
  • 77. https://www.test.de/meintest/registrierung/anmelden/ 78
  • 78. Inline Validierung Besonders nützlich auch für Screenreader-Nutzer 79
  • 79. 80
  • 80. Code-Exkurs: WAI-ARIA
  • 81. 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
  • 82. <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
  • 83. Regel 7: Drück dich eindeutig aus.
  • 84. Drück dich eindeutig aus 2 Alternativen sind nicht eindeutig 85
  • 85. 86
  • 86. 87
  • 87. 88
  • 88. Drück dich eindeutig aus Die primäre Aktion, der nächste Schritt sollte eindeutig sein. 89
  • 89. Drück dich eindeutig aus Zeig Nutzern klar den Weg. 90
  • 90. Drück dich eindeutig aus Nicht alles ist gleich wichtig. 91
  • 91. 92
  • 92. 93
  • 93. 94
  • 94. 95
  • 95. Regel 7: Denk mit
  • 96. Denk mit Inline-Tips und Overlays unterstützen die Nutzer, wenn sie gebraucht werden. 97
  • 97. 98
  • 98. 99
  • 99. 100
  • 100. 101
  • 101. 102
  • 102. 103
  • 103. 104
  • 104. 105
  • 105. 106
  • 106. 107
  • 107. 108
  • 108. Regel 8: Mach das Gespräch abwechslungsreich
  • 109. Abwechslungsreich / geistreich Formular ausfüllen ist langweilig. Menschen fühlen sich bevormundet. 110
  • 110. Abwechslungsreich / geistreich Schieberegler oftmals bringen die Nutzer schneller an Ziel. 111
  • 111. Abwechslungsreich / geistreich Nutzer erhalten ein Gefühl von Selbstbestimmtheit. 112
  • 112. 113
  • 113. 114
  • 114. 115
  • 115. 116
  • 116. http://www.siemens-kaffee.de/content/de/kaffee-kultur/kaffee-konfigurator.html 117
  • 117. 118
  • 118. Mach das Gespräch abwechslungsreich Menschlich und informativ 119
  • 119. 120
  • 120. Regel 9: Nimm dich zurück
  • 121. „Sign-up forms must die!“ Luke Wroblewski
  • 122. Nimm dich zurück 1: Schritt sollte nicht sein: Registrierungsformular ausfüllen. 123
  • 123. Nimm dich zurück Lass die Nutzer erstmal den Dienst nutzen. 124
  • 124. Nimm dich zurück Mache ihnen die Vorteile der Registrierung während der Benutzung klar. 125
  • 125. Nimm dich zurück Erfasse notwendige Daten nebenbei. 126
  • 126. Nimm dich zurück Registrierung erst dann, wenn es notwendig ist 127
  • 127. 128
  • 128. 129
  • 129. 130
  • 130. weniger Formulare = weniger Barrieren
  • 131. Nimm dich zurück Erhöhung der Konversionsrate. 132
  • 132. Nimm dich zurück Zufriedene Nutzer & zufriedene Websitebetreiber 133
  • 133. Fazit
  • 134. Fazit Gutes Formular-Design erhöht den Absatz und bringt Menschen zusammen. 135
  • 135. Fragen? Vielen Dank für Ihre Aufmerksamkeit. 136
Fly UP