同じことをする2つのボタン

Question

私は、同じことを実行し、見、そして言う2つのボタンをページに配置することを望んでいるクライアントがいます。ボタンには「適用」と表示されます。クライアントの理論的根拠は、人々がそれを見逃したくないことなので、1つをページの上部と下部に配置します。

どう思いますか？これは許可する良いパターンですか？

knallfrosch · Accepted Answer

それはまさにそれが行われる方法です。

通常起こるのは、会社自体の説明、オープンポジション、および候補者の要件だけで、画面を埋めるには十分すぎるということです。時々、法的専門用語–機会均等など–またはオフィスの場所を示す地図があります。

べたつかないボタンを上下に配置すると、両方のボタンが同時に表示されることはありません。

以下は、有名な企業の3つの例です。スクリーンショットは意図的に小さくなっています（フルサイズのバージョンを表示するにはクリックしてください）。[適用]ボタンは簡単に見つけることができます。

Microsoft（ WebM ）、Apple（ WebM ）、Google（ WebM ）

⠀⠀⠀⠀ ⠀⠀⠀⠀

これらすべての企業には、Applyボタンの2つの位置があります。求人の上部と下部。

Googleからの2つ目は、最初のものが見えなくなると表示され、目に見える画面の下部にくっつきます。その最終的な位置は求人の最下部です（つまり、Privacyまでずっとフロートしません） Google WebM を参照してください。

Facebookは、目立つスティッキーヘッダーを使用して、[適用]ボタンが常に表示されるようにします。

ただし、私は1つに、5年前のデフォルトの感触があるWordPressページ、ダブルヘッダーのおかげでこのソリューションが嫌いです。これが良いソリューションではない可能性があることを強調するために： Facebookページには別の問題があります。他の会社のWebサイト（およびAtlassianとStackOverflow UX）のプライマリボタンを示す青色は、LikeやShare。しかし、自分で確認してください：

Facebookスティッキーヘッダー：

Facebookの非支配的な原色（リラックスした状態の2番目/スティッキーヘッダー）：

Facebook WebM 。

自分で確認したい場合は、関連する求人ページを以下に示します： Microsoft 、 Apple 、 Google 。 Facebook （スティッキーヘッダー）

モバイルUXに関する注意：

スティッキーヘッダーが画面の半分を占めるため、Facebookページで求人を読むことはできません。

フローティングGoogle Applyボタンは不思議に機能します：

MicrosoftとAppleモバイルページも機能にこだわっています。アコーディオンの後ろに1段落を除いてすべて非表示にして、必要な縦画面サイズを制限しています。（フローティングボタンを除いたGoogleの例を参照してください。）

Chris Griffith · Answer

画面のデザインに大きく依存します。それらの配置の間に十分な視覚的距離がある場合、それはユーザーにとって有用かもしれません。ボタンを使用するためにスクロールする必要はなく、その存在を覚えておく必要もありません。しかし、それらが同時に表示されると、混乱する可能性があります。

It&#39;s Dylan · Answer

上記の全員に同意し、クライアントから同様のリクエストを何度も受け取っています。ボタンを固定するのは素晴らしいオプションです。他に2つの方法があります。異なるCTAブロックで異なるボタンを異なるメッセージでラップします（低いCTAは最初にスクロールしたという事実を説明します）、異なるA/Bテスト指標に基づいて配置し、選択します。