Zum Hauptinhalt springen

Kontexthilfe

Überblick​

Die Kontexthilfe bietet Benutzern in einem modalen Fenster zusätzliche Informationen zu einem allgemeinen Thema, die für ihre aktuelle Aufgabe relevant sind.

Zu verwenden​

Verwenden Sie das Kontexthilfe-Muster für:

  • Zusätzliche Informationen oder Anweisungen zum Erledigen einer Aufgabe.
  • Komplexe Merkmale oder Prozesse, die einer Klärung oder Erläuterung bedürfen.

Nicht zu verwenden​

Verwenden Sie das Kontexthilfe-Muster nicht für:

  • Wichtige Informationen oder Anweisungen, die Benutzer sofort sehen müssen.
  • Inhalte, die über die Hauptansicht ohne zusätzliche Erklärungen klar kommuniziert werden können.
  • Anwendungsankündigungen. Verwenden Sie das modale Fenster für kritische Ankündigungen, das Banner oder das informative Popover.
  • Schritt-für-Schritt-Anleitungen zum Ausführen von Aufgaben. Verwenden Sie das Muster für Anwendungsankündigungen.
  • Tipps zur Fehlerbehebung und Fehlermeldungen. Verwenden Sie die Popupkomponente oder das Muster für Anwendungsankündigungen.
  • Nutzungserlebnis beim Onboarding. Verwenden Sie das Muster für Anwendungsankündigungen.

Aufbau​

Aufbau des Kontexthilfe-Musters

Das Kontexthilfe-Muster besteht aus den folgenden Elementen:

  1. Kopfzeile: Enthält den Titel und das Schließen-Symbol. Die Position der Kopfzeile ist fest vorgegeben.
  2. Hauptteil: Dient als Hauptinhaltsbereich. Kann schreibgeschützt sein, Links oder Mediendateien enthalten. Der Hauptteil ist scrollbar.
  3. Fußzeile (optional): Enthält die wichtigsten Aktionen, die zum Abschließen oder Abbrechen der Dialogfeldaufgabe erforderlich sind. Die Position der Fußzeile ist fest vorgegeben.
  4. Verwerfen-Symbol: Schließt das modale Fenster, ohne Daten zu übermitteln.
  5. Bildschirm-Overlay: Verdunkelt den Inhalt auf der Seite und liegt zwischen dem Seiteninhalt und dem modalen Fenster selbst.

Allgemeine Richtlinien​

  • Achten Sie darauf, dass der Inhalt der Hilfe prägnant, relevant und leicht verständlich ist. Vermeiden Sie nach Möglichkeit Fachjargon oder Fachsprache.
  • Verwenden Sie ein Kontexthilfe-Modalfenster in einer für Ihr Gerät und Ihren Anwendungsfall passenden Größe.
  • Gestalten Sie den Auslöser so, dass er leicht erkennbar und intuitiv ist. Geben Sie eindeutige visuelle Hinweise, um den Zweck zu verdeutlichen.
  • Achten Sie auf eine einheitliche Position und Anzeige der Kontexthilfeelemente über die gesamte Benutzeroberfläche. Dies trägt dazu bei, Vertrautheit und Benutzungsfreundlichkeit herzustellen.
  • Testen Sie die Effizienz der Kontexthilfe durch Benutzerfeedback und Analysen. Verfeinern Sie die Inhalte und Interaktionen basierend auf der realen Nutzung.
  • Testen Sie Kontexthilfe-Modalfenster auf verschiedenen Geräten und Bildschirmgrößen, um sicherzustellen, dass sie überall barrierefrei und nutzbar sind.
  • Verwenden Sie das Kontexthilfe-Muster nicht, um schlechtes Design oder mangelnde Klarheit in der Benutzeroberfläche auszugleichen. Konzentrieren Sie sich stattdessen darauf, die Benutzungsfreundlichkeit und Intuitivität der Benutzeroberfläche insgesamt zu verbessern.
  • Vermeiden Sie es, Benutzer mit übermäßigen Hilfeinhalten zu überfordern, die ihren Arbeitsablauf unnötig unterbrechen.

Interaktionen​

Auslöser- und Touch-Bereich für Ansichtsfenster kleiner als 768 Pixel (Mobiltelefon und Tablet)​

