web-dev-qa-db-ja.com

オブジェクトを移動不可能として視覚化する

現在、数値のスライダーを作成しています。スライダーの考え方は、リボンを動かすことによって値が変更されるということです。一部のテストでは、ユーザーがリボンではなくインジケーター自体を移動しようとしたことがほとんどでした。

スライダーの現在の状態： The slider in question

インジケーターが動かないことをどのように視覚化できますか？

sliders
2
Octfx

ラウンドインジケーターも移動します。デザインは非常に興味深いですが：

  • インジケーターがボタンの感触を失う方法を見つける
  • ドラッグ可能なポイントマークを誇張する
  • または、ドラッグ可能なボタンとして数値をシミュレートしてみてください

enter image description here

6
Danielillo

ユーザーがインジケーターを操作しようとしている場合、それはあなたが彼らのメンタルモデルに準拠したいかもしれないという兆候です。

インジケーターを直接ドラッグ可能にできない技術的な理由はありますか？多くのアプリケーションでは、ユーザーがオブジェクトを直接取得、スライド、ドラッグ、ピンチ、ズームできます。したがって、人々が他の人からあなたのアプリケーションにもたらす期待に対して、困難な戦いをしているのかもしれません。

できることの1つは、ノッチまたはマークを付けることです。これにより、ユーザーは値を直接左または右にドラッグできます。

enter image description here

4
Mike M

このようなものでもっと成功すると思います。理由–

a。要素の順序-バーはインジケーターの上にある必要があります。最上層はインタラクティブであると想定されます。

b。矢印などの動きに対するより強い視覚的手がかり。

c。インタラクティブ機能のサイズ–最大の部分はインタラクティブと見なされます。

enter image description here

2
Ren

この要素がドラッグ可能に見えるのはなぜですか？

この設計には、「数直線」自体がドラッグ可能であることを示すいくつかの点があります。

  1. ドラッグ可能なアイテムでよく使用される微妙なセパレータを使用します。

    たとえば、「draggable item ui」の画像検索の最初の結果は次のようになり、 xdesign.cc によって提供されます。

    draggable item UI, showing a drag indicator

    このアイテムは、ドラッグ可能性を示すために、ほぼ同じアイコン（同じように何度も使用されているのを見てきました）を使用しています。

  2. バーは端でフェードアウトし、切り捨てられたがアクセス可能なオーバーフローを示します。

    このオーバーフローフェードアウトUIパターンの例を検索すると、検索エンジン自体に例示されているデザインを実際に見ました。

    overflow contents fade to show it extends beyond the end

    フィルターの1行目と2行目は、実際には微妙なフェードインジケーターを使用して、項目が端を超えていることを示し、ドラッグジェスチャーを使用して操作します。

  3. 要素と対話する方法の明確な代替手段はありません。

    -および+インジケーターは小さすぎて一見して気づきません。以下のアイテムは「メニュー」アイコンを使用しており、それがドラッグ可能であることを知っていても、それをクリックしてドラッグした場合にどうなるかわかりません。値はどのくらい移動しますか？クリックしたもの、または上のリボンは移動しますか？

それについて何をしますか？

代わりに、このテストを実行してその困難を観察するのはまさに正しいことをお勧めします。この要素の設計方法をユーザーに影響を与えてください。今後の道は、リボンをドラッグするというユーザーの本能を受け入れる必要があります。

リボンをドラッグ可能にして、上の選択した値のインジケーターを表示することをお勧めします。

次のようなものはテストする価値があるかもしれません。

draggable bar with input above

バーはユーザーの希望に応じてドラッグできますが、上記の入力は現在選択されている値のインジケータとして機能するだけでなく、 - そして + ボタン、または特定の値を入力することによる大きな調整。

1
maxathousand

良いスライダーのデザインに関するこの記事は、出発点としては良いかもしれません-そして、この記事は、セグメント化されたスライダーとして最適だと思われます。別の記事で、これを残りのデザインと一貫させようとしているとおっしゃっていましたが、残りのデザインのスクリーンショットをお送りいただけますか？

https://www.smashingmagazine.com/2017/07/designing-perfect-slider/

0
Rachel

私見、インディケーター上でリボンを移動することは、値の範囲全体でマーカーを移動する一般的なメンタルモデルと矛盾するため、良い相互作用ではないと思います。例えば設定温度。サーモスタット、オーディオミキシングデバイスの音量など.

ただし、移動するリボンに固執したい場合は-

1）インジケーターをコントロールとして表示しないでください。周囲に円を描くのではなく、数値を大きくするだけで十分です。コントロールのように見えるため、ユーザーはインジケーターを移動します。

2）または、最良の方法は、リボンからある程度離すことです。

3）または、ポインターの番号を強調表示せずに、ポインター/針を中央に表示します（これまでに示したように）。

編集：タッチベースのデバイスでは、単一のビューですべての範囲値を表示できない場合は、リボンを移動することは理にかなっています。例えば携帯時計の日付/時刻の設定

enter image description here

0
Omkar Chogale

他の人が指摘したように、その円のデザインと底に付けられたものがアフォーダンスのように見えます。リボンは、それを制御する方法として、これと競合する必要があります。

リボンの端にある矢印は、デザインの中心を変更せずにリボンが移動することを示します。

配色がわからないので、例の色を使いました。矢印はリボンの中間フレームを覆い、さらにフレームがあることを示します。

enter image description here

0
moot