Mitmachbarrieren im Web 2.0

5.388 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design
0 Kommentare
8 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
5.388
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1.810
Aktionen
Geteilt
0
Downloads
60
Kommentare
0
Gefällt mir
8
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Mitmachbarrieren im Web 2.0

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

×