Ein Formular kann auf dem Desktop ordentlich wirken und auf dem Smartphone trotzdem scheitern. Felder rutschen aus dem sichtbaren Bereich, Beschriftungen brechen ungünstig um und der Absenden-Button gerät zwischen Tastatur und Seitenrand. Wer Formulare plant, sollte deshalb nicht zuerst an Farben und Rahmen denken, sondern daran, wie Menschen sie tatsächlich ausfüllen: oft unterwegs, mit einer Hand und wenig Zeit.
Ein guter Ausgangspunkt ist ein einfacher Ablauf: nur nötige Angaben abfragen, Eingaben verständlich benennen und den nächsten Schritt sichtbar halten. Bei der technischen Umsetzung helfen bootstrap klassen, um Formularelemente und Abstände konsistent zu gestalten. Entscheidend bleibt, das Ergebnis auf echten Bildschirmgrößen zu prüfen. Ein Layout, das im Editor ordentlich aussieht, sagt noch wenig darüber aus, ob ein Feld auf einem schmalen Gerät gut bedienbar ist.
Erst den Ablauf, dann das Layout planen
Bevor Sie Felder anordnen, klären Sie, welche Informationen der Prozess wirklich braucht. Ein Newsletter benötigt meist eine E-Mail-Adresse. Eine Terminbuchung kann zusätzlich nach einem Zeitfenster fragen. Jede weitere Pflichtangabe erhöht den Aufwand und kann dazu führen, dass jemand abbricht.
Ordnen Sie die Fragen in der Reihenfolge, in der Nutzerinnen und Nutzer sie beantworten können. Persönliche Angaben gehören meist vor optionale Details. Wenn ein Formular mehrere Abschnitte enthält, kennzeichnen Sie den Fortschritt und sagen Sie klar, was noch folgt. So entsteht kein Eindruck einer endlosen Liste.
Beschriftungen müssen sichtbar bleiben
Platzhaltertext kann ein Beispiel zeigen, ersetzt aber keine Feldbeschriftung. Sobald eine Person etwas eintippt, verschwindet der Platzhalter. Bei langen Formularen ist dann schwer zu erkennen, ob ein Feld etwa nach Straße, Ort oder Abteilung fragt.
Setzen Sie die Beschriftung dauerhaft oberhalb oder neben das Eingabefeld. Verwenden Sie konkrete Begriffe statt allgemeiner Hinweise wie «Eingabe». Bei speziellen Formaten hilft ein kurzes Beispiel direkt am Feld, etwa für eine Telefonnummer. Erklären Sie auch, ob die Angabe erforderlich ist. Ein Sternchen allein reicht nicht, wenn die Bedeutung nirgends erläutert wird.
Bedienung auf dem Smartphone testen
Schmale Bildschirme verlangen keine verkleinerte Desktopseite, sondern eine sinnvolle Neuordnung. Mehrspaltige Felder können untereinander stehen, damit niemand zwischen Eingaben hin- und herspringen muss. Große Touch-Ziele erleichtern die Auswahl, besonders bei Kontrollkästchen und Auswahlfeldern.
- Prüfen Sie, ob jedes Feld ohne seitliches Scrollen erreichbar ist.
- Wählen Sie passende Eingabetypen, damit die richtige Tastatur erscheint.
- Halten Sie Abstände groß genug, damit benachbarte Schaltflächen nicht versehentlich getroffen werden.
- Testen Sie, ob die Bildschirmtastatur wichtige Felder oder Hinweise verdeckt.
- Kontrollieren Sie das Formular mit realistischen, längeren Eingaben.
Ein besonders wichtiger Test beginnt nach dem Antippen des ersten Feldes. Manche mobile Browser verschieben die Seite, sobald die Tastatur erscheint. Wenn dadurch die aktuelle Beschriftung oder der nächste Button verschwindet, kostet das unnötige Orientierung. Prüfen Sie deshalb auch, wie die Seite beim Wechsel zwischen Feldern und nach dem Schließen der Tastatur reagiert.
Fehler dort erklären, wo sie auftreten
Eine Meldung wie «Formular ungültig» hilft kaum weiter. Benennen Sie stattdessen das betroffene Feld und erklären Sie, was fehlt oder welches Format erwartet wird. Die Meldung sollte in der Nähe der Eingabe erscheinen und sich auch ohne Farbe erkennen lassen. Ein roter Rand allein genügt nicht für alle Nutzer.
Nach dem Absenden sollte die Seite den Fokus auf den ersten Fehler setzen oder eine gut sichtbare Zusammenfassung anzeigen. Bereits korrekt ausgefüllte Angaben müssen erhalten bleiben. Sonst zwingt das Formular Menschen, ihre Arbeit erneut zu erledigen.
Erfolg klar bestätigen
Nach einer gültigen Eingabe braucht es eine eindeutige Rückmeldung. Sagen Sie, dass die Anfrage eingegangen ist, und nennen Sie den nächsten Schritt, falls einer folgt. Bei einer Terminbuchung kann das eine Bestätigung per E-Mail sein; bei einer Kontaktanfrage eine realistische Angabe zur Antwortzeit.
Behandeln Sie diese Bestätigung als Teil des Formulars, nicht als nachträglichen Zusatz. Ein klarer Abschluss gibt Nutzenden Sicherheit und hilft dem Team, Erwartungen realistisch zu steuern. Ein kurzer Test mit Menschen, die das Formular noch nicht kennen, zeigt oft schnell, an welchen Stellen Beschriftungen, Reihenfolge oder Rückmeldungen Fragen offenlassen.