FinfoxTouch: Die Navigation als Enabler im Beratungsgespräch

Eine intuitive, nutzerzentrierte Informationsarchitektur ist entscheidend für den Erfolg von digitalen Applikationen. Wir werfen einen Blick hinter die Kulissen von Finfox und zeigen am Beispiel unserer Tablet-Lösung FinfoxTouch, welche Rolle die Navigation für eine optimale User Experience spielt.

Das Thema User Experience (UX) hat in den letzten Jahren stark an Bedeutung gewonnen aufgrund der rasant fortschreitenden Digitalisierung, die die Anforderungen der Nutzer grundlegend verändert hat. Bei Finfox wird dem UX-Design daher eine zentrale Bedeutung beigemessen.

In unserem aktuellsten UX-Projekt stand FinfoxTouch im Fokus, unser Tablet-basiertes Beratungstool für die interaktive Kundenberatung. Die neue, vollständig überarbeitete Informationsarchitektur bietet ein den modernsten UX-Anforderungen entsprechendes nutzerzentriertes Navigationslayout, das die Berater und ihre Kunden im persönlichen Anlageberatungsgespräch künftig noch besser digital unterstützt.

Konzeptionelle Herangehensweise oder «Reduced to the Max»

Folgende Ziele standen bei der Neukonzeption der FinfoxTouch-Navigation im Vordergrund:

• Implementierung einer intelligenten Informationsstruktur, die sowohl für eine ganzheitliche Beratung als auch für spezifische Use Cases geeignet ist
• Bereitstellung eines umfassenden und dynamischen Überblicks über alle verfügbaren Inhalte
• Einbezug moderner Navigations-Patterns
• Responsive Navigation für unterschiedliche Bildschirmgrössen
• Sicherstellung einer möglichen zukünftigen Skalierbarkeit
• Optische Reduktion der Navigation mit starker Fokussierung auf die Inhalte («Reduce to the max»)
• Validierung der Ideen in einem Co-Creation-Prozess mit unseren Kunden, in Form von umfassendem Benutzer-Feedback und Nutzertests
• Etablierung einer logischen Navigationshierarchie, um dem Benutzer sowohl eine laterale als auch eine sequenzielle Navigation zu ermöglichen

💡 Eine laterale bzw. horizontale Navigation ermöglicht es dem Benutzer, direkt zwischen verschiedenen Abschnitten oder Kategorien zu wechseln. Eine sequenzielle Navigation führt den Benutzer linear bzw. schrittweise durch Inhalte oder Prozesse in einer festgelegten Reihenfolge.

Navigation als Storytelling-Tool im Beratungsgespräch

Bei Finfox betrachten wir die Navigation als visuelles Storytelling-Tool, das den Beratern ermöglichen soll, ihre Kunden im persönlichen Gespräch effizient und anschaulich durch die einzelnen Schritte des Beratungsprozesses zu führen.

Der Aufbau der FinfoxTouch-Navigationsstruktur enthält vier grundlegende Bereiche.

1. Header-Bereich

Der Header enthält in der Grundkonfiguration folgende Elemente:

• Firmenlogo
• Kunden- und Portfoliozuweisung
• Verschiedene Quick Actions (z.B. Landing-Page, Kundendokumente)
• Zugang zum Mega-Menü mit einer Übersicht aller möglichen Themen auf einen Blick
• Einklappbarer Header-Bereich, um den Fokus auf den Inhalt zu verstärken

2. Themen

Der zentrale Seitentitel präsentiert das aktuelle Thema an prominenter Stelle (im Bild «Vorschlag»). Daneben befindet sich eine Vorschau auf das nächste anstehende Thema, damit sich der Kundenberater während des Beratungsgespräch gedanklich darauf vorbereiten und sein Storytelling darauf abstimmen kann. Mit einem Klick auf den Seitentitel erscheint ein Fly-Out-Dialog mit einer Übersicht aller vorhandenen Themen. Der Dialog ermöglicht einen schnellen Wechsel auch zwischen Themen, die im Beratungsprozess weiter auseinander liegen. Der Themenbereich unterstützt gängige Interaktionsgesten wie das Swipen: Damit kann der Kundenberater einfach und mühelos per Wischgeste zwischen den verschiedenen Themen wechseln.

3. Unterthemen

Ein Thema umfasst je nach Kontext verschiedene Unterthemen (z.B. beim Thema „Analysen“ die Unterthemen Backtesting und Stresstest). Diese werden wie gewohnt in einer Gruppe von Tabs dargestellt. Der Schwerpunkt der Überarbeitung lag hauptsächlich auf der visuellen Neugestaltung der Tabs, um sie besser mit der restlichen Navigation zu harmonisieren.

4. Dynamisches Mega-Menü

Das dynamische Mega-Menü ist das Herzstück der modernisierten Informationsarchitektur in FinfoxTouch. Für den Kundenberater bietet das Mega-Menü, das sich je nach Kontext der Beratungssituation dynamisch zusammensetzt, einen vollständigen Überblick über alle Inhalte und Funktionen, inklusive Kundendokumente oder Kundensuche. Der Kundenberater kann so mühelos zwischen den verschiedenen Themen und Unterthemen der Beratung navigieren. Die dynamische Gestaltung des Mega-Menüs ermöglicht eine fokussierte und kontextbezogene Darstellung der relevanten Informationen.

Validierung des Designs

Nachdem die neue Informationsarchitektur und Navigation definiert waren, galt es sicherzustellen, dass die neu gestaltete FinfoxTouch Applikation den Bedürfnissen und Erwartungen der Benutzer entspricht. Die Validierung des Designs durch Testing ist ein essenzieller Schritt im UX-Design-Prozess, der sicherstellt, dass das endgültige Produkt sowohl funktional als auch benutzerfreundlich ist.

Das UX-Team rekrutierte mehrere Testpersonen, sowohl intern als auch auf Kundenseite, die verschiedene Aufgaben im Zusammenhang mit der Navigation zwischen den Themen und Unterthemen lösen sollten. Zudem wurden die Testpersonen zur visuellen Ästhetik der Anwendung («Desirability») befragt. Die Teilnehmer wurden gebeten, aus einer Liste mit sowohl positiven als auch negativen Adjektiven diejenigen auszuwählen, die sie mit der überarbeiteten FinfoxTouch-Applikation assoziieren.

Das gewonnene Feedback war durchweg positiv und führte zu weiteren Optimierungen, die sich im neuen Design von FinfoxTouch widerspiegeln.

«Die neue Navigation von FinfoxTouch bietet eine intuitive und stringente Benutzerführung. Sie ermöglicht den Beratern, ihre Kunden effizient und anschaulich durch den gesamten Anlageberatungsprozess zu leiten. Der strukturierte Rahmen hilft den Kunden, die einzelnen Schritte zu verstehen, informierte Anlageentscheidungen zu treffen und die Beratung als positives, interaktives Erlebnis wahrzunehmen.»

Roman Holland
UX/Interaction Designer, Finfox