Zum Hauptinhalt springen

Kontrollkästchen und Optionsfeld mit Bild

Überblick​

Die Komponenten Kontrollkästchen und Optionsfeld mit Bild werden verwendet, um visuelle Optionen in einer Oberfläche auszuwählen. Diese Komponenten ähneln üblichen Kontrollkästchen und Optionsfeldern. Sie verfügen jedoch über die zusätzliche visuelle Funktion, dass neben der Beschriftung ein Bild angezeigt wird.

Zu verwenden​

  • Wenn die visuelle Darstellung wichtig ist, um die Optionen effizient zu vermitteln. Zum Beispiel könnte in einer Anwendung, in der die Benutzer ihren Avatar auswählen, jede Option durch eine kleine Miniaturansicht eines Avatars neben dem Namen dargestellt werden. Dies macht die Optionen nicht nur optisch ansprechender, sondern hilft den Benutzern auch, ihre bevorzugte Option schnell zu erkennen.
  • Verwenden Sie das Kontrollkästchen mit Bild, wenn mehrere Optionen gleichzeitig ausgewählt werden.
  • Wenn nur eine Option aus einer Gruppe ausgewählt wird, verwenden Sie das Optionsfeld mit Bild.

Aufbau​

Abbildung, die den Aufbau des Kontrollkästchens (links) und des Optionsfelds (rechts) mit Bildmuster darstellt

Die Komponenten Kontrollkästchen und Optionsfeld mit Bild bestehen aus den folgenden Elementen:

  1. Bild: Ein kleines Bild, z. B. ein Symbol oder eine Miniaturansicht, das eine visuelle Darstellung der einzelnen Optionen ist.
  2. Beschriftung: Stellt den Kontext für die Benutzer her und gibt an, was die Option darstellt.
  3. Inhaltsbereich: Bietet zusätzlichen Platz für Inhalte wie z. B. den Haupttext.
  4. Steuerelement zur Aktivierung: Benutzer können das Kontrollkästchen anklicken, um die Option zu aktivieren oder deaktivieren. Im Falle des Optionsfelds klicken die Benutzer entweder das Optionsfeld oder das zugehörige Bild an.

Sowohl für das Kontrollkästchen mit Bild als auch für das Optionsfeld mit Bild können Sie das Bild, die Beschriftung und den Inhalt aktivieren und deaktivieren.

Beispiel für ein Auswahlmuster für Optionsfelder in der Guidewire Cloud Platform _Ein Beispiel für ein Auswahlmuster für Optionsfelder in der Guidewire Cloud Platform _

Allgemeine Richtlinien​

  • Wählen Sie einfache, klare und aussagekräftige Bilder oder Symbole, die im Kontext der Optionen leicht erkennbar sind. Die Bilder oder Symbole müssen dem Benutzer helfen, Optionen auf einen Blick zu erkennen.
  • Gehen Sie bei der Integration von Bildern strategisch und bedacht vor. Zu viele können die kognitive Verarbeitung verlangsamen und vom Wesentlichen ablenken.
  • Wahren Sie Einheitlichkeit bei Bildgrößen, Seitenverhältnissen und Stilen übergreifend für alle Optionen. Einheitlichkeit trägt zu einer zusammenhängenden visuellen Erfahrung bei und erleichtert den Benutzern das Erfassen und Vergleichen von Optionen.
  • Stellen Sie sicher, dass die Abbildungen für alle Benutzer barrierefrei sind, indem Sie Alternativtext bereitstellen und auf einen ausreichenden Farbkontrast zwischen den Abbildungen und dem Hintergrund achten. Der Alternativtext muss die gleichen Informationen wie das Bild vermitteln.
  • Lassen Sie ausreichend Platz um die Abbildung und den Text herum, um „Gedränge“ zu vermeiden. Dies sorgt für eine angenehme Interaktion, insbesondere auf kleineren Bildschirmen oder Touch-Geräten.
  • Testen Sie die Gebrauchstauglichkeit mit verschiedenen Benutzern, um sicherzustellen, dass die Abbildungen das Verständnis verbessern und keine Verwirrung oder kognitive Belastung verursachen.
  • Fügen Sie den Bildern klare und beschreibende Beschriftungen hinzu, um das Verständnis zu gewährleisten.

