1 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 1 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
![eBook-Project by AboutWebDesign.de [LOGO]](logo.jpg){kind=logo}
|
||
5.6 Formular-Gestaltung |
||
| Zurück zu: [ eBook-Startseite | AboutWebDesign.de ] | ||
|
Inhaltsverzeichnis Formular-Gestaltung 5.6.1 Einleitung 5.6.2 Formulare in HTML 5.6.3 Grundsätze der Formulargestaltung 5.6.3.1 Simpel bleiben 5.6.3.2 Datenschutz 5.6.3.3 Gliederung 5.6.3.4 Bestätigung 5.6.4 Formular-Tuning 5.6.4.1 Usability 5.6.4.2 Eingaben überprüfen 5.6.4.3 Erscheinungsbild verbessern 5.6.5 Surfer befragen 5.6.5.1 Vorgedanken 5.6.5.2 Planungsphase 5.6.5.3 Technische Planung 5.6.5.4 Die richtigen Fragen stellen 5.6.5.5 Die Umfrage starten 5.6.5.6 Auswertung |
||
5.6.1 EinleitungFormulare sind ein wichtiges Element für jede Internet-Seite: Wo auch immer Angaben des Benutzers oder Interaktion gefragt sind, ist ihr Einsatz unvermeidbar. Daher ist es nur angemessen, diesem Thema ein eigenes Kapitel zu widmen. Wir beginnen mit einer kleinen Einführung in das Thema, in der wir erklären, wie Formulare überhaupt erzeugt werden. Dann konzentrieren wir uns ganz auf die gestalterischen Aspekte: Was muss getan werden, um ein Formular zu einem guten Formular zu machen? Zusätzlich dazu gehen wir noch kurz auf das Thema der Benutzer-Befragung ein. |
||
|
||
5.6.2 Formulare in HTMLFormulare werden grundsätzlich mit dem form-Tag eingeleitet. Darin werden dann mit input-Tags verschiedene Eingabefelder festgelegt. Wenn ein Formular abgeschickt wird, müssen seine Daten noch irgendwie verarbeitet werden. Mehr dazu im Perl- oder PHP-Tutorial.Folgendes Beispiel zeigt eine simple Formulardefinition: <form name="Name der Form" action="script.pl" method="POST"> Ihr Name: <input type="text" name="name"><br> Ihre Telefonnummer: <input type="text" name="telefonnummer"><br> Dürfen Ihre Daten gespeichert werden? <input type="checkbox" name="speichern_erlaubt" value="Ja"><br> Aus welchem Land kommen Sie? <select name="land"> <option value="Deutschland">Deutschland</option> <option value="Schweiz">Schweiz</option> </select> </form> Diesen Code im Browser anzeigen Mehr Informationen dazu finden Sie im Internet, beispielsweise bei SelfHTML. |
||
|
||
5.6.3 Grundsätze der Formulargestaltung5.6.3.1 Simpel bleiben"Keep it simple" ist die beste Grundregel für die Formulargestaltung: Je weniger Felder ausgefüllt werden müssen, desto eher sind die Surfer dazu bereit. Und wenn Sie dem Surfer auch noch erklären, wofür seine Daten benötigt werden, ist er noch viel eher bereit, Feedback zu geben.5.6.3.2 DatenschutzSurfer sind sehr sensibel, wenn es um ihre persönlichen Daten geht. Erklären Sie daher genau, wann und wofür die Daten gespeichert werden sollen. Speicherung von Daten ist sowieso so eine Sache: Wenn Sie wirklich Daten speichern wollen, sollten Sie das "Opt-In"-Verfahren verwenden, d.h. der Surfer muss vorher durch einen expliziten Klick zustimmen.5.6.3.3 GliederungWeiterhin sollten Sie Ihre Formulare so übersichtlich wie möglich gestalten. Eine Gliederung mit Tabellen und Unterteilung in Unterkategorien bietet sich hier an:<form> <table> <tr> <td colspan="2"> <b>Persönliche Angaben</b> </td> </tr> <tr> <td>Name</td> <td><input type="text" name="name"></td> </tr> <b>Ihre Wünsche</b> </td> </tr> <tr> <td>Wie viele Produkte sollen bestellt werden?</td> <td><input type="text" name="prod_anzahl"></td> </tr> </table> </form> Diesen Code im Browser anzeigen 5.6.3.4 BestätigungKein Formular ohne Bestätigung und kein Fehler ohne Fehlermeldung: Ohne Rückmeldung ist der Surfer ratlos. |
||
|
||
5.6.4 Formular-Tuning5.6.4.1 UsabilityEs gibt Möglichkeiten, mit JavaScript die Usability eines Formulars zu verbessern. Und wenn kein JavaScript aktiviert ist, macht das auch nichts, denn dann funktioniert das Formular trotzdem.Folgender Code macht das erste Feld des ersten Formulars beim Laden des Dokuments aktiv: <body onLoad="document.forms[0].erstesfeld.focus();"> Diesen Code im Browser anzeigen ... wobei "erstesfeld" natürlich durch den Namen des Eingabeelements zu ersetzen ist. Wenn man Felder mit einem Beispiel-Inhalt vorbelegt, hilft das oft beim Eingeben der gewünschten Informationen. Besonders elegant wird das, wenn der Beispiel-Inhalt dann auch automatisch gelöscht wird: <INPUT name="erstesfeld" value="12/04/2001" onClick="document.forms[0].erstesfeld.value='';"> Diesen Code im Browser anzeigen 5.6.4.2 Eingaben überprüfenSie können Client-seitig überprüfen, ob ein Surfer gültige Daten eingegeben hat. Das geht mit JavaScript und ist im Kapitel "JavaScript-Know-How" erklärt. Beachten Sie aber bitte, dass eine solche Überprüfung niemals einen Server-seitige Gültigkeitstest ersetzen darf.5.6.4.3 Erscheinungsbild verbessernMit CSS lassen sich tolle Effekte erzielen. Probieren Sie doch einmal diese Beispiele aus:<input type="text" size="40" style="font-family: Verdana, Arial, sans-serif; font-size: 13px; font-weight: bold; color: #ffffff; background-color: silver; border-width: small; border-color: black;"><br><br> <select name="" style=" font-family: Verdana, Arial, sans-serif; font-size: 13px; font-weight: bold; color: #ffffff; background-color: LightSteelBlue; border-width: small; border-color: black; width: 200px;"> <option value="1" SELECTED>Beispiel 1</option> <option value="2">Beispiel 2</option> <option value="3">Beispiel 3</option> </select><br><br> <select name="" style=" font-family: Verdana, Arial, sans-serif; font-size: 13px; font-weight: bold; color: black; background-color: Khaki; border-width: small; border-color: black; width: 200px;"> <option value="1" SELECTED>Beispiel 1</option> <option value="2">Beispiel 2</option> <option value="3">Beispiel 3</option> </select> Diesen Code im Browser anzeigen |
||
|
||
5.6.5 Surfer befragenDie Befragung von Surfern ist ein komplexes Gebiet. Daher stellen wir hier eine kleine Schritt-für-Schritt-Liste vor, die Ihnen zumindest ungefähre Anhaltspunkte geben sollte.5.6.5.1 VorgedankenEin Webmaster "stolpert" ziemlich oft in Situationen, die nach einer User-Befragung verlangen. Manchmal, eine sehr elementares Problem, weil eben Verkaufs- oder Marketingstrategien optimiert werden müssen. Oder auch nur, um zu erfahren, ob die neue Site-Sektion gut ankommt.Das Mittel der Wahl ist hier wohl eine Umfrage. Genügend Traffic vorausgesetzt (schließlich braucht man ja auch Surfer, die die Fragen dann beantworten), ist die Umfrage wohl eine ziemlich effiziente und preiswerte Methode. Wer eine Umfrage durchführt, sollte am besten die folgenden fünf Schritte befolgen. Wer hier nicht schlampt, sollte mit guten Ergebnissen rechnen können. 5.6.5.2 PlanungsphaseZunächst einmal gilt es, die grundsätzlichen Ziele der Umfrage im Detail zu definieren:
Weiterhin sollte geklärt werden, wer sich um die Auswertung der Umfrageergebnisse kümmert. Nur, wer hier richtig plant, kann hinterher die richtigen Fragen stellen. 5.6.5.3 Technische PlanungSind die generellen Planungen abgeschlossen, so sollten Sie beginnen, sich mit den technischen Details zu beschäftigen.Es gibt ziemlich viele CGI-Scripts, die Umfragen abwickeln. Eine recht brauchbare Auswahl findet sich beim CGI Resource Index. Eine Alternative dazu ist Zoomerang. Die Benutzung von Zoomerang ist einfach und erfordert im Gegensatz zu den CGI-Scripts keine technischen Vorkenntnisse. Zoomerang ist kostenlos. Nur im Falle einer längeren Datenspeicherung (länger als 30 Tage) muss eine Gebühr von 199$ entrichtet werden. 5.6.5.4 Die richtigen Fragen stellenWer die richtigen Fragen stellt, wird auch die richtigen Antworten erhalten - leider gilt auch der Umkehrschluss.Es gilt also, klare und vor allem eindeutige Fragen zu formulieren. So z.B. ein schlechtes Beispiel: "Wie oft gehen Sie einkaufen"? Häufig / Manchmal / Selten Besser wären konkretere Antwortmöglichkeiten: "Wie oft gehen Sie einkaufen"? Einmal pro Woche / Zweimal pro Woche / Jeden zweiten Tag Ebenfalls zu vermeiden sind komplizierte Formulierungen: "Ist es nicht wahr, dass Sie im Grunde keine Hülsenfrüchte mögen?" Ja / Nein Deutlich besser wäre: "Mögen Sie Hülsenfrüchte?" Ja / Nein Achten Sie darauf, eine gewisse Fragekonsistenz beizubehalten. Soll heißen: wenn Sie den Surfern bei einer Frage differenziertere Antwortmöglichkeiten als Ja/Nein geben, dann versuchen Sie, den Surfern solche Antwortmöglichkeiten bei allen Fragen zu geben. Im Allgemeinen gilt, dass differenzierte Antwortmöglichkeiten im Endeffekt zu genaueren Ergebnissen führen, jedoch auch schwieriger zu beantworten sind. Vermeiden Sie es auch, zu viele Fragen zu stellen. Hier gilt die Regel "Weniger ist mehr". 5.6.5.5 Die Umfrage startenAlle Vorbereitungen sind abgeschlossen - der Launch der Umfrage steht nun kurz bevor.Bereiten Sie doch vorher noch ein kleines Gewinnspiel für alle teilnehmenden Surfer vor, das erhöht die Motivation der User, überhaupt teilzunehmen. Nun sollte die Umfrage gestartet werden. Verlinken Sie Ihr Umfrageformular so, dass es jedem Benutzer ins Auge springt. Vermeiden Sie gleichzeitig aber, Ihre Benutzer damit ständig zu nerven. So reicht z.B. eine (und nicht womöglich zehn) Erwähnung der Umfrage in Ihren News. 5.6.5.6 AuswertungIst die Umfrage beendet, muss mit der Auswertung der Daten begonnen werden. Wer Zoomerang benutzt, hat es leicht: Auswertungen können problemlos "zusammengeklickt" werden.Anderenfalls bietet es sich durchaus an, die Daten z.B. in Microsoft Excel zu analysieren. Oder, für echte Profis: ein Statistikprogramm. Hier finden Sie einen Überblick über derzeit auf dem Markt befindliche Statistikprogramme. |
||
|
