Modulseite

Lektion 1 von 9

Formulare planen: vom Wunschzettel zur schlanken Feldliste

Du leitest aus einem Auftrag eine Feldliste mit Zweck, Typ und Pflicht ab, streichst Unnötiges begründet und planst Gruppen, Reihenfolge und Bestätigungsmeldung.

ca. 40 Min.0/4 Checks gelöst

Worum es geht

Alina ist Mediamatikerin im 2. Lehrjahr bei der Pixelhof GmbH in Luzern. Eine Kletterhalle in Kriens will ihre Kinderkurse nicht mehr per Telefon und E-Mail verwalten, sondern über ein Anmeldeformular auf der Website. Am Montagmorgen schickt die Kursleiterin ihre Wunschliste: 23 Felder, darunter Schuhgrösse, Beruf der Eltern und Hobbys des Kindes.

Die Versuchung ist gross, die Liste einfach abzutippen. Das wäre ein Fehler. Jedes Feld kostet die Eltern Zeit, und jedes zusätzliche Feld ist ein Grund, das Formular halb ausgefüllt wieder zu schliessen. Dazu kommt das Datenschutzgesetz: Wer Personendaten sammelt, braucht dafür einen Zweck. In dieser Lektion lernst du, ein Formular zu planen, bevor du eine einzige Zeile HTML schreibst. Am Ende hast du eine Feldliste, die du gegenüber der Kundin begründen kannst.

Jedes Feld hat einen Preis

Stell dir vor, du stehst am Schalter einer Bank und willst nur Geld wechseln. Die Person am Schalter fragt nach Beruf, Hobbys und Lieblingsfarbe. Du würdest dich fragen, was das soll, und vielleicht wieder gehen. Genau so fühlt sich ein überladenes Formular an.

Ein Feld kostet auf drei Arten:

KostenWas passiertFolge
ZeitLesen, überlegen, tippen, auf dem Handy scrollenMehr Abbrüche, weniger Anmeldungen
Vertrauen«Wozu wollen die das wissen?»Falsche Angaben oder Abbruch
VerantwortungDaten müssen geschützt, aktuell gehalten und gelöscht werdenAufwand und Risiko für den Betrieb

Der letzte Punkt wird oft vergessen. Das Schweizer Datenschutzgesetz (DSG, oft revDSG genannt, in Kraft seit dem 1. September 2023) verlangt unter anderem, dass Personendaten verhältnismässig und zweckgebunden bearbeitet werden. Auf Deutsch: Du sammelst nur, was du für einen klar erkennbaren Zweck wirklich brauchst, und verwendest es nur dafür. Diesen Grundsatz nennt man Datensparsamkeit.

Check 1 · Eine AntwortEinstieg

Die Kursleiterin möchte das Feld «Beruf der Eltern» behalten, weil es «später vielleicht für Sponsoring interessant» sein könnte. Wie entscheidest du bei der Planung?

Die Feldliste: Zweck, Typ, Pflicht

Das wichtigste Planungswerkzeug ist eine einfache Tabelle. Für jedes Feld hältst du fest:

  • Feld: der Name, wie er im Label stehen wird.
  • Zweck: wofür die Angabe konkret gebraucht wird.
  • Typ: welche Art von Eingabe (Text, E-Mail, Telefon, Auswahl, Datum, Zahl, Ja/Nein).
  • Pflicht oder optional: Ist die Anmeldung ohne diese Angabe unmöglich?

Die Spalte Typ entscheidet später über das HTML. Einige Faustregeln:

SituationTyp im PlanWarum
Wenige feste Möglichkeiten (2 bis 5)RadiobuttonsAlle Optionen sofort sichtbar
Viele feste Möglichkeiten (über 6)Auswahlliste (select)Spart Platz
Ja/Nein, ZustimmungCheckboxEin Klick
Freier Text, kurzTextfeldName, Ort
Freier Text, langTextbereich (textarea)Bemerkungen
E-Mail, Telefon, Datum, ZahlSpezialtypPassende Tastatur auf dem Handy, eingebaute Prüfung

