it-swarm-eu.dev

Wie kann man die Möglichkeit von Drag'n'Drop visualisieren?

Meine Webanwendung enthält eine Liste von Elementen, die nach Drag'n'Drop sortiert werden können. Wie soll diese Funktion für Benutzer visuell dargestellt werden?

56
Witek

Ich habe eine kleine "griffige" Textur für Sachen verwendet, um zu zeigen, dass es ziehbar ist. Hier ist die Textur von Google Mail:

enter image description here

37
Ken Mohnkern

Ich habe vor einigen Jahren eine Präsentation von Sean Kane von Netflix gesehen, in der er beschrieb, wie die DVD-Warteschlange funktioniert. Sie sollten es studieren, wenn Sie können (wenn Sie ein Konto haben oder jemanden kennen, der dies tut).

Ein paar Punkte zu beachten:

  • Er sagte, der Standard-Bewegungscursor sei nicht sehr gut getestet worden, daher wechselten sie zu einem Greifcursor , wie von GoodEnough vorgeschlagen .

  • Das Ziehen und Ablegen ist eine progressive Verbesserung. Sie können weiterhin sortieren, indem Sie Textfelder in der Spalte für die Listenreihenfolge ausfüllen. Viele Benutzer bemerken nie, dass die Drag & Drop-Funktion verfügbar ist.

  • Es gibt keinen Ziehpunkt. Sie können den Ziehvorgang mit der Maus an einer beliebigen Stelle in der Zeile starten (außer wenn sich ein anderes Objekt, z. B. ein Link, im Vordergrund befindet). .

27

Es gibt ein Standardsymbol aus drei horizontalen Linien übereinander, das impliziert, dass Elemente per Drag & Drop verschoben werden können.

Dies impliziert "Reibung" oder "Griff" und ähnelt den diagonalen Linien in der unteren rechten Ecke von Fenstern oder Textfeldern, mit denen die Größe geändert werden kann.

14
Dan Barak

Der Verschiebungscursor wird häufig bei ziehbaren Elementen in Webanwendungen verwendet.

cSS:

cursor:move;
11
Sruly

Ich schlage vor, Sie verwenden die kleine Greifhand (offen beim Schweben, geschlossen beim Ziehen). Haben Sie eine Art Greifsymbol (einen Griff), das wie etwas aussieht, das erfasst werden kann (in Google Mail sind es zwei Punktspalten (4 Punkte pro Spalte).

Ich würde auch vorschlagen, dass Sie eine kleine Animation hinzufügen, die das Verhalten neuen Benutzern (oder vorhandenen Benutzern, wenn es sich um eine neue Funktion handelt) zeigt. Zeigen Sie die Animation jedoch nicht jedes Mal an, wenn sich ein Benutzer in Ihrer App befindet.

6
mbillard

Ziehen ist ein Ziehen. Nachdem ich kürzlich einige Drag-and-Drop-Benutzeroberflächen überarbeitet habe, bin ich zu dem Schluss gekommen, dass ich sie beim nächsten Mal in eine Art "Click and Drop" ändern werde. Haben Sie ein Widget für jedes Element, auf das Sie klicken, um es zum Verschieben auszuwählen. Dann klicken Sie, wohin es gehen soll. Dies scheint beim Testen bisher gut zu laufen.

5
Robert Fisher

Wenn Sie den Cursor über ziehbare Objekte bewegen, sollte er in eine offene Hand umgewandelt werden. Wenn ein Objekt ergriffen wird, sollte es in eine greifende Hand verwandelt werden. Während des Ergreifens eines Objekts können die zulässigen Abwurfzonen vom anderen Hintergrund hervorgehoben werden (d. H. Durch Schattierung oder Färbung).

1
txwikinger

Universal Whirlpool Symbol kann sein?.

Die Desktop-Anwendung, mit der ich arbeite, ermöglicht das Ziehen von Dateien außerhalb von Anwendungen. Bestimmte Anwendungen, die Drag & Drop ermöglichen, verfügen normalerweise über einen Ablagebereich oder einen Inhaltsbereich. wie eine Wiedergabeliste in einem Musik-Player. Die Benutzerfreundlichkeit per Drag & Drop ist eine progressive Offenlegung, aber einige Benutzer werden sie nie intuitiv erreichen. In solchen Fällen ist das Beste, was ich mir vorstellen kann, für den Drop-Bereich zu werben, ein Whirlpool-Symbol-Hintergrund.

0
Vishnu Prasanth

Ich komme selbst mit einer Desktop-Anwendung auf dieses Problem. Die beste Lösung, die ich im Moment finden kann, besteht darin, einen Pfeil auf dem Mauszeiger zu haben, der einfach darauf zeigt, wohin das Objekt gezogen werden kann, wobei ein Text Drag & Drop oder ähnliches sagt.

0
James Ludlow