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

Voit, Stefan | 19.12.2023
OMNINET Newsbeitrag Blogartikel UX Formulare 770x395 DE

Über sie werden Anfragen an den Service-Desk gestellt, Urlaube gebucht oder Risiken verwaltet: Formulare sind zentral bei der Implementierung und erleichtern den Arbeitsalltag in Self-Service-Portalen enorm. Das gilt allerdings nur dann, wenn Systemadministration auch die User-Experience (UX) des Formulars in den Fokus stellen. Kurz gesagt: Wird ein Formular erstellt, sollten die Macher neben einer perfekten Funktionalität auch auf ein positives Nutzererlebnis abzielen. Lesen Sie hier, wie Sie mithilfe von UX-Design-Patterns und 11 einfachen Tipps Ihre Formulargestaltung aufs nächste Level heben.

Kraftpaket UX: Warum UX-Design-Patterns Ihre Formulare entscheidend verbessern

Ein Teammitglied möchte ein Formular in einem Serviceportal nutzen, öffnet es, arbeitet sich Feld für Feld vor – und durchläuft derweil ein mögliches Gefühlsspektrum von Erleichterung „Wow, das geht aber schnell“ bis Wut „Wo zur Hölle muss ich jetzt den Haken setzen?“. Jene Effekte, die durch die Nutzung einer Bedienoberfläche entstehen, können unter dem Begriff User-Experience zusammengefasst werden. Um eine positive UX von Formularen zu erzielen, können sich Systemadministratoren einer Reihe sogenannter UX-Design-Patterns bedienen. Ähnlich einer erprobten Schablone bieten solche Patterns wiederkehrende Lösungen für Funktionen eines Userinterfaces. Analog verhält es sich etwa mit dem Konzept einer Ampel: Weil das Farbschema im Straßenverkehr bereits ausreichend bekannt und akzeptiert ist, können es Designer auch an anderer Stelle einsetzen, wie etwa zur Kennzeichnung von Lebensmitteln oder aber bei chipkartenbasierten Schließsystemen von Hotelzimmertüren.

Der Vorteil von UX-Design-Patterns für System-Entwickler liegen auf der Hand: Statt jedes Mal für dieselben Herausforderungen neue Lösungen zu entwickeln, helfen Patterns, die optimale Vorgehensweise für bestimmte Anwendungsfälle ausfindig und abrufbar zu machen. Das spart Zeit für spezialisierte Fachkräfte und ermöglicht es zudem auch weniger erfahrenen oder geringer qualifizierten Entwicklern, Systemadmins und technischen Consultants, hervorragende und vor allem einheitliche Formulare für Self-Service-Portale zu produzieren.

Auch nutzerseitig verbreiten UX-Design-Patterns Wohlgefühl, indem sie vertraute Lösungen und Abläufe präsentieren. Wer demnach bei der Formulargestaltung auf bereits etablierte Nutzungskonzepte setzt, hält die kognitive Belastung gering, denn die bekannten Muster suggerieren den Nutzern: „Du kennst diesen Weg“ – und sofort fühlen sie sich sicher, wodurch irrtümliche Eingaben oder Rückfragen minimiert werden.

Worauf achten bei der Formulargestaltung? 11 Tipps für attraktive Formulare

› Inhalt so einfach wie möglich, so komplex wie nötig halten

› Kerninhalte highlighten, Überflüssiges verbergen

› Label dran – auf den Punkt und richtig platziert

› Das passende Feld wählen: Options- vs. Drop-down-Felder

› Performance-Boost Autocomplete

› User lieben Fortschrittsanzeigen

› Content optisch gruppieren

› Farbe ins Spiel bringen

› Vorsicht vor vertikalen Linien

› Weniger ist mehr: Spalten

› Design konsistent durchziehen

User-Experience ist ohne Frage ein weites Feld. Wo also ansetzen, wenn das nächste Formular gestaltet werden soll? Wir haben eine kleine, aber feine Selektion von 11 erstaunlich einfachen, aber extrem effektiven Tipps in Hinblick auf die Struktur und den Inhalt Ihres Formulars für Sie zusammengestellt und dabei auf etablierte UX-Design-Patterns gesetzt.

Inhalt so einfach wie möglich, so komplex wie nötig halten

