web-dev-qa-db-ja.com

賛成/反対投票ボタンの順序

現在、私の学校用に画像を評価できるWebサイトを設計しています。各画像の下に、コメントボタン、共有ボタン、2つの上下ボタンがあります。
次に、これらのボタンを画像の下に配置して、注文を正当化する必要があります。

これらの2つのボタンの順序はどのようにする必要がありますか?なぜ?

9
Karen

上または下のどちらが主ですか。 pを右側に配置すると、左側に配置するのではなく、pがプライマリになり、ファイナリティが得られます。ただし、レイアウトによって異なります。これは、ボタンがコンテンツの下部にあると想定しています。

しかし、なぜそのような区別をするのでしょうか? p upおよびdown downのようにできる場合:

enter image description here

11
Fresheyeball

SavTheCoderに同意しますが、ページ構造によって異なります。リストの場合、スタック交換システムは非常に効率的です

しかし、それがグリッドページの場合は、次のようにする必要があります。

人々の期待に応じて、賛成または反対のボタンをより重要視できることを忘れないでください。コンテンツについて前向きな気持ちを促すには、[いいね]ボタンを大きくする必要があります。

mockup

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

16
Renaud

他のユーザーが既に言ったように:ほとんどのサイトは最初に(または同様の)ボタンを使用し、次に反対投票を使用しています。

あなたがそれを言うときも。最初に賛成票を発し、次に反対票を投じます。

Stackoverflowの投票システムでは、最初に賛成投票ボタン、次に反対投票を認識します。
Reanudのボタンの強制に関するポイントは素晴らしいです。色使いもいいですね。緑は賛成票、赤は反対票票です。

一方、spotifyはボタンを別の方法で注文します。enter image description here

最初に反対投票ボタン、次に反対投票。 IMO、それは本当に悪い選択です。
自分が好きな曲に賛成票を入れたいときに左端のボタンを押すだけでトラックに誤って反対票を入れた場合、それが頻繁に起こります。非常に悪いのはまた、ダウン投票されたトラックが失われるため、もう聴くことができないことです。
それが着色される場合、それはより明確になります。

反対投票ボタンが最初に来る例がいくつかありますが、IMO、これは良い使い方ではありません。

9
Michael Schmidt

この質問に対する普遍的な答えはありません。それぞれのケースは異なる場合があります。

  1. ユーザーがデフォルトで取ると予想されるアクションを選択します(これは通常、賛成票です)
  2. などを考慮して、このボタンへのアクセスを改善するようにデザインを準備します。
    • 読み方向
    • アクセスのタイプ(マウス、キーボード、タッチ)
    • サイズ(通常、大きい=より重要)
    • 形状(どちらも同じ、異なる、どこかを指している)
    • 体重(通常、脂肪と重量がより重要です)
    • witespace(より多くの空白=より良いアクセス、より高い重要性)
    • 色(レイアウトの残りの部分を考慮)
    • フィードバックの提供(現在の評価)
    • 両方のボタンの違いを明確にする(例:色、+ /-アイコン)
    • エンゲージメントのレベル(例:スマイリーをクリックするのは楽しいです!クールな人はokをクリックしてください!)
    • webの規則(例:青、下線付きのテキストをクリックする可能性が非常に高い、緑は成功、赤はエラーを意味する)
    • 他のページ要素による配置(たとえば、ページに他のリンクがない場合、このボタンはUSPです。ユーザーはこの前のマウスの位置をクリックします-たとえば、ユーザーが[次へ]/[前へ]画像をクリックすると、ヒートマップのホットエリア)

ラテン語のWebページのほとんどの場合、YouTubeで使用されるレイアウトが最適に機能することに気付くでしょう。

1
takeshin

ボタンはp -votingおよびdown -voting用であるため、それらをスタックするのが最適です。上のように、上が賛成票、下が反対票です。これにより、ユーザーは「上」ボタンを押すと投稿がリストの上に移動し、「下」を押すと投稿がリストの下に移動するという「手掛かり」が得られます。

0
Savv