Zum Hauptinhalt springen

Karten

Karten in Storybook

Verwendung​

Überblick​

Eine Karte ist ein Benutzeroberflächenelement, mit dem zusammengehörige Informationen in einem Container gruppiert werden. Karten bestehen aus Inhaltsblöcken, die sich in ihrer Gesamtheit auf einen Sachverhalt, ein Thema oder Ziel beziehen. Diese interaktiven und in sich geschlossenen Inhaltsobjekte sind im Seitenlayout einer Anwendung integriert. Kartenbasierte Designs ermöglichen einfache, intuitive und optisch ansprechende Lösungen für Webanwendungen. Karten sind auf spezifische inhaltliche Anforderungen zugeschnitten. Das Layout von Karten variiert je nach Inhalt. Ein kartenbasiertes Layout kann daher als leistungsstarkes Tool für ein responsives Design eingesetzt werden.

Zu verwenden​

  • Zum Gruppieren von zusammengehörigen Informationen in überschaubaren Einheiten.
  • Zum einfachen Durchsuchen und Umsetzen von Informationen.
  • Als verknüpfte Einstiegspunkte für zusätzliche Informationen.

Nicht zu verwenden​

  • Für nicht zusammenhängende Informationen, bei denen eine Gruppierung keinen Nutzen bringt.
  • Für Informationen, die zu komplex sind, um im Kartenformat dargestellt zu werden.
  • Wenn der Inhalt oder das Layout innerhalb einer Gruppe nicht einheitlich gehalten werden kann.

Formatierung​

Aufbau​

Formatierung von Karten

Rasterlayouts und Messpunkte für Anwendungen mit responsivem Webdesign​

Karten sind rechteckig mit abgerundeten Ecken und Schlagschatten. Das Layout von Karten ist flexibel und hängt vom jeweiligen Inhalt ab. Karten können eine Vielzahl von Elementen enthalten, unter anderem Medien, unterstützenden Text und Aktionen. Der Kartencontainer ist das einzige erforderliche Element. Kartenelemente wie Text und Bilder werden hierarchisch angeordnet, um das Erfassen zu erleichtern.

Karten bestehen aus den folgenden Elementen:

Grundlagen zu Karten​

  1. Kartencontainer: Der Kartencontainer enthält alle Kartenelemente. Die Größe von Kartencontainern hängt von den jeweiligen Inhalten ab. Einfache Karten sind weiß mit Schlagschatten und heller Kontur und einem leicht getönten Hintergrund.
  2. Medien: Bilder werden am oberen Rand der Karte platziert und können in voller Breite angezeigt werden.
  3. Kopfzeilentext: Der Kopfzeilentext wird entsprechend den Jutro Typografie-Richtlinien formatiert.
  4. Haupttext: Der Haupttext wird entsprechend den Jutro Typografie-Richtlinien formatiert. Der Haupttext enthält z. B. Zusammenfassungen und Beschreibungen.
  5. Symbole und Beschriftungen: Symbole und Beschriftungen werden am unteren Kartenrand platziert und entsprechend den Jutro Ikonografie-Richtlinien formatiert. Symbole können für zusätzliche Aktionen verwendet werden.
  6. Schaltflächen: Interaktive Elemente wie z. B. Schaltflächen können direkt auf Karten platziert werden.

Rasterlayouts und Messpunkte für Anwendungen mit responsivem Webdesign​

  1. Breites Layout (Desktop)
  2. Mittleres Layout (Desktop)
  3. Mobiles Layout (Einzelspalte)

Best Practices​

