web-dev-qa-db-ja.com

ブラウザーの下部にあるスティッキーアクションの人々の経験とは何ですか?可視性は問題ですか?

私はキャリアサイトであるプロジェクトを任されており、添付画像のようにブラウザーの下部に「今すぐ適用」という大きなボタンが付く必要があるとの見方がいくつかあります。

enter image description here

垂直軸以下でこれを行うのは問題ないので、ページの他の要素と競合しないようにしました。

enter image description here

問題は、大きなボタンの方が目立って明白であると私の同僚が考えていることです。

私の質問は、ブラウザの下部にある粘着性のあるアクションの人々の経験は何ですか、そして可視性も問題ですか?私の同僚が示唆するように。

1
Chris

GoogleのMaterial Design Frameworkは、と呼ばれる画面下部のスティッキーボタンのデザインパターンを普及させました。 〜#〜] fab [〜#〜]、または フローティングアクションボタン

Googleには、このボタンの外観と動作に関する特定のガイドラインがあります。次に例を示します。

  • フローティングアクションボタンは、モバイルではEdgeから最小16 dp、タブレット/デスクトップでは最小24 dpに配置する必要があります。

  • フローティングアクションボタンは、フォーカスがあると色が変わり、選択すると解除されます。

  • フローティングアクションボタンは、アプリケーションの主要なアクションを表します。

  • 目立つようにするには、画面ごとに1つのフローティングアクションボタンのみをお勧めします。最も一般的なアクションのみを表す必要があります。

  • 作成、お気に入り、共有、ナビゲート、探索などのフローティングアクションボタンをポジティブアクションにします

ただし、特にマテリアルデザインフレームワークを使用していないため、これらのガイドラインのすべてに厳密に従う必要はありません。

代わりに、ユーザーの期待とパターンへの親しみにもっと集中してください-ユーザーがFABタイプのボタンを見つけた場合、その動作を理解できますか?彼らが期待する行動の種類は何ですか?

たとえば、 https://www.intercom.com/ などの他のサイトでは、マテリアルデザインフレームワークを使用せず、FABタイプのボタンを使用しています。

FAB button on Intercom's site.

最後に、遭遇する可能性がある1つの問題は、FABボタンが通常テキストラベルを使用しないことです。したがって、「適用」を示唆するアイコンを見つけるのに苦労するかもしれません。または、ここで慣例を少し破って、テキストラベルを使用する必要があるかもしれません。

enter image description here

1