webentwicklung-frage-antwort-db.com.de

Lassen Sie das Objekt ziehbar aussehen

Ich habe ein Auswahlobjekt (mit dem Text SELECTED darauf), das auf einem Hintergrund herumschwebt. Das Auswahlobjekt ist ziehbar und wird verwendet, um es auf ein Möbel zu ziehen, um eine Auswahl zu treffen. Der Benutzer soll in der Lage sein, das Objekt beispielsweise auf das Sofa zu ziehen, um es auszuwählen. Im Modellbild wird der runde Tisch ausgewählt.

Mockup picture - Selection with draggable object

Bisher habe ich:

  • Hinten wurde ein Schatten hinzugefügt, damit er über dem Hintergrund schwebt
  • Links und rechts wurden 6 Punkte hinzugefügt, damit es greifbar aussieht
  • Beim Bewegen des Mauszeigers über das Auswahlobjekt wurde der Cursor auf eine Hand geändert

Die offensichtliche Möglichkeit, einfach auf das Sofa zu klicken, um es auszuwählen, ist in diesem Fall keine Option, da das Klicken auf Objekte eine andere Funktion hat!

Das Hauptproblem besteht darin, dass es sich um ein schwebendes Objekt über Objekten der realen Welt handelt. Mein Gedanke war also, das Auswahlobjekt so aussehen zu lassen, als würde es schweben (wie ein Ballon), indem ich eine Animation verwende, damit es sich beweglich anfühlt. Dies kann jedoch zu Irritationen führen, wenn sich das Objekt ständig bewegt.

Wie kann ich das Bewusstsein dafür erhöhen, dass das Auswahlobjekt ziehbar ist, z. es schwebt und steckt nicht im Hintergrund.

27
Henrik Ekblom

Wenn Sie ein Zeichen ziehen möchten, können Sie möglicherweise eine andere Art von Anzeige hinzufügen, dass sich das Objekt bewegt, d. H.

enter image description here

Ich denke jedoch, dass es für den Benutzer unnatürlich sein könnte, ein Schild herumzuziehen. Ein Klick auf ein Objekt und ein Wechsel des Zeichens zum neuen Objekt wäre für den Benutzer ein natürlicheres Verhalten.

Benutzer gehen immer davon aus, dass die Objekte ziehbar sind.

Da möchten Sie das ausgewählte Objekt markieren. Haben Sie die folgenden Vorschläge berücksichtigt?

  • bildschirme, wenn ein Objekt ausgewählt ist, erhält der Rest beispielsweise eine Deckkraft von 50% Schwarz

  • gepunktete Umrisse

  • um Objekte glühen

enter image description here

21
Rosie

Bei solchen Problemen ist es am besten zu sehen, wie andere Schnittstellen damit umgehen. Auf diese Weise wurde bereits ein Teil der Benutzerschulung durchgeführt - Sie müssen das Rad nicht neu erfinden.

In diesem Fall fiel mir als erstes Pegman für Google Maps Streetview ein.

Google behebt dieses Problem, indem es den ziehbaren Indikator zunächst in einer separaten Symbolleiste "Off Map" platziert. Symbolleisten befinden sich bereits im Benutzerbewusstsein, mit dem sie interagiert werden können, um den mit dieser Leiste verknüpften Inhalt zu beeinflussen:

enter image description here

Pegman hat auch einen Mouseover-Status - wenn er über ihm schwebt, springt der Pegman heraus und der Cursor verwandelt sich in eine greifende Hand - und noch mehr Feedback, mit dem er interagieren kann.

enter image description here

Von hier aus ändern sie dann den Status der Karte, wenn Sie Pegman abholen, um anzuzeigen, was Sie mit ihm tun können, wenn Sie ihn gepackt haben.

enter image description here

Diese visuelle Änderung an der Karte, die hervorhebt, wo er abgelegt werden kann, ist eine zusätzliche Rückmeldung an den Benutzer, dass er, nachdem er den Indikator ergriffen hat, ihn in einem der angegebenen Bereiche ablegen kann. Dies ist ein wertvolles Feedback für sie.

