it-swarm.com.de

Minimum Maximum-Schieberegler - Best Practice für die Benutzerfreundlichkeit

Ich entwickle eine mobile iOS-App zum Verlangsamen/Beschleunigen von Videos. Nach einigen Recherchen und Intuitionen habe ich mich entschieden, ein Slider als verantwortliche UI-Komponente für die Änderung der Videogeschwindigkeit zu wählen. Der Videogeschwindigkeitsbereich liegt zwischen 16x langsamer und 16x schneller als die ursprüngliche Geschwindigkeit.

Natürlich sollte die am weitesten links liegende Seite des Schiebereglers die langsamste und die am weitesten rechts liegende Seite die schnellste sein.

Bei der Verwendung des Standard-Schiebereglers von iOS ist mir etwas Interessantes aufgefallen: Wenn der Daumen ganz links beginnt (Minimalwert) und der Maximalwert ganz rechts ist, wird auf der linken Seite eine "schlechte" Konnotation angezeigt und eine positive Konnotation auf der rechten Seite. Außerdem war es etwas verwirrend, ob ich mich im verlangsamten oder im beschleunigten Teil befinde.

Beispiel: Slowerd

Dann habe ich beschlossen, die Dinge ein wenig zu ändern und den Ursprung des Schiebereglers in die Mitte zu stellen. Das Zentrum steht für "Originalgeschwindigkeit". Wenn Sie nach links ziehen, wird nur die Verlangsamung und beim Ziehen nach rechts die Beschleunigung berücksichtigt. Gleiches Beispiel oben mit der neuen Version:

(enter image description here

Ich habe das Gefühl, dass es immer noch an Benutzerfreundlichkeit mangelt. Vielleicht Indikatoren neben dem zentralen Ursprung hinzufügen? Würde gerne Ihre Gedanken und Ideen hören. Danke fürs Lesen!

11
Roi Mulia

Ich denke, Ihre Benutzeroberfläche ist ziemlich klar und wird keine Missverständnisse mit dem Benutzer verursachen. Sie können es ästhetischer gestalten, indem Sie die Anzahl der Elemente in der Benutzeroberfläche verringern. Diese Benutzeroberfläche ist möglicherweise sauberer und klarer genug. Bei dieser Benutzeroberfläche wird die Nummer nur angezeigt, wenn Sie die Taste drücken oder die Taste drücken. (enter image description here

14
Tal Yaron

EDIT: Verschrotte das Eingabefeld, @vinay ist richtig. Es würde das Ganze nur komplexer machen. Es wird also so aussehen :Corrected UI slider

OK, bevor ich teile, was ich denke, dass Sie tun sollten, denke ich, ist es am besten, ich erinnere Sie daran, dass es zwei Arten von Benutzern gibt, auf die Sie stoßen werden, wenn Sie ein Tool wie dieses erstellen: diejenigen, die Ich möchte einen exakten Wert und diejenigen, die nur verlangsamen/beschleunigen das Video so schnell wie möglich eingeben wollen. Sie müssen daran denken, auf die Anforderungen dieser beiden Benutzertypen einzugehen.

Um dem ersteren gerecht zu werden, würden Sie das tun, was Sie getan haben (dh einen Schieberegler, aber mit einer leichten Änderung: Sie fügen ein Eingabefeld hinzu. VERWENDEN SIE DIE EINGABEKASTEN NICHT): - (detailed user slider (Ich weiß, die Eingabe sagt 0.0x, wenn es tatsächlich 7.24x langsamer ist). Persönlich verbürge ich mich wegen der unten erläuterten Methoden nicht für diese Methode.

Für letztere (diejenigen, die das Video nur so schnell wie möglich beschleunigen oder verlangsamen möchten) können Sie jetzt Aktionsschaltflächen hinzufügen, mit denen der Schieberegler an die entsprechende Position gebracht wird:

(slider two, improved for those who want to quickly set the speed

Hier einige Beispiele für Tools/Software, die diese Methode verwenden:

  • Zuerst VLC (v2.2.4):

(vlc video speed slider

  • Und das andere ist YouTube (PC). YouTube hat eigentlich keine Methode, mit der ein Nutzer den gewünschten Wert eingeben kann. Es werden nur einige Standardeinstellungen vorgenommen, und das funktioniert

(Youtube video speed selector buttons

Und noch etwas, bitte machen Sie das Schildkrötengesicht nach rechts (überprüfen Sie das Bild oben von Schaltflächen + Schieberegler + Eingabebeispiel). Da das Video immer noch vorwärts ist, sollte die Schildkröte das Recht haben, dem Benutzer (hoffentlich) unbewusst mitzuteilen, dass Sie das Video verlangsamen und nicht zurückspulen. Ich weiß, dass es klein klingt, aber ich denke, es sollte so sein. Natürlich liegt es an Ihnen.

Außerdem habe ich die "7.24x langsamer" entfernt, da ein Benutzer verstehen kann, dass sich ein Video, wenn es sich unter die 1,0-fache Geschwindigkeit bewegt, langsamer bewegt. Andererseits wird diese Argumentation durch das obige YouTube-Beispiel in Frage gestellt (es wird das Wort "Normal" anstelle von 1.0x/1x verwendet, was darauf hindeuten könnte, dass Benutzer es beim Testen nicht erhalten haben). Am Ende des Tages liegt es wieder ganz bei Ihnen.

7
Kitanga Nday

Ich denke, das Hauptproblem ist die Verwendung einer Scrub-Leiste in einer Touch-Oberfläche.

Scrub Bars und sind großartige Eingaben für die Maus, aber schrecklich für Berührungen. Die horizontale Linie kann die unangenehmste übliche Daumenbewegung sein, die beim Halten eines Telefons möglich ist. Zeichnen Sie mit Ihrem Daumen eine horizontale Linie auf Ihrem Telefon. Um horizontale Linien zu zeichnen, müssen die meisten Benutzer ihren Griff um das Gerät physisch ändern. Außerdem können Sie nicht sehen, was Sie berühren.

(Bearbeiten - Ich habe vergessen, diesen Punkt einzuschließen) Scrub-Balken und Schieberegler haben eine sehr geringe Präzision bei der Berührung. Wenn die Eingabe nur wenige Punkte pro Zoll beträgt, ist ein Schieberegler einfach zu verwenden. Der Bereich für diese Anwendung beträgt mindestens 32 und die Frage zeigt die Dezimalgenauigkeit. Tippen und Halten ist viel einfacher als das Steuern eines Schiebereglers. (Ende der Bearbeitung)

Sie sollten Schaltflächen verwenden. Sie sollten so gestaltet und positioniert sein, dass sie leicht erkennbar und verwendbar sind. Benutzer können auf die Tasten tippen oder sie gedrückt halten - zum Schritt tippen - zum Schrubben gedrückt halten.

Wenn ein Benutzer einen Bildschirm berührt, um zu interagieren, deckt der Benutzer den Bildschirm ab. Die Schaltflächen müssen sich also unter oder neben allem befinden, was der Benutzer bei der Verwendung der Schaltflächen sehen muss. Benutzer sollten in der Lage sein, die Karte in eine erreichbare Position zu scrollen (die Karte nach oben und unten bewegen). Wenn die Tasten statisch positioniert sind, platzieren Sie sie unten, damit Sie sie leicht mit den Daumen erreichen können.

(enter image description here

(Bearbeiten - Design aktualisieren) Wie mc01 hervorhob, würde der Benutzer zu viel Zeit und Mühe benötigen, um große Änderungen zu tippen oder durchzuhalten. Ich habe Schaltflächen hinzugefügt, um das Ändern der Nummer zu beschleunigen und zu vereinfachen.

(enter image description here

(Ende der Bearbeitung)

(Bearbeiten - Design aktualisiert) Das Design wurde aktualisiert, um eine der Karte hinzugefügte Video-Player-Anzeige anzuzeigen.

(enter image description here

(Ende der Bearbeitung)

3
moot

Vielleicht bestehen Sie darauf, diese beiden Symbole zu sehr zu verwenden (ich mag sie übrigens.)

Die iOS-Benutzeroberfläche verwendet ganz links als ursprünglichen Punkt. Je mehr Sie sich nach rechts bewegen, desto höher ist der Wert.

Da die meisten Benutzer das Layout von oben kennen, können sie bei der Verwendung Ihrer Version verwirrt sein, da Sie die Mitte als Ursprung verwenden.

Ich denke, wenn Sie der Mitte auf derselben Höhe wie die beiden anderen Etiketten "Originalgeschwindigkeit" hinzufügen, wird klarer, wo die Benutzer Änderungen vornehmen.

Erwägen Sie auch das Hinzufügen einer Option, mit der der Benutzer den Wert auf "Originalgeschwindigkeit" zurücksetzen kann, da es meiner Meinung nach sehr schwierig sein kann, beim ersten Versuch die Mitte zu treffen.

3

In der ehemaligen jugoslawischen Republik Mazedonien finden Sie hier einige der besten UX-Praktiken im Zusammenhang mit Videos, die von der Neilsen Norman-Gruppe bereitgestellt wurden.

https://www.nngroup.com/articles/video-usability/

Und imho und nach meinen Beobachtungen war die Youtube-Auswahl für die Geschwindigkeit für die Benutzer verwirrend. Benutzer denken im Allgemeinen, dass die Werte über dem NORMAL-Pegel die Geschwindigkeit erhöhen und Werte unter dem NORMAL-Pegel abnehmen. Wie Sie anhand des bereitgestellten Bildes beobachten können, muss der Benutzer etwas mehr Aufmerksamkeit auf sich ziehen, um zu erkennen, dass es umgekehrt funktioniert. Daher würde ich vorschlagen, dass Sie mit dem Schieberegler fortfahren, der die Werte enthält, auf die der Benutzer die Geschwindigkeit leicht einstellen kann. Sie können auch das Klicken/Tippen auf den Wert NORMAL verwenden, um dem Benutzer zu ermöglichen, die Geschwindigkeit wieder auf den Normalwert zurückzusetzen.

So würde ich es gestalten: enter image description here

Und ich würde hier kein Eingabefeld angeben, es wäre nur eine zusätzliche Anstrengung für den Benutzer, den Bereich zu verstehen, in dem der Wert eingegeben werden soll , das würde es nur komplizieren.

3
Vinay

Ich denke, Sie haben Recht, wenn Sie den Ursprung in der Mitte platzieren. Grundsätzlich legen Sie einen Basiswert fest, von dem aus Sie nach oben und/oder unten gehen können .

Die Grundlinie ist jedoch nur symbolisch, da Sie sagen können, dass es sich um 1 (Und ... 1 was?), 0 Oder normal handelt, wie andere Antworten sagen. Daher ist dies kein reales Maß, sondern eine Referenz für relative Größen.

Auf dieser Basis ist das Zielpublikum wichtig. Zum Beispiel reicht es für einen normalen Benutzer (wie ich es wäre) aus, zu wissen, dass das Video dreimal schneller oder langsamer ist .

für anspruchsvollere Benutzer wird es jedoch verwirrend sein. Was ist die Basislinie? 24FPS? 30 FPS? alle FPS, die der Videoplayer identifiziert ? Und obendrein müssen wir Bruchgrößen hinzufügen:

7.8x * (x FPS) = ?????.

Das Problem ist klar: Der Benutzer wird sicherlich wissen, welche Geschwindigkeit er benötigt, weil er daran gewöhnt ist . Auf diese Weise zu arbeiten bedeutet jedoch, ein hohes Maß an Reibung hinzuzufügen.

Andererseits: Wenn Ihre Anwendung für normale Benutzer bestimmt ist, ist die Verwendung von Größen relativ zu einer symbolischen Grundlinie möglicherweise kein Problem (Sie müssen jedoch testen es). Für spezialisierte Benutzer ist dies keine gute Idee, da dies sehr ungenau ist und der Benutzer Konten erstellen muss.

Für all dies denke ich, dass meine Empfehlung wäre, dass Sie zuerst definieren, wer Ihre Benutzerbasis ist (ich nehme an, Sie haben es natürlich schon getan!) Und Wenden Sie dann die beste Option an, die von normalen Benutzern oder anspruchsvolleren Benutzern.

In Bezug auf die Auswahl von common Benutzern sollten Sie auch überlegen, wie die Richtung dargestellt werden soll. Wenn 0 als Basislinie keinen Sinn ergibt und Sie 1 verwenden, werden andere Überlegungen in die Tabelle aufgenommen, siehe unten:

(enter image description here

Im ersten Fall ist die Basislinie 1. Also sollte 2x ... die Hälfte der Zeit sein? Schnelle Mathematik sagt mir das

1*-2x= -1.

Auch ... Wie übersetzt man -2x in 0,5 im Kopf des Benutzers? Es ist wirklich nicht intuitiv (geschweige denn etwas wie -7,8x. Ich würde ausgeben Stunden, um herauszufinden, wie schnell das ist!)

Sie können also den zweiten Fall sehen: Er beginnt beim Laden in der Mitte des Bildschirms mit 1. Aber die Zeile beginnt bei 0, Dann bei 0.1, 0.2, 0.3 Und so weiter. Dies ist eine sehr klare Methode: 0 is no speed, 0.1 is 1/10 a, 0.2 is 2/10 Und so weiter. Aber gut, 1/16 Würde es wirklich verwirrend machen, ganz zu schweigen davon, dass 0,5 nicht der negative Wert von 2x ist, der sein Gegenstück in einer Zahlenreihe wäre. Wenn Sie jedoch in Ordnung sind, von 0 auf 1 und dann auf 2 zu wechseln, wäre dies perfekt ... aber ich denke, Sie müssen auf 16x anstatt auf 2x gehen. Sie könnten eine logarithmische Skala für schneller als die Basislinie Messungen verwenden, aber noch einmal: Sie müssen dies testen.

(enter image description here

Eine Lösung finden

Zusammenfassend sind die meisten Darstellungen ungenau oder verwirrend . Ein Vorschlag, der all diese Konflikte der Visualisierung der Informationen sowohl für gewöhnliche als auch für spezialisierte Benutzer lösen könnte, wäre die Verwendung von absoluten Skalen der Bildrate pro Sekunde (FPS).

Auf diese Weise kann Ihre App die FPS der Videoquelle lesen und von dort aus die Basislinie definieren. Anschließend kann sie unterschiedliche FPS-Werte anbieten. Meiner Meinung nach ist es besser als die Verwendung eines Schiebereglers, eine Reihe voreingestellter Werte zu verwenden. Wenn Sie jedoch einen Schieberegler verwenden möchten, ist dies kein Problem. Dies ist natürlich der Fall, wenn Benutzer Videos hochladen können , andernfalls können Sie die Basislinie künstlich mit hinzufügen die Bildrate, die Ihre App verwendet . Siehe Beispiele unten:

Gießerei: enter image description here

Photoshop: enter image description here

Mixer: enter image description here

Premiere: enter image description here

Protools + Video enter image description here

1
Devin

Wie ich in meinen Kommentaren sagte, bin ich mir nicht sicher, ob dieser Schieberegler nur positive Werte (oder größere Werte) hat, die Sie als "langsam" und "schnell" interpretieren, oder ob er negative Werte (7-mal langsamer) und positive Werte (7) hat mal schneller).

Fall 1 (der Schieberegler hat nur positive/größere Werte): In diesem Fall sehe ich keinen Grund, das Etikett "langsamer" (7,24x langsamer) zu haben. Dies ist eigentlich das Element, das den kleinen Werten eine negative Konnotation verleiht. In dieser Situation sollte nur der ausgewählte Bereich auf der Spur gefüllt sein und der Standardwert sollte 0 sein.

Fall 2 (der Schieberegler hat negative und positive Werte (oder kleinere und größte Werte) - 7,24x langsamer und 7,24x schneller): In diesem Fall sollte die Spur von der Mitte aus gefüllt werden, um anzuzeigen, dass sich der Standardwert in der Mitte befindet .

1
Madalina Taina