Webdesign

Benutzerfreundliche Kommentareingabe

Eingabeformulare sind immer eine mögliche Falle für die Nutzer. Allzuoft sind sie unübersichtlich und daher hinderlich für eine reibungslose Kommunikation.

Ich habe daher versucht, die Eingabeformulare für Weblogkommentare etwas benutzerfreundlicher zu gestalten. Folgende Überlegung war mir dabei wichtig: ein Leser, der einen Kommentar abgeben möchte, hat als erstes und wichtigstes Ziel die inhaltliche Rückmeldung zu einem Beitrag. Die Angabe seines Namens und der restlichen Details sind bei diesem Vorgang lediglich notwendige Übel.

Daher hat mein Formular folgende Eingabereihenfolge:

  1. Kommentar
  2. Name
  3. eMail-Adresse (mit dem Hinweis, dass diese nicht auf der Seite erscheint)
  4. Website (falls vorhanden)

Um auch das Markup für dieses Formular möglichst einfach zu halten, benutze ich <p> und <br /> Elemente für die Anordnung von Bezeichnungen und Eingabefeldern.

Ein weiterer Gedanke zur Verbesserung der Benutzerfreundlichkeit: Leserinnen, die schon einmal einen Kommentar abgegeben haben, ließen evtl. die Daten per Cookie speichern, um sie nicht erneut eingeben zu müssen. Für diese Gruppe sind die drei Eingabefelder Name, eMail und Website nur im Weg, denn diese sind ja schon ausgefüllt.

Mit Hilfe des Plugins czg_if_comment_cookies biete ich daher zwei verschiedene Versionen des Eingabeformulars an. Das Plugin prüft, ob ein Cookie vorhanden ist und beinhaltet zwei Tags, die abhängig vom Ergebnis dieser Prüfung ihren Inhalt anzeigen oder verbergen (<txp:if_cookie></txp:if_cookie> und <txp:if_no_cookie></txp:if_no_cookie>).

Screenshot Kommentar-Cookie

Hier der Inhalt des Bausteins (form) comment_form, welches von TXP dazu benutzt wird, das Eingabeformular anzuzeigen.

  1. <p><txp:text item="message" /><br />
  2. <txp:comment_message_input /></p>
  3.  
  4. <!-- falls kein Kommentarcookie vorhanden ist... -->
  5. <txp:if_no_cookie>
  6. <p><txp:text item="name" /><br />
  7. <txp:comment_name_input />&nbsp;&nbsp;<txp:comment_remember /></p>
  8. <p><txp:text item="email" /><br />
  9. <txp:comment_email_input /> </p>
  10. <p>Website<br />
  11. <txp:comment_web_input /></p>
  12. <p><txp:comment_preview />&nbsp;&nbsp;<txp:comment_submit /></p>
  13. </txp:if_no_cookie>
  14.  
  15. <!-- falls ein Kommentarcookie vorhanden ist... -->
  16. <txp:if_cookie>
  17. <p><txp:comment_preview />&nbsp;&nbsp;<txp:comment_submit /></p>
  18. <p><txp:text item="name" /><br />
  19. <txp:comment_name_input />&nbsp;&nbsp; <txp:comment_remember /></p>
  20. <p><txp:text item="email" /><br />
  21. <txp:comment_email_input /> </p>
  22. <p>Website<br />
  23. <txp:comment_web_input /></p>
  24. </txp:if_cookie>
  25. Code-Download: /code/txp-comment-form.txt

Ich habe dieses Codebeispiel möglichst allgemein gehalten, mein eigenes Formular ist etwas stärker modifiziert.

Fazit

Durch diese Vorgehensweise wird wiederkehrenden Lesern der Weg zum Kommentar so bequem wie möglich gemacht: sie müssen weniger scrollen und können ohne visuelle Ablenkung ihre inhaltliche Rückmeldung abgeben.

Zuletzt geändert am 23.11.2007

1Eric schrieb am 22. April 2005, 00:10 h    # 

Kompliment, das ist eine wirklich geschicke Lösung. Ich merke mir das mal für mein Redesign vor.

2Jens Meiert schrieb am 23. April 2005, 16:29 h    # 

Ein paar lose Gedanken:

Das Voranstellen des Kommentarfeldes foerdert die Eingabe und das Absenden des Beitrags – kommen erst zuviele andere Felder, koennte dies “abschrecken”, zudem ist die Abbruchwahrscheinlichkeit geringer, wenn der eigentliche Beitrag schon getippt wurde.