Bei Pflicht oder optional gilt: Pflicht ist nur, was für den Zweck zwingend ist. Ohne E-Mail-Adresse kann die Kletterhalle keine Bestätigung senden, also Pflicht. Ohne Schuhgrösse kann die Anmeldung trotzdem stattfinden, die Halle kann ja beim ersten Kurstag nachfragen. Also optional.

Check 2 · Mehrere AntwortenEinstieg

Welche Felder sind bei der Kursanmeldung der Kletterhalle Pflichtfelder? Wähle alle passenden.

Wähle alle zutreffenden Antworten.

Gruppieren, ordnen, abschliessen

Eine gute Feldliste ist noch kein gutes Formular. Drei weitere Entscheide machen den Unterschied.

Gruppieren

Menschen denken in Blöcken. Bei einer Kursanmeldung sind das: das Kind, die erziehungsberechtigte Person und der Kurs. Jeder Block bekommt später eine Überschrift (in HTML ein fieldset mit legend). Mehr als drei bis vier Blöcke deuten darauf hin, dass das Formular zu gross ist.

Ordnen

Die Reihenfolge folgt dem Gedankengang der ausfüllenden Person, nicht der Datenbank:

  1. Vom Einfachen zum Schwierigen: Namen zuerst, Entscheidungen später.
  2. Zusammengehöriges zusammen: PLZ und Ort nebeneinander, in der in der Schweiz üblichen Reihenfolge.
  3. Optionale Felder ans Ende ihres Blocks.
  4. Freitext (Bemerkungen) ganz am Schluss.

Bei der Kursanmeldung gibt es eine Ausnahme, die sich lohnt: Die Kurswahl kann auch zuerst kommen, weil sie die Motivation ist («Ich will mein Kind für den Ferienkurs anmelden»). Beides ist vertretbar, wenn du es begründest.

Layout und Abschluss

  • Einspaltig: Auf dem Handy sowieso, aber auch auf dem Desktop füllen sich einspaltige Formulare schneller aus, weil das Auge nicht springen muss.
  • Label über dem Feld: immer sichtbar, nie nur als Platzhalter im Feld.
  • Ein klarer Button mit einem Verb, das sagt, was passiert: «Kind anmelden» statt «Senden».
  • Meldung nach dem Absenden: Was passiert jetzt? «Danke! Du erhältst in den nächsten Minuten eine Bestätigung per E-Mail. Die Rechnung folgt innert 5 Arbeitstagen.» Eine leere Seite oder nur «Erfolgreich» lässt Eltern ratlos zurück.
Check 3 · ReihenfolgeFortgeschritten

Bring die Schritte beim Planen eines Formulars in eine sinnvolle Reihenfolge.

  1. 1

    Alle gewünschten Angaben mit ihrem Zweck auflisten

  2. 2

    Die Meldung nach dem Absenden formulieren

  3. 3

    Felder ohne Zweck streichen oder durch sparsamere Angaben ersetzen

  4. 4

    Auftrag und Zweck des Formulars klären

  5. 5

    Verbleibende Felder in Blöcke gruppieren und ordnen

  6. 6

    Für jedes Feld Typ und Pflicht oder optional festlegen

Wünsche hinterfragen, ohne zu blockieren

Die Kursleiterin hat ihre 23 Felder nicht aus Bosheit aufgeschrieben. Sie hat aufgeschrieben, was ihr irgendwann einmal gefehlt hat. Deine Aufgabe ist nicht, Nein zu sagen, sondern gemeinsam den Zweck herauszufinden. Bewährte Fragen:

  • «Wofür brauchen Sie die Angabe genau? Wer liest sie, wann?»
  • «Was passiert heute, wenn die Angabe fehlt?»
  • «Reicht eine gröbere Angabe?» (Alter statt Geburtsdatum, Jahrgang statt Datum)
  • «Kann man das später erfragen, wenn es wirklich gebraucht wird?»