Important: Karten müssen getrennt werden, damit Inhalte platziert werden können. Die enthaltenen Komponenten oder Stile werden weiterhin aktualisiert.
  • Karten müssen physischen Karten ähneln und ein taktiles Erscheinungsbild haben (bei Touchscreens sind haptische Interaktionen möglich).
  • Verwenden Sie Schatten dynamisch (mit unterschiedlichen Tiefen), um die Interaktion mit Karten zu optimieren. Zum Beispiel können Gesten zum Aufnehmen und Bewegen unterstützt werden, indem die Illusion erzeugt wird, dass die Karte angehoben wird. Verwenden Sie dazu während der Interaktion einen tieferen äußeren Schatten.
  • Die Hierarchie von Kartenelementen muss gut konzipiert und in einer Kartengruppe einheitlich sein.
  • Gesten müssen innerhalb einer Kartengruppe einheitlich implementiert werden. Häufig verwendete Gesten bei Karten sind Wischen, Aufnehmen und Verschieben sowie Scrollen.
  • Karten müssen eine begrenzte Anzahl von Aktionen enthalten und Links umfassen, über die Benutzer in detailliertere Inhaltsbereiche gelangen.
  • Karten befinden sich auf einer Ebene. Mehrere Karten auf einer Seite müssen als Gruppe zusammengefasst werden.
  • Achten Sie darauf, dass die Kartenlayouts einfach zu verwenden sind. Karten müssen leicht zu durchsuchen sein und in einheitlichen Mustern angeordnet werden.
  • Verwenden Sie ein Dashboard-Kartenlayout für Themen, die nicht zusammenhängen, aber dennoch als ein Bereich gruppiert werden sollen.

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.

Kartenspezifische Richtlinien fürs Schreiben​

  • Wählen Sie die Inhalte für Karten gut aus. Sie sollen als Einstieg in weiterführende Informationen dienen. Irrelevante Inhalte können Karten überfrachten und zu Unstimmigkeiten führen.
  • Platzieren Sie Inhalte in den Karten in hierarchischer Anordnung, um das Durchsuchen zu erleichtern.
  • Verwenden Sie verschiedene Prioritätsebenen für Inhalte, um die hierarchische Position anzugeben.
  • Verwenden Sie ein Überlaufmenü, wenn eine Karte mehr als zwei zusätzliche Aktionen enthält.
  • Begrenzen Sie die Anzahl der Aktionen auf einer Karte auf das Wesentliche.
  • Verwenden Sie in Karten die übliche Groß- und Kleinschreibung, auch für Überschriften und Titel. Eigennamen werden großgeschrieben.

Reaktionsfähigkeit​

Rasterlayouts und Messpunkte für Anwendungen mit responsivem Webdesign:

  1. Breites Layout: Ein breites Layout ist die größte zulässige Seitenbreite und kann horizontal 3 bis 4 Karten umfassen.
  2. Mittleres Layout: Ein mittleres Layout eignet sich für kleinere Bildschirme, Anwendungsfälle mit mehreren Browsern und Tablet-Browser und kann horizontal 3 Karten umfassen.
  3. Mobiles Layout: Ein mobiles Layout umfasst eine einzige Spalte zum Ausgleich der drastisch reduzierten Bildschirmfläche im Vergleich zu Desktop-Bildschirmen und Tablets.

Interaktionen​

Tastatur​

Fokussierbare Inhalte in der Kartenkomponente (z. B. QuickInfos) können über die Tastatur erreicht und aktiviert werden.

Auch die klickbare Karte kann über die Tastatur den Fokus erhalten und über die LEERTASTE und EINGABETASTE aktiviert werden.

Screenreader​

Standardmäßig implementiert das Kopfzeilenfeld der Karte <h2>-Inhalte und ist als solches über die Kopfzeilen-Tastenkombination des Screenreaders erreichbar. Die QuickInfo enthält das aria-label-Attribut „QuickInfo anzeigen“. In der QuickInfo wird aria-live='polite' verwendet, sodass der Screenreader den Inhalt automatisch ausgeben kann.

In einer klickbaren Karte wird das HTML5-Element <button> verwendet, sodass der Text innerhalb der Tags als barrierefreier Name der Karte dient.

Barrierefreiheit​

Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:

  • Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
  • Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
  • Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
  • Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.

Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.

Achten Sie beim Hinzufügen von Inhalten in Karten darauf, dass die Barrierefreiheitsrichtlinien eingehalten werden, z. B. Anforderungen an den Farbkontrast, Verwendung von geeigneten Überschriften und alternativem Text für informative Bilder.