Interaktionen​

  • Klickbarer Bereich: Der anklickbare Bereich umfasst sowohl das Bild als auch die Beschriftung.
  • Tastatur-Navigation: Ermöglichen Sie Benutzern, mittels der Tastatur zwischen Optionen zu navigieren und auszuwählen.
  • Touch-Unterstützung: Optimieren Sie die Komponente für Touch-Geräte, indem Sie gewährleisten, dass diese auf Touch-Gesten wie Tippen oder Wischen akkurat reagiert. Achten Sie darauf, dass die anklickbare Fläche groß genug für Touch-Interaktionen ist.
  • Einzelauswahl: Bei Optionsfeldern mit Bildern wird die Einzelauswahl innerhalb einer Gruppe von Optionen erzwungen. Wenn ein Benutzer eine Option auswählt, wird die vorherige Auswahl einer Optionen innerhalb derselben Gruppe aufgehoben.
  • Fehlerbehandlung: Wenn ein Benutzer versucht, eine Option auszuwählen, aber auf einen Fehler stößt, muss Sie eine eindeutige Fehlermeldung und eine Anleitung zur Behebung des Problems bereitgestellt werden.

Zustände​

Abbildung der Komponenten Kontrollkästchen und Optionsfeld mit Bild in den Zuständen „Standard“, „Schwebend“ und „Aktiviert“

Die Komponenten Kontrollkästchen und Optionsfeld mit Bild haben die folgenden interaktiven Zustände:

  1. Standard: Zeigt dem Benutzer an, dass das Element für die Interaktion aktiviert ist.
  2. Schwebend: Zeigt an, dass der Benutzer den Cursor auf dem Element positioniert hat Wenn man mit der Maus darüber fährt, vergrößert sich der Container in Breite und Höhe um 10 %.
  3. Aktiviert: Gibt an, dass der Benutzer eine Auswahl getroffen und die entsprechende Option aktiviert hat. Im aktivierten Zustand wechselt die Karte die Farbe und ist mit einem Rahmen umrandet.

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​

  • Alternativtext für Bilder: Stellen Sie beschreibenden Alternativtext für die in den Komponenten verwendeten Bilder bereit. Alternativtext muss die gleichen Informationen wie die Abbildung vermitteln und Menschen mit Sehbehinderungen helfen, den Inhalt zu verstehen.
  • Barrierefreiheit der Tastatur: Stellen Sie sicher, dass Benutzer nur über die Tastatur durch die Komponenten navigieren und mit ihnen interagieren können. Dazu gehört die Möglichkeit, den Fokus zwischen Optionen zu verschieben, Optionen auszuwählen und bei Bedarf eine Auswahl zu löschen.
  • Zustand „Fokussiert“: Achten Sie darauf, dass der Zustand „Fokussiert“ der Komponenten eindeutig und gut sichtbar ist, damit den Benutzern bei der Tastatur-Navigation deutlich angezeigt wird, wenn der Cursor dort positioniert oder das entsprechende Element aktiviert ist. Der Zustand „Fokussiert“ muss sich deutlich abheben und leicht zu erkennen sein.
  • Farbkontrast: Sorgen Sie für einen ausreichenden Farbkontrast zwischen den Abbildungen, den Textbeschriftungen und dem Hintergrund, um die Lesbarkeit für Menschen mit Sehschwäche oder Farbsehschwäche zu gewährleisten.
  • Screenreader-Kompatibilität: Stellen Sie sicher, dass Screenreader den Inhalt und die Funktionen der Komponenten richtig interpretieren und ansagen können. Dazu gehört auch das Bereitstellen geeigneter Markups und Beschriftungen für Benutzer von Screenreadern.
  • Semantisches HTML: Verwenden Sie semantische HTML-Elemente, z. B. input für Kontrollkästchen und Optionsfelder sowie label für zugehörige Textbeschriftungen. Das unterstützt Hilfstechnologien, den Zweck und die Beziehungen der Elemente zu verstehen.
  • Fehlerbehandlung: Stellen Sie aussagekräftige und beschreibende Fehlermeldungen bereit, wenn Benutzer bei der Interaktion mit den Komponenten auf Fehler stoßen. Stellen Sie sicher, dass Fehlermeldungen von Screenreadern angesagt werden und leicht wahrnehmbar sind.
  • Reaktionsfähigkeit der Größe: Gestalten Sie die Komponenten so, dass sie auf Änderungen der Textgröße oder Zoomstufe reagieren. Stellen Sie sicher, dass das Layout und die Abstände für größere Textgrößen geeignet sind, ohne dass es zu Überschneidungen kommt oder Inhalte unzugänglich werden.

Reaktionsfähigkeit​