Dein stärkstes Argument ist nicht das Gesetz, sondern die Abbruchrate: Jede Anmeldung, die nicht abgeschlossen wird, ist ein verlorener Kurs. Das versteht jede Kundin sofort.

Schritt für Schritt: Von 23 auf 12 Felder

Alina geht die Liste der Kursleiterin systematisch durch.

Schritt 1: Die Wunschliste nach Blöcken ordnen.

BlockFelder laut Kursleiterin
Kind (10)Vorname, Nachname, Geburtsdatum, Geschlecht, Schuhgrösse, Körpergrösse, Gewicht, Hobbys, Schule und Klasse, Klettererfahrung
Erziehungsberechtigte (10)Name, Beruf, Strasse, PLZ, Ort, Telefon privat, Telefon geschäftlich, Mobiltelefon, E-Mail, zweite E-Mail
Kurs (3)Kurswahl, «Wie haben Sie von uns erfahren?», Bemerkungen

Schritt 2: Den Zweck jedes Feldes erfragen. Alina telefoniert zehn Minuten mit der Kursleiterin und notiert die Antworten. Ein paar Beispiele: Die Rechnung kommt per Post, deshalb braucht es die Adresse. Während des Kurses muss die Halle im Notfall jemanden erreichen, also eine Mobilnummer. Die Kurse sind nach Alter ausgeschrieben, ein genaues Geburtsdatum braucht niemand. Gurt und Helm werden vor Ort angepasst, Körpergrösse und Gewicht sind überflüssig. Mietschuhe legt die Halle bereit, wenn sie die Grösse kennt, sonst sucht man halt am ersten Tag.

Schritt 3: Entscheiden.

FeldEntscheidBegründung
Vorname, Nachname KindPflichtTeilnehmerliste
Geburtsdatumersetzt durch Alter (Pflicht)Kurse sind nach Alter ausgeschrieben, gröbere Angabe reicht
SchuhgrösseoptionalMietschuhe bereitlegen, aber nicht zwingend
Geschlecht, Körpergrösse, Gewicht, Hobbys, Schule, Klettererfahrungstreichenkein Zweck für die Durchführung, Kursniveau ergibt sich aus der Kurswahl
Name ElternteilPflichtVertragspartner, Rechnung
Strasse, PLZ, OrtPflichtRechnung per Post
MobiltelefonPflichtErreichbarkeit im Notfall während des Kurses
E-MailPflichtBestätigung, Kursinfos
Beruf, Telefon privat, Telefon geschäftlich, zweite E-Mailstreichenkein Zweck oder doppelt
KurswahlPflichtKern der Anmeldung
«Wie erfahren?»streichenMarketing-Neugier, gehört nicht in die Anmeldung
Bemerkungenoptionalz.B. Allergien, die die Kursleitung kennen muss

Schritt 4: Nachzählen. Gestrichen sind 11 Felder (Geschlecht, Körpergrösse, Gewicht, Hobbys, Schule, Klettererfahrung, Beruf, Telefon privat, Telefon geschäftlich, zweite E-Mail, «Wie erfahren?»). Es bleiben 12 Felder, davon 10 Pflicht und 2 optional. Das Geburtsdatum wurde nicht gestrichen, sondern durch eine sparsamere Angabe ersetzt.

Schritt 5: Typen festlegen. Vorname, Nachname, Name, Strasse, Ort: Textfeld. Alter: Auswahlliste 6 bis 14. Schuhgrösse: Zahl. PLZ: Textfeld mit vier Ziffern (eine PLZ ist eine Kennung, keine Menge, deshalb kein Zahlenfeld). Mobiltelefon: Telefon. E-Mail: E-Mail. Kurswahl: Radiobuttons, weil es nur fünf Kurse gibt. Bemerkungen: Textbereich.

