Zum Hauptinhalt springen

Drag & Drop

Überblick​

Drag & Drop (Ziehen und Ablegen) ist ein Interaktionsmuster der Benutzeroberfläche, mit dem Benutzer Objekte auswählen und bearbeiten können, indem sie sie innerhalb einer digitalen Schnittstelle anklicken und von einer Position an eine andere ziehen. Es bietet den Benutzern eine visuelle und intuitive Möglichkeit, Elemente (z. B. Listenelemente, Karten, Kacheln, Zeilen und Spalten) in einer Datentabelle zu verschieben, neu anzuordnen oder zu übertragen, indem sie sie einfach mit der Maus oder per Toucheingabe in die gewünschte Position ziehen. Die Drag&Drop-Funktion verbessert die Kontrolle und Effizienz des Benutzers, indem sie die Abhängigkeit von komplexen Menüs oder befehlsbasierten Aktionen verringert.

Zu verwenden​

  • Wenn die Zielgruppe mit dem Konzept der Drag&Drop-Interaktionen vertraut ist und es mit ihrem mentalen Modell übereinstimmt.
  • Wenn der Benutzer Objekte in einem räumlichen Kontext bearbeiten oder neu anordnen muss, z. B. das Organisieren von Dateien in einem Ordner oder das Anordnen von Elementen in einem Erstellungsbereich.
  • Die zu bedienenden Objekte verfügen über eine klare visuelle Darstellung und können einfach und eindeutig per Drag & Drop verschoben werden.
  • Die Drag&Drop-Interaktion verbessert das gesamte Benutzungserlebnis und macht es intuitiver, effizienter oder angenehmer.
  • Es besteht ein Bedarf an präziser Positionierung oder Anpassung, z. B. beim Design von Layouts, beim Organisieren von Elementen oder beim Erstellen personalisierter Arbeitsabläufe.
  • Wenn die Drag&Drop-Interaktion die Kontrolle und Effizienz verbessert, indem die Abhängigkeit von komplexen Menüs oder befehlsbasierten Aktionen verringert wird.

Nicht zu verwenden​

  • Wenn die Zielgruppe ist mit dem Konzept der Drag&Drop-Interaktionen nicht vertraut ist und es möglicherweise verwirrend oder schwierig zu bedienen findet.
  • Wenn die Drag&Drop-Interaktion die Komplexität erhöht oder den gesamten Ablauf verlangsamt, was die Benutzungsfreundlichkeit der Oberfläche beeinträchtigt.
  • Wenn es nur eine begrenzte Anzahl von Objekten oder Elementen gibt, die bearbeitet werden können, und alternative Interaktionsmethoden wie Kontrollkästchen oder Dropdown-Menüs eine einfachere und effizientere Lösung bieten können.
  • Wenn die zu bearbeitenden Objekte zu klein oder zu eng beieinander angeordnet sind, was es für Benutzer schwierig macht, sie genau auszuwählen und zu ziehen.
  • Das Drag&Drop-Muster steht im Konflikt mit Richtlinien oder Anforderungen zur Barrierefreiheit, sodass Benutzer mit bestimmten Behinderungen oder Beeinträchtigungen nicht darauf zugreifen können.
  • Der Benutzer muss gleichzeitig scrollen und ziehen.

Aufbau​

Drag & Drop (Ziehen und Ablegen) ist ein Containermuster, das zusammen mit verschiedenen anderen Komponenten wie Karten-, Listen-, Datentabellen- und Datei-Upload implementiert werden kann.

Aufbau des Drag&Drop-Musters

  1. Drag&Drop-Quellcontainer (Karte)
  2. Drag&Drop-Zielcontainer (Karte)
  3. Ziehbarer Zeiger (Symbol)
  4. Ziehbares Element
  5. Ziehbarer Zeiger (Cursor)
  6. Quellcontainer (aus dem das ziehbare Element extrahiert wird)
  7. Zielcontainer (wo das ziehbare Element abgelegt werden soll)

Aussehen​

Symbol​

  • Der Zeiger für „Ziehen“ (Drag) besteht aus einem Paar von drei vertikalen Punkten (Standard). Er kann je nach Anwendungsfall entweder links oder rechts positioniert werden.
  • Anmerkung: Wenn dem Container des ziehbaren Elements eine sekundäre Aktion zugeordnet ist, wird empfohlen, das „Ziehen“-Symbol auf der linken Seite des Elementcontainers anzuzeigen.

Abbildung das Zeigers für „Ziehen“ (Drag)

Cursor​

  • Links: Der Mickey-Maus-Cursor von Macs ist beim Bewegen des Mauszeigers zu sehen und zeigt an, dass die Drag&Drop-Funktion verfügbar ist.
  • Mitte: Während des Klickens und Haltens ändert sich der Drag&Drop-Cursor des Mac in einen geschlossenen Handschuh, um anzuzeigen, dass das Objekt gegriffen wurde.
  • Rechts: Der Drag&Drop-Cursor von Windows wird beim Bewegen des Mauszeigers angezeigt, ändert sich jedoch nicht, um anzuzeigen, dass das Element gegriffen wurde, sondern bleibt während der gesamten Interaktion ein Pfeilkreuz.
  • Anmerkung: Diese Cursoränderungen treten nicht beim Verschieben von Fenstern auf Mac oder Windows auf. Sie gelten nur für Objekte in Apps oder auf Websites.

Abbildung des Drag&Drop-Cursors

Greifbereich​

