11 Praxis-Tipps für Entwickler von Kundenportalen, um Formulare effizienter zu gestalten

Formulare sind kein Selbstzweck – und doch sind manche Informationen wichtiger als andere. Das sollte auch für User sofort erkennbar sein, indem Pflichtfelder als solche hervorgehoben werden. Hierfür bieten sich verschiedene Möglichkeiten, wie etwa das Label des Pflichtfeldes farblich oder durch eine größere Schrift prägnanter in Szene zu setzen. Den Rahmen dicker oder in einer spezifischen Pflichtfeld-Farbe zu gestalten – und bei ausgefülltem Pflichtfeld schließlich auszugrauen –, ist für den User ebenso ein deutliches Signal wie ein Sternchen als Markierung zu nutzen. Egal, für welche eine Variante Sie sich entscheiden – auch hier gilt es, die Balance zwischen Hervorhebung und Schlichtheit zu finden.

Eine weitere Möglichkeit, Ihr Formular schlank und übersichtlich zu halten, ist es, Inhalte in logische Gruppen zu gliedern. Auf diese Weise ermöglichen Sie es Nutzern, das Formular zu verstehen und schnell auszufüllen. Ist eine Content-Einheit bereits befüllt und im weiteren Formularverlauf nicht mehr relevant – etwa die Kontaktinformationen des Melders –, können Sie diese einfach einklappen und damit die Komplexität reduzieren. Ein thematisches Hin- und Herspringen im Kopf findet bei der Benutzung dann nicht mehr statt.

Um das Formular möglichst rasch erfassbar für die Userschaft zu gestalten, hilft es, Eingabefelder mit einem möglichst kurz gehaltenen Label zu betiteln. Die Länge sollte ein bis zwei Wörter nicht überschreiten, und das Label sollte über dem Feld platziert werden. Im Gegensatz zur seitlichen Platzierung verkürzt dies die Bearbeitungszeit, zudem entsteht zusätzlicher Raum auf der horizontalen Ebene. Das Formular wächst hierdurch zwar in der Vertikalen, dennoch überwiegt der Vorteil: User müssen nicht zeitgleich auf Label und Eingabefeld schauen. Unbedingt vermeiden: Schreibweise in Großbuchstaben – diese ist schwer zu lesen und hindert am kurzen Überfliegen des Inhaltes. Besser ist es, wie in einem Satz den ersten Buchstaben groß zu schreiben. Außerdem sollten Sie darauf achten, Label sowohl innerhalb des Formulars als auch formularübergreifend konsistent zu verwenden. Das schafft Orientierung und sorgt damit für eine bessere UX.

Wer vor der vermeintlichen Detailfrage „Drop-down- oder Optionsauswahl?“ steht: Es kommt darauf an. Bei zwei bis fünf möglichen Antwortoptionen eignen sich sogenannte Radio-Buttons – meist Kreise, in denen per Klick ein Auswahlsymbol platziert werden kann – besser als eine Drop-down-Leiste. Der Grund: User haben vorformulierte Antworten sofort im Blick und können somit schneller wählen. Die vertikale Anordnung der Buttons ist der horizontalen definitiv vorzuziehen, da diese den Usern eine schnellere Bearbeitung ermöglichen.

Neben vordefinierten Antwortoptionen liefern die Autofill-Funktion sowie Suchvorschläge in Eingabefeldern einen echten Geschwindigkeits-Boost. User lieben sie, denn sie reduzieren den Cognitive Load – und es muss weniger getippt werden. Das reduziert die Fehlerquote und wirkt sich gerade für User mit mobilen Endgeräten positiv auf die UX aus.

Zwei Forscherinnen – Bljuma Zeigarnik und Maria Ovsiankina – lieferten bereits vor Jahrzehnten die Begründung, warum Sie in Ihrem Formular idealerweise mit einer Fortschrittsanzeige wie einem Balken arbeiten sollten. Während der Zeigarnik-Effekt besagt, Menschen erinnern unfertige Aufgaben deutlich besser als abgeschlossene Tasks, ergänzt der Ovsiankina-Effekt diese Aussage, indem er einen innerlichen Drang attestiert, diese unabgeschlossenen Aufgaben auch zu beenden. Der Balken harkt genau an dieser Stelle ein, stützt die Erinnerung an die noch zu bearbeitenden Bestandteile des Formulars und befeuert das unterbewusste Bedürfnis, diese zu erledigen, um kognitive Spannungen abzubauen. Der ideale Ort für den Fortschrittsbalken ist direkt unter dem Titel des Formulars. Wer will, kann dies auch als kleine Gamification betrachten.

Im Idealfall bewegen sich User ohne großes Überlegen intuitiv im Formular – doch das erfordert eine durchdachte Struktur. Um das Webformular übersichtlich zu gestalten, ist es ratsam, Content-Blöcke mithilfe von grafischen Kniffen zu strukturieren, um sie als Sinnabschnitt zu kennzeichnen. Hierfür können Sie auf verschiedene Gestaltungsgesetze zurückgreifen wie beispielsweise das

• Gesetz der Nähe: Werden Elemente wie Eingabefelder etwa räumlich nah beieinander angeordnet, werden diese als Einheit wahrgenommen. Verstärken lässt sich der Effekt durch Rahmen oder farbige Hintergründe.

