optional水平スライダーでマテリアルデザインの編集可能な数値(パーセンテージ)を使用しています。
スライダーまたはフィールドを使用して特定の値を選択するとエラーが発生することをユーザーに示す最良の方法は何ですか?
たとえば、スライダーで20%未満を選択すると、エラーが発生します。ユーザーが20%以上を選択した場合、選択したパーセンテージまでスライダーで塗りつぶしの色を表示することは正しいですか?スライダーの20%未満の領域を赤で表示する必要がありますか?または、エリア内のパーセンテージがユーザーによって選択されている場合にのみ、エリアを赤で表示する必要がありますか?
私はあなたのユースケースのすべての背景を持っているわけではありませんが、ここにあなたが提供した情報に基づいた最初の試みがあります(私のヒントテキストはもっと良いかもしれません)。ユーザーとテストして、入力エラーを確認できます。
Nielsen Norman Groupのスライダーに関するいくつかの作業があります:スライダーデザイン:経験則
スライダーは、特定の値がユーザーにとって重要ではない場合に最適に機能しますが、おおよその値で十分です。
モックアップから、小数点以下2桁までの入力の範囲があります。これをユーザーが正確に取得するのは困難です。その時点で、おそらく正確に入力フィールドを使用するだけです。
また、入力する値は1つだけです。スライダーはしばしば、特に制限された範囲である最小値と最大値に使用されます:
ここでも、左側の画面は問題があります。入力フィールドがモバイルでユーザーの指で覆われているためです。
左:BrilliantEarth.comのスライダーは、スライダーのインクリメントを説明するラベルをスライダートラックの下に配置します。このラベルは、操作中にユーザーの親指で隠れます。右:AirBnB.comは、UI要素の上にスライダー値を正しく表示するため、使用中は常に表示されたままになります。
または、ユーザーがタップアンドドラッグジェスチャーに依存するのではなく、タップまたは入力して選択を指定できるようにする別のUI要素を検討してください。
Baymardには記事re:Slidersもあります。 フォームの使いやすさ:スライダーインターフェイスの5つの要件 :
Eコマースフィルタリングに関する調査のために18の主要なeコマースサイトをテストしている間、テスト対象にとって最も問題があることが判明したフォームインターフェイスの1つはスライダーでした。