web-dev-qa-db-ja.com

ユーザーがスライダーに極端な値を設定しないようにするには、どのような手がかりを使用できますか?

ユーザーがスライダーで明るさ、コントラスト、彩度などを調整できるモバイル写真アプリを持っています。すべてのスライダーのデフォルト値は、2つの極値間の中央の位置です。スケールの両端の値は有効であり、ユーザーが実行したいことに適していることもありますが、ほとんどの場合、これらの値のいずれかを最大または最小にクランクすると醜い結果になります。これは問題です。UIテストを実行しているときに、これらのスライダーをまったく使用しない限り、一部のユーザーはデフォルト(中央)、最小値、最大値を試してみて、結果に満足できないことがわかりました。

必要に応じて最小値と最大値の使用を許可しながら、最小値と中心の中間から最大値の中間までの範囲の値を主に選択するように彼らに奨励したいと思います。画面の面積が限られているため、ローカリゼーションの問題があるため、これを説明するテキストは表示しません。また、スライダーの位置に奇妙な非線形応答を導入したり、フードの下で自動画像処理マジックを実行したりして、入力に関係なく常に見栄えをよくすることで問題を回避しません。インターフェイスが少なくなるためです。直感的で予測可能で、一部のユーザーは極端な動作をしたい可能性があります。

「範囲を調整するが、ほとんど範囲の中央に固執する」という意味を視覚的に伝えるスライダーを表示するにはどうすればよいですか?

編集: screenshot 小画面デバイス上の現在のUIの。

34
samgak

アプローチ1:-極端に低い値と高い値は、以下に示すように、グラデーションカラーを使用してスライダーを実行することで色を落とすことができます。

中央の緑色は許容値と安全値を示し、両端は赤色で許容値と安全値を示します。

安全な値と極端な値の間に明確な境界がないため、色は緑から赤に線形に移行する必要があります。

enter image description here

アプローチ2:-別の方法として、中央でスライダーを広くし、両端でスライダーを狭くする方法があります。

どちらのアプローチも、極端な値以外の値を設定しても安全であることを視覚的に示しています。

36
Chetan

これはユビキタスパターンであるため、視覚的なインジケータは必要ありません。ほぼすべての画像編集ソフトウェアにこのようなコントロールがあり、通常、極端な結果は悪く見えます。これは、ユーザーがスライダーを動かしたときの効果を即座に確認でき、遠すぎた場合に修正できる限り、実際には問題になりません。画像のライブプレビューがあるとおっしゃっていましたが、デザインのこの側面に問題はありません。

問題は別の問題だと思います。いくつかの可能性:

  • テストは実際の使用と似ていません(Adesのコメントで示唆されています)。テスターは実際には画像の最適化に関心がなく、コントロールを任意に移動しているだけです。
  • 効果の質に関する実際の問題も、テスターがそれを好まない理由である可能性があります。
  • 他のいくつかのユーザーインターフェイスの設計上の欠陥は、ユーザーが機能を適切に使用する方法を理解するのを妨げています。たとえば、プレビューが遅すぎて表示できない場合、ユーザーは効果を確認する前に変更を加えてからがっかりすることがあります。または、スライダーの外観が一般的でない場合、ユーザーはそれがスライダーであることを理解していない可能性があります。

更新:別の可能性

  • インターフェースではなく機能が、ユーザーが理解できないものかもしれません。画像編集ソフトウェアを作成している人は、明るさや彩度などの調整が一般的に理解されていると考えるかもしれません。しかし、これらはあなたが理解しているよりも高度な機能かもしれません。ほとんどの消費者向けの画像ソフトウェアに「自動補正」などの機能があることに注意してください。これは、市場の大部分が「飽和」の意味やそれをどうするかをおそらく理解していないことを示す良い証拠です。
49
user31143

スライダースティックを(それ以上のタッチ入力を無視して)範囲の約70%に固定します。これにより、ユーザーは数秒間スライダーの100%に到達したとユーザーに思わせ、画像プレビューを表示します。

それでも100%に設定したい場合は、もう一度スライダーを離して「つかむ」(長押し)して、希望の位置に設定する必要があります。

これがAppleがデフォルトの音量調節要素(少なくともヨーロッパでは)で行う方法)であり、低レベルに設定されている場合、最初のグラブでは〜60を超える値に設定することはできません。値の%(60%のままで黄色に点滅します)高くしたい場合は、もう一度移動する必要があります。

21
user42730

以前使用したパターンは、スピンボックスとスライダーを組み合わせたものです。

スライダーの範囲は狭く、使いやすく便利です。ま​​た、生成される値が少ないため、使いやすくなっています。

ただし、これがユーザーが本当にに望んでいることである場合、スピンボックスパーツの範囲は広くなります。矢印ボタンは値の完全なセットをスキャンし、スピンボックスの編集可能な部分では、より広い値の範囲を入力することもできます。

縮小範囲が一般的に必要とされるすべてを網羅している限り、編集可能なスピンボックスによって受け入れられる極端な範囲は、特定の値を念頭に置いているエキスパートユーザー向けです。