Grafik, die den Touch-Bereich für das Hilfesymbol und dessen Auslösung veranschaulicht

  • Der Touch-Bereich des Hilfesymbols ist 24 x 24 Pixel groß.
  • Das Kontexthilfe-Modalfenster wird auf Mobiltelefonen und Tablets durch Tippen und auf Desktopgeräten durch Klicken aufgerufen.

Scroll-Verhalten​

Der Kontexthilfe-Container — einschließlich Kopf- und Fußzeile — ist fest vorgegeben, der Hauptteil hingegen scrollbar.

Animation​

Das Kontexthilfe-Modalfenster sollte in der Regel als zentriertes Overlay mit einer sofortigen Animation und einem dunklen Hintergrund mit einer Opazität von 25 % geöffnet werden.

Richtlinien für die Interaktion​

  • Implementieren Sie beim Ein- und Ausblenden des Kontexthilfe-Modalfensters flüssige und unaufdringliche Animationen, um eine nahtlose Benutzererfahrung zu gewährleisten.
  • Ermöglichen Sie Benutzern den schnellen Zugriff auf den Hilfeinhalt, ohne ihre aktuelle Aufgabe zu unterbrechen, und minimieren Sie Verzögerungen oder Unterbrechungen in ihrem Arbeitsablauf.
  • Gestalten Sie die Optionen zum Schließen/Verwerfen so, dass sie leicht zugänglich und intuitiv sind, und gewährleisten Sie, dass Benutzer das Hilfe-Modalfenster bei Bedarf problemlos verlassen 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.

Einfache modale Fenster und modale Fenster mit großem Funktionsumfang im Vergleich​

Es gibt zwei Arten von Kontexthilfe-Modalfenstern:

  • Einfache modale Fenster, die nur Text und Hyperlinks enthalten
  • Modale Fenster mit großem Funktionsumfang, die Text, Hyperlinks und Mediendateien enthalten.

Ziehen Sie zur Verbesserung von Kontexthilfeinhalten ggf. die Einbindung visueller Elemente, wie z. B. Symbolen oder Bildern, in Betracht.

Barrierefreiheit​

Achten Sie darauf, dass das Kontexthilfe-Muster für Benutzer mit Behinderungen zugänglich ist, indem Sie:

  • Die Barrierefreiheit der Tastatur zum Auslösen und Verwerfen des Hilfeinhalts gewährleisten.
  • Alternativtext für Abbildungen und Multimedia-Inhalte bereitstellen, um Benutzern zu helfen, die auf Screenreader angewiesen sind.
  • Für einen ausreichenden Farbkontrast und eine ausreichende Textgröße sorgen, um die Lesbarkeit, insbesondere für Menschen mit Sehbehinderungen, zu gewährleisten.

Reaktionsfähigkeit​

Messpunkte​

Das Kontexthilfe-Muster (modales Fenster) hat für die folgenden 3 Messpunkte jeweils die folgende maximale Breite:

  • Desktopgerät: 1440 Pixel, das modale Fenster hat eine maximale Breite von 720 Pixeln und eine maximale Höhe von 512 Pixeln.
  • Tablet: 768 Pixel, das modale Fenster hat eine Mindestbreite von 576 Pixeln und eine maximale Breite von 720 Pixeln. Die maximale Höhe beträgt 512 Pixel.
  • Mobilgerät: Bei einem 360-Pixel-Breitbildformat hat das modale Fenster eine maximale Breite von 344 Pixeln.

Um einen vertikalen Mindestabstand oder Rand innerhalb des kontextbezogenen Hilfe-Modalfensters zu gewährleisten, achten Sie darauf, sicher, dass der vertikale Textcontainer auf „Inhalt umarmen“ eingestellt ist, bis die für jeden Messpunkt angegebene maximale Höhe erreicht ist. Sobald die maximale Höhe überschritten ist, aktivieren Sie das vertikale Scrollen zur Verarbeitung des Inhalts mit Überlauf.

Größen​

Das Kontexthilfe-Modalfenster ist in drei Größen verfügbar:

  • Groß (Desktop und Tablet)
  • Mittel (Desktop und Tablet)
  • Klein (mobil)

Abbildung zur Veranschaulichung der drei Größen des Kontexthilfe-Modalfensters: groß, mittel und klein

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

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)