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 kann in einer Anwendung, in der 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 zeigt

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. Auswahlsteuerelement: Benutzer können auf das Kontrollkästchen klicken, um die Option zu aktivieren oder zu deaktivieren. Im Fall des Optionsfelds klicken Benutzer entweder auf das Optionsfeld oder auf das zugehörige Bild.

Für das Kontrollkästchen mit Bild sowie 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 Guidewire Cloud Platform Beispiel für ein Auswahlmuster für Optionsfelder in 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 das Bild und den Text herum, um eine zu dichte Anordnung 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 Bilder 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 klickbare Bereich umfasst das Bild und die Beschriftung.
  • Tastaturnavigation: Ermöglichen Sie Benutzern, mittels der Tastatur zwischen Optionen zu navigieren und sie auszuwählen.
  • Touch-Unterstützung: Optimieren Sie die Komponente für Touch-Geräte, indem Sie gewährleisten, dass sie auf Touch-Gesten wie Tippen oder Wischen akkurat reagiert. Achten Sie darauf, dass der klickbare Bereich 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 aller Optionen innerhalb derselben Gruppe aufgehoben.
  • Fehlerbehandlung: Wenn ein Benutzer eine Option auswählen möchte, dabei jedoch ein Fehler auftritt, sollte eine eindeutige Fehlermeldung und eine Anleitung zur Behebung des Problems angezeigt 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: Gibt für den Benutzer an, dass das Element für die Interaktion aktiviert ist.
  2. Schwebend: Zeigt an, dass der Benutzer den Mauszeiger auf dem Element positioniert hat. Wenn mit der Maus darauf gezeigt wird, vergrößert sich der Container in der 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 wird mit einem Rahmen angezeigt.

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 das Bild 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 für Benutzer bei der Tastaturnavigation 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 Bildern, 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. Dadurch können assistive Technologien den Zweck und die Beziehungen der Elemente besser erfassen.
  • 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 bei Größenanpassung: Gestalten Sie die Komponenten so, dass sie sich an Änderungen der Textgröße oder Zoomstufe anpassen. 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 mit 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, sodass der verfügbare Platz optimal genutzt wird, und Hover-Effekte oder QuickInfos können zusätzliche Informationen liefern.
  • 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. Zudem werden berührungsfreundliche 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 Elementen vergrößert werden, um eine versehentliche Auswahl zu verhindern.

Abbildung der Komponenten Kontrollkästchen und Optionsfeld mit Bild auf Desktop- und Mobilgeräten 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. Beispielsweise werden bei manchen Themes Graustufenbilder bevorzugt, während bei anderen Vollfarbbilder zulässig sind. 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 Benutzeroberflächenelemente 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 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 in Guidewire-Produkten verwendet wird, und diskutierten Anwendungsfälle.

Die UX-Designer führten außerdem 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 diese oder eine ähnliche Komponente in anderen Designsystemen implementiert wurden, und suchten nach relativen Stärken und Schwächen, Trends und Unterschieden. Anhand dieser Informationen fanden die Designer Gemeinsamkeiten und erstellten ein Muster, das auf diesen gemeinsamen 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)