Google behandelt dieses Problem auf drei Arten:

  1. Fügen Sie die Pipette einer separaten Symbolleiste hinzu
  2. Stellen Sie einen Schwebezustand mit zugehöriger Mauszeigeränderung bereit
  3. Geben Sie Feedback zur Karte selbst, sobald Sie dieses Tool verwenden, was Sie damit tun können.

Versuchen Sie also, diese Techniken mit Ihrer Benutzeroberfläche zu verwenden. Google hat die Nutzer bereits teilweise darin geschult, auf diese Weise mit solchen Schnittstellen zu interagieren. Verwenden Sie dieses Nutzerwissen daher für Ihre eigenen Zwecke.

16
JonW

Das SELECTED-Objekt sieht aus wie ein Tooltip oder eine Beschriftung. Ich denke, ein Zeiger sollte eher einem Objekt ähneln, da er als Steuerelement verwendet wird. Ich denke, Zeiger könnte ohne übermäßige SELECTED-Vorstellung verwendet werden. Trotzdem könnten Sie Tooltip verwenden.
enter image description here

Um die Interaktionsfähigkeiten ("Lebendigkeit") des Zeigers zu zeigen, können Sie eine unauffällige Animation mit einem ziemlich langen "stationären" Zustand verwenden (siehe Abbildung unten).
enter image description here

9

Selbst wenn Sie die Ziehbarkeit der Auswahl vermitteln, sind Benutzer wahrscheinlich immer noch verwirrt und denken, dass sie das ausgewählte Element und nicht die Auswahl in Mitleidenschaft zieht. Zum Beispiel werden sie denken, dass es den Teller zur Couch zieht, anstatt die Couch auszuwählen.

Ich weiß, dass Sie derzeit eine andere Tap-Funktion haben, aber wenn die Auswahl von Elementen im Vergleich zu Ihrer benutzerdefinierten Funktion keine extrem niedrige Priorität hat, empfehle ich Ihnen dringend, die Auswahl über einen Tap zu ermöglichen, da Sie sogar sagten, dass dies die offensichtliche Lösung ist, wenn Ihre andere Funktion nicht gewesen wäre Im weg. Es wäre hilfreich zu wissen, was Ihre Funktion ist, aber hier sind drei mögliche Möglichkeiten, dies zu tun:

  1. Wählen Sie beim Tippen das Objekt aus und führen Sie Ihre Aktion aus. Solange Ihre benutzerdefinierte Tippaktion nicht für ein nicht ausgewähltes Element ausgeführt werden muss, funktioniert dies möglicherweise, obwohl dies unwahrscheinlich ist.
  2. Fügen Sie eine Möglichkeit hinzu, den Tippmodus für die Seite zwischen Auswahl und Aktion umzuschalten. Dies ist sinnvoll, wenn Ihre benutzerdefinierte Aktion sehr häufig ausgeführt wird, ohne Ihre Auswahl dazwischen zu ändern, da der Benutzer die Aktion wiederholt mit einem Klick ausführen kann. Wenn Ihre benutzerdefinierte Aktion häufig genug ist, können Sie sogar direkt nach Auswahl eines Elements durch den Benutzer in den benutzerdefinierten Aktionsmodus zurückkehren.
  3. Wählen Sie das Objekt aus und geben Sie ihm die Option, Ihre Aktion auszuführen. Dies ist sinnvoll, wenn Ihre benutzerdefinierte Aktion nicht sehr häufig verwendet wird.

Nachdem Sie sich für einen Auswahlprozess entschieden haben, können Sie Ihre Auswahl einfach mit Ihrem Rand kennzeichnen, was eine viel sauberere Darstellung ergibt.

7
Briguy37

Was Sie dort implementieren, ist ein unnötig unkonventionelles Benutzeroberflächenparadigma.

Tun Sie es einfach wie fast jede gut gestaltete GUI-Anwendung seit dem Macintosh von 1984.

Lassen Sie den Benutzer zum Auswählen von Inhalten ein Auswahlwerkzeug aus einer Symbolleiste auswählen (falls erforderlich: Möglicherweise nicht: Einfache Programme benötigen keine Symbolleisten. Wenn für jede Aktion etwas ausgewählt werden muss, können Sie dies tun Habe nur ein Paradigma für ein ausgewähltes Objekt + einen Versandbefehlstyp.)

