Zum Hauptinhalt springen

Zeitstrahl

Überblick​

Der Zeitstrahl ist ein Muster, mit dem Sie Ereignisse in chronologischer Reihenfolge anzeigen können. Das Zeitstrahlmuster ist nützlich, wenn Sie viele statische Einträge oder Einträge, die vom System oder einem Benutzer erzeugt werden, anzeigen müssen.

Wann ein Zeitstrahl verwendet werden sollte​

Sie erwarten eine lange Liste von Ereignissen, die mit dem System oder dem Benutzer zusammenhängen (z. B. die Objekthistorie).

Wann ein Zeitstrahl nicht verwendet werden sollte​

Sie haben Einträge, die nicht chronologisch geordnet werden können.

Aufbau​

horizontaler Zeitstrahl mit Beschreibungen

Das Zeitstrahlmuster besteht aus den folgenden Elementen:

  1. Startknoten: Zeigt ein Symbol an, das den Benutzer darüber informiert, dass der Zeitstrahl hier beginnt.
  2. Ereignisdetails: Informiert den Benutzer über die Details eines Ereignisses. Kann Text, Links, Aktionsschaltflächen und Symbole enthalten.
  3. Knoten: Zeigt ein Ereignis im Zeitstrahl an.
  4. Achse: Zeile, auf der die Einträge chronologisch angeordnet sind. Der Abstand entspricht nicht der Zeit zwischen den einzelnen Ereignissen.
  5. Endknoten: Zeigt ein Symbol an, das den Benutzer darüber informiert, dass der Zeitstrahl hier endet.

Allgemeine Richtlinien​

  • Innerhalb des Startknotens können Sie ein beliebiges Symbol aus der Jutro-Bibliothek wählen. Wir empfehlen die Verwendung von Uhr-, Kalender-, Benutzer- oder Flaggensymbolen.
  • Innerhalb des Endknotens können Sie ein beliebiges Symbol aus der Jutro-Bibliothek wählen. Wir empfehlen die Verwendung von Flaggen- oder Erfolgssymbolen.
  • Platzieren Sie in der horizontalen Zeitleiste den aktuellsten Eintrag rechts im Zeitstrahl. Platzieren Sie in der vertikalen Zeitleiste den aktuellsten Eintrag oben im Zeitstrahl.
  • Für den horizontalen Zeitstrahl beträgt die maximale Breite 400 Pixel. Die Höhe muss für alle QuickInfos gleich sein.
  • Für den vertikalen Zeitstrahl beträgt die maximale Höhe 400 Pixel. Die Breite muss für alle QuickInfos gleich sein.
  • QuickInfos dürfen sich nicht überlappen. Der Mindestabstand zwischen zwei QuickInfos beträgt 16 Pixel.
  • Die Linien zwischen den Einträgen können unterschiedlich lang sein, je nachdem, wie groß der Inhalt der QuickInfo ist.

Inhalt​

Allgemeine Richtlinien fürs Schreiben​

  • Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
  • Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
  • Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
  • Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
  • Halten Sie Wörter und Sätze kurz.

Barrierefreiheit​

Bildschirmleser-Interaktion: Wenn der Zeitstrahl keine Links oder Aktionsschaltflächen hat, kann er nicht fokussiert werden, aber er kann immer noch über die Tastaturpfeile angesteuert werden.

Interaktionen​

Zeitstrahlen sind schreibgeschützt. Benutzer können sich auf den Inhalt konzentrieren oder mit der Tabulatortaste auf den Inhalt klicken, wenn er interaktiv ist. Wenn der Zeitstrahl beispielsweise Schaltflächen enthält, werden nur Schaltflächen fokussiert.

Reaktionsfähigkeit​

Verwenden Sie für mobile Anwendungen nur vertikale Zeitstrahlen. Das folgende Beispiel zeigt einen vertikalen Zeitstrahl:

vertikaler Zeitstrahl mit Ereignisdetails

Verwenden Sie horizontale Zeitstrahlen nur, wenn Sie sicher sind, dass die Elemente nicht über die Breite des Containers hinausgehen. Bei Überlauf wird ein horizontaler Bildlauf aktiviert. Wenn der Zeitstrahl vom Benutzer oder vom System erstellt wird, vermeiden Sie den horizontalen Zeitstrahl.

Unterstützende Recherche​

Die Recherche für dieses Muster bestand aus einer Wettbewerbsanalyse. Die Wettbewerbsanalyse ist eine Recherchetechnik, mit der Sie vergleichen und verstehen können, woran andere auf demselben Gebiet arbeiten. UX-Designer analysierten die Zeitstrahlen von 4 Designsystemen. Sie suchten nach relativen Stärken und Schwächen, Trends und Unterschieden. Die Designer nahmen diese Informationen, fanden Gemeinsamkeiten und erstellten ein Muster, das auf diesen Praktiken basiert.

Ressourcen​

Laden Sie eine ZIP-Datei mit sämtlichen aktuellen Jutro-Mustern herunter und beginnen Sie mit der Gestaltung.

Jutro-Musterbibliothek (19.6 MB)