Die Komponenten Kontrollkästchen und Optionsfeld mit Bild funktionieren auf verschiedenen Geräten und Bildschirmgrößen. Das beinhaltet:

  • Desktop: Auf größeren Bildschirmen, wie z. B. Desktopgeräten, können die Komponenten in einem Rasterlayout angezeigt werden, in dem mehrere Optionen gleichzeitig sichtbar sind. Bilder und Textbeschriftungen können größer sein, um den verfügbaren Platz zu nutzen, und Einblendungen beim Überfahren oder QuickInfos können zusätzliche Informationen bereitstellen.
  • Tablet: Auf Tablets können sich die Komponenten an ein kompakteres Layout anpassen, um den Bildschirmplatz zu optimieren. Die Größe von Bildern und Beschriftungen kann an die kleinere Bildschirmgröße angepasst werden, und es werden touch-freundliche Interaktionen implementiert, um die Gebrauchstauglichkeit zu gewährleisten.
  • Mobil: Auf Mobilgeräten werden die Komponenten in der Regel vertikal angeordnet, zur Anpassung an die schmalere Displaybreite. Die Größe von Bildern und Beschriftungen kann weiter geändert werden, um die Lesbarkeit zu gewährleisten, und die Berührungsinteraktionen sind für die Gebrauchstauglichkeit auf Touchscreen-Geräten optimiert. Außerdem kann der Abstand zwischen Elemente vergrößert werden, um eine versehentliche Auswahl zu verhindern.

Abbildung der Komponenten Kontrollkästchen und Optionsfeld mit Bild auf Desktop- und Mobilgeräten Ein Beispiel für das Verhalten der Komponente Kontrollkästchen mit Bild auf Desktop- und Mobilgeräten

Theming​

Standardmäßig entsprechen Theming und Branding der Anwendung, es sei denn, sie werden überschrieben.

Muster können mit Themes gestaltet werden, um bestimmte Markenanforderungen und Kundenwünsche zu erfüllen. Dazu gehören visuelle Elemente wie Farben, Typografie, Symbole, Schaltflächen und andere Komponenten und grafische Elemente.

Wenn Sie das Kontrollkästchen oder das Optionsfeld mit einem Bild versehen, beachten Sie Folgendes:

  • Bildbearbeitung: Themes können die Verarbeitung von Bildern innerhalb der Komponenten vorgeben. Einige Themes bevorzugen beispielsweise Graustufenbilder, während andere Vollfarbbilder zulassen. Der Rahmenradius oder die Form von Bildern kann auch je nach Theme variieren.
  • Barrierefreiheit: Themes müssen gewährleisten, dass die Komponenten Barrierefreiheitsstandards einhalten. Dazu gehören Aspekte hinsichtlich des Farbkontrasts, der Fokuszustände und der Kompatibilität mit Screenreadern, die für alle Themes einheitlich sein müssen.
  • Optionen zur benutzerdefinierten Anpassung: Theme-bezogene Komponenten können Benutzern oder Entwicklern Optionen zur benutzerdefinierten Anpassung bieten, um das Erscheinungsbild an ihre Vorlieben anzupassen. Dies kann Optionen zum Ändern von Farben, Schriftarten oder anderen visuellen Aspekten der Komponenten im Rahmen der Beschränkungen des Theme umfassen.
  • Komponentenübergreifende Einheitlichkeit: Theme-bezogene Komponenten müssen innerhalb desselben Theme in Bezug auf andere UI-Elemente einheitlich sein. Dies gewährleistet ein einheitliches Erscheinungsbild in der gesamten Anwendung oder auf der gesamten Website.
  • Responsives Design: Themes können responsive Designaspekte beinhalten, damit sich Komponenten an unterschiedliche Bildschirmgrößen und Formfaktoren anpassen, und gleichzeitig die Gesamtästhetik des Designs beibehalten wird.

Erfahren Sie mehr über das Theming mit Design-Token

Abbildung des Kontrollkästchens mit Bild, wenn ein Theme vorhanden ist Ein Beispiel dafür, wie die Karten mit Kontrollkästchen mit Bild in einer Theme-Vorlagenanwendung aussehen

Unterstützende Recherche​

Für die erste Version dieses Musters berieten sich die UX-Designer mit dem größeren Guidewire UX Team. Sie sammelten Beispiele, wie diese Komponente von Guidewire-Produkten verwendet wird, und diskutierten Anwendungsfälle.

Die UX-Designer führten auch eine Wettbewerbsanalyse durch. Die Wettbewerbsanalyse ist eine Recherchetechnik, mit der Sie vergleichen und verstehen können, woran andere auf demselben Gebiet arbeiten. Die UX-Designer analysierten, wie andere Designsysteme diese oder eine ähnliche Komponente implementiert haben, und 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.

Komponenten​

Muster​

Ressourcen​

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

Jutro-Musterbibliothek (19.6 MB)