ユーザーが質問への入力を提供し、提供された回答をオプションとしてどれだけ好きかを選択できるようにする、効果的で洗練されたユーザーコントロールの設計を検討しています。
ユーザーは他のものを選択する必要はありません。彼らは、オプションの1つが非常に好きで、他のオプションの1つはそれほど好きではありません。
例
株式市場におけるこれらの企業の業績見通しについて、どの程度自信がありますか。
私がこれを行う方法の1つは、円形のスライダーを使用する方法です( jQuery Knob による)。
ただし、このタイプの入力については、次のような懸念があります。
上記に対処する手段として、4つのオプション間の好みを示すために必要なタップまたはクリックの数を最小限に抑えることができるコントロールを探しています。
別の考え:
ユーザーは、好みの領域で円をドラッグし、ピンチ/ズームしてパーセンテージを調整できます。
変更前:
変更後(移動およびピンチ/ズーム):
要約する:
ユーザーが質問への入力を提供し、提供された回答をオプションとしてどれだけ好きかを選択できるようにする、効果的で洗練されたユーザーコントロールの設計を検討しています。
注:コントロール/インターフェースはデスクトップ[〜#〜]または[〜#〜]モバイル指向であると想定される場合があります。
現在のコンセプトを使用しないことをお勧めします。それは賢いですが、明白なはずです。
さらに、デスクトップとモバイルの両方で使用することを想定している場合、ユーザーがそれを操作する方法に一貫性がなくなります。
最後に、ズームインとズームアウト以外のvery共通パターン(ピンチとスプレッド)を再定義するには、多くの教育が必要になります。
以下に、可能な解決策を示します。スマイリーフェイスは安っぽいですが、はっきりしています。親指モチーフを使用する必要がある場合は、親指の間で親指を上下に回転させることができます(生ぬるい感情では、親指をユーザーに向けます)。または、右側を親指で、左側を親指で下げることもできます。
感情の粒度はどれくらいですか? 1%? 10%?非常に細かい場合は、スライダーを目的のポイントにスナップする必要があります。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
JQueryノブに似た jQuery roundSlider プラグインを使用できますが、ラウンドスライダーはdiv要素で作成されています。そのため、コントロールの全体的なルックアンドフィール、外観を簡単にカスタマイズできます。
詳細については、 demos および documentation ページを確認してください。
異なる形状の例: jsFiddle
このようなサンプルUI: jsFiddle