coastdigitalgroup/coastai-skills

Timeline Activity System

Zweck

Das Timeline Activity System bietet eine Methodik zum Entwerfen chronologischer Abfolgen von Ereignissen, Aktivitätsprotokollen oder Roadmaps. Es stellt sicher, dass Benutzer Fortschritte verfolgen, zeitliche Zusammenhänge verstehen und historische Daten effizient überblicken können. Dieses System balanciert Informationsdichte mit räumlichem Rhythmus und sorgt dafür, dass die Erzählung von „Wann“ und „Was“ über alle Ansichtsfenster hinweg klar ist.

Anwendungsfälle

• Entwerfen von Aktivitätsfeeds für SaaS-Dashboards (z. B. Projekthistorie).
• Strukturieren von Produkt-Roadmaps oder Release-Notes.
• Organisieren von Unternehmensgeschichte oder „Über uns“-Meilensteinen.
• Umsetzen von Bestellverfolgung oder Versandhistorie für E-Commerce.
• Verwalten von mehrstufigen Prozessvisualisierungen (z. B. Anwendungsstatus).

Wann NICHT verwenden

• Lineare Schrittfortschritte: Für eine einfache Abfolge von Schritten, die der Benutzer in Echtzeit absolvieren muss, verwenden Sie step-progress-system.
• Reine Tabellendaten: Wenn das Hauptziel das Sortieren und Filtern nach vielen Spalten ist (z. B. ein vollständiges Finanzprüfprotokoll), verwenden Sie data-table-ui-system.
• Globale Navigation: Für die standortweite Struktur verwenden Sie site-navigation-system.
• Einfache Blog-Feeds: Wenn Standardkarten in einem Raster oder einer Liste ausreichen, ohne einen visuellen „Faden“ oder zeitliche Marker.

Eingaben

1. Ereignisinventar: Die Liste der Ereignisse, Zeitstempel und zugehörigen Metadaten.
2. Zeitliche Auflösung: Interessiert sich der Benutzer für Sekunden, Tage oder Jahre?
3. Ereignistypen: Kategorisierung von Ereignissen (z. B. Info, Erfolg, Warnung, Fehler oder Meilenstein vs. Kleinere Aktion).
4. Räumliche Einschränkungen: Wird die Zeitleiste in einer Seitenleiste, einer Vollbildansicht oder einer schmalen Karte leben?
5. Marken-Tokens: Farben, Typografie-Skalierungen und Abstands-Tokens.

Ausgaben

1. Spezifikation der Zeitleisten-Anatomie: Definition des „Threads“ (der vertikalen/horizontalen Linie), der „Knoten“ (Marker) und der „Inhaltsblöcke“.
2. Gruppierungsstrategie: Regeln zum Clustern von Ereignissen (z. B. „Heute“, „Gestern“, „Oktober 2023“).
3. Zustands- und Statusmatrix: Visuelle Behandlungen für verschiedene Ereignistypen und interaktive Zustände.
4. Responsive Blaupause: Wie sich die Zeitleiste von einem zentrierten oder wechselnden Layout zu einer einspaltigen Mobilansicht anpasst.

Workflow

1. Den zeitlichen Faden und die Ausrichtung definieren

Bestimmen Sie die Zeitrichtung:

• Vertikal (Standard): Am besten für variable Inhaltslängen und lange Verläufe.
• Horizontal: Am besten für übergeordnete Roadmaps oder kurze Prozesse, bei denen horizontaler Platz reichlich vorhanden ist.

Legen Sie den „Faden“ (die Linie, die Ereignisse verbindet) fest und stellen Sie sicher, dass er einheitliche visuelle Gewichtung und Farbe hat (normalerweise ein neutraler, gedämpfter Farbton).

2. Ereignisknoten und Marker festlegen

Entwerfen Sie die visuellen Anker für jedes Ereignis:

• Einfache Knoten: Kleine Punkte oder Kreise für kleinere Aktionen.
• Symbolknoten: Symbole in Kreisen, um Ereignistypen anzuzeigen (z. B. ein Häkchen für „Abgeschlossen“).
• Datumsmarker: Beschriftungen, die neben oder über den Knoten schweben.

3. Räumlichen Rhythmus und Gruppierung anwenden

Vermeiden Sie visuelles Durcheinander, indem Sie Ereignisse nach Zeiträumen gruppieren:

• Relative Gruppierung: „Gerade eben“, „vor 2 Stunden“.
• Absolute Gruppierung: „Montag, 23. Okt.“, „September 2023“.

