037 / Landscape · Natalyas Sprache

Landscape.

Querformat — Variante 2. Gleiche drei Beispielscreens wie 035, aber diesmal in Natalyas tatsächlicher Designsprache (S/W, PT Sans, Safe-Area-Marker). 035 war in 009-Karte-Vokabular gebaut — diese Version ist treu zum Wireframe.

Treue zur Wireframe-Sprache: rein Schwarz/Weiß, PT Sans, scharfe Ecken, Safe-Top 47 px / Safe-Bot 34 px als sichtbare Marker, hellgraue Karten #F1F1F1, schwarze CTAs. Alle Elemente direkt aus den drei Screens, die Natalya am 29. Apr geschickt hat.

01 Transaktion bestätigen

Bitte prüfen Sie — Querformat mit Aktions-Spalte

Daten links als Zwei-Spalten-Definition-List (kompakter), Countdown + Aktionen rechts. Buttons übereinander statt nebeneinander, weil Daumenreichweite im Querformat anders verläuft.

47 px Safe Top

Bitte prüfen Sie

Bitte stellen Sie sicher, dass Ihre Angaben korrekt sind.

Bankname:: XYZ
Transaktion:: Überweisung
Auszahlung an:: DE40 1234 5678 9012 3456 99
Betrag:: 500,00 Euro
Vorgang:: 21.04.2026, 14:30

Noch 05:03 Minuten

34 px Safe Bot.

Spec · 01 Transaktion

Split: 1fr / 280 px
Daten: 2-Spalten DL · 4 px Zeilenabstand
Buttons: vertikal · primary oben
Countdown: PT Mono · 11 px

Bestätigen oben, weil im Querformat der rechte Daumen primär ist. Abbrechen darunter — selten gewollt, aber erreichbar.

21 Neue PIN eingeben (Eingabe noch zu kurz)

PIN-Eingabe im Querformat

Eingabe + Validierungs-Liste links, Tastatur rechts. Validierungsregeln bleiben sichtbar, während die Tastatur arbeitet — anders als auf Phone hochkant, wo Tastatur die Regeln verdeckt.

47 px Safe Top

Neue PIN eingeben

Diese PIN wird künftig in Verbindung mit Ihrer Kundennummer benötigt. Bitte bewahren Sie sie sorgfältig auf.

725Verbergen

6–8 Ziffern lang

Keine einfachen Folgen (1234)

Keine gleichen Ziffern (1111)

Keine sich wiederholenden Muster (1212)

Placeholder Keyboard

34 px Safe Bot.

Spec · 21 PIN

Split: 1fr / 290 px
Input: 1.5 px ink border · sharp
Cursor: blink 1 s steps(1)
Rules: ✗ bold · ✓ regular
Weiter: disabled grau #C8C8C8

Regeln verschwinden nicht, wenn der User tippt. Der Status (✗ → ✓) wechselt live. Ein Vorteil von Querformat: Tastatur ersetzt nicht die Regeln.

31 Wartescreen · Ihr nächster Schritt

Wartescreen — Schritt-Karte links, Einstellungen rechts

Querformat zerteilt: Schritt-Karte (Lock + Erklärung + CTA) links, sekundäre Aktion (Einstellungen) als Outline-Button rechts unten — bleibt unaufdringlich, aber erreichbar.

47 px Safe Top

Ihr nächster Schritt

Damit Sie über die App Transaktionen durchführen und sich sicher beim Online-Banking anmelden können, hinterlegen Sie bitte mindestens eine Kundennummer in der App.

Jetzt hinterlegen

Du kannst auch direkt zu den Einstellungen wechseln.

34 px Safe Bot.

Spec · 31 Wartescreen

Split: 50 / 50
Card: #F1F1F1 · padding 22 px
Lock: 28 px · ink
CTA: underline · font-weight 700
Gear: 1.5 px outline · sharp

Karte bleibt links groß, Einstellungen weicht nach rechts unten — ohne dass die Hierarchie leidet. Linke Spalte ist immer der „Hauptschritt".