Über meine Benutzeroberfläche können Benutzer Objekte verschieben, die in anderen Anwendungen normalerweise feste Positionen haben, z. B. Textfelder. Was kann ich tun, um dem Benutzer klar zu machen, dass er bestimmte Objekte verschieben kann?
Die Ideen, die mir in den Sinn kommen, sind:
Ich möchte, dass es offensichtlich ist, ohne dass der Benutzer bereits die Idee hat, dass er Dinge herumschleppen kann.
Es gibt keinen Grund, nicht mehrere Lösungen zu implementieren, um die besten Ergebnisse zu erzielen.
Anna Roubens Animations-Intro ist eine großartige Idee. Obwohl ich es nicht alleine benutzen würde.
Ich würde es mit einem 4-Wege-Pfeilsymbol (das üblicherweise zum Verschieben von Objekten verwendet wird) mit möglicherweise einem Tooltip kombinieren.
Für ungewöhnliche Praktiken wie das Ziehen von Eingabefeldern würde ich dies so offensichtlich wie möglich machen.
Ich stimme der Antwort von ted.strauss zu, es gibt bereits Grip-Indikatoren. Ein geeigneterer Typ wäre ein Quare-Muster, das einer griffigen Oberfläche wie eine Bodenmatte ähnelt. Ich denke, es macht einen besseren Job beim Transportieren der Nachricht "Hier greifen" als ein Symbol mit drei Balken und es kann auch auf einen größeren Bereich erweitert werden. Außerdem wird das Symbol mit drei Balken jetzt häufiger als Indikator für ein Menü oder eine Liste verwendet.
Um anzuzeigen, dass das Objekt frei bewegt werden kann, sollten Sie beim Mouseover den 4-Wege-Pfeilcursor verwenden.
Sie können ein Beispiel sehen, wenn Sie Ihre Taskleiste in Windows 7 entsperren:
Eine weitere ist in der neuesten Google Music App für Android zu sehen:
Und ich sehe mehr, wenn ich diese Antwort schreibe;) ->
Das Ziehen und Ablegen ist ziemlich schwer zu kommunizieren.
Da es keine todsichere Möglichkeit gibt, zu kommunizieren, dass Drag & Drop möglich ist, sollten Sie aus Gründen der Barrierefreiheit (Sie können nicht ziehen und ablegen, wenn Sie schlechte Seh- oder Motorikfähigkeiten haben) immer eine alternative Interaktion unterstützen.
Eine weitere Überlegung: Wenn Sie in einem Teil Ihrer Anwendung Drag & Drop verwenden, müssen Sie geben Sie ziehbaren Elementen immer ein bestimmtes Styling und verwenden Sie dieses Styling niemals für andere Elemente. Andernfalls können Benutzer nicht erfahren, welche Elemente gezogen werden können und welche nicht.
Wenn die Seite/der Abschnitt geladen wird, können Sie eine schnelle Animation anzeigen, die in Ihr UI-Steuerelement integriert ist, um die Idee zu demonstrieren, dass ein Objekt gezogen werden kann.
Ich denke, dass eine große Geschichte in der jüngsten UX der Aufstieg des bescheidenen Griffindikators ist, wie in einigen Beispielen hier dargestellt. Das erste Beispiel stammt aus der Facebook iPhone App, in der dieses Symbol zum Ziehen zwischen den beiden Hauptregionen der App verwendet wird. Durch die Auswahl dieses Symbols, das ungefähr 36 Pixel seiner Fläche einnimmt, wurde die Möglichkeit verpasst, die Funktionalität der App zu brandmarken oder eine auffälligere Methode zur Darstellung des Übergangs zu wählen.
Dieses bescheidene Symbol der Greifbarkeit war einfach die am wenigsten verwirrende Wahl.
Das zweite Beispiel ist möglicherweise die häufigste Verwendung des Grabbers in einer Bildlaufleiste. Und das dritte Beispiel ist eine dünne Trennlinie auf der Benutzeroberfläche des Browsers. In diesem Fall ist es überhaupt nicht offensichtlich, dass das Element erfasst werden kann, sodass die Frage besser übereinstimmt. Wählen Sie im Zweifelsfall das dreizeilige Symbol für die Greifbarkeit.
Idee hauptsächlich für mobile Schnittstellen: Wenn das Element über dem anderen Inhalt schwebt: Lassen Sie das Element auf den Bildschirm fliegen. Dies könnte darauf hindeuten, dass es auch durch Ziehen "herausfliegen" kann.
Google macht es mit einem Raster von Punkten, woanders gesehen. Und der Mauszeiger ändert sich. (