Sonstiges

Kommentarformular: Jakob Nielsens gesucht

Wer ist Jakob Nielsen? Der Usability-Guru schlechthin. Eine lebende Legende, sagen manche. Auf jeden Fall kennt der auf alle Webdesign-Fragen eine Antwort, sagen manche. Meine Frage betrifft das Kommentarformular auf diesem Blog hier, genauer gesagt, das Rechenfeld:
kommentarformular
Es gibt immer wieder Leser, die vergessen, das Rechenfeld auszufüllen. Das ist mittlerweile nicht mehr so schlimm, da seit gestern der Kommentartext nach der Fehlermeldung nicht mehr weg ist. Aber es nervt. Wie bekommt man es nun hin, dass der Leser nicht vergisst, dieses Feld auszufüllen? Welchen Kniff wendet man also an? Das Feld ist doch schon rot umrandet, da steht auch was von „füll das Ergebnis aus“, auch in rot. Wat muss ich noch tun??? Ratlos..

Update
nach einigen Feedbacks und prima Vorschlägen sieht das Formular nunmehr so aus:
kommentarformular change
1. alle Pflichtfelder sind nun rot umrandet, der Konstistenz wegen
2. bei allen Pflichtfeldern steht nun „required“ dahinter, zwar englisch, aber was solls
3. beim Rechenfeld wird nun erklärt, warum man das ausfüllen soll
4. das Rechenfeld wurde nach unten versetzt, vor den Speicher-Button, so verliert das der Kommentierende nicht mehr aus dem Fokus
5. das Rechenfeld wurde geleert, keine Vorbefüllung mehr

6. Nachteil: beim nachträglichen Editieren des Kommentars (via edit commentsXT Plugin), taucht nun das Rechenfeld erneut auf, leer. Feld Name, Mail und URL sind wie gehabt ausgeblendet, nur das Kommentarfeld nicht. Man muss das Rechenfeld eigentlich nicht befüllen, aber das weiß der Leser nicht. Liegt wohl an der IF-Schachtelung in der Comments.php im Template, muss ich mir nachher in Ruhe ansehen. Solange ist es aber verschmerzbar, dass es erneut eingeblendet wird und im Sinne des Spamschutzes („ich bin doch kein Spambot, warum nervst Du mich damit wieder?“) aber kein Dauerzustand.


Neue Stellenangebote

Growth Marketing Manager:in – Social Media
GOhiring GmbH in Home Office
Senior Social Media Manager:in im Corporate Strategy Office (w/d/m)
Haufe Group SE in Freiburg im Breisgau
Senior Communication Manager – Social Media (f/m/d)
E.ON Energy Markets GmbH in Essen

Alle Stellenanzeigen


7. JavaScript Check: Stebu hat auf dieses Beispiel in SelfHTML verlinkt. Das muss noch eingebaut werden. Man überprüft mit JS, ob das Rechenfeld gefüllt ist. Wenn nein, kommt beim Senden eine Alertbox. Bessere Vorschlag: solange Rechenfeld leer ist, ist der Speicher-Button deaktiv. Aber das hat wiederum den Nachteil, dass man ohne aktives JavaScript einen Kommentar wohl nicht mehr absenden kann. Das wäre nix gut.

Über den Autor

Robert Basic

Robert Basic ist Namensgeber und Gründer von BASIC thinking und hat die Seite 2009 abgegeben. Von 2004 bis 2009 hat er über 12.000 Artikel hier veröffentlicht.

