web-dev-qa-db-ja.com

スライダーに「決して」ない値を組み込む方法は?

Webページにスライダーがあり( これ と同様)、削除されるまでアイテムを保持する期間を制御します。

値の範囲は0から90までで、値0は「決してしない」を意味するために使用されます(つまり、アイテムを削除しない)。

「しない」オプションがスライダーの「間違った」端のように見える場所にあることは重要ですか?継続時間をゼロにすると削除しないことを意味するので(理由を言葉で説明することはできませんが)より直感的ですが、「絶対に」が他のどの継続時間よりも長く、正しいはずであるというロジックも確認できます。 -スライダーの手の端。

混乱を引き起こす可能性が低いのはどれですか、またはこれを行うより良い方法はありますか?

私が例として使用できるこのようなコントロールの例は他にありますか?

15
adrianbanks

あなたがそれを持っている方法は、私たちが数字が機能することを期待する方法を壊します。 90日は10日より長いので、90日オプションが右側にあります。決して無限の日と同じではないので、それは右側の最後のオプションでなければなりません。

スライダーの左端のオプションは、それらを最初の場所に保持しないことに対応します-オプションとしてそれを望む場合。

スライダーの代わりに、最初からすべてのオプションを表示するセレクターを使用するのが好きです。何かのようなもの:

enter image description here

22
JohnGB

私は JohnGBの答え が好きです。スライダーよりも手間がかからず見やすくなっています。

代替案を提供するために、スライダーを保持したい場合は、「しない」オプションを削除することを検討します。スライダーが示す固定範囲の概念に実際には適合しません。このバージョンでは、[自動的に削除]が選択されている場合のみ、期間スライダーが表示されます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

22
Matt Obee

スライダーを使用する場合は、それを唯一の制御手段として使用してください。追加のコントロールは、決定を下すのに多くの「ツール時間」を追加し、混乱を招く可能性があります。

私が提案する解決策は、あなたが持っている素晴らしい概念を単に逆にすることです。

スライダーの[〜#〜] end [〜#〜]を「なし」にし、スライダーの最小値を1にします。

enter image description here

スライダーをデフォルト設定または以前に設定した値に設定します。これが完了すると、スライダーの範囲が明確になります。デフォルトが[しない]の場合、スライダーはこの画像の2番目のスライダーに示されているように表示されます。問題ない。

14日間のような数値のデフォルトの場合、最初の例のように設定されます。そして、1つに下がったり、上にスライドしたりすることは完全に明らかです。

レスポンシブラベルは、選択肢をさらに明確にします。 (スライドで更新してください)。この画像では、会話のトーンで選択を伝える構造にラベルを更新しました。 1日選択すると、「日」が「日」に変わります。それは私のうんざりです。

最後に、スライダーを少し短くして、ユーザーが範囲を理解できるようにインジケーターを追加することを検討してください。画像の最後の例を参照してください。

編集:

ボタンスタイルのラジオUIは優れた代替手段ですが、選択肢が多すぎると、行き詰まってしまいます。 「しない」を選択する必要があります。スライダーを使用すると、いくつかのオプションから簡単に選択でき、特定の値に調整できます。

17
Itumac

スライダーはそのままにして、右側の「絶対にしない」選択を配置し、下のモックアップのように、有限の値から離れて表示されるようにノッチします(MSペイントの恐ろしいスキルに注意してください)。

enter image description here

このように、明らかな操作モデルで単一のUIコントロールを使用できます(スライダーを右に動かすと間隔が長くなり、その逆も同様です)。ただし、「決して」に近い選択の周囲にあいまいさはありませんが、完全ではありません。その上に(ノッチがなかった場合、「20」と「決して」の間の値はどのようになるでしょうか?)。

13

私はJohnGBの答えが好きですが、さらに詳しく説明すると、ほとんどの場合、人々は正確な値を指定する必要はありません。彼らはむしろ、少数の理解しやすい選択肢を望んでいます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

もちろん、それは完全にユーザーが誰で、何をしているかに依存します。彼らが本当に特定の日数を必要とする場合、彼らが本当に必要とするものは特定の日付であると想像します。その場合、日付入力はさらに良いでしょう。

ただし、スライダーが本当に必要な場合は、右端に配置しないでください。左端はゼロで、「今すぐ削除」を意味します。したがって、実際には左端は1日である必要があります。

7
jlarson

チェックボックスを追加できます。オンにすると、スライダーがアクティブになり、自動削除がアクティブになります。オフにすると、削除は行われません。

3
iDeveloper

スライダーはお勧めしません。スライダーを使うのは面倒であり、正確にするのは困難です。 joeが言うように、ユーザーにとって意味のある場合は、よく使用される値のラジオボタンを使用し、精度が必要な場合は、ユーザーに数字を入力させます。

3
Peter