webentwicklung-frage-antwort-db.com.de

Wie kann man deutlich machen, dass man Dinge ziehen kann, die man normalerweise nicht kann?

Ü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:

  • Fügen Sie einen eindeutigen Rahmen um bewegliche Objekte hinzu
  • Ändern Sie den Mauszeiger in ein "Grab-It" -Symbol, wenn Sie mit der Maus über den Objektrand fahren

Ich möchte, dass es offensichtlich ist, ohne dass der Benutzer bereits die Idee hat, dass er Dinge herumschleppen kann.

34
Austin Henley

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.

enter image description here

23
Chris N.

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: taskbar unlocked icon

Eine weitere ist in der neuesten Google Music App für Android zu sehen: shuffle playlist in Google Music

Und ich sehe mehr, wenn ich diese Antwort schreibe;) -> grip patterngrip pattern

22
J_rgen

Das Ziehen und Ablegen ist ziemlich schwer zu kommunizieren.

  1. Sie können beim Bewegen des Mauszeigers einen Cursor für "Ergreifende Hand" oder "Vier-Wege-Pfeil" bereitstellen (dies funktioniert jedoch nur, wenn Sie Benutzer zum Schweben bringen können. Außerdem habe ich aus Benutzertests die Erfahrung gemacht, dass Cursor nicht viel bewirken Auswirkungen sowieso)
  2. Geben Sie ziehbaren Elementen einen Schwebezustand oder lassen Sie sie von der Seite "verschwinden", indem Sie einen Schlagschatten hinzufügen und um einige Pixel nach links und oben verschieben (dies hängt wiederum davon ab, dass Benutzer zunächst schweben).
  3. Verwenden Sie einen "erhabenen Rand" oder einen "strukturierten" Aufkleber auf dem "Griff" des Elements, um zu greifen, wie z enter image description here oder die Textur, die Google Mail verwendet: enter image description here (Dies ist nicht allgemein anerkannt)
  4. Erwähnen Sie es im Anleitungstext (funktioniert nicht, da es nie gelesen wird)
  5. Stellen Sie sicher, dass andere Vorgänge die betreffenden Elemente animiert verschieben, um darauf hinzuweisen, dass sie beweglich sind (ich kann nicht garantieren, dass dies funktioniert).

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.

17

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.

enter image description here

9
Anna Rouben

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.

enter image description here

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.

enter image description here

enter image description here

3
ted.strauss

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.

1

Google macht es mit einem Raster von Punkten, woanders gesehen. Und der Mauszeiger ändert sich. (enter image description here

0
Chris SH