Klingt logisch, aber wie soll das gehen? Beispielsweise kann es helfen, komplexe Inhalte herunterzubrechen, indem nicht ein riesiges Formular erstellt wird, sondern Zwischenschritte mehr oder weniger eigene, kleinere Formulare erhalten. Innerhalb der einzelnen Formulare darf gerne auch nochmal der digitale Rotstift angesetzt werden: Raus mit überflüssigen Wahloptionen – je sparsamer Buttons und Eingabefelder eingesetzt werden, desto schneller lassen sich die Formulare später befüllen.

Kerninhalte highlighten, Überflüssiges verbergen

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.

Label dran – auf den Punkt und richtig platziert

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.

Das passende Feld wählen: Options- vs. Drop-down-Felder

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.

Performance-Boost Autocomplete

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.

User lieben Fortschrittsanzeigen

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.

Content optisch gruppieren

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. 

Farbe ins Spiel bringen

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.
Vorsicht vor vertikalen Linien

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.

Weniger ist mehr: Spalten

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.

Design konsequent durchziehen

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.

Vertikale Linien mit Bedacht einsetzen

Verschiedene Lesemuster bei Formularen

Ein flexibel konfigurierbares Self-Service-Portal hilft Ihnen dabei, Dienstleistungen über Formulare strukturiert und für alle Abteilungen zentral zugänglich zu machen. In unserem Factsheet erhalten Sie alle technischen Infos zum Self-Service-Portal auf einen Blick.

Download Factsheet

Gibt es ein perfektes Formular? Ein Fazit

Sie werden es merken: Schon allein diese kleine Selektion an 11 Gestaltungs-Tipps, basierend auf etablierten UX-Design-Patterns, werden Ihr Formular deutlich verbessern – und sicher auch nach ästhetischen Gesichtspunkten verschönern. Doch Vorsicht, bevor Sie sich in der optischen Attraktivität Ihres Formulars zu sehr verlieren – es wäre ein Fehler, sie überzubewerten. Denn in der Formulargestaltung gilt: Funktionalität schlägt Design, und zwar immer. Führt ein Designprinzip dazu, die Aussagekraft des Formulars zu schmälern, sollten Sie es vernachlässigen. Dasselbe gilt in puncto Komfort: Auch wenn ein Feature noch so bequem für User erscheinen mag, geht es auf Kosten der Performance, dann: „Kill your darlings“. Oder zumindest: Stellen Sie bestehende Elemente hart auf den Prüfstand, ob sie wirklich notwendig sind. Denn egal wie nah Sie dem Zustand „perfektes Formular“ kommen – funktionieren muss Ihr Formular auf jeden Fall.

Limitiert oder beflügelt wird Ihre Gestaltung zudem auch durch die angebotene Funktionstiefe des jeweiligen Anbieters – hier also besser genau hinsehen, bevor Sie sich für ein Tool entscheiden. Bei der Auswahl Ihres Softwareproviders ist es zudem ratsam, auch darauf zu achten, was mit Ihren mühsam erstellten Formularen bei einem Versions-Upgrade geschieht. Im Worst Case heißt das nämlich: Alles neu erstellen, weil alte Formulare mit der neuen Version nicht kompatibel sind. Ein weiteres Kriterium: Wie komplex ist das Coding hinter dem Formular? Low-Code-Optionen entlasten hochqualifizierte Fachkräfte und ermöglichen Formulargestaltung auch für weniger erfahrene Teammitglieder. Ebenso relevant ist darüber hinaus, inwiefern sich einmal erstellte Formulare anpassen lassen. Denn im Daily Business müssen immer wieder einmal neue Formularinhalte implementiert oder aber Zwischenschritte entfernt werden. Hohe Flexibilität schont hier die Nerven jedes Systemadministratoren bei der Formulargestaltung – bei gleichzeitig mehr Zufriedenheit für Kunden, Partner und interne Mitarbeiter.

Newsletter-Anmeldung

Sie möchten in Sachen digitalem Servicemanagement, GRC und Automatisierung auf dem neuesten Stand bleiben? In unserem Newsletter informieren wir Sie über relevante Blogbeiträge sowie Fachartikel und erhalten darüber hinaus regelmäßig Informationen zu Events, DACH-weiten Fachmessen und zu unseren kostenlosen Live-Sessions aus den Bereichen Servicemanagement, Prozessautomatisierung, GRC und Analytics mit Business Intelligence. Außerdem benachrichtigen wir Sie über neue Features der Geschäftsprozessplattform OMNITRACKER.