行動を促すフレーズのボタンを左揃えまたは右揃えにしますか？
オンラインプレゼンテーションを作成しており、ページのほとんどのテキストが中央に配置されています。CTAが設定されている最後のページで、ボタンは左側に配置された別のWebサイトにリンクしています。 CTAは右側にあり、中央に配置されていると失われるように見える（大きな緑色のボタン）と考える人もいるため、右に揃えるように求められました。
私は " Webフォームのプライマリアクションとセカンダリアクション "に関するLukewの記事を読みましたが、これはWebフォームのボタンの良い例と見なされています。中央のテキストから目の流れを見る研究があります。とボタンに画像、西洋の目が好きですか。矢印の付いた図を見ると、右揃えボタンの方が目がボタンに近づくのに時間がかかるため、実際にはそれが望ましいと思います。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ベストプラクティス
CTAのテストと理論については、たくさんの情報が見つかります。しかし、水平方向の配置をどうするかを説明する多くのものを見つけることはできません。その理由は、デザインによって異なります。
規範
同僚がもっとcommonについて話したい場合は、提案するように、適切に調整する必要があります。これは、（少なくとも私たちにとっては左から右へ）順番に進むことを意味するため、左よりも頻繁に使用されます。逆に、多くの「<何かに戻る」CTAが左揃えで表示されます。
コンテキストに合わせる
あなたの場合、サイトのコンテンツはほとんど中央に配置されており、中央の垂直軸に沿って移動するようにユーザーを訓練します。また、対称性を重視する美的環境を作り出します。そのコンテキストでは、ボタンを中央揃えにします。視覚的な方のために、主な位置合わせ軸をたどる簡単なワイヤーフレームを次に示します。
問題を見つける
中央に配置されたボタンがないユーザーに問題がある場合は、適切なスケール、間隔、周囲のビューとの区別を指定しているかどうかを確認する必要があります。ご存知のとおり、アラインメントは唯一の要素ではありません。
さらに重要なことに、それが見逃されていることを確実に知っていますか？クリックの欠如は、視認性の欠如ではありません。ユーザーはクリックしたときに何が起こるかを知っていますか？彼らに十分な動機を与えましたか？
それほど意味があるわけではありませんが、ここでは Smashing Mag で中央にcanできることを確認しています。
隣接要素がない（または大幅に小さく強調されていない）Webレイアウトの中央に行動を促すフレーズのボタンを配置することは、注意を引き付けてアクションを引き付ける効果的な方法です。
その理由から始めましょう...
- 現在、コンテンツは中央揃えになっています。したがって、ユーザーがページを下に移動すると、次のコンテンツが中央揃えになることを期待します。
- 今日、中央に配置された大きな緑色のボタンがあります。それは十分に気づかれていません。
- 気づかれないのはなぜですか？正確なコンテンツを見ずに正確に判別することは困難ですが、以下の可能性があります：
- ボタンはグラフィックス、カラーパレット、およびその上のコンテンツのボリュームと注意を求めて競合しています。
- ユーザーはボタンをコンテンツの一部として認識しています。つまり、中央揃えのコンテンツを読むようにユーザーを誘導しているため、レイアウトを調和させる仕事がうまくいきすぎて、ユーザーは中央揃えのボタンを、インタラクティブな要素としてではなく、コンテンツフローの一部として認識します。
左/右揃えが役立つのはなぜですか？
- ボタンを中央揃えのフローから外すことで、意図的な認知的不協和を作成しています。これにより、ユーザーはコンテンツの流れから意図的に認知を一時停止し、整列を阻害する要素をより慎重に評価するよう促されます。その後、CTAボタンをインタラクティブなコンポーネントとしてより簡単に認識することができます。
なぜこれが問題なのですか？
- 認知プロセスを理解することで、より良いデザインを作成できます。
- 上記のフレームワークを使用すると、ここでの実際のアプローチは、ユーザーがCTAボタンをより明確に認識できるようにするための認知的中断を作成することです。
- 配置はこれを行う1つの方法ですが、他にもいくつかあります（画像をクリックして拡大）。
- この図は、レイアウトを壊すことなくCTAを強調する方法が他にもある可能性があることを示しています（スタイルを変更することが重要な場合）。
このフレームワークは、アラインメントの不協和音を使用することを決定した場合に、左と右のアラインメントを決定するのにも役立ちます。左揃えは、ユーザーの期待する左から右への読み取りに準拠しながら、中央揃えを解除するのに十分であるため、より自然な選択です。それがウェブサイトでより一般的に見られる理由です。
右揃えは、認知的不協和を刺激する可能性があります（ユーザーは次のコンテンツを読むために左下に行くことを期待しますが、代わりに下または右下になるだけです）。結果。
CTAは何をしますか？ボタンを押して何をするかによって、配置が変わる可能性があります。ほとんどのデスクトップOSは右下の[次へ]/[OK]ボタンを使用するので、それが別のページにつながる場合、デスクトップデザインの右側に配置することは意味があるかもしれません。
ニュートラルセンターポジションがほとんどの場合に機能することを主張できます。
フィットの法則 によると：
ターゲット領域にすばやく移動するのに必要な時間は、ターゲットまでの距離とターゲットの幅の比率の関数です。
Gutenberg's Diagram を検討することもできますが、- Nielsenによる調査研究 によれば、このターミナルゾーンの概念は実際ではありません私の個人的な経験では、要素が短い限り機能しますが、これは便利です。
現在、コンテナ全体が右上にある限り、ボタンを左に配置するボタンを高度に調査および追跡しています...私はこれを自分で何度もテストしました（CTAは私のパンとバターです）。非常に興味深いものでした。 右上に配置された左ボタン付きのコンテナは通常、右に配置されたボタン付きの右上のコンテナを50％以上上回ります。
ただし、フォームを中央に配置する場合は、ボタンを中央揃えまたは右揃えにする必要があります（ここでFitt Lawが役立つので、なぜ私がそれを言及したのか、数学を実行するとわかります）。フォームの幅にも依存します。個人的に、私は小さいフォーム（400px幅以下）を使用する傾向があり、通常はフォームの幅全体を使用して、実際にはバルクボタンを使用します。私はこれについて多くの研究を行い、それは機能しますが、もちろん、あなた自身のテストをしなければなりません。
最後に：配置の他に、コピー、間隔（ボタンのための余地を残してください！）、サイズ、および色を使用することを忘れないでください。