web-dev-qa-db-ja.com

親指を上に/親指を下にして進行を1行に配置する方法

問題

私は、私のクライアントの1人との間で、その間の進歩を伴う嫌いなボタンの位置についてこの議論を持っています。以下のスクリーンショットのように。

enter image description here

私は常に、左側にポジティブなアクションを、右側にネガティブなアクションをとることが最も理にかなっていると考えてきました(私の側での調査は行わず、ただ感じているだけです)。このアイデアは、おそらくYouTube、「これは役に立ちましたか」という質問、および肯定的な行動が左側にあったその他の投票サービスに基づいています。

しかし、彼のフィードバックは、彼がフィードバックを求めた人々がこれを混乱させる(テストに参加するPPLの範囲について推測できる)ことであり、それでも私はかなり驚いた。

モバイルアプリ用です。

それで、このような投票システムを行うためのより自然な方法はどれですか?

オプションA

enter image description here

オプションB

enter image description here


編集する

いくつかのコメントに答える。

クライアントの視点

彼は基本的にYouTubeの投票システムをコピーしたいと考えています。彼のアイデアは、2つの別々のバーを互いに押し出すことです(いいね/嫌いの数に応じて)。そして、私はそれが別のアプローチでそうであるようにそれほど明白に見えないかもしれないことに同意しますが、私はそのそれを混乱させるとは思わない.

イマイチ投票したときのイメージ

enter image description here

私の視点

バックエンドにはフィードの並べ替えメカニズムがないため、投票する目的はほとんどありません。私が決めることができれば、嫌いな機能を完全に捨てて(数える)だけにすることはできますが、それは私次第ではありません。そして、私はこのパターンのファンでもありませんが、できるだけ使いやすく理解したくありません。

15
rojcyk

テストを作成して、人々がどれだけ簡単にストーリーに賛成/反対票を投じるのかを確認するテストを作成して、どのストーリーが「より良い」/「より悪い」のかを示すためのテストを作成できます(それがイマイチに付けられた値である場合)経験的な証拠が必要です。

左から右へ、ポジティブからネガティブへのオプション(A)が(左から右へのカルチャーを前提として)勝てなかった場合、私は非常に驚きますが、質問として提起されたという事実自体が別の問題を指摘している可能性があります。多くの場合、表面的な質問は正しい問題ではありません。

あなたのケースでは、混乱が脳に何か間違っていることを伝える情報が多すぎるのではないかと思います。あなたのクライアントはこれを左/右の質問として発声しました。絶対/相対位置を決定する必要があるだけではなく、他の問題が消えるかもしれません。

私にとっては:

あなたの絶対的な1つが3つの親指を上に、5つの親指を下に(これがこのようにどのように読み取られるかに注意してください-明確なマークアップでアクセス可能にすることもできます)

example of absolute thumbs up / down

または、他のどこかで見たかもしれない良い相対的なもの:)

example of a relative marking system from stack exchange

18
Jonny

絶対データと相対データが混在しているため、どちらも奇妙です。親指が上でも左でも右でも。数字の付いたサムアイコンは、1つの情報(絶対値)を示します。しかし、それらの間には、別の情報を提供するこのバーがあります(相対比率)。数値とバーの間には直接的な関係はありません。暗黙の計算があります。それは紛らわしいです。

バーはプログレスバーの形をしていますが、それはより綱引きです。進行状況バーには、ヒット数と合計を示す数値が表示されます(例:4点中3点)。負の票に対する正の票ではありません。

投票数の多い投稿を、投票数の少ない投稿とは異なるようにすることをお勧めします(賛成票と反対票の比率に関係なく)。

私はいくつかのより一貫したデザインを見ます:

  • 数字の親指だけを表示するには、それだけです
  • 投票の合計も示す2色(緑と赤)の円グラフを表示するには simple pie chart example
  • 緑と赤の2本の横棒をつまみの数と同じ大きさに表示します。これは、投票のない投稿には長さ0の棒が表示されることを意味します。また、投票の最大数を設定する必要があります two sides bar chart example 1two sides bar chart example 2
  • 親指と数字が表示され、固定長の1本の水平バーが表示されます。このバーは、左から赤になり、右に向かって徐々に緑になります。親指の上下の比率によって、この評判バーでの投稿の位置が決まります。このデザインでは、投票の総数は省略されますが、少なくとも明らかです。 termometer-ish chart
