FLA – UX/UI Pattern Proposal: Process Navigation & Action Buttons
Screen Draft A — Standard Mid-Step (Typical Loan Advisory Page)
FLA – Antrag / Antragsdaten / Kreditnehmer — mid-step (AK1 rule)
finnova. TESTSYSTEM
Antrag
FLA Testautomation User ▾
Antrag
Antragsdaten
Kreditnehmer
Sicherheiten
Weitere Finanzierungen
Finanzierung
Engagement
Tragbarkeit
Bewertung
Bewertung
Produkt Abschluss
Produkt
Übermittlung an QS
Credit Office
Qualitätssicherung
Back Office
Startseite › Antrag › Antragsdaten › Kreditnehmer
Weisskopf Senior AG 402.840
⚙
Regelwerk
📁
Dossier
📋
Pendenzen
📄
Offerte
🔔
Priorität
📦
Unterlagen
B + Pin
Kreditnehmer-Daten
Name
Vorname / Zusatz
Strasse / Nr.
PLZ / Ort
Land
Weitere Informationen
Anzahl Mitarbeiter
UID-Nummer
C
Zusammenfassung
402840/001/0001
Antrags-Nr.
Investitionen
Zweck
Neu
Geschäftsfall
● In Erfassung
Status
Antragstatus-Historie
Screen Draft B — First Step of Module (AK2.1 rule — only "Weiter")
FLA – Antrag / Finanzierung / Engagement — FIRST STEP (no Zurück)
finnova.
Antrag
FLA Testautomation User ▾
Antrag
Antragsdaten
Kreditnehmer
Sicherheiten
Finanzierung
Engagement
Tragbarkeit
Startseite › Antrag › Finanzierung › Engagement
Weisskopf Senior AG402.840
⚙
Regelwerk
📁
Dossier
📋
Pendenzen
📄
Offerte
🔔
Priorität
+ Pin
Engagement-Daten
Kreditbetrag
Laufzeit
Zinssatz-Typ
← Kein Zurück (erster Step im Modul)
Zusammenfassung
402840/001/0001
Antrags-Nr.
● In Erfassung
Status
Screen Draft C — Sub-page / Tab (AK3 rule — only "Zurück")
FLA – Sicherheitenart = Kontoguthaben (Sub-page, AK3: Zurück only)
finnova.
Antrag
FLA Testautomation User ▾
Antrag
Antragsdaten
Sicherheiten
Kontoguthaben
Startseite › Antrag › Antragsdaten › Sicherheiten › Kontoguthaben
Weisskopf Senior AG402.840
⚙
Regelwerk
📁
Dossier
📋
Pendenzen
📄
Offerte
+ Pin
Sicherheitenart: Kontoguthaben
Kontonummer
Betrag (CHF)
Bemerkung
Zurück navigiert zur Sicherheiten-Übersicht (AK3)
Zusammenfassung
402840/001/0001
Antrags-Nr.
Annotation Key + Rule Matrix
Annotation Key
A Aktionen ▾ — Full action menu (all items). Always present top-right. Dropdown reveals all available actions for current context.
B Shortcut Strip — Pinnable quick-access shortcuts. Red circle icon + label. Horizontal scrollable. Configurable per bank (FLA-6070). Max 6 visible before "+ mehr" overflow.
C Process Actions (AWB, Kreditvorlage etc.) — Context-specific process triggers, NOT navigation. Dark grey secondary style. Placed between Zurück and Weiter with a subtle divider to differentiate from nav.
BA Acceptance Criteria → Button Rule
RuleZurückWeiter
AK1 – Mid-step (Main pages)← ZurückWeiter →
AK2.1 – First step of modulenoneWeiter →
AK2.1 – Last step of module← Zurücknone
AK2.2 – Single-step Geschäftsfallnonenone
AK3 – Sub-page / Tab← Zurücknone
AK4 – GesamtpfandmatrixGesamtpfandmatrix schliessen
AK5 – Pop-upsnonenone
Button Style Guide — Design System Alignment
Primary
#C8102E, white text
Use: next step
Ghost / Secondary
White fill, border #ccc
Use: previous step
Neutral Secondary
#4a4a4a, white text
Use: process actions
📁
Dossier
Shortcut Chip
Red icon, border chip
Use: action shortcuts
Aktionen Dropdown
#C8102E filled
Use: full action menu