このフローティングCTAの下にさらにデータがあることをユーザーに確実に知らせるにはどうすればよいですか？

Question

私はモバイルフォームを持っていますが、CTAはページの下部にあります。そのため、粘着性のあるCTAは、ユーザーが最初に見たときのフォームのアクションを示します。しかし、スクロールせずに見えるフッターが原因で非表示になっているコンテンツをどのように処理しますか？

スクロールせずに見える範囲にさらに多くのコンテンツがあることを示すために、コンテンツを切り取ってユーザーをいじめたいのですが、これがすべてのモバイルデバイスの高さで発生することをどのように保証できますか？

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

Answer 1

デバイスの高さを検出して、フローティングエレメントの下にエレメントを確実に配置しようとすると、ワームの缶全体に侵入するようになるので、その必要性を取り除くいくつかのソリューションを提供します。

画面の左側または右側にCTAを貼り付けます

標準のコンテンツマージンなしで配置されている場合、通常のスクロール領域の一部として表示されません。これは、その下にある画面の一部ではないことを示すのに役立ちます。

_{明らかに、コンテンツが十分に高くスクロールし、すべてのコンテンツがフローティングCTAよりも上に快適に移動できることを確認してください。}

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

少し遅れてCTAを表示する

または、ページを読み込み、CTAでフェードまたはスライドして、ページがその下に拡張されていることをユーザーに表示することもできます（モックアップでは表示しにくいですが、うまくいくと思います）。

Answer 2

Appleがネイティブアプリのタブバー要素の「background-blur」プロパティで行うことと同様に、追加フィールドがあることをユーザーに示唆するために、少し透明でぼかした背景を使用することを検討しますメインのCTAコールアウトのすぐ下にあります。

別のネイティブアプリアプローチを活用して、CTAがフォーカスを1つのフィールドから別のフィールドに移動するために、オーバーレイの角度付きまたはキャレットの上下の要素を使用します。 「フォーカスまたはキャレットアップ」でブラウザのフォーカスを上のフィールドに移動し、「アングルまたはキャレットダウン」でブラウザのフォーカスを下のフィールドに移動します。

Answer 3

おそらく、必要なすべてのフィールドが入力されるまで[送信]ボタンを無効にし、異なるビューポートの高さで偽の床をテストすることができます。

Answer 4

CTAを底より少し上に置き、画面より少し狭くして、3Dシェーディングを与えます。これは、粘着性があり、実際にはコンテンツの終わりではないことを強調します。その下にコンテンツがある場合は、側面と下部からはみ出す必要があります。