ランディングページの画像が全画面表示されても問題ありませんか？
ランディングページに大きな画像があり、それぞれ個別の建物です。ユーザビリティの問題を引き起こしている情報の香りの問題が心配です。画像には視差効果があります。この場合のユーザビリティのベストプラクティスに関する提案はありますか？
ここのサイト例-
http://demo.thebambergergroup.com/b/1/110-east-36th-street/murray-hill/nyc
全幅の画像はまったく問題ありませんが、メッセージを完了する必要があります。ランディングページを使用すると、すべてが一目でわかり、ユーザーの行動を促す明確なフレーズが必要です。
このランディングページでは、考慮すべき点がいくつかあると思います。私の答えがトピックから少し外れるとお詫びしますが、それらは重要なことだと思います。アクションメッセージを表示します。スクロールするために実際にクリックできるかどうかは明確ではありません。さらに、次に何を期待するかが明確ではありません。
私の意見では、メッセージは明確にされるべきです。ユーザーにわかりやすいコピーを作成し、ユーザーが知っておくべきことについての情報を入力しますが、シンプルにしてください。このページでは、ターゲットに提供しているものを明確かつ理解できる方法で説明していますか？また、ユーザーの頭に浮かんだ最初の質問について考えてみましょう。一目で答えはありますか？
最後になりましたが、右隅のボタンは一種の行動を促すボタンのように見えます。これは、ゴーストボタンであっても、システムの主要なボタンですが、それは単なる「手に触れる」ためです。ユーザーにとって主要な行動を促すフレーズがどれであるかは完全には明確ではありません。ここで私が見るものに関しては、ランディングページのコンバージョンを最適化するために、1：5の注意率がありますが、理想的には1：1（相互作用するフィールドの数に基づく）である必要があります。お役に立てれば幸いです。
ユーザビリティの問題を引き起こす情報のにおいの問題が心配です
全幅と全高を使用するランディングページの場合、ページがスクロールせずに見える重要なメッセージがまだあることをユーザーが理解できず、見落とす可能性があります。 情報の香りは問題に対処するための1つの方法にすぎません。これに取り組むための2つの一般的な手法があります。
- 次の画面のシグニファイア：ダウンアングルの形のボタンを提供します。 ここに例があります この手法を使用した大きな画像のあるランディングページの例です。
- デザインカット：以下の要素が表示され、折り目でカットされることを確認します。個人的に私がこのテクニックに出くわしたとき、私はそれが少しイライラすることに気づきますが、それはうまくいきます、あなたはスクロールして全部を見てみたいです この例のように 。
視差に関しては、それがあなたのウェブサイトに現代的なトーンを与えると聞くかもしれません-それは新しいトレンドです、なぜですか？ まだ、努力する価値はないと思います。
発見のためにプロジェクトの最初に時間を費やすことは、ペースの速いプロジェクトにはあまりにも面倒だと思うなら、警告されます：代替案は暗いです。顧客のニーズを無視しながら、次の輝くテクノロジーやビジュアルデザインのトレンドを追いかけると、Flashイントロや視差スクロールなどの余分な出力の時代に戻る可能性があります。
私の意見では、全幅の画像はクールで、大丈夫です。ユーザーの注意をCTAに集中させる必要があります（CTAを再設計して、よりわかりやすいラベルを使用してください）。このモックアップでは、CTAを画像の中央にはっきりと表示し、ユーザーがCTAの意味を理解するのに役立つ何かを書くことを試みました（それほど難しくはない、私は告白します）。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
はい、画像を全幅にすることはまったく問題ありません（そして推奨されます）。現在はサイトに表示されていません。背景と写真のコントラストが非常に大きいため、実際には不安を感じています。これが、全幅（またはフルブリード）の写真がランディングページ（およびWebページ全般）に適している理由です。背景とのコントラストが低いほど、ユーザーレスポンスが向上します。
視差については、少し多めですが問題ありません。ページ上のすべての読み込みが少し遅いと思います。視差はスクロールと一致しているように見えますが、それ以外の点では見栄えが良いです。また、モバイルでも見栄えがよく、すっきりしています。
ランディングページに大きな画像があり、それぞれ個別の建物です。ユーザビリティの問題を引き起こしている情報の香りの問題が心配です。画像には視差効果があります。この場合のユーザビリティのベストプラクティスに関する提案はありますか？
パフォーマンスの問題を引き起こさない限り、ページ全体の背景画像を使用できます。
現在使用している画像 サンプルサイト の解像度は1600x2100で、高解像度の画像のように見えます。
現在、画像の読み込みが遅く、ページ全体の読み込みパフォーマンスに影響を与えています。ユーザーのビューポート（screen.width x screen.height）が 1366x768。表示する代わりに 1600x2100 上の画像 1366x768 画面、Web最適化を表示する場合 1366x768 画像をページの背景として使用すると、常に画面全体に表示され、UXを損なうことはありません。
同じケースがモバイルにも当てはまります。モバイルデバイスでは、実際に必要以上にユーザーのモバイルデータを使用していないことを確認する必要があります。さらに、ページの読み込みは十分まともで、モバイルユーザーを苛立たせないようにする必要があります。ロードしても意味がありません 1600x2100 モバイルデバイスの画面上の画像。モバイルサイトの場合は、小さなモバイル画面に収まる小さな解像度の画像を使用する必要があります。
また、共有したサンプルサイトに基づいて、すべてのページコンテンツを配置して、ユーザーが利用可能なすべてのオプションを一目で確認できるようにすることをお勧めします。
例：
タイトルが'AVAILABILITY'のページの例を見てみましょう。これは、2つの垂直セクションを含む単一のページです。左側に1つ、フォームが含まれており、右側にイメージがあります。どちらのセクションも、一目で90％しか表示されません。残り10％（実際には'VIEW DETAILS'および'GET IN TOUCH'ボタンが含まれています）の場合、ユーザーは下にスクロールする必要があります。私によると、これは良いUXではありません。この代わりに、これら2つのセクションを少し上に移動できる場合、すべての情報が1つのページに表示され、Nice UXが提供されます。 'FEES & POLICIES'も同様です。
＆ 最終的に、 parallex効果、
Parallex効果を追加しようとしていますか？はいの場合は、UXを快適にするためにより多くの作業を行う必要があります。今のところ目が痛い。