これは、スライダーが通常使用される方法にもマッピングされます。

  • スライダーは扱いにくい「ファジー」コントロールであり、範囲を調べて効果を確認するのに役立ちます。
  • スピンボックスは、制御された増分と特定の値の設定を簡単に許可します。

これは、ユーザーをトラブルから守る一方で、ユーザーが必要に応じて使用頻度の低い値を掘り下げるのを防ぐのに最適な方法です。また、極端な範囲が一般的に有用な範囲より大幅に広い場合にも特に役立ちます。

克服すべき発見可能性の問題がいくつかあることに注意してください。ただし、値が下限または上限にある場合、スピンボックスの矢印ボタンが無効になるという視覚的な手掛かりがあります。この場合、スライダーをどちらかの端に移動すると、矢印が無効にならず、上または下にさらに使用可能な値スペースがあることを示します。

画面上のすべてのスライダーを一度に必要としないという事実を考慮して、モバイルデバイスでの外観のモックアップ(他のメニュー/ OK /キャンセルコントロールなどを除く)を1つだけ示します。スライダーを使用して値の有用な範囲(例:-50〜+50)、次にスピンボックスを使用して(+/- 100まで)より極端な値の範囲。

enter image description here

10
Roger Attrill

私は何度か同じ立場にいます。

色の使用は避けたいです(チェタンの答えのように)。
色は、背景の色に応じて色覚異常や視認性の問題を引き起こす可能性があります。

スライダーに小さな垂直マーク(スライダーバーの長さ全体で7〜9程度)を付けて、最小/中間/最大よりも多くのステップがあることを示します。
物理ボリュームコントロールスライダーのように見えます。
実際には、スライダーは滑らかな勾配を持っていますが、マークは、極端な位置よりも多くの可能性があることをユーザーに示します。
ほぼすべての人がこの概念を一目で理解できるようです。
スクリーンスペースはほとんど必要ありません。マークは、スライダーノブの幅より短くすることができます。シンプルなUIスタイルに収まるようにデザインを大幅に簡略化でき、ユーザーへの視覚的な手掛かりを失うことはありません。

enter image description here

3
Tonny

私は2つの提案があります:

  • 「low」、「medium」、「high」、「manual "などのドロップダウンボックスにプリセットがあります。ユーザーがこれらの設定のいずれかを選択すると、スライダーが動き回るのを見ることができますが、実際にはスライドできません(グレー表示されているため)。ただし、ユーザーが「手動」を選択すると、スライダーをスライドして使用できるようになります。

  • スライダーの横に%ラベルを付けます。中央の位置は0%になります。右端は200%程度、左端は-200%となります。ユーザーはおそらくそれを100%から-100%の間に維持し、極端な端まで進めないことを理解するでしょう。

3
Lakey

問題は、2つの異なるケースがあることです。私と同じように、一部のユーザーは少数のプリセットから選択する傾向があり、他のユーザーはスライダーを好みます。おそらく、これら2つのケースに対処するには、2つの異なるモードを提供する必要があります。あなたはそれを望む人々のためにスライダーモードを保ち、あなたはそれを好む人々のために個別モードを追加します。離散モードは、Instagramでフィルターを選択するように見えるかもしれませんが、選択肢が少ないと思います。

1
Robert Fisher

スライダーが「通常」の範囲外の値に設定されているときに、何らかの視覚的な警告を出すことについてはどうでしょうか。

たとえば、適切に色付けしたり、スライダーよりも明るくしたり、極端な値を選択したときに少し跳ねたり、少数の可能なユーザーに対応することにうんざりしたりすると、説明マーク(!)が表示されます。おそらくそれを正しく使用することはできませんが、それでもアプリの問題であると文句を言うでしょう)LARGE REDが警告のシンボルを点滅させます(ただし、発作の可能性があるほど速く点滅しません)。

疑わしい設定であることを示すために通常表示されるスライダーとは異なる色相の、柔らかくゆっくり脈動するグローを使用するのが好きです。また、提案されたアイデアのいくつかは、全体的に役立つ場合、いくつかの方法で組み合わせることができます。

1
Zhora

これは厳密にはスライダーではありませんが、おそらくこれは関連性があると思うかもしれません。これは、AppleがiOS 8でボリュームインジケーターに対して行うことです。

  • タイトルが「ヘッドホン」から「大音量」に変更
  • 値インジケーターのドットが白から黄色と赤に変わります。

iOS 8 headphones volume HUD

1
jrc

Lumia 1020のNokia Cameraアプリケーションでは、半円形のスライダーを不適切な範囲に押し込むと、要素に赤い下線が引かれます。

これは舞台裏のロジックを使用して、どの設定がどの範囲の組み合わせで問題を引き起こしているかを判断し、赤い下線が消えるまで、または単に(悪い)写真の撮影を続行するまで調整できるため、私にとっては良いデザインのようですあまり侵入せずに。

UI of Nokia Camera application

1

終点のない円形(回転)スライダーを使用します。 0〜180度を0〜100%に、180〜360度を100〜0%にマップします。

円形スライダーには最小位置または最大位置がありません。

1