Zum Hauptinhalt springen

Karussell

Überblick​

Das Karussellmuster zeigt eine Sammlung von Bildern oder Inhalten rotierend an. Es besteht in der Regel aus einer Reihe von Folien, durch die entweder mit Pfeiltasten oder Indikatoren navigiert werden kann. Das Karussell bietet eine visuell ansprechende und interaktive Möglichkeit, Informationen anzuzeigen, mit der Benutzer leicht durch den Inhalt navigieren können. Es wird häufig auf Websites und in Anwendungen verwendet, um wichtige Funktionen, Produkte oder Nachrichten hervorzuheben. Karussellmuster enthalten in der Regel individuell anpassbare Optionen wie Folienübergangseffekte, automatische Wiedergabe und die Möglichkeit, die Rotationsgeschwindigkeit zu steuern.

Zu verwenden​

  • Um eine Sammlung von Bildern oder Inhalten zu präsentieren. Karussells eignen sich hervorragend zum Anzeigen einer Reihe von Bildern, Produktlisten, Erfahrungsberichten oder anderen Arten von Inhalten, durch die geblättert werden kann.
  • Um wichtige Funktionen oder Werbeaktionen hervorzuheben. Karussells können verwendet werden, um Aufmerksamkeit zu erregen und wichtige Informationen oder Sonderangebote zu präsentieren.
  • Für Storytelling oder visuelles Storytelling. Karussells können verwendet werden, um eine visuelle Geschichte zu erzählen, indem eine Sequenz von Bildern oder Inhalten angezeigt wird, die einer Schilderung folgen.

Nicht zu verwenden​

  • Bei Inhalten, die für das Ausführen von Aufgaben wichtig sind. Wenn der Inhalt des Karussells sehr wichtig ist und von den meisten Benutzern gesehen werden muss, ist es besser, kein Karussell zu verwenden, da einige Benutzer es übersehen könnten.
  • Wenn es Bedenken hinsichtlich der Barrierefreiheit gibt. Karussells können manchmal zu Problemen bei der Barrierefreiheit führen, insbesondere für Benutzer mit Behinderungen, die möglicherweise Schwierigkeiten mit der Navigation oder dem Verständnis haben.
  • Für Mobilgeräte mit begrenztem Platz auf dem Display. Karussells funktionieren möglicherweise nicht gut auf kleineren Bildschirmen oder mobilen Geräten, auf denen der Platz begrenzt ist, da sie den Inhalt zu klein oder überfüllt erscheinen lassen können.
  • Für langsam ladende Inhalte. Wenn das Laden der Bilder oder Inhalte im Karussell viel Zeit in Anspruch nimmt, kann dies die Benutzer frustrieren und sich negativ auf die Benutzererfahrung auswirken.

Aufbau​

Aufbau des Karussellmusters

  1. Container: Das äußerste Element, das die gesamte Karussellkomponente enthält. Er dient als Begrenzungsrahmen für das Karussell und legt dessen Maße fest.
  2. Folien: Einzelne Panels, welche die Inhalte oder Bilder enthalten, die in dem Karussell angezeigt werden sollen. Die Folien sind je nach Design horizontal oder vertikal gestapelt. Die Navigation ist mit Pfeilen oder Indikatoren möglich.
  3. Navigationspfeile: Ermöglichen Benutzern, manuell zur vorherigen oder nächsten Folie zu wechseln. Navigationspfeile werden in der Regel als Links- und Rechtspfeile auf beiden Seiten des Karussellcontainers angezeigt.
  4. Titelzeile: Bietet zusätzlichen Kontext oder Informationen zum angezeigten Inhalt. Titelzeilen können über, unter oder als Overlay auf den Folien angezeigt werden.
  5. Indikatoren: Kleine anklickbare Punkte oder Symbole, die die Anzahl der Folien im Karussell darstellen. Indikatoren bieten visuelle Anhaltspunkte, um die aktuelle Folie anzuzeigen, oder mit denen Benutzer eine bestimmte Folie direkt aufrufen können.

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​

Um zu gewährleisten, dass das Karussell für Benutzer mit Behinderungen barrierefrei ist, befolgen Sie die folgenden bewährten Verfahren:

Tastatur-Navigation: Ermöglichen Benutzern, mithilfe von Tastatureingaben, z. B. über die Pfeiltasten oder die Tabulatortaste, durch das Karussell zu navigieren. Hierbei wird der Fokus auf der aktiven Folie beibehalten, und die Benutzer können Navigationsschaltflächen oder Indikatoren mit der Tastatur aktivieren.

ARIA-Rollen und -Beschriftungen: Verwenden Sie geeignete ARIA- (Accessible Rich Internet Applications) -Rollen und -Beschriftungen, um die Barrierefreiheit zu verbessern. Weisen Sie dem Containerelement die Rolle „Karussell“ zu, und beschreiben Sie die Funktion mit ARIA-Attributen, z. B. „aria-live“ für Live-Aktualisierungen.

