Zum Hauptinhalt springen

Drag & Drop

Überblick​

Drag & Drop ist ein Interaktionsmuster der Benutzeroberfläche, mit dem Benutzer Objekte auswählen und bearbeiten können, indem sie innerhalb einer digitalen Benutzeroberfläche darauf klicken und sie von einer Stelle an eine andere ziehen. Es bietet Benutzern eine visuelle und intuitive Möglichkeit, Elemente wie 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 an 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. beim Organisieren von Dateien in einem Ordner oder beim Anordnen von Elementen in einem Erstellungsbereich.
  • Die zu bearbeitenden Objekte werden visuell klar dargestellt und lassen sich problemlos und eindeutig per Drag & Drop verschieben.
  • Die Drag & Drop-Interaktion verbessert das gesamte Benutzererlebnis und macht es intuitiver, effizienter und 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 Workflows.
  • 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 mit dem Konzept der Drag & Drop-Interaktionen nicht vertraut ist und diese möglicherweise verwirrend oder schwierig zu verwenden findet.
  • Wenn die Drag & Drop-Interaktion die Komplexität erhöht oder den gesamten Ablauf verlangsamt, was die Benutzerfreundlichkeit der Benutzeroberflä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 ist ein Containermuster, das zusammen mit verschiedenen anderen Komponenten wie Karte, Liste, Datentabelle und Datei-Upload implementiert werden kann.

Aufbau des Drag & Drop-Musters

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

Aussehen​

Symbol​

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

Abbildung des Zieh-Indikators

Cursor​

  • Links: Der Mickey-Mouse-Cursor des Mac ist beim Bewegen des Mauszeigers zu sehen und gibt 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 anzugeben, dass das Objekt gegriffen wurde.
  • Rechts: Der Drag & Drop-Cursor von Windows wird beim Bewegen des Mauszeigers angezeigt, ändert sich jedoch nicht, um anzugeben, dass das Element gegriffen wurde, sondern bleibt während der gesamten Interaktion ein Pfeilkreuz.
  • Hinweis: Diese Cursoränderungen treten nicht beim Verschieben von Fenstern unter macOS 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​

  • Stellen Sie sicher, dass sich die ziehbaren Elemente optisch unterscheiden und leicht zu erkennen sind.
  • Stellen Sie einen eindeutigen Ausgangspunkt für den Beginn des Ziehvorgangs bereit, 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 Hinweisen 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 Ablegens 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 darauf zugreifen 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 Zielliste/-karte verschoben werden soll.
  • Greifen: Der Benutzer drückt auf einem ziehbaren Element die Leertaste, um in den Drag & Drop-Modus zu wechseln.
  • 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 Symbol des Zieh-Indikators (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)