Oder das

• Gesetz der Kontinuität: Linien können ebenso genutzt werden, um in Formularen Verbundenheit einzelner Interaktionsfelder einer Sektion zu demonstrieren: So werden Elemente entlang einer Fluchtlinie angeordnet als zusammengehörig empfunden.

Neben dem Stilmittel Abstand zwischen Elementen bieten sich weitere Optionen, etwa die Gliederung durch Tabs mit zusammenfassendem Titel. User müssen auf diese Weise nicht nur weniger scrollen, sondern erhalten einen komfortablen Überblick über die einzelnen Sinnabschnitte, zwischen denen intuitiv gewechselt werden kann. Ist die Zielstellung jedoch ein möglichst rasches, stringentes Durcharbeiten des Formulars, dann ist ein Design in scrollbaren Sektionen der Tab-Variante vorzuziehen. Wichtig: Beim Formulardesign muss unbedingt darauf geachtet werden, eine Lösung zu finden, die auch responsiv funktioniert, sich also in verschiedenen Bildschirmgrößen anpassen lässt, ohne dass die Struktur oder die Übersicht leiden. 

Keineswegs ist dieser Tipps als Aufforderung falsch zu verstehen, aus 16 Millionen möglichen RGB-Farben so viele wie möglich einzusetzen. Vielmehr gilt es, bewusst deren enorme Wirkkraft zu nutzen. Denn Farben besitzen nicht nur Signalwirkung – wie etwa im Beispiel Ampel –, highlighten Content oder können den Blick des Users leiten, indem sie Elemente priorisieren und somit zu bestimmten Aktionen animieren. Sie vermögen es auch, einem Formular Frische und einen modernen Look zu verleihen. Je nach Reifegrad des Unternehmens wird die Farbgebung jedoch von der Corporate Identity bestimmt.

5 Quick-Tipps in Sachen Farbwahl:

1. Vereinheitlichen Sie unbedingt Header, Schrift und Icons farblich und stimmen diese aufeinander ab. Auf diese Weise wirkt das Formular in sich konsistent.
2. Der Griff in die CI-Palette ist dabei nahezu immer eine gute Wahl, denn durch die Unternehmensfarben können User das Formular sofort als Teil der Unternehmenswelt zuordnen.
3. Berücksichtigen Sie bei der Farbwahl die Lesbarkeit, auch in unterschiedlichen Modi von „Hell“ bis „Dunkel“. Um ausreichend Kontrast sicherzustellen, eigenen sich etwa Tools wie der Contrast Checker oder Adobe Color Contrast Analyzer. Achten Sie auch auf das Thema Accessibility (Download Factsheet).
4. Ziehen Sie bei der Farbwahl die unterschiedliche emotionale Wirkung, auch im Zusammenspiel mit anderen Farben, in Betracht. Eine große Rolle spielen dabei kulturelle Hintergründe und der Nutzungskontext.
5. Weil nie nur eine, sondern immer eine Kombination von Farben zum Einsatz kommt: Nutzen Sie Tools, um ein stimmiges Farbkonzept zu finden. Adobe Color, Coolors oder Paletton sind nur drei Alternativen von vielen.

Es geschieht von selbst: Nutzer erkennen im Formular unterbewusst Linien, entlang derer die einzelnen Elemente angeordnet sind. Dafür braucht es keine dicken, schwarzen Raster-Balken – vielmehr handelt es sich um virtuelle Linien, erzeugt durch die Rahmung von Steuerelementen, Buttons oder Labels. Wer jetzt denkt, ist doch gut, Linien sorgen für Orientierung: Vorsicht. Besonders vertikale Linien sollten so sparsam wie möglich im Formulardesign eingesetzt werden, da sie sich negativ auf die UX auswirken können.

Die Abbildung zeigt deutlich: Zu viele vertikale Linien machen das Formular schwerer visuell zu erfassen, was sich ungünstig auf die UX-Bilanz auswirkt.

Struktur hat großen Einfluss auf die Performance des Formulars. Eine wichtige Rolle spielt dabei auch die Aufteilung in Spalten. Damit sollte, wenn möglich, sparsam umgegangen werden, denn: einspaltiger Content führt zu einer höheren Bearbeitungsgeschwindigkeit. Usern fällt es leichter, die Inhalte zu erfassen. Zudem ist der Pfad, entlang dessen sich die User durch das Formular arbeiten, im einspaltigen Layout stringenter, denn er führt sie unmissverständlich von oben nach unten. Bei mehreren Spalten lässt sich zwar mehr Information auf kleinerem Raum unterbringen, doch eröffnen sich gleichzeitig auch mehrere Wege, um das Formular auszufüllen – und diese sind nicht immer die effizientesten.

Ihr Formular ist einerseits dann konsistent, wenn Nutzer Eingabefelder stets am gleichen Ort und in gleicher Reihenfolge vorfinden. Andererseits sollten auch die strukturierenden Elemente wie Tabs von Formular zu Formular denselben zusammenfassenden Titel erhalten und entsprechend logisch angeordnet werden. Ganz nach dem Motto: Haben Nutzende das Formular einmal verstanden, verstehen sie alle künftigen Formulare.