it-swarm.com.de

Tooltip mit Aktion zum Kopieren in die Zwischenablage

Ich möchte einen Pfad der Datenquelle eines Objekts anzeigen (Diagramm mit CSV-Daten) und dem Benutzer die Möglichkeit geben, den Pfad in die Zwischenablage zu kopieren. Ich habe verschiedene Ansätze gemacht.

Eine Idee war, ob ich einen Tooltip verwenden könnte, der den Pfad zeigt. Zusätzlich würde ich eine Schaltfläche Kopieren/Kopieren in die Zwischenablage hinzufügen. Dieser Ansatz benötigt nicht mehr verschiedene Elemente als eine Gliederung (dargestellt durch Rollover und Aktivierung) und Interaktionen. Es erfordert einen einfachen Rollover plus einen Klick zum Kopieren in die Zwischenablage, aber ich bin nicht sicher, ob dies gegen verschiedene Schnittstellenregeln verstößt.

Mock with a additional copy button

Hier eine Schaltfläche im Tooltip, aber ich bin nicht sicher, was passiert, wenn der Benutzer die empfindliche Leinwand (Diagramm) verlässt, um sie für die Schaltfläche zu verwenden. Der Tooltip befindet sich über dem Diagramm. Ich gehe davon aus, dass es technisches Feedback und spezielle Regeln für das Tooltip-Verhalten benötigt. Z.B. Wann verschwindet der Tooltip, wenn der Benutzer mit der Maus ausrollt?.

enter image description here

Meine Frage ist, kann ich einen Tooltip mit einem Interaktionselement wie einer Schaltfläche verwechseln? Ich habe einen solchen Fall noch nie gesehen.

Microsoft Office ist zwar technisch gesehen kein Tooltip, enthält jedoch Kontextschaltflächen zur Auswahl und zum Schweben für eine Weile. Unten finden Sie einen Screenshot von MS Word 2013 mit den "Popup" -Aktionen, die für eine Textauswahl ausgeführt werden können. Dies wird angezeigt, wenn Sie den Mauszeiger über den ausgewählten Text bewegen.

enter image description here

Wenn Sie die Aktion so implementieren, dass der Tooltip beim Fokussieren nicht verschwindet, können Sie Ihren "Tooltip" aktiv lassen, während der Benutzer innerhalb des Tooltips navigiert und auswählt.

In ähnlicher Weise können sich Benutzer mit Eclipse (der IDE) auf einen Tooltip-ähnlichen Bereich konzentrieren, der ihn in ein schwebendes Fenster konvertiert. Auf diese Weise kann der Benutzer mit dem Inhalt des Tooltips interagieren.

enter image description here

enter image description here

So etwas wurde schon früher gemacht und funktioniert tatsächlich gut für UX.

3
mawcsco

Ich weiß nicht, wer Ihre Zielgruppe ist und was Ihre App genau tut, damit einige der Dinge, die ich unten sage, mehr oder weniger relevant werden.

Ich habe die Erfahrung gemacht, dass Tooltips unter mangelnder Auffindbarkeit leiden können, insbesondere wenn das Design keine eindeutigen visuellen Hinweise darauf enthält, dass Sie dem Benutzer mehr Informationen anbieten. Ich denke, Ihre beiden Vorschläge leiden unter einem Mangel an Auffindbarkeit. Wäre es möglich, stattdessen eine Schaltfläche zum Auslösen der Aktion in einer Symbolleiste oder beispielsweise neben dem Diagrammnamen zu haben? Abhängig davon, wie wichtig die Funktion ist und wie versiert Ihre Benutzer sind, würde ich befürchten, dass die Leute nie herausfinden würden, wie sie die Funktion finden können.

Darüber hinaus sind all diese Hover-Aktionen nur dann wirklich gut, wenn Ihre Benutzer eine Maus verwenden, um mit Ihrem Produkt zu interagieren. Touch wird in allen Sektoren stark genutzt, und wenn Sie keine separate Tablet-optimierte Version Ihres Produkts beibehalten, schneiden Sie im Wesentlichen Ihre Touch-Benutzer können die Funktion nicht verwenden (oder sie werden wahrscheinlich nicht darauf stoßen, weil sie keine Maus zum Bewegen haben).

2
Niels

Setzen Sie streng ein "ToolTip" sollte üblicherweise Informationen über das Element enthalten, über dem Sie schweben.

Popup-Menüs und Kontextmenüs, die beim Hover aktiviert werden, können jedoch definitiv Benutzersteuerelemente enthalten, ohne gegen Konventionen oder Erwartungen zu verstoßen. Für ein funktionierendes Beispiel bewegen Sie den Mauszeiger einfach über Ihren SE-Benutzernamen.

Es wird auf die gleiche Weise wie ein Tooltip ausgelöst, sollte jedoch technisch als Kontextmenü bezeichnet werden.

Ich würde mich für das letztere Ihrer Beispiele entscheiden, da dies dem Pfad klarer als dem Diagramm selbst zugeordnet ist und den Benutzer nicht irreführt, zu glauben, dass es sich um ein Bild des Diagramms handelt, das kopiert wird. In Bezug auf Ihre Bedenken, das Menü offen zu halten, nachdem der Benutzer das Element mit dem Cursor verlassen hat, kann dies mit JavaScript ganz einfach erreicht werden (vorausgesetzt, es handelt sich um eine Webanwendung).

0
AndroidHustle