私はWebサイトをデザインしていて、ランディングページに2つのボタンが上下に並んでいます。 1つはプライマリボタンで、もう1つはセカンダリボタンです。
ページの構造には、画面の約40%を占める画像が含まれ、その下にタイトルと簡単な説明が続きます。その下に、上記の2つのボタンが続きます
私が直面している問題は、ここに見られるように、十分な高さがない可能な最小の画面サイズ(iphone 5)の場合、2番目のボタンがスクロール時にのみ表示されることです
この構造は、ある種のセクションを間に分割することによってユーザーを混乱させるので、これがユーザーにとって問題になるのではないかと思いますか?
ユーザーがスクロールすることを理解しています。ボタンが表示されないのではなく、構造の一貫性について疑問に思っています。考えられる回避策の1つは、説明テキストを減らすか、そのサイズを小さくすることですが、可能であればそれを避けたいと思います。
誰かがこの問題に直面し、これに以前に取り組んだことがあるかどうか疑問に思っています。私の考えを確認するためのデータはありませんが
一般的な形状(水平の正方形)と主ボタンの位置(折り目の真上)は、偽の底を作成します。
したがって、ここでの問題は、ユーザーがawareではないことです。つまり、プライマリボタンの下に別のボタンがあり、それを検出する必要があります。
下にスクロールしてセカンダリボタンが見つかったら、ユーザーは何らかのコンテキストを持っているため、CTAがランディングページに属していることを理解する必要があります。
しかし、スクロールとクリックはworkです。ユーザーが必要とするジェスチャーの量を最小限に抑えるエクスペリエンスを提供できれば、コンバージョン率が向上する可能性があります。
2つのボタンを小さい画面に並べて配置するか、スクロールせずに見える範囲にさらにコンテンツがあることを明確にします。
または、上部の画像の高さを犠牲にして、下のコンテンツのためのスペースを作ることもできます。小さい画像でも同じ目的に役立ちます。
300px未満では、既に述べたように、要素は通常のレンダリングでわずかに縮小される場合があります。
または、画像を背景として使用し、テキストとボタンをオーバーレイします。
この問題を処理する方法はいくつかあります。
スクロールせずに見える範囲とスクロールせずに見える範囲に関する懸念は、数十年前に発生しました。今やインターネットは十分に一般的であり、問題ではないと思われます。ユーザーは、Webページ全体が1つの画面に収まらず、スクロールする必要があることを知っています。 今日最も人気のあるサイトは、本質的に無限のスクロール体験です。
コンテンツがページに表示されるほど魅力的でない場合、ユーザーはスクロールしません、ではありません「混乱」しているため。
本当にユーザーがあなたのサイトで何をしているか知りたいなら、を使うことができますさまざまな画面サイズでのスクロール動作とクリック率を監視するJavaScript。
考慮すべきオプション:
タイトルを画像にオーバーレイします。