Fokusmanagement: Gewährleisten Sie ein angemessenes Fokusmanagement während Benutzer durch das Karussell navigieren. Wenn eine neue Folie aktiv wird, legen Sie den Fokus auf den relevanten Inhalt in der Folie, und aktualisieren Sie die Tabindex-Attribute entsprechend.

Screenreader-Kompatibilität: Gewährleistet, dass das Karussell und die zugehörigen Steuerelemente mit Screenreadern kompatibel sind. Verwenden Sie semantische HTML-Elemente, stellen Sie beschreibenden Alternativtext für Bilder bereit, und achten Sie darauf, dass interaktive Elemente ordnungsgemäß mit barrierefreiem Text beschriftet werden.

Pause bei Interaktion: Wenn das Karussell über eine automatische Wiedergabefunktion verfügt, stellen Sie einen Mechanismus bereit, um die automatische Rotation zu unterbrechen oder zu stoppen, wenn Benutzer mit dem Karussell interagieren. So können Benutzer, die mehr Zeit benötigen, den Inhalt ansehen oder mit ihm interagieren, ohne dass er sich ständig ändert.

Testen mit Hilfstechnologien: Testen Sie die Karussellkomponente mit Screenreadern, Tastaturnavigation und anderen Hilfstechnologien, um sicherzustellen, dass sie komplett barrierefrei ist. Beheben Sie alle während des Tests festgestellten Probleme oder Inkonsistenzen.

Interaktionen​

Manuelle Foliennavigation:

  • Verwenden Sie die Navigationspfeile, um zur vorherigen oder nächsten Folie zu wechseln.
  • Klicken oder tippen Sie auf den linken Pfeil, um zur vorherigen Folie zu wechseln. Klicken oder tippen Sie auf den rechten Pfeil, um zur nächsten Folie zu wechseln.

Auswahl mit Indikator:

  • Klicken oder tippen Sie auf die Indikatoren, um direkt zu einer bestimmten Folie zu navigieren.
  • Wählen Sie die gewünschte Folie aus, indem Sie auf den entsprechenden Indikatorpunkt klicken oder tippen.

Wischgesten:

  • Auf Geräten mit berührungsempfindlichem Display können Sie nach links oder rechts über das Karussell wischen, um zwischen den Folien zu navigieren.

Tastaturnavigation:

  • Verwenden Sie die Pfeiltasten, um zwischen den Folien zu navigieren. Drücken Sie die linke Pfeiltaste, um zur vorherigen Folie zu wechseln, und die rechte Pfeiltaste, um zur nächsten Folie zu wechseln.
  • Navigieren Sie mit der Tabulatortaste durch die Steuerelemente des Karussells, und drücken Sie die Eingabetaste oder die Leertaste, um sie zu aktivieren.

Reaktionsfähigkeit​

Das Karussellmuster ist responsiv und funktioniert gut auf verschiedenen Geräten und Bildschirmgrößen. Es wird im seitlichen Drawer angezeigt. Achten Sie bei der Integration des Karussells in Ihr eigenes Design darauf, dass die Inhalte auch auf kleineren Bildschirmen gut lesbar und barrierefrei sind und dass Touch-Gesten für Nutzer von Mobilgeräten unterstützt werden.

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.

Erfahren Sie mehr über das Theming mit Design-Token

Unterstützende Recherche​

Material Design by Google: Die UX-Designer haben das Material Design System von Google untersucht und die offizielle Dokumentation überprüft, einschließlich der Prinzipien, Richtlinien und verfügbaren Komponenten. Darüber hinaus analysierten sie Fallstudien und Designbeispiele, um zu beobachten, wie Material Design in verschiedenen Kontexten effizient implementiert wurde.

Bootstrap: Die UX-Designer haben das Bootstrap-Framework und die unterstützende Dokumentation untersucht, einschließlich Rastersystem, CSS-Klassen und von Bootstrap bereitgestellte vorgefertigte Komponenten. Sie haben auch die Optionen zur benutzerdefinierten Anpassung, die responsiven Designfeatures und die Erweiterbarkeit des Frameworks geprüft.

React: Die UX-Designer haben React, eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, untersucht, einschließlich der komponentenbasierten Architektur von React, der Funktionen und der verfügbaren UI-Komponentenbibliotheken, die in React integrierbar sind. Sie haben auch die offizielle React-Dokumentation sowie verschiedene Community-Ressourcen und Tutorials geprüft.

Salesforce Lightning: Die UX-Designer haben das Salesforce Lightning Design System untersucht, einschließlich der offiziellen Dokumentation, der wichtigsten Designprinzipien, Komponenten und Richtlinien. Sie haben auch Implementierungsmuster und Frameworks im Zusammenhang mit dem Salesforce Lightning Design System untersucht.

Apple: Die UX-Designer haben das Designsystem von Apple untersucht, einschließlich der offiziellen Dokumentation. So konnten die UX-Designer die Steuerelemente und die andere Perspektive, die Apple in Karussell-Aktionen einbringt, besser verstehen. Wir haben Best Practices, Do's und Don'ts sowie Aspekte zur benutzerdefinierten Anpassung und zur Plattform notiert.

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)