web-dev-qa-db-ja.com

4つのオプションを指定したユーザー設定のゲージ

ユーザーが質問への入力を提供し、提供された回答をオプションとしてどれだけ好きかを選択できるようにする、効果的で洗練されたユーザーコントロールの設計を検討しています。

ユーザーは他のものを選択する必要はありません。彼らは、オプションの1つが非常に好きで、他のオプションの1つはそれほど好きではありません。

株式市場におけるこれらの企業の業績見通しについて、どの程度自信がありますか。

私がこれを行う方法の1つは、円形のスライダーを使用する方法です( jQuery Knob による)。

enter image description here

ただし、このタイプの入力については、次のような懸念があります。

  1. ユーザーが自信を示すには4回のタップまたはクリック(オプションごとに1回)が必要であると推定されています。特定のオプションのデフォルトは50%なので、ユーザーはオプションの見込みについて50〜50であるので、タップする必要はありません。
  2. 正確な数値にタップまたはクリックするのは難しい場合があります。質問は相対的な好みを測定しようとしているだけなので、これはそれほど重要ではありませんが、それでもユーザーを混乱させる可能性があります。

上記に対処する手段として、4つのオプション間の好みを示すために必要なタップまたはクリックの数を最小限に抑えることができるコントロールを探しています。

別の考え:

ユーザーは、好みの領域で円をドラッグし、ピンチ/ズームしてパーセンテージを調整できます。

変更前:

enter image description here

変更後(移動およびピンチ/ズーム):

enter image description here

要約する:

  • 上記のアイデアの評決は何ですか?彼らの欠点と強みは何ですか?
  • 他のUIコントロールが満足するもの:

ユーザーが質問への入力を提供し、提供された回答をオプションとしてどれだけ好きかを選択できるようにする、効果的で洗練されたユーザーコントロールの設計を検討しています。

注:コントロール/インターフェースはデスクトップ[〜#〜]または[〜#〜]モバイル指向であると想定される場合があります。

3
karancan

現在のコンセプトを使用しないことをお勧めします。それは賢いですが、明白なはずです。

さらに、デスクトップとモバイルの両方で使用することを想定している場合、ユーザーがそれを操作する方法に一貫性がなくなります。

最後に、ズームインとズームアウト以外のvery共通パターン(ピンチとスプレッド)を再定義するには、多くの教育が必要になります。

以下に、可能な解決策を示します。スマイリーフェイスは安っぽいですが、はっきりしています。親指モチーフを使用する必要がある場合は、親指の間で親指を上下に回転させることができます(生ぬるい感情では、親指をユーザーに向けます)。または、右側を親指で、左側を親指で下げることもできます。

感情の粒度はどれくらいですか? 1%? 10%?非常に細かい場合は、スライダーを目的のポイントにスナップする必要があります。

mockup

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

3
SwankyLegg

JQueryノブに似た jQuery roundSlider プラグインを使用できますが、ラウンドスライダーはdiv要素で作成されています。そのため、コントロールの全体的なルックアンドフィール、外観を簡単にカスタマイズできます。

詳細については、 demos および documentation ページを確認してください。

異なる形状の例: jsFiddle

このようなサンプルUI: jsFiddle

circle slider with 4 quarter sliders

0
Soundar R