7
Heitor

バーは非常に混乱しているため、A/Bテストを大量に行わずに何かを取得することは非常に困難です。 8票で混乱する場合は、100票または1000票で何が起こるか想像してみてください。

また、この状況を考慮してください。ユーザーの反応を測定しているため、投票なしは0になります。次に、投票する否定的な反応になりますが、投票する肯定的な反応でしょうか?

これを 数直線 と考えてください:正の数は右に移動します負の数は左に移動します。これは小学校で学ぶので、子供でも理解できます。

enter image description here

したがって、UIを数直線として表示する場合、クライアントは正しいです。そして、子供時代から学んだこととは逆の方法で情報を提示しようとしているので、おそらくこれは混乱していると人々は感じています。

だから、私見、あなたは数直線を取り除くか、ほとんどの人が期待するようにそれを使う方がいいです。疑わしい場合は...テスト、テスト、テスト!

4
Devin

私は絶対的である必要はありませんが、親指を上下に使用する場合は、整列可能なアイコンを使用する必要があります。 YouTubeについて話しているので、アイコンがどのように並んでいるかに注目してください。

enter image description here

一方、アイコンが目立つ。

enter image description here

それはすべて手首にあります。

2
Shadetheartist

問題は横向きではないと思います。メトリックを取得するために水平方向に使用すると本当に便利です。好きと嫌いの競争感はとてもクールです。

私の視点では、問題は灰色、または色がないことです。私があなたのイメージを探すとき、私は違いを知覚しません、そして、緑色が右側にとどまるとき、私の場合(ブラジルから)、私は何かが間違っているという感覚を持っています。しかし、グレーを紫やオレンジ(補色)のような別の色に変更すると、より良い結果が得られると思います。

1
Jeff Monteiro

モバイルアプリの場合、このコントロールの全幅の性質は結果自体を歪める可能性が高いことに注意してください。

スマートフォンを使用する人の大多数は右利きです。 最も簡単にタップできるのは、デバイスを右手で快適に握ったときに右親指で作られた円弧にあるものですどちらのコントロールも、全幅コントロールの右端にある方がはるかに簡単ですタップする。垂直スクロールによっては、親指を動かす必要がある場合と、タブを配置するのにちょうど良い場所に座っている場合があります。左端のコントロールは、簡単にタップできる場所に置かれることはほとんどなく、タップするには常に慎重な操作が必要です。

レーティングシステムのようなセカンダリコントロール(つまり、プライマリCTAやナビゲーションではない)の場合、左側にあるものをタップするほど多くの人が気になることのない多くの慣性を克服する必要があります。

あなたが右側に親指を持っている場合、あなたは否定的な評価を落としている-あなたはすべきではありません。

あなたが右側にイマイチを持っている場合、あなたは肯定的な評価を落としている-あなたは間違いなくしたくない。

バーを削除して、親指を上にして親指を下にして画面の右端に向かってまとめることをお勧めします。

0
Nigel Flack

オプションBはネガティブに思えるため、選択しません。緑色が目立ち、嫌いなものが目立ちます。好きに注意してください。嫌いより嫌いが少ないにもかかわらず、あなたの例のオプションAはポジティブに見えます。

求められる評価は何ですか?

0
Luchadora

私に関する限り、個人的には、最初に否定的で、次に肯定的である方がはるかに直感的です。 ただしこれはYoutubeやFacebookなどによって傾けられており、最初にポジティブを使用する必要があります。ポジティブが主要なアクションであるため、onlyアクション。

つまり、FacebookやYouTubeでボタンが好きで嫌いなボタンで育った人にとっては、ポジティブファーストの方が身近で、直感的です。したがって、対象グループの年齢によって、実際に差があると思います

一部のユーザーにとって直感的に理解できない2つの水平レイアウトから選択する代わりに、垂直レイアウトを使用します。垂直方向のレイアウトでは、大多数がプラスが上、マイナスが下に同意します。

0
Peter