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:
- Kommentar
- Name
- eMail-Adresse (mit dem Hinweis, dass diese nicht auf der Seite erscheint)
- 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>).
- Ist kein Cookie vorhanden, muss die Kommentatorin alle Felder ausfüllen und der Vorschau/Absenden-Button steht am Ende.
- Ist ein Cookie vorhanden, handelt es sich um einen wiederkehrenden Leser, der den Vorschau/Absenden-Button direkt unterhalb des Kommentarfeldes findet und sich nicht weiter um die übrigen Felder kümmern muss (siehe Screenshot, anklicken zum Vergrößern).
Hier der Inhalt des Bausteins (form) comment_form, welches von TXP dazu benutzt wird, das Eingabeformular anzuzeigen.
<p><txp:text item="message" /><br /><txp:comment_message_input /></p><!-- falls kein Kommentarcookie vorhanden ist... --><txp:if_no_cookie><p><txp:text item="name" /><br /><txp:comment_name_input /> <txp:comment_remember /></p><p><txp:text item="email" /><br /><txp:comment_email_input /> </p><p>Website<br /><txp:comment_web_input /></p><p><txp:comment_preview /> <txp:comment_submit /></p></txp:if_no_cookie><!-- falls ein Kommentarcookie vorhanden ist... --><txp:if_cookie><p><txp:comment_preview /> <txp:comment_submit /></p><p><txp:text item="name" /><br /><txp:comment_name_input /> <txp:comment_remember /></p><p><txp:text item="email" /><br /><txp:comment_email_input /> </p><p>Website<br /><txp:comment_web_input /></p></txp:if_cookie>- 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.
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.
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.Viele Gruesse!
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.
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.
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.
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…