Schritt 6: Meldung nach dem Absenden formulieren. «Danke für die Anmeldung von Lea! Du erhältst gleich eine Bestätigung an die angegebene E-Mail-Adresse. Die Rechnung folgt per Post innert 5 Arbeitstagen.»

Schritt 7: Einen Hinweis zu Gesundheitsangaben ergänzen. Allergien sind Gesundheitsdaten und gelten im DSG als besonders schützenswerte Personendaten. Alina schreibt deshalb im Hilfetext beim Feld Bemerkungen ausdrücklich, wofür die Angabe verwendet wird («nur für die Kursleitung, damit sie im Notfall richtig reagieren kann») und dass sie nach Kursende gelöscht wird.

Mit dieser Tabelle geht Alina zur Kundin. Weil jede Zeile begründet ist, dauert die Besprechung keine Viertelstunde.

Check 4 · Code-LaborEinstieg

Code-Labor: Feldliste bereinigen. Die Kursleiterin hat eine Feldliste geschickt. Jedes Feld ist ein Objekt mit name, zweck und pflicht.

Schreibe bereinigeFeldliste(felder). Sie gibt ein Objekt { behalten, gestrichen } zurück, beide sind Listen von Namen:

  • Felder ohne Zweck (leer oder nur Leerzeichen) kommen nach gestrichen, in der ursprünglichen Reihenfolge. Das gilt auch für Pflichtfelder: ohne Zweck kein Feld.
  • In behalten stehen zuerst alle Pflichtfelder, dann die optionalen, jeweils in der ursprünglichen Reihenfolge.
Code-Labor · JavaScript
Strg + Enter

Typische Fehler

  1. Direkt mit HTML anfangen. Wer ohne Feldliste baut, baut die Wunschliste der Kundin nach. Streichen ist später teurer, weil Code, Texte und Serverskript schon existieren.
  2. «Vielleicht brauchen wir das mal» als Zweck akzeptieren. Das ist kein Zweck. Der Zweck muss heute bestehen und für die ausfüllende Person erkennbar sein.
  3. Alles zur Pflicht machen. Pflicht nur dort, wo der Vorgang ohne die Angabe scheitert. Zu viele Pflichtfelder führen zu Fantasieangaben wie «000 000 00 00».
  4. Die Meldung nach dem Absenden vergessen. Ohne klare Bestätigung senden Eltern das Formular ein zweites Mal oder rufen doch an. Die Meldung gehört in den Plan.
  5. Platzhalter statt Labels einplanen. Im Wireframe sieht das elegant aus, beim Ausfüllen verschwindet die Beschriftung. Plane sichtbare Labels über jedem Feld ein.

Zusammenfassung

  • Jedes Feld kostet Zeit, Vertrauen und Verantwortung. Weniger Felder bedeuten mehr abgeschlossene Anmeldungen.
  • Datensparsamkeit und Zweckbindung: Nur erheben, was für einen klaren Zweck nötig ist, und nur dafür verwenden.
  • Die Feldliste mit den Spalten Feld, Zweck, Typ und Pflicht ist dein wichtigstes Planungswerkzeug.
  • Gröbere Angaben bevorzugen: Alter statt Geburtsdatum, ein Telefonfeld statt drei.
  • Gruppieren in 2 bis 4 Blöcke, einspaltig, Label über dem Feld, Button mit klarem Verb.
  • Die Meldung nach dem Absenden gehört zur Planung.
  • Wünsche der Kundschaft hinterfragst du mit Fragen nach dem Zweck und mit dem Argument Abbruchrate, nicht mit Verboten.

Mit deiner eigenen KI vertiefen

Kopiere einen Prompt in Claude, ChatGPT oder Claude Code. Er macht die KI zur Lernbegleitung statt zum Lösungsautomaten.

Sokratischer Coach für die Feldliste Chat-KI

Du übst, Kundenwünsche auf ein schlankes Formular zu kürzen. Die KI spielt die Kundin und fragt nach, statt dir die Lösung zu geben.