UX Evaluation Checklist - Container Logistics¶

Strukturierte Checkliste für die Evaluation von Container-Logistik-Anwendungen.

Pre-Evaluation Setup¶

Kontext klären¶

[ ] Welcher Screen wird evaluiert?
[ ] Welche Persona (Consignee/Forwarder/Trucker)?
[ ] Welcher State (Open Area / Authenticated)?
[ ] Welche User Story wird geprüft?
[ ] Welche Test-Daten sind verfügbar?

Tools vorbereiten¶

[ ] Browser-DevTools öffnen (Console, Network)
[ ] Screenshot-Tool bereit
[ ] Accessibility-Checker aktiviert
[ ] Viewport auf Desktop (1280px) und Mobile (375px) testen

Quick Check (5 Minuten)¶

Erste Eindrücke ohne tiefe Analyse:

First Impression¶

[ ] Weiß ich innerhalb 3 Sekunden, worum es geht?
[ ] Ist der primäre CTA (Call-to-Action) offensichtlich?
[ ] Sehe ich kritische Informationen (Status, ETA) sofort?

Visual Hierarchy¶

[ ] Ist die wichtigste Information am prominentesten?
[ ] Gibt es eine klare Leserichtung?
[ ] Lenkt nichts Unnötiges ab?

Critical Blockers¶

[ ] Funktionieren alle Links und Buttons?
[ ] Sind Fehlerzustände behandelt?
[ ] Ist die Seite in <3 Sekunden geladen?

Heuristic Evaluation (30 Minuten)¶

Detaillierte Analyse nach Nielsen-Heuristiken.

H1: Systemstatus-Sichtbarkeit¶

Shipment-Tracking - [ ] Ist der aktuelle Status (IN_TRANSIT, ARRIVED, etc.) sichtbar? - [ ] Ist die ETA prominent dargestellt? - [ ] Gibt es einen Timestamp "Letzte Aktualisierung"?

Container-Status - [ ] Sind Container-Status (ON_BOARD, AVAILABLE, etc.) erkennbar? - [ ] Sind Status-Farben unterscheidbar? - [ ] Ist der Release-Status (PENDING/RELEASED) klar?

Feedback - [ ] Gibt es Loading-Spinner bei Datenabruf? - [ ] Werden Formular-Submissions bestätigt? - [ ] Sind Fehlerzustände sichtbar?

H2: System-Realitäts-Match¶

Terminologie - [ ] Werden Fachbegriffe korrekt verwendet (B/L, POD, D&D)? - [ ] Sind Abkürzungen erklärt (Tooltips)? - [ ] Ist die Sprache konsistent (nicht DE/EN mischen)?

Formate - [ ] Container-Nummern im ISO 6346 Format? - [ ] Port-Codes als UN/LOCODE? - [ ] Datumsformat lokalisiert? - [ ] Währungen korrekt formatiert?

H3: Benutzerkontrolle¶

Navigation - [ ] Gibt es einen klaren Zurück-Button? - [ ] Funktionieren Browser-Back/Forward? - [ ] Sind Breadcrumbs vorhanden?

Aktionen - [ ] Können Formulare abgebrochen werden? - [ ] Gibt es Bestätigung für kritische Aktionen? - [ ] Können Filter zurückgesetzt werden?

H4: Konsistenz & Standards¶

Design-System - [ ] Sind VisiMatch-Farben verwendet? - [ ] Ist die Typografie konsistent? - [ ] Sind Button-Styles einheitlich?

Patterns - [ ] Sehen alle Cards gleich aus? - [ ] Sind Tabellen einheitlich formatiert? - [ ] Sind Icons konsistent verwendet?

H5: Fehlervermeidung¶

Validierung - [ ] Werden Eingaben in Echtzeit validiert? - [ ] Sind Pflichtfelder markiert? - [ ] Gibt es Format-Hints (Placeholder)?

Sicherheit - [ ] Gibt es Confirmation-Dialoge für kritische Aktionen? - [ ] Ist BL-Format-Validierung aktiv? - [ ] Werden Container-Nummern geprüft?

H6: Wiedererkennung¶

Gespeicherte Daten - [ ] Sind "Meine BLs" zugänglich? - [ ] Gibt es Favoriten-Funktion? - [ ] Werden letzte Suchen gespeichert?

Kontexthilfe - [ ] Sind Tooltips für Fachbegriffe vorhanden? - [ ] Werden Optionen angezeigt statt Freitext?

H7: Flexibilität & Effizienz¶

Power-User-Features - [ ] Gibt es Bulk-Aktionen? - [ ] Sind Keyboard-Shortcuts verfügbar? - [ ] Können Filter gespeichert werden?

Such & Filter - [ ] Funktioniert die Suche? - [ ] Sind Filter intuitiv? - [ ] Gibt es Export-Optionen?

H8: Ästhetik & Minimalismus¶

Visual Design - [ ] Gibt es genug White Space? - [ ] Ist die Dichte angemessen? - [ ] Sind Farben sparsam eingesetzt?

