Das Projekt

Die Sächsische Aufbaubank hatte den Wunsch die Navigation auf ihrer Website zu restrukturieren, um ihre Förderprogramme hervorzuheben und leichter auffindbar zu machen. Zusätzlich sollte die generelle Usability des Menüs verbessert werden, und es sollte für die mobile Ansicht optimiert werden. 

Mein Kollege Adrián Fernández und ich teilten die Aufgaben des Projektes zwischen uns auf: Er leitete die Workshops und Tests, ich übernahm die Erstellung der Wireframes, High Fidelity Designs und Prototypen und bereitete die Tests vor.

Beständigkeit und Standards
Wenn das gleiche Thema an verschiedenen Stellen im System unterschiedlich benannt wird, verwirrt dies die Nutzer:Innen und erschwert das Auffinden der gesuchten Seite.

Fehlervermeidung
Es gibt zwei Suchfelder auf der Startseite. Öffnet man das Menü, findet sich dort ein dritter. Es ist unklar, ob sie die gleiche Funktion erfüllen. Hier muss Einheitlichkeit hergestellt werden, um Fehler zu vermeiden.

Beständigkeit und Standards
Der Menüpunkt “Förderfinder” existiert doppelt, in verschiedenen Menükategorien. Dies führt zu Verwirrung und Unschlüssigkeit bei Nutzer:Innen.

Nutzerkontrolle und Freiheit
Die Option zum Schließen ist links angeordnet wenn man das Menü öffnet, rechts wenn man die Suchfunktion benutzt. Dies fordert von Nutzerin:Innen erst das Suchen nach der Funktion, was zu Frustration führt.

Ästhetisches und minimalistisches Design
Zu viele visuelle Marker überfordern Nutzer:Innen und schaffen Unklarheit und Durcheinander auf der Benutzeroberfläche.

Übereinstimmung von System und Wirklichkeit
Nutzer:Innen erwarten eine logische und nachvollziehbare Anordnung oder Kategorisierung von Informationen. Befinden sich Themen im Menü in einer unpassenden Kategorie, sind sie schwer aufzufinden.

Card Sorting Studie

Wir organisierten eine Card Sorting Studie über Optimal Workshop, um die inhaltliche Struktur der Navigation zu überprüfen. Die Tester:Innen wurden gebeten, die Menüpunkte in Kategorien einzuordnen sowie eigene Kategorien zu erstellen. Zusätzlich wurden sie zum Verständnis der Begriffe befragt. Aus den Ergebnissen der Studie leiteten wir einen Vorschlag für eine Restrukturierung ab.

Schlussfolgerungen aus der Card Sorting Studie

1. Viele Fachbegriffe waren für Laien schwer verständlich. Dadurch ließen sie sich auch schwer in Kategorien einsortieren. Dies erklärt wahrscheinlich auch die Absprungrate von 61% bei den Tester:Innen.

2. Das Menü braucht weniger Kategorien, dafür eine zusätzliche dritte Ebene zur Unterteilung.

3. Möglicherweise ist eine Aufteilung der Förderprogramme nach Zielgruppen von Vorteil.

4. Manche Begriffe müssen spezifiziert werden, damit z.B. klar ist, ob es sich um ein Bildungsförderprogramm oder eine Ausbildung bei der SAB handelt.

In einem weiteren Workshop mit dem Kunden wurde eine neue Struktur mit teilweise neuen Begriffen erarbeitet, welche wir im Folgenden in ein Design umwandelten.

Optimierungsvorschlag Navigationsstruktur

Zielgruppen

In der ersten Ebene der Navigation werden drei Zielgruppen angesprochen: Unternehmen, Privatpersonen und öffentliche Einrichtungen.

Andere Themen

Alle anderen Themen lassen sich in den zwei zusätzlichen Menüpunkten “Über die SAB” und “Service” einsortieren. Die erste Zeile der alten Navigation wird dadurch ersetzt.

Förderfinder

Zusätzlich wird ein Förderfinder in der Menüleiste verlinkt, der bei der Suche nach einem passenden Förderprogramm helfen soll.

Dritte Menüebene

Eine dritte Menüebene enthält Direktlinks zu den Themen der zweiten Ebene. Die genauen Begriffe waren zur Zeit des Designs noch in Abstimmung und sind daher durch Platzhaltertext dargestellt.

Die neue Navigation bring nicht nur eine bessere inhaltliche Struktur mit sich, sondern auch eine klare Verbesserung in der Usability.

• Klarere Abgrenzung vom Seiteninhalt, Seite scrollt nicht mehr wenn das Menü geöffnet ist

• Deutliche Hierarchie in der Menüleiste, wichtige Punkte sind in der zweiten, größeren Zeile zu finden

• Farbkontraste angepasst, bessere Lesbarkeit durch Verwendung der Grüntöne des SAB-Brandings (AAA)

• Klare Zeichensetzung zur Verortung der Nutzer:Innen, gewählte Menüpunkte sind stark hervorgehoben

• Räumliche Abgrenzung der Menüebenen durch farblich unterschiedliche Hintergrundflächen

• Responsives Verhalten für mobile Ansichten

Ist das Menü geöffnet, aber noch kein Element aus der zweiten Menüebene angewählt, entsteht rechts ein leerer Bereich. Dieser wird durch eine kurze Beschreibung der Themen gefüllt, die sich unter dem angewählten Menüpunkt aus der ersten Ebene finden lassen.

Das Layout der Suche wurde angepasst. Dadurch dass sie nach unten ausklappt, wenn man auf das Lupen-Icon klickt, nimmt sie im Headerbereich keinen Platz ein. Der Button zum Schließen ist rechts angeordnet, auf der gleichen Seite wie die Schließen-Funktion des Menüs. Die dadurch erzeugte Konsistenz erzeugt Vertrauen bei Nutzer:Innen.

Wir testeten die neuen Entwürfe mit einem thinking aloud usability test über Quant UX. Es wurden 72 Nutzer:innen beim Lösen von vier Aufgaben beobachtet. Zwei der Aufgaben waren spezifisch für Privatkunden, die anderen zwei betrafen Unternehmen.

Testergebnisse

Schlussfolgerungen aus den Testergebnissen

• die neue Navigation ist übersichtlich und intuitiv bedienbar

• Menü sollte sich entsprechend der Erwartungen der Nutzer bei Hover öffnen

• Begriffe in der Navigation sind immer noch nicht 100% klar verständlich und müssen noch einmal überarbeitet werden

• Menü sollte sich über Klick außerhalb des Menüs schließen, nicht nur über Schließen-Schaltfläche

• der zusätzliche Suchschlitz auf der Startseite muss entfernt werden

Es wurde ein weiterer Workshop mit dem Kunden durchgeführt, bei dem letzte Änderungen an Struktur und Begriffen nach der Auswertung des Usability-Testes vorgenommen wurden. Danach bereitete ich die Designs final auf und übergab diese nach Freigabe des Kunden an die Entwicklung.

Die neue Navigation befindet sich noch in der Entwicklung, doch wir sind optimistisch, dass wir durch gründliches Testen ein gut funktionierendes System geschaffen haben.