Verwenden Sie das fluid-spacing-system, um konsistente vertikale Abstände zwischen den Ereignissen beizubehalten. Hochprioritäre Meilensteine sollten mehr Leerraum haben als kleinere Aktivitätselemente.

4. Den Inhaltsblock organisieren

Wenden Sie das visual-hierarchy-system auf den Inhalt neben jedem Knoten an:

• Titel: Die Kernaktion oder der Ereignisname.
• Metadaten: Zeitstempel, Akteur (Benutzer-Avatar/-Name) und Kategorie.
• Text/Beschreibung: Optionale Details oder erweiterter Inhalt.
• Aktionen: Kontextbezogene Schaltflächen (z. B. „Details anzeigen“, „Rückgängig machen“).

5. Responsive Anpassung planen

• Wechselndes Layout (Z-Muster): Auf dem Desktop wechseln Ereignisse links und rechts des Fadens. Auf Mobilgeräten auf eine einspaltige Ansicht (Faden links, Inhalt rechts) zusammenfallen.
• Einseitiges Layout: Standardisieren Sie auf „Faden-Links, Inhalt-Rechts“ für Mobilgeräte, um die Lesbarkeit zu maximieren.

Entscheidungsregeln

• Die „Faden“-Regel: Die Linie sollte niemals unterbrochen werden, es sei denn, es gibt eine logische Lücke in der Zeit oder eine „Mehr laden“-Aktion.
• Gruppierungsschwelle: Wenn mehr als 5 Ereignisse am selben Tag auftreten, gruppieren Sie sie unter einer einzigen Datumsüberschrift, um redundanten Text zu reduzieren.
• Die „Knoten“-Hierarchie: Verwenden Sie größere Knoten oder Markenfarben für „Meilensteine“ und kleinere, neutrale Knoten für „Aktivitäten“.
• Zeitstempel-Position: Platzieren Sie bei vertikalen Zeitleisten die Zeitstempel links vom Faden (Desktop) oder direkt unter dem Titel (Mobilgerät) für das schnellste Überfliegen.

Einschränkungen

• Barrierefreiheit: Zeitleisten müssen als Liste (<ul> oder <ol>) navigierbar sein. Knoten, die Symbole enthalten, müssen ein aria-label oder versteckten Text für Bildschirmlesegeräte haben. Wickeln Sie Zeitstempel in ein <time datetime="...">-Element, damit relative Bezeichnungen („vor 2 Stunden“) maschinenlesbar bleiben. Fügen Sie neue Einträge in einer Live-aktualisierenden Aktivitätsfeeds innerhalb eines aria-live="polite"-Bereichs (nicht der gesamten Liste) ein, damit Benutzer von Bildschirmlesegeräten neue Ereignisse hören, ohne ihre Position zu verlieren.
• Responsivität: Zeitleisten dürfen niemals das Ansichtsfenster überlaufen. Horizontale Zeitleisten müssen auf vertikal umschalten oder auf Mobilgeräten einen horizontalen Scrollbalken verwenden.
• Visueller Kontrast: Der Faden und die Knoten müssen ein Kontrastverhältnis von 3:1 zum Hintergrund erfüllen.

Häufige Fehlermuster

• Unterbrochene Fäden: Die vertikale Linie startet und stoppt willkürlich, was es schwierig macht, der Abfolge zu folgen.
• Informationsüberflutung: Zu viel Fließtext in jedem Ereignis, wodurch die Zeitleiste zu einer Textwand wird.
• Inkonsistente Ausrichtung: Mischen von zentriertem und linksbündigem Text innerhalb derselben Zeitleiste ohne klare Logik.
• Mobilplatzmangel: Versuch, ein wechselndes (links/rechts) Layout auf Mobilgeräten beizubehalten, was winzige Spalten für Text hinterlässt.

Validierungskriterien

• Ereignisse folgen einer klaren, konsistenten chronologischen Reihenfolge (aufsteigend oder absteigend).
• Visuelle Marker (Knoten) und der verbindende Faden sind einheitlich gestaltet.
• Zeitliche Gruppierung (z. B. „Heute“) wird verwendet, um die kognitive Last zu reduzieren.
• Responsives Verhalten (z. B. Zusammenfallen auf eine einzelne Spalte) ist definiert und funktional.
• Barrierefreiheit: Die Zeitleiste ist als semantische Liste ausgezeichnet, und Zeitstempel verwenden <time datetime="...">.
• Live-Feeds kündigen neue Einträge über einen begrenzten aria-live="polite"- Bereich an, ohne den Fokus des Bildschirmlesegeräts zu unterbrechen.
• Primäre Meilensteine sind visuell von sekundären Aktivitäten unterscheidbar.