50 Kommentare

  • Ich würde es ja einfach so lassen, besser geht es eh nicht.

    Vielleicht würde aber etwas AJaX helfen, statt der Fehlerseite halt eine Hervorhebung des leeren Feldes, ähnlich wie im WP-Backend wenn man eine Einstellung ändert. Die ganze Zeile dann in Rot, blinkend, was auch immer…

  • Wenn man Javascript einsetzt, könnte man ein alert() bei leerem Feld(onsubmit()) setzen oder den Submitbutton erst aktivieren/enblenden, wenn im Ergebnis was drinn steht(per onkeypress z.B.)
    Damit(JS) würdest du ca. 80% aller Leser abdecken können.

    Nielsen würde das zwar ablehnen, aber ne Idee wäre es.

  • Ich würde das „Ergebnis eintragen!“ daneben schreiben (nicht in rot) und ein (required) daneben.

    So wie es jetzt ist fällt das Feld aus dem Blickfeld,
    -weil es schon ausgefüllt ist,
    -weil es rot wie die Überschrift ist.

    Dein Hinweis unten (mir wär´s doch fast wieder passiert) ist aber auf jeden Fall gut 😉

  • kann man denn via JS so arbeiten, dass man einen Alert einblendet, wenn in der Rechenbox keine Zahl steht (kann das Feld ja leeren) und der Cursor in die Textbox „kommentartext“ springt? Ganz schön aufdringlich irgendwie.

  • usability-wise wäre es schlauer über ein feld zu schreiben, was hinein soll, und nicht darunter. außerdem ist die reihenfolge unlogisch. wenn das feld unter der textarea für den kommentar, aber vor dem abschicken-button, stehen würde, dann macht es mehr sinn. insbesondere auch deshalb, weil die anderen 3 felder oben automatisch ausgefüllt werden, wenn man 1x hier war. man schaut dann nämlich einfach nicht mehr hoch, weil man es von anderen websites gewöhnt ist, dass da oben nix mehr passiert.

  • Wie hast es nun hin bekommen, das der Kommentartext nach der Fehlermeldung nicht mehr weg ist? Würde mich interessieren, da ich auch dieses Plugin benutze.

  • Die rote Umrandung wirkt irgendwie wie ein Button und nicht wie ein Eingabefeld. Vielleicht eher die Zahlen farblich hervorheben?

  • Ich schliesse mich kris an, was die Positionierung des Eingabefeldes angeht. Aus genau diesem Grund steht es bei mir auch direkt vor dem Absenden-Button. 😉

    BTW: Gibt es einen spamtechnischen Grund, dass du die Zahlen ausschreibst, statt die Ziffern zu verwenden? Ist bei z. B. 3+4 mal Spam durchgekommen?

  • Das ganze kommt ja vor allem vor, weil die anderen Felder ja nicht immer wieder neu ausgefüllt werden müssen, zumindest, wenn man Autovervollständigen oder wie auch immer die Funktion im Browser heißen mag, aktiviert hat. Aber ich glaube es wäre schon angenehmer, wenn per Javascript einmal geprüft wird und dann bei einem leeren Feld, einfach nen Dicker fetter roter Block um das Feld erscheint und nicht nur so ganz dünn. Da dieser nur erscheint, wenn man die Eingabe vergessen hat, stört es normalerweise ja auch die Optik nicht.

  • wie wärs, wenn man das ergebnisfeld links neben den speichern-button setzt?
    würde mir zumindest am ehesten auffallen…

  • @Zapp, das ist schon lange geknackt und setzt sich immer stärker bei den Spammern durch leider. Hatte das letztens mehrfach im Kontaktformular in der Sidebar (ist aber nicht deswegen nicht mehr drin). Da gabs auch nen Rechenfeld mit Zahlen, die Spammer hatten sich gleich dessen angenommen. Hatte es dann in einen alphanumerischen String geändert.

  • @rh, prima!

    Also:

    1. Maßnahme: Rechenfeld links von Speichern setzen
    2. Maßnahme: JS-basierender Check mit Alertbox, falls Rechenfeld beim Submit des Formulars nicht gefüllt ist

  • Wie waere es einfach, indem man das Feld weglaesst und auf alternativen geht, wie z.B. Regular Expressions um Links zu zaehlen, BBCode zu filtern und den Referer abzuchecken?

    Ich halte mein Blog derzeit so spamfrei – auch ohne (sichtbarem) Zusatzfeld…

  • ok, das Feld ist nun unterhalb des Kommentartextfeldes, oberhalb des Speicher-Buttons (links davon ging nicht wegen Platzmangel).

    So schon mal besser? Danach kommt noch der JS-Check, ob das Rechenfeld leer ist, sobald man speichern will.

    @ad, die Math Comment Methode hat sich exzellent bewährt, warum soll ich was ändern?

  • @ad: Ein Plugin aktivieren und ein Tag setzen – einfacher geht’s nicht. Die Haupt-Arbeit hab‘ ich schon hinter mir. Wenn jemand das Ding will, nett bitte sagen hilft.

  • @Rob: So exzellent kann es ja nicht sein, sonst müsstes du dieses Brimborium hier nicht veranstalten. Zudem wolltest du ja Usabilty, und die kann man einfacher haben.

    Aber mach du mal. Dein Blog, dein Himmel, dein Kommentarfeld.

  • Äh – noch was: das Mathefeld kommt jetzt auch beim ändern zu Tage – ohne dass man rechnen muss. War das vorher auch so? Nö, oder?

  • Mach doch die Speicher-Taste erst dann scharf wenn auch ein Ergebnis eingetragen ist. Das sollte mit JS + CSS Null Problem sein.

    Ich meine es ist netter nur Funktionen anzubieten die auch tatsächlich zur Verfügung stehen, anstelle beim Drücken eine nicht verfügbaren Funktion dem Anwender einen Fehler, alert o.Ä. um die Ohren zu werfen.

  • test oiofifof.. Mist,

    das Rechenfeld taucht nun beim nachträglichen Editieren des Kommentars erneut auf, geleert. Die anderen Felder wie Name etc sind wie gewohnt dann ausgeblendet, weil man die ja nicht erneut ausfüllen muss. Das Rechenfeld ist zwar leer, muss aber nicht wirklich eingetragen werden. Komm nicht dahinter, wieso das Rechenfeld eingeblendet wird. Muss an der IF-Schachtelung vom edit comments plugin im Template liegen. Letztlich verschmerzbar, wenn der Leser beim editieren erneut das Rechenfeld ausfüllt, denke ich.

  • Ich würde erstmal untersuchen, ob das Feld wirklich so viel seltener ausgefüllt wird als die anderen „required“ Felder! Kann ich mir ehrlich gesagt nicht vorstellen.

    Aber ein paar Vorschläge habe ich auch noch, obwohl die schon kamen:

    Wenn ein Feld required ist, sollte da required hinterstehen. Hinter *allen* Feldern. Auch sollten *alle* required Felder gleich aussehen. Mach die alle rot oder alle mit rotem Stern davor. Das hätte Nielsen auch gesagt. Konsistenz ist megawichtig.

    Zweitens: Das Feld muss oberhalb des Textes kommen, damit man sich das Pflichtweise „durchtabben“ muss. Die Änderung ist IMHO kontraproduktiv

    Drittens: Schreib den Grund dahinter: required wegen Spamschutz.

    Bye egghat

  • Wenn Du Usability möchtest, dann musst Du das ganze Formular ändern. Erst mal überlegen, was denn so ein Formular ist: Ein elektronischer Brief. Und wie fertigst Du einen Brief an? Du schreibst den Inhalt auf ein Blatt Papier, dann wird das Papier gefaltet und in einen Umschlag gesteckt. Zuletzt kommt die Adresse auf den Umschlag und die Briefmarke.

    Wenn Du dieses Prinzip auf Dein Kontaktformular überträgst, dann müsste als Erstes das eigentliche Kommentarfeld kommen. Danach kommen dann Name, Email und Website. Zuletzt die Anti-Spam-Briefmarke und dann der Speichern-Button.

    Perfekt wäre, wenn der Inhalt des Rechenfeldes geprüft würde, und der Speicher-Button nur dann funktionieren würde, wenn im Rechenfeld eine Zahl drin steht.

    Übrigens ist mir das auch schon passiert, dass ich die Eingabe vergessen habe. Das liegt meines Erachtens in erster Linie daran, dass die Adressfelder automatisch ausgefüllt werden. Bei den meisten Blogs schreibt man dann einfach den Kommentar und klickt dann auf Abschicken oder Speichern. Das Anti-Spam-Feld vergisst man daher ganz leicht. Mit
    der geänderten Reihenfolge rückt das Feld mehr ins Auge, wenn es leer
    unter der Adresse steht.

    P.S. Die von mir vorgeschlagene Reihenfolge wird übrigens auch von Guru Nielsen vorgeschlagen. Und obwohl ich ihn nicht besonders mag, gebe ich ihm hier völlig Recht.

  • @egghat, danke, ich habe nun alle Pflichtfelder rot umrandet (mail, name, ergebnis), dazu das required in Klammern wie bei den anderen Pflichtfeldern. Bombardier:))

    @Lothar, habe mehrfach festgestellt, dass die Leser eher bevorzugen, dass die anderen Feldern liebr oberhalb des Kommentartextes stehen sollen. Rein subjektives Gefühl.

  • Na supi, so gehts doch 😉

    Glaub mir, es war der Inhalt. Wenn da schon was drinsteht muss man eben nix reinschreiben und wer liest sich sowas schon durch? (außer mir versteht sich) 😉

  • Perfekt! Da hätte sogar der Jakob nichts mehr auszusetzen. Nur die Bezeichnung „Speichern“ für den submit-Button ist etwas ungewöhnlich. 😉

  • > Da hätte sogar der Jakob nichts mehr auszusetzen.

    Da wäre ich mir nicht so sicher. Der würde sicher kein „required“ für ein deutsches Zielpublikum verwenden. 😉

    > (ohne Taschenrechner; dient der Spam-Abwehr) (required)

    Ist irgendwie Overkill. Ich würde auf den Taschenrechner-Witz verzichten und den Rest in eine Klammer packen.

    PS: Mist, jetzt hatte ich sogar selbst das Ausfüllen vergessen.

  • >Aber das hat wiederum den Nachteil, dass man ohne aktives JavaScript einen Kommentar wohl nicht mehr absenden kann.

    Da gibts ne Lösung für.
    du schreibst den Button mit JS rein
    document.write(‚<input type=“submit“ style=“display:none;“…. />‘);
    dann wird er nur eingebunden, wenn JS aktiv ist.
    Für die NO-JS-User einfach darunter
    <noscript>
    <input type=“submit“ …. />
    </noscript>

  • Du kannst per JS den Submit-Button nach dem Laden der Seite ausblenden (visibility:hidden). Ist das Rechenfeld ausgefüllt, wird der Submit-Button sichtbar (visibilty:visible).

    Mit JS-Bibliotheken wie z.B. JQuery sind das ein paar Zeilen JS-Code. Und mit deaktivierten JS bleibt alles beim alten.
    Ich hab es mal als Beispiel hier hoch geladen. Wenn die Seite geladen ist, wird der Submit-Button ausgeblendet. Sobald man in das Input-Feld klickt um ein Ergebnis einzugeben, wird der Submit-Button eingeblendet. Gleichzeitig wird noch beim Absenden geprüft ob ein Wert eingegeben wurde und ggf. ein Warnhinweis ausgegeben.

    Falls du dir kein JQuery dazu laden möchtest (sind immerhin knappe 45-77kB), kann man das ganze auch mit „normalen“ JS umsetzen, ist dann aber ein Tick aufwendiger.

    Das Ganze kann man wahrscheinlich noch weiter steigern und per Ajax gleich abfragen ob der Wert richtig ist oder ob der Kommentator die falsche Unterhose an hat 😉

  • ich bin da noch etwas vorsichtig, Bibliotheken zu laden, denn immerhin ist schon die Startseite ziemlich fett, aber auch die Unterseiten. Ebenso die „manuelle“ JS-Lösung. Erstmal warte ich nun den Tag ab, ob Leser schon wieder das Feld vergessen, dann rst kommt die JS Lösung zum Zuge.

  • Danke Robert, jetzt wo das Kommentarfeld über dem Speichern-Schalter steht, vergesse ich nicht mehr so leicht, meine Rechen-Hausaufgabe zu machen. Und wenn ich es mal vergesse bleiben ja jetzt meine Kommentare beim Zurückgehen erhalten (mit Firefox getestet).

    So ist es schon sehr gut. Nur eine als Grafik dargebotene Spamaufgabe würde mir noch besser auffallen, weil ich dafür trainierte Reflexe habe. Aber nötig ist das nicht mehr. Die absolut perfekte und für jeden ergonomische Lösung gibt es wohl eh nicht.

  • Ich hab nicht alle Kommentare durchgeackert, aber ich hätte schon noch ein paar Ideen.

    Wieso zum Beispiel steht oben „ERSTELLE BEITRAG“ drüber und nicht Kommentar?

    Ich probier morgen mal eine Alternative zu machen.

  • Alles Quatsch 🙂
    Die Leute schaffen die Aufgabe ohne den Taschenrechner einfach nicht und dessen Benutzung ist ja explizit verboten. Also Hilfmittel zulassen und alles wird gut.

  • barrierefreiheitstechnisch wäre es nur besser die Labels vor die input-Felder zu setzen, so dass erst die Beschreibung vorgelesen wird in einem screenreader

  • 1. Warum steht das Kommentarformular nicht oben. Habe mit dem 10“-Tablett ein bisschen lange „gescollt“.
    2. Bei der Rechenaufgabe steht „requiered“. ‚Pflichtfeld‘ wäre besser!

    Ansonsten gute Lösung mit der roten Umrandung!!!