Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Redesigning Bürgerformular

Der Kurs »Web Text Input Output«, gehalten von Frank Rausch, befasste sich mit digitalem und interaktivem Text in Web-Anwendungen. Das erlangte Wissen über angemessene Typografie und die klare Gestaltung von Eingabemasken, Formularen, Dialogen etc. wurden in einem selbstgewählten Abschlussprojekt praktisch angewendet.


Wahl des Abschlussprojektes

Antragsformular für Abfallbehälter der Stadt Gifhorn

In Deutschland sind alle Grundstückseigentümer*innen dazu verpflichtet einen Restabfallbehälter in ausreichender Größe bereitzuhalten. Insofern nicht vollumfänglich selbst kompostiert wird, zudem eine Biotonne. Die An-, Ab- und Ummeldung übernehmen in der Regel die Landkreise. Die Stadt Gifhorn hat für dieses Verfahren ein Onlineformular auf ihrer Website für die Bürger*innen bereitgestellt. Dieses Formular habe ich im Rahmen meines Abschlussprojektes neugestaltet.

Probleme mit der vorherigen Version

Formularstruktur

Die Struktur führt zu einer verwirrenden Anordnung von Formularfeldern, wodurch es für Benutzer*innen schwierig ist, die Informationen in einer logischen Reihenfolge auszufüllen.

Visuelle Hierachie

Es fehlt an einer klaren visuellen Hierarchie, um die wichtigsten Abschnitte hervorzuheben. Dies führt zu einer mangelnden Anleitung der Benutzer*innen durch den Anmeldeprozess.

Fehlende Kontextinformationen

Erklärende Texte sind im Formular falsch platziert, wodurch Nutzer*innen Schwierigkeiten haben, bestimmte Felder richtig auszufüllen.

Fortschrittsanzeige uneindeutig

Die Fortschrittsanzeige ist unzureichend, da Benutzer*innen nicht erkennen können, wie viele Schritte bereits erledigt sind oder noch bevorstehen.

Unklare Navigation

Die Anordnung und Gestaltung der Buttons erschwert es den Benutzer*innen klar zu erkennen welche Aktionen oder Funktionen sie ausführen möchten.

Veraltete Desigsprache

Einige Designelemente wirken veraltet und tragen nicht zur Modernität oder Nutzerfreundlichkeit des Formulars bei.

Unklare Fehlermeldungen

Fehlermeldungen sind möglicherweise nicht aussagekräftig genug, um den Benutzer*innen bei Fehlern effektiv zu leiten, was zu Frustration und Unsicherheit führen kann.

Problemanalyse.pngProblemanalyse.png

Redesign

User Journey

Das erste anzugehende Problem war die Formularstruktur. Um diese zu optimieren, analysierte ich die bestehende User Journey. Dafür habe ich die benötigten Informationen für den Prozess identifiziert, kategorisiert und darauf aufbauend eine klare Formularstruktur erstellt, die für die Nutzer*innen verständlicher ist.

In diesem Schritt habe ich auch die Kontextinformationen, die im Formular enthalten waren, neu angeordnet und sie an den entsprechenden Stellen innerhalb der User Journey platziert. Dadurch müssen Benutzer*innen nicht mehr alle themenübergreifende Hinweise im Voraus lesen und sich merken. Stattdessen erhalten sie die benötigten Informationen genau dort, wo sie gebraucht werden.

User Journey.pngUser Journey.png

Designsprache 

Für ein konsistentes visuelles Erscheinungsbild nutzt die Stadt Gifhorn plattformübergreifend die Farbe Lila. Da dieser Farbton jedoch stark variiert, habe ich mich für eine Palette mit mehreren Abstufungen entschieden, um ein einheitliches Farbschema zu gewährleisten. Dieses wird durch Grautöne sowie Signalfarben unterstützt.

Für eine klarere Interaktion im Formular, habe ich sowohl verschiedene Eingabemasken als auch Button gestaltet, um die Nutzer*innen besser durch den Prozess zu führen.

Um die Benutzerfreundlichkeit zusätzlich zu verbessern, habe ich verschiedene Indikatoren, Fortschrittsanzeigen und Piktogramme gestaltet. Diese Elemente sollen den Benutzer*innen Orientierung geben, ihren Fortschritt verdeutlichen und wichtige Hinweise klarer kommunizieren.

Designsprache.pngDesignsprache.png

Navigation

Um die Navigation und die visuelle Hierarchie zusätzlich zu verbessern, habe ich mich für die Verwendung von Akkordeonelementen entschieden. Diese gliedern das Formular in drei Abschnitte. Benutzer können alle Abschnitte ausklappen, um einen umfassenden Überblick über das gesamte Formular zu erhalten oder Elemente einklappen, um sich gezielt auf das Ausfüllen einzelner Abschnitte zu konzentrieren.

Zusätzlich enthalten die Akkordeonelemente Erfolgsindikatoren, die den Bearbeitungsstatus der einzelnen Abschnitte anzeigen. Dadurch haben Benutzer*innen stets im Blick, welche Abschnitte bereits bearbeitet wurden, welche sich in Bearbeitung befinden und welche bereits abgeschlossen sind.

Prototyp

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Frank Rausch

Zugehöriger Workspace

Web Text Input Output

Entstehungszeitraum

Wintersemester 2023 / 2024

Keywords