it-swarm.com.de

Kommunizieren Sie Funktionen für langes Drücken in einer Web-Benutzeroberfläche

Abgesehen von Google Drive und einigen anderen Anwendungen scheint es daher meistens als Nein-Nein angesehen zu werden, das Standard-Kontextmenü des Browsers mit der rechten Maustaste zu überschreiben. Das Muster, das stattdessen aufgetaucht zu sein scheint, besteht darin, eine "Mehr" -Schaltfläche darzustellen, auf die der Benutzer mit seiner primären Maustaste klickt und die eine sekundäre Oberfläche (Kontextmenü, Seitenleiste, unteres Blatt usw.) aufruft.

Ich mag dieses Muster jedoch nicht, weil es Immobilien beansprucht und die Aufmerksamkeit des Benutzers vom Hauptinhalt ablenkt. Ich persönlich finde das Muster eher desorientierend, insbesondere wenn es sich eher um ein Raster von Elementen als um eine vertikale Liste handelt.

Ich denke, eine gute Alternative zu den "Mehr" -Tasten besteht darin, "Langdruck" -Optionen bereitzustellen. Diese Funktionalität kann grundsätzlich von jedem Browser auf jedem Gerät unterstützt werden, da die technische Implementierung einfach ein setTimeout Aufruf ist.

Leider, weil die "Mehr" -Schaltflächen so allgegenwärtig sind und die Langdruckfunktion so wenig verbreitet ist (zumindest im World Wide Web). Ich habe Probleme, den besten Weg zu finden, um unsere Benutzer über diese Funktionalität zu informieren.

Folgendes habe ich mir bisher ausgedacht:

(enter image description here

Die Idee ist, dass in der gesamten App, wenn Sie das Touch-Symbol auf einem Element in einer Liste sehen, angezeigt wird, dass alle Elemente lange gedrückt werden können. Dies beansprucht weniger Platz als "mehr" Schaltflächen für jedes einzelne Element, da nur die ersten Elemente in den Listen den Hinweis enthalten. Wenn Sie sich mit einer Maus auf einem Gerät befinden, bietet das Bewegen des Mauszeigers über die "Touch" -Symbole einen Tooltip mit einem gewissen Kontext.

(enter image description here

In diesem speziellen Beispiel gelangen Sie durch Klicken/Tippen auf die Karten zur entsprechenden Ansichtsseite für Elemente. Wenn Sie jedoch lange auf die Karten drücken, bleiben Sie auf derselben Seite und es wird eine Seitenleiste/ein unteres Blatt angezeigt (abhängig von der Bildschirmbreite).

(enter image description here


Können Sie einige Mängel mit dem Muster auflisten, das ich mir ausgedacht habe? Wie kann das obige Muster verbessert werden?

11
Luke

Neben anderen Antworten:

Großes Manko: Lange Presse ist bereits im Einsatz.

Wo? Windows-Geräte mit Touchscreen verwenden einen langen Fingerdruck, um einen Rechtsklick an einer bestimmten Stelle auszulösen. Überall, einschließlich Webbrowsern. ( Beispiel auf Youtube ).

Die Auswirkung der Ausführung einer benutzerdefinierten Aktion bei langem Drücken kann daher unvorhersehbar sein und vom Betriebssystem und/oder Browser abhängen. Beispielsweise könnten einige Browser beide Aktionen gleichzeitig initiieren, d. H. Das Kontextmenü mit der rechten Maustaste öffnen und Ihre Aktion bei demselben langen Druck ausführen.

Stattdessen:

  • setzen Sie die Aktion in das Kontextmenü oder
  • fügen Sie Bildschirmtasten hinzu, um den Betriebsmodus zu wechseln (entweder für die nächste Aktion oder dauerhaft). Dies ist im Grunde die Funktionalität der Werkzeugpalette, die Benutzer bereits aus Photoshop, GIMP, (Malen - natürlich ...) usw. kennen.

Langes Drücken (a.k.a. "Tippen und Halten") auf dem Touchscreen zum Öffnen des Kontextmenüs ist ein sehr altes Konzept, wenn sich jemand an beispielsweise Windows Mobile 5 (2006) erinnert, das Touchscreen mit Stift verwendet hat. Langes Drücken wurde durch Fortschrittsanzeige angezeigt - Aufbau eines gepunkteten Kreises um die Position des langen Drückens. ( Beispiel auf Youtube. )

Sofern Sie keine solide Problemumgehung für dieses Problem haben, sollten Sie dieses Manko nicht ignorieren, insbesondere beim Entwerfen der Web-Benutzeroberfläche, von der erwartet wird, dass sie plattformunabhängig ist. Ohne eine solide Problemumgehung würde ich den Schweregrad dieses Problems als Stopper einstufen.


BEARBEITEN:

Ein weiterer Vorschlag, was Sie an Ihrer Benutzeroberfläche tun können, stammt aus dem Spiel The Incredible Machine (1993). ( Beispiel auf Youtube. ) Es konzentriert sich auf die Lösung genau Ihrer Art von Problem und erledigt dies auf sehr elegante und intuitive Weise, indem Sie nur mit der linken Maustaste klicken und mit der linken Maustaste ziehen. Neben den grundlegenden Optionen, die für jede Art von Element verfügbar sind, werden auch das Ziehen von Verknüpfungen zwischen Objekten oder das Anzeigen von nicht zulässigen Aktionen behandelt. (Es werden Symbole verwendet, aber die Verwendung von Textbeschriftungen oder ein anderes Layout der Menüoptionen schränkt Sie nicht ein.) Optionen für ein Element werden angezeigt, nachdem das Element aktiviert (angeklickt) wurde.

  • Optional können Sie auch auf schwebende Zeiger reagieren, indem Sie entweder das Element markieren (mit der Mitteilung, dass "dieses Element Interaktion ermöglicht") oder indem Sie seine Menüoptionen direkt anzeigen. Dies kann ein netter Bonus für Mausbenutzer sein, aber Touchscreens unterstützen das Schweben normalerweise nicht.

Hochleistungsbenutzer werden es zu schätzen wissen, wenn sie Menüoptionen über die Tastatur aktivieren können (nach Auswahl des Elements). Wussten Sie, dass dies auch auf dieser Seite funktioniert, die Sie gerade lesen (nachdem Sie aktiviert auf Ihrer Profilseite: tab Profil & Einstellungen bearbeiten > Menü Einstellungen > check Tastaturkürzel aktivieren ) . Hier auf StackExchange bearbeite ich meine Beiträge immer durch Drücken von E anstatt den Bearbeitungslink visuell zu lokalisieren (und ihn dann mit dem Mauszeiger zu finden). Also, wenn Sie hinzufügen können E zum Bearbeiten, R Zum Umbenennen usw. kann dies einen Mehrwert für Ihre Benutzeroberfläche darstellen, da es für einige Benutzer mit hoher Beanspruchung häufig bequemer ist, eine Taste auf der Tastatur blind zu drücken, als mit der Maus auf ein kleines rechteckiges Symbol/Etikett zu zeigen.

4
miroxlav

Das größte Manko, das ich bei Ihrem Ansatz sehe, ist, dass Sie ein eher ungewöhnliches Interaktionsparadigma einführen. Dies macht Ihre App einzigartig, wahrscheinlich auf Kosten der Verwirrung der Benutzer zumindest am Anfang.

Ich mag dieses Muster jedoch nicht, weil es Immobilien beansprucht und die Aufmerksamkeit des Benutzers vom Hauptinhalt ablenkt.

Da das von Ihnen verwendete Touch-Symbol fast die gleiche Menge an Immobilien beansprucht, würde ich sagen, dass Sie mit der häufigeren Menüanzeige angeklickt werden.

Ein weiteres Manko: Langes Drücken dauert nur länger als ein einfaches Klicken/Tippen. Dies kann die Drag & Drop-Interaktion beeinträchtigen.

22
Marian

Es ist schwierig, eine häufige Aktion wie Klicken (Tippen) zu überladen.

Ich konnte einige Leute fragen, was sie vom neuesten Mac Book Pro mit größerem Trackpad und Force Touch halten, und alle haben die Option Force Touch deaktiviert.

Denken Sie an die Reibung, die der Benutzer dadurch erhält, wenn er jetzt zwischen Klicken und wirklich Klicken auf etwas unterscheiden muss.

Das heißt nicht, dass eine Tap-Hold-Option für Ihre bestimmten Benutzer nicht funktionieren kann, aber im Allgemeinen gibt es bestimmt einige Leute, die nur langsam klicken und jetzt nur auf die Funktionen zugreifen können, die hinter einem Ihrer beiden Klickarten stehen.

Hier sind einige Dinge zu beachten, wenn Sie den Weg long-press Gehen ...

Versuchen Sie, keine wichtigen Funktionen hinter die Aktion zu stellen

Für Benutzer ist es schwierig, neue Interaktionen zu entdecken. Wenn die einzige Möglichkeit, eine wichtige Aufgabe zu erfüllen, darin besteht, länger auf Dinge zu tippen, werden einige von ihnen daran gehindert, ihre Arbeit zu erledigen. Wenn die Aktion long-press Nur "das i-Tüpfelchen" ist, kann dies die Erfahrung häufiger Benutzer verbessern. Wie bei allem anderen müssen Sie dies mit Ihren Kunden testen, da eine technisch versierte Masse besser mit long-press Vertraut ist, das anstelle eines right-click Verwendet wird.

Benutzer müssen geschult werden

Dies ist für die meisten Menschen nicht häufig genug, um zu verstehen. Ein animiertes Tippen und Halten-Popup fordert den Benutzer auf, etwas zu tun, gefolgt von einem "Du hast es!" Nachricht wird für Erstbenutzer benötigt. Dies muss natürlich nur einmal durchgeführt werden, und der Benutzer kann die Aktion mit dem Symbol auf andere Steuerelemente extrapolieren, sobald er die Aktion erfolgreich ausgeführt hat.

(tap hold training

Lassen Sie den Benutzer wissen, wann er einen long-press Durchführt.

Es ist schwer, die Dauer genau richtig zu machen, weil sie zu lang ist und sich träge anfühlt, während sie zu kurz ist und ich nicht mehr klicken kann. Beim Mouse-Down würde ich versuchen, einen Ring über ca. 400 ms einzublenden, sodass bei regelmäßigen Klicks nichts angezeigt wird und der Ring dann über 1200 ms um den Abgriffspunkt gezogen wird. Sie müssen die Zahlen beim Testen mit Benutzern anpassen, aber es muss länger als 1 Sekunde sein, da dies der Grenzwert ist, an dem ein Spinner angezeigt werden muss .

Es gibt wahrscheinlich noch andere Dinge zu beachten, aber wenn Sie erst einmal alle Faktoren abgewogen haben, die eine Liste kontextsensitiver Optionen anzeigen, scheint dies nicht so schlimm zu sein :)

Viel Glück und vielen Dank für Ihren Beitrag!

8
DaveAlger

Ich würde sagen eine grundlegende Interaktion nicht erfinden oder neu erfinden , es sei denn, Sie haben einen wirklich guten Grund.

Ich würde auch hinzufügen, dass das Hinzufügen eines Hinweises zu einer oder mehreren Karten nicht ausreicht, um zu kommunizieren, dass dies für alle funktioniert oder dass dies für alle Dinge funktioniert das sieht ähnlich aus '.

Benutzer mögen explizite Indikatoren und Hinweise.

Die visuelle Erkennung und Vertrautheit ist wichtig , anstatt an irgendetwas denken zu müssen. Es scheint nicht viel zu sein, um darüber nachzudenken, aber selbst leichte Zögern häufen sich, um ärgerlich zu werden - besonders wenn sich herausstellt, dass das lange Drücken nichts für eine bestimmte Karte ist.

Sie möchten nicht Symbole zu allem hinzufügen, was nicht lange drückt, und das lange Drücken ist nicht überall relevant auf Ihrer Site, also sollten Sie explizit angeben, wo es relevant ist, um Vermeiden Sie Überraschungen .

Es sieht so aus, als würden Sie bereits über die Verwendung eines kartenähnlichen Stils nachdenken. In der Regel wird der Kontext "Mehr" über ein diskretes Symbol in der oberen rechten Ecke der Karte angeboten - dasselbe Symbol, dieselbe Stelle, überall dort, wo es verwendet werden kann.

Abgesehen von allem anderen dauert ein langes Drücken im Vergleich zu einem Klick relativ lange .

Die folgenden Beispiele zeigen beliebte Menüindikatoren und tragen nicht wirklich viel zur Immobilie bei. Sie bieten sicherlich mehr Wert für ihren Zugang zu Funktionalität und für ihre Erschwinglichkeit als für Immobilien - zumal die Immobilien ohnehin oft leer sind.

Trello

(enter image description here

(enter image description here

Facebook

(enter image description here

(enter image description here

LinkedIn

(enter image description here

(enter image description here

Twitter

(enter image description here

(enter image description here

Strava

(enter image description here

(enter image description here

7
Roger Attrill

Sie können Fortschrittsanzeigen verwenden

In Ihrem Fall könnte dies mit einer linearen Fortschrittsanzeige erreicht werden:

(long-press progress indicator

Der Indikator überlagert das Element, das Sie lange drücken möchten. Wenn der Benutzer das Element hält, rückt die Fortschrittsanzeige proportional vor und der Benutzer stoppt das Laden der Fortschrittsanzeige.

Ich habe dies in der realen Welt nicht versucht, aber es scheint ein netter Signifikant für lange Presse zu sein.

6

Android hat kürzlich diese Funktion zum langen Drücken von Google-Anwendungen auf Touchscreen-Geräten hinzugefügt. Daher würde ich auch empfehlen zu verstehen, wer der Benutzer mehr auf Geräteebene ist. Android long press on Gmail app icon.

Und testen Sie es, das Kabab-Menü funktioniert manchmal je nach Benutzer und wenn er neugierig ist. Da diese Menüs jedoch keinen Kontext haben, muss das Problem gelöst werden.

Was führt dazu, dass diese bestimmten Karten in Ihrem Konzept eine sekundäre Schnittstelle benötigen? Hier würde ich immer noch die Frage stellen. Wenn dies häufiger vorkommt, ist es möglicherweise die Frage, ob die Systembenutzeroberfläche angepasst werden muss, um diese Funktionen als primären Benutzeroberflächenbedarf an die Oberfläche zu bringen.

0
Art of FITZ