Zum Hauptinhalt springen

Drawer

Überblick​

Der Drawer (früher „Schnellansicht“) ist ein Container, der zusätzliche Informationen zur Hauptseite anzeigt. Er schwebt über dem Hauptinhaltsbereich und ermöglicht Benutzern, auf zusätzliche Inhalte und Aktionen zuzugreifen, ohne zu einer neuen Seite zu navigieren.

Zu verwenden​

  • Zum Anzeigen von zusätzlichen Informationen, Kontext oder Details zu Inhalten auf der Hauptseite.
  • Für kleinere Abläufe, die sich auf den Inhalt der Hauptseite beziehen.
  • Wenn zusätzliche Inhalte mehr Platz benötigen (z. B. Filter, Formulare und Bereichsdetails).
  • Für CRUD-Operationen (Erstellen, Lesen, Aktualisieren und Löschen).
  • Zum Anzeigen einer Vorschau von Inhalten, ohne zu einer neuen Seite zu wechseln.

Nicht zu verwenden​

  • Zur Durchführung von Abläufen, die nicht mit den Inhalten der Hauptseite zusammenhängen. Verwenden Sie stattdessen eine neue Seite.
  • Wenn Benutzer eine Aktion abschließen müssen, bevor sie fortfahren können. Verwenden Sie stattdessen ein modales Fenster.

Aufbau​

Aufbau des Drawer-Musters

Das Drawer-Muster besteht aus den folgenden Elementen:

  1. Überschrift (obligatorisch): Enthält eine H2-Überschrift und ein Schließen-Symbol, über das der Benutzer die Ansicht verlassen kann.
  2. Hauptteil (obligatorisch): Hier wird der Hauptinhalt positioniert. Er kann schreibgeschützt oder bearbeitbar sein, aus Registerkarten mit Bereichen, Links, Filtern, Formularen usw. bestehen. Der Hauptteil ist scrollbar.
  3. Fußzeile (optional): Enthält Aktionsschaltflächen, die die Inhalte im Drawer auslösen. Die Position der Fußzeile ist fest vorgegeben.

Allgemeine Richtlinien​

  • Verwenden Sie zum Öffnen des Drawers ein Symbol, einen Link oder eine Schaltfläche auf der Hauptseite, jedoch keine komplette Tabellenzeile.
  • Legen Sie ein Overlay über den Hauptinhalt, wenn dieser inaktiv sein soll, wenn der Drawer geöffnet ist.
  • Der Drawer kann auf unterschiedliche Weise geschlossen werden:
    • über die Schließen-Schaltfläche in der Kopfzeile
    • über die Schließen-Schaltfläche in der Fußzeile (in bestimmten Fällen)
    • durch Drücken der ESC-Taste

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.

Registerkarten​

Wenn der Inhalt in einem Drawer komplex ist, können Sie ihn zur besseren Strukturierung in Registerkarten anordnen. Es empfiehlt sich, nicht mehr als 4 Registerkarten zu verwenden. Verwenden Sie den Drill-Modus zum Anzeigen weiterer Inhalte.

Komplexe Inhalte in Registerkarten unterteilt

Wenn mehr als 4 Registerkarten in einem Drawer benötigt werden, empfiehlt sich die Verwendung von Links. Nach dem Klicken auf einen Link wird eine neue Unterseite geöffnet (sogenannter Drill-Modus), auf der der Benutzer detailliertere Informationen anzeigen kann und die Möglichkeit hat, zurückzuwechseln (in der Drawer-Kopfzeile). Wenn mehr als 3 Ebenen von Unterseiten im Drawer erforderlich sind, wird die Verwendung einer separaten Seite empfohlen. Fügen Sie für den Drill-Modus immer eine Zurück-Schaltfläche ein.

LinksDrill-Modus
Links in einem DrawerUnterseite mit detaillierteren Informationen

Interaktionen​

Größenänderung​

Die Größe des Drawers kann durch Ziehen des Rands geändert werden. Es wird empfohlen, die maximale Breite auf 50 % der Bildschirmbreite und die minimale Breite auf 30 % der Bildschirmbreite festzulegen.

Drawer auf 50 Prozent der Bildschirmbreite angepasst

Reaktionsfähigkeit​

Auf Mobilgeräten nimmt der Drawer immer die gesamte Breite des Bildschirms ein.

Drawer auf einem Mobilgerät

Unterstützende Recherche​

Die Recherche für dieses Muster bestand aus einer Wettbewerbsanalyse. Die Wettbewerbsanalyse ist eine Recherchetechnik, mit der Sie vergleichen und verstehen können, woran andere auf demselben Gebiet arbeiten. Die UX-Designer analysierten die Muster von 7 anderen Designbibliotheken. Sie 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.

Ressourcen​

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

Jutro-Musterbibliothek (19.6 MB)