最小最大スライダー-使いやすさのベストプラクティス
動画を遅くしたり、速くしたりするためのiOSモバイルアプリを開発しています。いくつかの調査と直感の後、私はSliderをビデオ速度変更の責任のあるUIコンポーネントとして選択することにしました。ビデオ速度の範囲は、元の速度よりも16倍遅いから16倍速いです。
当然、Sliderの左端が最も遅く、右端が最も速くなります。
IOSの標準Sliderを使用しているときに興味深いことに気づきました：親指が左端（最小値）から始まり、最大値が右端にある場合、左側に「悪い」意味が含まれます、そして右側の肯定的な意味合い。それに、私がスローダウンした部分とスピードアップした部分のどちらにいるのか少し混乱しました。
例： 
それから、少し変更してスライダーの原点を中央に置くことにしました。センターは「元の速度」を表しています。左にドラッグすると減速にのみ焦点が当てられ、右にドラッグすると加速に焦点が当てられます。上記の新しいバージョンの例：
まだ使い勝手が悪い気がします。おそらく、中心の原点の隣にインジケーターを追加しますか？あなたの考えやアイデアを聞きたいです。読んでくれてありがとう！
あなたのUIは非常に明確で、ユーザーに誤解を与えることはないと思います。 UIの要素数を減らすことで、より美しくすることができます。このUIはよりすっきりとしていて明確です。このUIでは、ボタンを押すか、ボタンをドラッグしたときにのみ、数値が表示されます。 
編集：入力ボックスをスクラップします。@ vinayは正しいです。それだけで全体がより複雑になります。したがって、次のようになります：
わかりました、あなたがすべきだと思うことを共有する前に、私はあなたに2種類のユーザーがいるときに遭遇することを思い出させるのが最善だと思います次のようなツールを作成します：正確な値を入力したい人と単に遅くしたい人/ speed-upビデオをできるだけ早く。これら2種類のユーザーの要求に対応することを忘れないでください。
前者に応えるために、あなたはあなたがしたことをします（すなわち、スライダーですが、少し微調整します：入力ボックスを追加します。入力ボックスを使用しないでください）： 
（実際には7.24倍遅いと入力には0.0xと表示されます）。個人的には、以下で説明する方法のため、私はこの方法を保証しません。
ここで、後者（できるだけ速くビデオをスピードアップまたはスローダウンしたい人）に対して、スライダーを対応する位置にジャンプするアクションボタンを追加できます。
この方法を使用するツール/ソフトウェアの例をいくつか示します。
- 最初はVLC（v2.2.4）です。
- もう1つはYouTube（PC）です。実際、YouTubeにはユーザーが必要な値を入力するためのメソッドはありません。デフォルトの束を配置するだけで機能します
そしてもう一つ、亀の顔を右に向けてください（上の画像のボタン+スライダー+入力例を確認してください）。ビデオはまだ前進しているので、亀は（うまくいけば）ビデオを遅くしていることを無意識のうちにユーザーに伝える権利に直面すべきだと思います巻き戻しません。私はそれが小さく聞こえることを知っていますが、私はそれがこの方法であるべきだと感じています。もちろん、これはあなた次第です。
また、「7.24x遅い」を削除しました。これは、ユーザーがビデオが1.0xの速度を下回っている場合、遅い速度で動いていることを理解できるためです。しかし、その理由は、上記のYouTubeの例にあります（1.0x/1xの代わりに「通常」という単語を使用しているため、テスト中にユーザーが取得できなかった可能性があります）。結局のところ、それはすべてあなた次第です。
主な問題はタッチインターフェイスでスクラブバーを使用することだと思います。
スクラブバーは、マウスにとっては素晴らしい入力ですが、タッチ操作はひどいものです。水平線は、電話を握るときに可能な最も厄介な一般的な親指の動きです。スマートフォンで親指で水平線を描いてみてください。水平線を描くには、ほとんどのユーザーがデバイスのグリップを物理的に変更する必要があります。加えて、あなたはあなたが触れているものを見ることができません。
（編集-このポイントを含めるのを忘れていました）スクラブバーとスライダーのタッチの精度はほとんどありません。入力が1インチあたり数ポイントしかない場合、スライダーは使いやすくなっています。このアプリケーションの範囲は少なくとも32であり、問題は小数精度を示しています。スライダーを操作するよりもタップして押し続ける方がはるかに簡単です。 （編集の終わり）
ボタンを使用する必要があります。それらは、簡単に認識して使用できるように設計および配置する必要があります。ユーザーはボタンをタップまたはホールド-タップしてステップ-ホールドしてスクラブ。
ユーザーが操作するために画面に触れているとき、ユーザーは画面を覆います。したがって、ボタンは、ボタンの使用中にユーザーが見る必要があるものの下または横にある必要があります。ユーザーは、カードを到達可能な位置までスクロールできます（カードを上下に移動します）。ボタンの位置が固定されている場合は、親指で簡単に届くようにボタンを下に置きます。
（編集-デザインを更新しました）mc01が指摘したように、ユーザーが大きな変更をタップまたはホールドするには、非常に時間と労力がかかります。ボタンを追加して、数値をすばやく簡単に変更できるようにしました。
（編集の終わり）
（編集-デザインを更新しました）カードに追加されたビデオプレーヤーディスプレイを表示するようにデザインを更新しました。
（編集の終わり）
たぶん、あなたはこれらの2つのアイコンをかなり使いこなそうとします（私はそれらが好きです）。
IOS UIは左端を元のポイントとして使用しており、右に移動するほど値が大きくなります。
ほとんどのユーザーは上からレイアウトを知っているため、Originとして中央を使用するため、バージョンを使用するときに混乱する可能性があります。
他の2つのラベルと同じ高さの中央に「元の速度」を追加すると、ユーザーが変更している場所からより明確になると思います。
また、ユーザーが値を「元の速度」にリセットできるオプションを追加することも検討してください。最初の試行で真ん中を押すのは静かになるのが難しいためです。
FYR、ここに、ニールセンノーマングループが提供する、ビデオに関連するUXのベストプラクティスのいくつかを示します。
https://www.nngroup.com/articles/video-usability/
そして私見と私の観察から、速度のためのYouTubeの選択はユーザーを混乱させてきました。ユーザーは通常、NORMALレベルを超える値は速度を上げ、NORMALレベルを下回る値は減少すると考えます。これは、提供された画像から観察すると、逆方向に機能することをユーザーが理解するにはもう少し注意が必要です。したがって、ユーザーが速度を簡単に修正できる値を持つスライダーを使用することをお勧めします。また、NORMAL値のクリック/タップを使用して、ユーザーが速度を通常にリセットできるようにすることもできます。
これが私がそれをどのように設計するかです： 
そして、私はここに入力ボックスをしないを与えます、それはユーザーが値が入力される範囲を理解するための余分な努力です、それはそれを複雑にするだけです。
オリジンを中央に置くと正しいと思います。基本的に、[ベースライン値を設定して、そこから上下に移動できます。
ただし、他の回答が言うように、ベースラインは_1_（および... 1何ですか？）、_0_またはnormalであると言えるため、単なるベースラインです。したがって、これは実際の尺度ではなく、相対的な大きさの基準です。
これに基づいて重要なことは、対象としているオーディエンスです。たとえば、一般的なユーザーの場合（私はそうです）は、動画が3倍速くなるか遅くなるかを知っていれば十分です。
ただし、より高度なユーザー向けの場合、混乱を招きます。ベースラインは何ですか？ 24FPS？ 30 FPS？ビデオプレーヤーが特定するFPSはありますか？さらに、小数の等級を追加する必要があります。
7.8x * (x FPS) = ????? 。
問題は明らかです：ユーザーは慣れているので、必要な速度を確実に理解できます。しかし、この方法でこれを行うと、非常に高いレベルの摩擦が追加されます。
次に、再び：アプリケーションが通常のユーザーの場合、シンボリックベースラインに対するマグニチュードの使用は問題にならない場合があります（ただし、テストする必要があります）。 専門のユーザーの場合、これは非常に不正確であり、ユーザーがアカウントを削除する必要があるため、お勧めできません。
このすべてについて、私はあなたが次のことをお勧めすると思います最初にユーザーベースを定義する（もちろん、すでにそれを行っていると思います！）次に、一般的なユーザーまたはより洗練されたユーザー。
commonユーザーの選択については、方向を表す方法も考慮する必要があります。 0がベースラインとして意味をなさない場合、1を使用すると、テーブルに他の考慮事項がもたらされます。以下を参照してください。
最初のケースでは、ベースラインは_1_です。つまり、2倍にする必要があります...半分の時間ですか？簡単な数学はそれを教えてくれます
_1*-2x= -1_。
また... ユーザーの頭の中で-2xを0.5にどのように変換しますか？これは直観に反しています（-7.8xとは言うまでもなく、何時間か費やしてその速度を把握しようとします！）
したがって、2番目のケースを見ることができます。それは、画面中央のロード時に_1_から始まります。ただし、この行は_0_で始まり、次に_0.1, 0.2, 0.3_と続きます。これは非常に明確なメソッドです：_0 is no speed, 0.1 is 1/10 a, 0.2 is 2/10_など。しかし、まあ、_1/16_があると本当に混乱するでしょう。言うまでもなく、0.5は2xの負の値ではありません。ただし、0から1に、次に2に進んでも問題がない場合は、これで十分です。しかし、2倍ではなく16倍にする必要があると思います。 ベースライン測定よりも速い対数スケールを使用することもできますが、これもテストする必要があります。
解決策を得る
要約すると、ほとんどの表現は不正確または混乱しています。次に、一般ユーザーと専門ユーザーの両方の情報の視覚化に関するこれらすべての競合を解決できる提案は、フレームレート/秒の絶対スケール（FPS）の使用です。
このようにして、アプリはビデオソースのFPSを読み取り、そこからベースラインを定義し、さまざまなFPS値を提供できます。私の意見では、スライダーを使用するよりも一連のプリセット値を使用する方が良いですが、スライダーを使用したい場合は問題ありません。もちろん、これはユーザーが動画をアップロードできるの場合です。それ以外の場合はアプリが使用するフレームレートでベースラインを人工的に追加するです。以下の例をご覧ください。
鋳造： 
フォトショップ： 
ブレンダー： 
初演： 
Protools +ビデオ 
コメントで述べたように、このスライダーに「遅い」と「速い」と解釈する正の値（または大きな値）しかないか、負の値（7倍遅い）と正の値（7倍高速）。
ケース1（スライダーには正の値/大きい値しかありません）：この場合、ラベルを「遅くする」（7.24x遅くする）理由はありません。これは実際には、小さな値に否定的な意味を与える要素です。また、この状況では、トラックで選択された範囲のみが塗りつぶされ、デフォルト値は0である必要があります。
ケース2（スライダーに負の値と正の値（または最小値と最大値）がある-7.24倍遅いと7.24倍速い）：この場合、トラックは中央から塗りつぶされ、デフォルト値が中央にあることを示します。 。