web-dev-qa-db-ja.com

次および前のボタンで選択した場合のオプションの最大数?

カスタマイズ可能な機能を備えた製品を設計しています。ユーザーは、進む(>)または戻る(<)ボタンを押して、明るい色をカスタマイズできます。このアクションは、最後に到達するとループする設定されたカラーパレットを切り替えます。

どちらかのボタン(<または>)を押したままにすると、色のオプションをすばやく移動できるように設定します。

そして、ユーザーが区別できる、または必要な色の数に関係なく...

ユーザーがそれらすべてを切り替えてイライラする前に、いくつのオプション(別名:ボタンを押す)で十分ですか?これをサポートするための経験や研究はありますか?

3色を切り替えても迷惑ではないと考えるのは安全です。ただし、1,000色の切り替えは可能です。間に「スイートスポット」があるのだろうか。

[編集]

明確にするために、これらは物理的な製品の物理的なボタンです。

[編集2]

例を見ることでユーザーの不満を測るのにどのように役立つかはわかりませんが、十分なリクエストがあったため、ここでは初歩的なモックアップを示します。ボタンは下のライトの色を変更します。

enter image description here

私が使用した例は色でしたが、それは何か他のものかもしれません(音、投影されたシンボルなど)。ユーザーが不満を感じる前に、オプションの数が多すぎるという問題が依然として残っています。

2
Davbog

前/次のナビゲーションを使用して色の範囲をクリックするという決定自体がイライラします。

色#50を表示するために50回クリックする必要があることを想像してください。#50になったら、25度クリックして#25に戻る必要があります。オプションの数に関係なく、ナビゲーションソリューション自体は非効率的です。ユーザーに課せられるメモリ負荷は言うまでもありません(#25の色が好きだったことを思い出してください)。

より良い方法は、すべての色を隠さずに並べて配置することです。これにより、ユーザーは色を並べて比較し、全範囲を確認して、どの位置にいても有望と思われるものをクリックすることができます。

色の範囲が圧倒的な場合は、色のセット/テーマの前/次のロードを導入できます。例:ソリッドとテクスチャ、黄色、白、緑、明、暗、カラーファミリーなど。

enter image description here

この記事には多くの優れた提案と例があります: https://www.smashingmagazine.com/2018/02/designing-a-perfect-responsive-configurator/

最後に、ループ/無限スライディングを完全に回避します。ユーザーは、次のオプションをセットの最初のオプションとして認識することで悪名高い。カルーセルはこの問題に悩まされています: http://uxmovement.com/navigation/big-usability-mistakes-designers-make-on-carousels/

4
Nicolas Hung

このような場合に行うべきことは、「期待を管理する」ことです。

「20色のうち3色」が表示されていることをユーザーに伝えると、どこまで到達したかを知らずに何度もスクロールするよりも気分が良くなります。

あなたの場合にいくつのオプションがあるかを知るのに役立ちます。私たちがあなたから持っているより正確な情報、私たちがあなたに与えることができるより正確な答えです。)

2
Adriano

あなたはたった一次元で考えています。 2Dへの移行を検討しましたか? 1つは色相、もう1つは明るさや彩度です。これにより、たとえば、それぞれに8つの設定、合計64のコンボを設定でき、最大16のボタンを押すだけで済みます。

あるいは、いくつかのパレットを用意することもできます。たとえば、赤、オレンジ、黄色のグラデーション、さまざまな組み合わせの青の束、レインボーなどです。最初のボタンをパレットで循環させ、2番目のボタンを個々の色で循環させます。

おまけとして、ユーザーが最初のボタンを押すだけの場合、パルス/アニメーションのカラーパレットを使用できますが、2番目のボタンを押すと、カラーで停止します(現在のものである可能性があります)。押すたびに、配列の次のボタンに移動します。追加機能(アニメーション!Partytime wooo!)、数行のコード、追加の物理ボタンはありません。

しかし、主な質問に答えるには…5から10の間のどこかです。ミラーの法則によれば、人々は5から9のことを一度に追跡できます。ただし、10進法のため、10は非常に重要な数値です。個人的には8が好きですが、バラエティには十分ですが、脳に負担をかけすぎません。

厳密な制限ではありません。また、両方の次元に8を使用する必要はありません。しかし、私は(これを十分に立証することはできませんが)パレットごとに同じ量の色を使用する方がおそらく良いと感じています。 10以上のグラデーションを使用できますが、選択ごとに5色しかありません。なぜなら、人々は個々の色よりもパレットの違いを覚えやすく/気づくことができるからです。たとえば、グレー、レインボー、ネオンパレットを赤オレンジやライムティールなどの柔らかなグラデーションと一緒に含めると、それらは著しく異なります。しかし、ライム、シャルトリューズ、ミント、シアンの色の違いは、それほど大きくはありません。

補足として;物理デバイスの場合、代替入力を検討しましたか?スクロールホイールを使用すると、迅速な変更と正確な調整が可能になります。色相だけを変更したい場合は、360の選択肢から離れることができると思います。凝ったものにしたい場合は、機械式のエッグタイマーのように、黒の半分から光の半分を分離し、ボタンをまったく表示しないようにすることができます。

1
PixelSnader