Ändern Sie die Maus Cursor, um das Auswahlwerkzeug wiederzugeben. Der Cursor wird dann zum Auswahlobjekt. Es ist kein zusätzliches Objekt wie das, was Sie haben, erforderlich. Es ist auch kein überladener Text auf dem Cusor erforderlich. Der erläuternde Text für das Werkzeug kann ein Tooltip sein, der angezeigt wird, wenn Sie den Mauszeiger über die Symbolleiste bewegen.

Wenn das Auswahlwerkzeug aktiviert ist, werden sie durch Klicken auf Dinge ausgewählt.

Strg + Klicken wählt mehrere Dinge aus.

Durch Klicken + Halten + Ziehen kann der Benutzer eine Form wie ein Rechteck gestikulieren, das nach Abschluss Dinge innerhalb seiner Grenzen oder Dinge, die es schneidet, sowie solche innerhalb seiner Grenzen auswählt.

Mit Strg + Klick + Ziehen kann der Benutzer die oben genannten Optionen verwenden, um die Auswahl zu erweitern.

Zitat:

Die offensichtliche Möglichkeit, einfach auf das Sofa zu klicken, um es auszuwählen, ist in diesem Fall keine Option, da das Klicken auf Objekte eine andere Funktion hat!

Wenn der offensichtliche Weg keine Option ist, haben Sie ein offensichtliches Usability-Problem.

Wenn Sie auf Objekte klicken, werden immer Objekte ausgewählt, auch wenn dies implizit ist. In Ihrer GUI funktioniert diese andere Funktion, die durch Klicken auf ein Objekt gestartet wird, mit ziemlicher Sicherheit auf dieses Objekt, und das bedeutet, dass das Objekt für diese Funktion ausgewählt ist. Es ist einfach nicht in einem ausgewählten Zustand.

In Anwendungen, die keine Symbolleiste für verschiedene Aktionsmodi haben, wird dies traditionell so behandelt, dass ein einzelner Klick eine zustandsbehaftete Auswahl ausführt (mit Modifizierertasten zur Auswahl mehrerer) und ein Doppelklick "Dieses Objekt oder alle auswählen" ausführt ausgewählte Objekte als Argument für eine Standardoperation und versenden diese Operation ". Oder es können verschiedene Maustasten verwendet werden. Ein Linksklick wählt das Objekt aus, ein Rechtsklick öffnet ein Kontextmenü, aus dem andere Aktionen ausgeführt werden.

4
Kaz

Meiner Meinung nach ist das Feld mit dem Text "Ausgewählt" nicht erforderlich. Und die Punkte darauf sehen aus wie Dekoration. Ich mag die Schattenidee. Haben Sie darüber nachgedacht, das gesamte Objekt mit einem Glüheffekt an den Rändern hervorzuheben? Sie können auch den Mauszeiger ändern, während Sie mit der Maus über ein ziehbares Objekt in eine greifende Hand fahren, um die Greifbewegung zu animieren.

3
Maryh

Geben Sie den Objekten beim Mouseover Schatten und harte Umrisse.

2
Fractional

Eine andere Möglichkeit besteht darin, es wirklich "schweben" zu lassen - d. H. Es ganz sanft auf und ab bewegen zu lassen. Das wäre für mich ein sehr klarer Hinweis darauf, dass das Objekt nicht fixiert ist, sondern verschoben werden kann, und das Ziehen ist der offensichtliche Weg, dies zu tun.

2
CompuChip
  1. Markieren Sie das Objekt, wenn Sie den Mauszeiger darüber halten (Sie haben die Wahl, wie Sie dies tun möchten).
  2. Verwenden Sie einen einfachen animierten Handcursor, wenn Sie den Mauszeiger über das Objekt bewegen (siehe Beispiel, es sollte ausreichen, um zu zeigen, dass das Objekt ziehbar ist).

Animated Hand Cursor

1
Ciprian Pălici

Einstellung cursor:move zum Vier-Wege-Pfeil beim Schweben ist der offensichtlichste Hinweis darauf, dass etwas ziehbar/beweglich ist. So ziemlich der Standardindikator auf allen Betriebssystemen.

0
sn3ll