web-dev-qa-db-ja.com

スライダーを使用してオプション付きの調査質問に回答する

私はクライアントがスライダーを使用して7ポイントのスケールを持つことができるが、各質問に3つの明示的なオプションと4つの空/中間のオプションのみを提供することを望んでいる調査を開発しています。

enter image description here

以下のプロトタイプを思いつきましたが、ユーザーが中間のオプションを理解するのに十分直感的かどうかはわかりません。これをどのように改善しますか?

https://jsfiddle.net/miracc/eL7arpte/3/embedded/result/

-編集-

クレジットは、スライダー実装の Bootstrap Slider に送られます。

3
miracc

アプローチと実装の両方にいくつかの問題があります。スライダー要素を使用すること自体は悪い考えではありません。実際、それは セマンティックディファレンシャル テストの実装にすぎません。

次に、実装の問題を確認します。

enter image description here

ここでは、ウィンドウのサイズを変更するだけで、オプションのフォーカスが失われ、何を選択しているかがわかりません。

さらに移動しましょう: enter image description here

ここでは、テキストに色を付けるオプション(ニースの詳細)を1つ選択しましたが、すべてが重なり合っているだけでなく、フォーカスを失っただけでなく、最適なオプションを選択したにもかかわらず、上部にさらにスペースがあることがわかります。

何をすべきか?

  • まあ、まず第一に、あなたは5つのスポット(または2つのの間に7つ(= /// =)の間に選択)、そして「間に」スポットは2と4の位置にある必要があります。 "over the top"オプションを使用することはあまり意味がなく、主観性が大幅に増えるだけでなく、かなりの摩擦が生じます。ユーザーとして、これが開発者の間違いなのか、空白の選択肢を選ぶべきなのか、何なのかはわかりません。

  • 「接続」パス:現時点では、選択肢間に接続パスがあり、すべてのオプションに接続性の感覚が加わります。だから、今あなたは、新入社員のマイクが悪いので、それと同時に素晴らしいことを伝えているようです。多分彼は悪かったし、今は素晴らしいですか?多分彼は素晴らしかった、そして今彼は悪いですか?または、その下にオプションがあるので、悪いよりさらに悪いですか?あなたが私に尋ねたら、私は接続パスを取り除き、単にオプションを残します。考えるradio input要素。選択できるのは1つだけで、すべてではありません!

  • ビジュアル:このリクエストの実装で素晴らしい仕事をしている間、ラジオボタンに近いものを選びます。このようなもの(必ずしも例ではありませんが):

enter image description here

もちろん、より多くのskeuomorphicパスを保持したい場合は、オプションが続く限り、それを行うことができます簡単に識別できます。ここでは、アイデアに使用できるいくつかのオプションがあります。

enter image description here

  • orientation:上記のようにサイズ変更に多くの問題があるため、これを上に配置して、簡単にできる水平ビューに変更するとどうなりますか?レスポンシブモードでサイズ変更しますか?

  • 最後に、単純なテキストブロックだけを使用するかどうかにかかわらず、いくつかの命令を追加します coachmarks またはその他の種類ガイダンスの場合、それはあなたの実装の使いやすさを向上させ、疑問の余地を残しません

3
Devin

多くの調査を行う人として、以下は頻繁に見られるパターンです。

Xにどの程度関心がありますか?

mockup

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

私は通常、「極端な記述子」と呼ばれる両端のテキストを見たことがあります。中央のテキストは中立的なオプションです。それぞれのラベルは別の一般的なオプションですが、すべてのラベルと部分的なラベルの両方が両方ともリッカートアイテム、パートo fリッカートスケール として参照されると思います。その記事から:

リッカート項目は、回答者があらゆる種類の主観的または客観的次元に定量的な値を与えることによって評価するように求められることを示すステートメントであり、同意/不一致のレベルが最も一般的に使用される次元です。

この一般的なパターンに従って、私の提案はステートメントをどちらかの端に置き、中央に1つ置くことです。

enter image description here

1
AlannaRose