Der Greifbereich kann auf zwei Arten definiert werden:

  • Elementcontainer (Standard)
  • Nur Anzeige für ziehbares Symbol: Dies gilt, wenn dem Inhalt des ziehbaren Elements ein Klickereignis zugeordnet ist.

Abbildung des Drag&Drop-Greifbereichs

Rückmeldung zu gegriffenen Elementen​

Nachdem der Benutzer das Objekt „gegriffen“ hat, das per Drag&Drop verschoben werden soll, sind zwei Arten von Rückmeldung erforderlich:

  • Rückmeldung, dass das Objekt „gegriffen“ wurde
  • Vorschau, was passiert, wenn der Benutzer das Objekt „ablegt“

Die Rückmeldung, dass das Objekt gegriffen wurde, erfolgt in der Regel durch ein anderes Aussehen des Objekts im Vergleich zu anderen ähnlichen Objekten auf dem Bildschirm. Dies kann Folgendes beinhalten:

  • Einen **Umriss ** oder eine Kontrastfarbe
  • Erhöhung: Eine visuelle Darstellung, die es „über“ anderen Elementen erscheinen lässt, z. B. ein Schlagschatten
  • Visuelles Versetzen des Objekts, z. B. Einrücken oder Kippen

Abbildung von Rückmeldemechanismen für das Drag&Drop-Muster

Allgemeine Richtlinien​

  • Gewährleisten Sie, dass sich die ziehbaren Elemente optisch unterscheiden und leicht zu erkennen sind.
  • Stellen Sie einen eindeutigen Ausgangspunkt für den Beginn des Ziehvorgangsbereit, z. B. einen Griff oder einen ausgewiesenen Ziehbereich.
  • Unterstützen Sie im Interesse der Vielseitigkeit sowohl Klicken-und-Ziehen- als auch Berühren-und-Ziehen.
  • Verwenden Sie visuelle Rückmeldungen (z. B. Kippen/Hervorheben des Objekts, mit dem interagiert wird), um den Ziehvorgang deutlich anzuzeigen.
  • Stellen Sie eine Mehrfachauswahl und das Ziehen mehrerer Elemente bereit, wenn dies im Kontext sinnvoll ist.
  • Stellen Sie einen Ablagezielbereich mit visuellen Hinweise oder Hervorhebungen bereit, wenn sich ein ziehbares Element über einer gültigen Ablageposition befindet.
  • Geben Sie nach einer erfolgreichen Ablageaktion eine passende visuelle Rückmeldung, um den Abschluss des Vorgangs anzuzeigen.
  • Geben Sie Benutzern für den Fall eines versehentlichen Ablegen oder Verschiebens die Möglichkeit, den Drag&Drop-Vorgang rückgängig zu machen.
  • Optimieren Sie die Leistung, um reibungslose und responsive Drag&Drop-Interaktionen zu gewährleisten, insbesondere bei großen oder komplexen Elementen.
  • Testen Sie die Drag&Drop-Interaktion mit repräsentativen Benutzern, um Probleme mit der Gebrauchstauglichkeit zu identifizieren, und nehmen Sie basierend auf der Rückmeldung der Benutzer Änderungen vor.

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​

Die Barrierefreiheit über die Tastatur ist ein wichtiger Aspekt der Drag&Drop-Funktion. Benutzer müssen in darauf zuzugreifen und sie effizient nutzen können, ohne sich nur auf eine Maus oder einen Touchscreen zu verlassen. Um dies zu gewährleisten, fügen Sie Screenreader-Meldungen für alle Muster hinzu, die eindeutige Anweisungen zum Ausführen von Drag&Drop-Aktionen mithilfe der Tastaturtasten geben.

  • Auswahl: Der Benutzer drückt die Tabulatortaste, um durch die Liste/Karte zu navigieren und das entsprechende ziehbare Element auszuwählen, das in die Zielkarte/-liste verschoben werden soll.
  • Greifen: Der Benutzer drückt auf einem ziehbaren Element die Leertaste, um in den Drag&Drop-Modus zu gelangen.
  • Verschieben: Der Benutzer kann das ziehbare Element mit der nach rechts zeigenden Pfeiltaste in die Zielkarte/-liste verschieben, und mit den Aufwärts/Abwärts-Pfeiltasten die Position des gezogenen Elements innerhalb der Zielkarte/-liste ändern.
  • Ablegen: Der Benutzer drückt auf einem ziehbaren Element die Leertaste, um den Drag&Drop-Modus zu verlassen.
  • Auswahl aufheben: Durch Drücken der Tabulatortaste kann der Benutzer die Auswahl des ziehbaren Elements in der Zielkarte/-liste aufheben.

Hinweis: Wenden Sie dieselben Drag&Drop-Aktionen mit den Tastaturtasten an, wenn der Greifbereich nur auf das Indikatorsymbol für „Ziehen“ (die vertikalen Punkte) beschränkt ist und nicht das gesamte ziehbare Element umfasst.

Interaktionen​

Bei einem Drag&Drop-Muster spielen verschiedene Zustände eine entscheidende Rolle bei der Benutzerführung und der Bereitstellung von Feedback während der gesamten Interaktion.

Abbildung der interaktiven Zustände für Drag&Drop-Muster

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​

Eine Wettbewerbsanalyse und eine eingehende Untersuchung der Best Practices für Drag&Drop-Muster wurden während der Untersuchungsphase dieses Designprojekts durchgeführt.

Ressourcen​

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

Jutro-Musterbibliothek (19.6 MB)