Content - [ ] Sind nur relevante Infos sichtbar? - [ ] Gibt es Progressive Disclosure (Accordion)? - [ ] Lenkt nichts vom Hauptziel ab?

H9: Fehlerbehebung¶

Fehlermeldungen - [ ] Sind Fehler klar formuliert? - [ ] Werden Lösungen angeboten? - [ ] Gibt es nächste Schritte?

Bilingual - [ ] Sind Fehler in DE und EN verfügbar?

H10: Hilfe & Dokumentation¶

Inline-Hilfe - [ ] Gibt es Tooltips für komplexe Elemente? - [ ] Sind Fachbegriffe erklärt? - [ ] Gibt es Kontakt-Optionen?

User Flow Check (15 Minuten)¶

Flow 1: BL-Lookup (Open Area)¶

Landing → BL eingeben → Validierung → BL-Detail

[ ] Ist das BL-Eingabefeld prominent?
[ ] Ist die Validierung verständlich (warum Container-Nummer)?
[ ] Sind die BL-Details vollständig (Status, ETA, Container)?
[ ] Ist der Login-Teaser sichtbar?

Zeit für Task Completion: _____ Sekunden (Ziel: <60s)

BL-Detail → Login-Button → Login-Form → Enhanced BL-Detail

[ ] Ist der Login-Button auffällig?
[ ] Ist das Login-Formular einfach?
[ ] Werden nach Login mehr Infos angezeigt?
[ ] Ist der Unterschied State 1 → State 2 klar?

Flow 3: Transport-Buchung (Authenticated)¶

BL-Detail → Final Destination → Preise → Buchung

[ ] Ist Final Destination leicht einzugeben?
[ ] Werden Preise korrekt angezeigt?
[ ] Ist der Buchungs-CTA klar?

Flow 4: Forwarder-Delegation (Authenticated)¶

BL-Detail → Forwarder wählen → Zuweisung bestätigen

[ ] Sind Vollmacht-Forwarder priorisiert?
[ ] Ist die Zuweisung reversibel?
[ ] Wird Erfolg bestätigt?

Accessibility Check (10 Minuten)¶

WCAG 2.1 AA Compliance¶

Perceivable - [ ] Farbkontrast ≥ 4.5:1 für Text? - [ ] Bilder haben Alt-Text? - [ ] Sind Infos nicht nur durch Farbe vermittelt?

Operable - [ ] Alle Elemente per Keyboard erreichbar? - [ ] Focus-Indikatoren sichtbar? - [ ] Touch-Targets ≥ 44x44px?

Understandable - [ ] Sprache im HTML definiert? - [ ] Labels für Form-Elemente? - [ ] Fehler beschrieben?

Robust - [ ] Valides HTML? - [ ] ARIA-Labels wo nötig?

Responsive Check (10 Minuten)¶

Desktop (1280px+)¶

[ ] Nutzt der Content die volle Breite sinnvoll?
[ ] Sind Tabellen lesbar?
[ ] Ist die Navigation erreichbar?

Tablet (768px - 1024px)¶

[ ] Funktioniert das Layout?
[ ] Sind Touch-Targets groß genug?
[ ] Sind Modals nutzbar?

Mobile (320px - 767px)¶

[ ] Ist die primäre Info sichtbar ohne Scrollen?
[ ] Sind Formulare nutzbar?
[ ] Ist die Navigation erreichbar?

Business Impact Check (10 Minuten)¶

Conversion-Barrieren¶

[ ] Gibt es unnötige Schritte im Flow?
[ ] Sind CTAs klar und motivierend?
[ ] Gibt es Ablenkungen vom Hauptziel?

Dropout-Risiken¶

[ ] Wo könnte ein Nutzer frustriert aufgeben?
[ ] Sind Fehler recoverable?
[ ] Ist Hilfe erreichbar?

Value Proposition¶

[ ] Ist der Mehrwert des Logins klar?
[ ] Sind kostenpflichtige Services attraktiv präsentiert?
[ ] Versteht der Nutzer, warum er handeln sollte?

Finding Documentation Template¶

### [Kurztitel]

**Category**: [Heuristic / Flow / Visual / Accessibility / Business]
**Heuristic**: [H1-H10 falls zutreffend]
**Severity**: [Critical / Major / Minor / Cosmetic]
**Location**: [Screen > Komponente]

**Issue**:
[Was ist das Problem?]

**Evidence**:
[Screenshot-Referenz oder spezifische Beobachtung]

**User Impact**:
[Wie beeinflusst es den Nutzer?]

**Recommendation**:
[Konkrete Lösung]

**Effort**: [Low / Medium / High]

Post-Evaluation¶

Findings priorisieren¶

P1 - Critical: Verhindert Task-Completion
P2 - Major: Signifikante Beeinträchtigung
P3 - Minor: Irritation, aber Workaround möglich
P4 - Cosmetic: Nur optisch

Report erstellen¶

[ ] Executive Summary mit Top 3 Issues
[ ] Alle Findings dokumentiert
[ ] Screenshots beigefügt
[ ] Recommendations priorisiert
[ ] Aufwandsschätzung pro Fix