Als naechstes erlaube ich mir die Frage: Hast du das Design denn selbst mal getestet? Von “Benutzerfreundlichkeit” zu sprechen, impliziert User-Tests – auch wenn man von Heuristiken ein wenig zehren kann.

Zuletzt – ich empfehle, den Code nicht ueber “p”- und “br”-Elemente zu formatieren – Absaetze sind hier nicht angebracht, und Zeilenumbrueche sind selten ueberhaupt erforderlich. Relativ einfach ist es, die Elemente zu “floaten”, also deine “Labels” und Eingabefelder mit einer Breite und einem “float: left;” zu versehen [...]. Das ist etwas schoener.

3ak schrieb am 24. April 2005, 10:52 h    # 

Jens, ich habe keine User Tests durchgeführt, sondern lediglich logische Überlegungen und meine eigenen Erfahrungen zugrundelegt. Ich zehre also gänzlich von Heuristik—und halte das für (m)eine private Site für ausreichend.

Du hast natürlich Recht, dass ich mich mit der Überschrift des Beitrages etwas aus dem Fenster lehne.

Was das Markup angeht, so muss ich zugeben, dass die Verwendung von p und br ein wenig der Faulheit entspringt: es war deutlich einfacher als mit floatenden label Elemententen etc. zu experimentieren, zumal ich die labels oberhalb der Eingabefelder haben wollte und nicht daneben.

4Jens Meiert schrieb am 24. April 2005, 17:17 h    # 

Hi Andreas, nur flugs zum Markup: Wenn du die Felder einfach darueber haben moechtest, kannst du den Labels – die du, soweit ich sehe, aber erst noch einbauen muesstest – ja einfach ein “display: block;” verpassen, dann laeuft der Hase. Kein semantisch unpassendes Markup, nur ein wenig CSS :)

Viele Gruesse!

5ak schrieb am 24. April 2005, 20:55 h    # 

Ok, werds mal probieren. Danke für den Hinweis. Diese einfache Lösung war definitiv “thinking out-of-the-box” für mich.

6Jeena Paradies schrieb am 28. April 2005, 22:54 h    # 

Zu Formular Verschönerung hat Manuel Blih einen sehr schönen und anschaulichen Artikel geschrieben: Schöne Formulare in XHTML+CSS

Ich habe deine Methode die Metadaten unter der eigentlichen textarea zu positionieren mal für meine Weblogsoftware (Jlog), die in den nächsten Tagen wohl in einer ersten Stabilen Version herauskommen wird, implementiert. Ich bin schon gespannt, wie das von den Nutzern aufgenommen wird. Das ist mir früher nie aufgefallen, aber es ist wirklich viel schöner gleich mal seinen Text reinzuschreiben bevor man ihn vergisst und sich danach erst um alle Metadaten kümmern zu können, wenn man will.

7Vitaly Friedman schrieb am 4. Mai 2005, 21:23 h    # 

Zweifellos hat sich Usability und Accessibilty durch diese Veränderung verbessert. Denn tatsächlich möchte der Benutzer zuerst seine Gedanken zum Ausdruck bringen, die Eingaben wie Name, E-Mail, URL et cetera sind dabei eher die Last, die der Benutzer tragen muss. Was Cookies betrifft, so ist das heutzutage fast Standard.

8Alex schrieb am 6. Juni 2005, 11:53 h    # 

Ich finde Andreas Ansatz gut nachvollziehbar. Als Userin schreibe ich lieber erst den Text und dann die Metadaten rein. Aus alter Gewohnheit und weil es grafisch besser aussieht bin ich immer beim alten Schema geblieben, obwohl mir auch schon öfter die Idee kam, dass es andersrum vielleicht Userfreundlicher ist.

9Robert Hartl schrieb am 5. Oktober 2005, 01:50 h    # 

Gute Idee und vertretbar einfache Umsetzung.
Bei (meines Erachtens gut) durchdachten Fragebögen werden ja auch zuerst die Sachfragen behandelt und zum Ende hin die persönlichen Angaben abgefragt: gleiches Prinzip.

10r schrieb am 9. April 2007, 21:39 h    # 

Gute Idee und vertretbar einfache Umsetzung.
Bei (meines Erachtens gut) durchdachten Fragebögen werden ja auch zuerst die Sachfragen behandelt und zum Ende hin die persönlichen Angaben abgefragt: gleiches Prinzip.

11devmag schrieb am 12. April 2007, 14:00 h    # 

danke für den Hinweis. Der Aufwand scheint angemessen. wenn man noch am text schreiben ist, macht es ja keinen sinn die meta-daten schon zuvor abzufragen…
das würde nur den schreibfluss stören und eventuell zu ideenverlust führen…