FLA – UX/UI Pattern Proposal v3: Process Navigation & Action Buttons
Updated: Full Zusammenfassung panel (Finnova reference) · Grouped Actions dropdown · Priority indicator
Screen Draft A — Standard Mid-Step (with all 3 changes applied)
FLA – Antrag / Antragsdaten / Kreditnehmer — mid-step (AK1 rule) — v2 with changes
finnova. TESTSYSTEM
FLA Testautomation User ▾
Weisskopf Senior AG 402.840 High
CHANGED
Prozess-Aktionen
AWB erstellen
Kreditvorlage generieren
Offerte erstellen
Verwaltung
Status-Historie anzeigen
Versionen vergleichen
Entscheide anzeigen
Dokumente
Dossier öffnen
Unterlagen verwalten
Export / Drucken
Kreditnehmer-Daten
Name
Vorname / Zusatz
Strasse / Nr.
PLZ / Ort
Land
Weitere Informationen
Anzahl Mitarbeiter
UID-Nummer
UPDATED v3
Zusammenfassung
402840/001/0001
expand_more
Antrags-Nr.
113722
Zweck
Investitionen
Geschäftsfall
Neu
Finanzierungsspezialist
Andreas Graf
Antragsteller
FLA Testautomation User
Status
In Erfassung
Kommentare zum Antrag expand_more
Keine Kommentare
Interne Notizen i expand_more
Keine Notizen
Screen Draft B — First Step of Module (AK2.1 rule — only "Weiter")
FLA – Antrag / Finanzierung / Engagement — FIRST STEP (no Zurück)
finnova.
FLA Testautomation User ▾
Weisskopf Senior AG402.840Medium
Prozess-Aktionen
AWB erstellen
Kreditvorlage generieren
Verwaltung
Status-Historie anzeigen
Entscheide anzeigen
Dokumente
Dossier öffnen
Export / Drucken
Engagement-Daten
Kreditbetrag
Laufzeit
Zinssatz-Typ
Zusammenfassung
402840/001/0001
expand_more
Antrags-Nr.
113722
Zweck
Investitionen
Geschäftsfall
Neu
Finanzierungsspezialist
Andreas Graf
Antragsteller
FLA Testautomation User
Status
In Erfassung
Kommentare zum Antrag expand_more
Keine Kommentare
Interne Notizen expand_more
Keine Notizen
Screen Draft C — Sub-page / Tab (AK3 rule — only "Zurück")
FLA – Sicherheitenart = Kontoguthaben (Sub-page, AK3: Zurück only)
finnova.
FLA Testautomation User ▾
Weisskopf Senior AG402.840Low
Verwaltung
Status-Historie anzeigen
Dokumente
Dossier öffnen
Export / Drucken
Sicherheitenart: Kontoguthaben
Kontonummer
Betrag (CHF)
Bemerkung
Zusammenfassung
402840/001/0001
expand_more
Antrags-Nr.
113722
Zweck
Investitionen
Geschäftsfall
Neu
Finanzierungsspezialist
Andreas Graf
Antragsteller
FLA Testautomation User
Status
In Erfassung
Kommentare zum Antrag expand_more
Keine Kommentare
Interne Notizen expand_more
Keine Notizen
Annotation Key + Rule Matrix (Updated)
Annotation Key (Updated v3)
A Aktionen ▾ (Grouped) — Dropdown groups ALL actions: process actions (AWB, Kreditvorlage), management (Status-Historie, Versionen, Entscheide), and documents (Dossier, Unterlagen, Export). Context-aware: sub-pages show fewer groups.
B Additional Infos List (in Side Panel) — Shortcuts moved from content strip to right panel as a vertical navigation list: "Additional Infos" header + rows with label and chevron (Status History, Versions, Decisions, Pendencies, Notes, Dossier).
C Priority Badge — Shows High (red) / Medium (amber) / Low (grey) next to Aktionen button. Reflects current process priority.
D Full Zusammenfassung Panel — Right panel: blue accent header, all data fields (Antrags-Nr., Zweck, Geschäftsfall, Finanzierungsspezialist, Antragsteller, Status with color dot), Antragstatus-Historie link, and "Additional Infos" navigation list at bottom.
sync Changes from v2
1. Summary panel rebuilt — Full Zusammenfassung matching Finnova reference: header with Material Icon + blue accent bar, all data fields, status with yellow dot
2. Additional Infos list — Vertical nav list (Status History, Versions, Decisions, Pendencies, Notes, Dossier) with chevrons replaces Kommentare/Notizen sections
3. Antragstatus-Historie — Dedicated clickable link row with schedule icon
4. Shortcuts → Additional Infos List — Shortcut strip removed from content area, replaced by "Additional Infos" vertical list with chevrons in side panel
5. Material Icons — All emojis replaced with Google Material Design Icons throughout
6. Panel width — Increased from 240px to 260px for better readability
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 (Updated)
Primary
#2980B9, white text
Use: next step
Ghost / Secondary
White fill, border #ccc
Use: previous step
High
Aktionen + Priority
Grouped dropdown
Use: all actions
Additional Infos
Dossier chevron_right
Additional Infos List
Label + chevron row
Use: side panel navigation
High Medium Low
Priority Badges
3 levels, color-coded
Use: next to Aktionen