バナー全体をリンクとして使用すると、使い勝手が悪くなりますか？
私は、865 X 450ピクセルのバナーをスクロールする大きなヒーローバナースペースがあるeコマースサイトに取り組んでいます。これらの各バナーは、サイト内の特定のオファーにリンクされています。私が最初にデザインを計画したとき、私の計画は、オファーへのリンクになる各バナーに行動を促すフレーズのボタンを含めることでした。
しかし、技術的な制限により、各バナーにアクションボタンをリンクしてリンクできる唯一の方法は、ボタンの位置が固定されているため画像バナーが変更され、ボタンの相対的なコンテキストは、テキストに関して失われます。サイトは実装の技術的な詳細について知らないクライアントに引き渡されるため、新しいイメージマップを作成するオプションも問題外です。
したがって、唯一の代替オプションは、各バナー画像をオファーに直接リンクすることです。
これがユーザーが誤って大きなスクロールバナーをクリックしてしまう可能性があるため、使い勝手が悪かったであると思っていたところ、突然、自分がどのようにそこに到達したか理解せずに、サイトのセクションに移動したことがわかりました。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
いいえ、その逆です。カルーセルを持っているので、対処すべきタイミングの問題があります。カルーセルは画像を切り替え、ユーザーはバナーをすばやくクリックして、現在表示されているオファーに再度アクセスする必要があります。
上に示した フィッツの法則 によると、ユーザーがエリアをクリックするのにかかる時間は、距離とターゲットエリアの関数です。ターゲットエリアが大きい場合-ユーザーがバナーリンクをクリックする時間が短くなります。
モックボタンの問題は、他のサイトデザインと同じスタイルのカルーセル画像を適用することで解決されます。そうすれば、カルーセル画像は追加のようには見えませんが、サイトの一部になります。
問題が技術的に解決され、ユーザーエクスペリエンスビューが形成されます。
それは悪い考えではないと思います。
バナー全体をクリックできるようにすることは非常に一般的であり、一部のユーザーはそれを期待しています。 （Google AdSenseのような）グラフィカルな広告バナーを検討してください。行動を促すフレーズのボタンがあっても、バナー全体は常にクリック可能です。
また、デスクトップコンピューターでユーザーが誤ってクリックしたとは思いません。マウスボタンをクリックするのに手間がかかります。あなたはサイトを設計しているので、主な対象読者はおそらくデスクトップブラウザです。偶発的な「クリック」は、モバイルタッチデバイスではより理にかなっています。特にコンテンツをスクロールしているときに、ユーザーが誤って画面をタップしているのが見えます。モバイルデバイスは通常、コンテンツを変更する前に短いアニメーションを表示することでこれを処理します。たとえば、新しいコンテンツを横からスライド（iPhoneナビゲーション）するか、リンク全体を強調表示してから操作します。トランジションがアニメーション化されている場合、ユーザーの操作がコンテンツの変化の原因であることをユーザーが理解するのに役立ちます。それでも偶然かもしれませんが、少なくともユーザーは理解して「戻る」をクリックできます。
アニメーション化されたトランジションは、とにかくかなりいいアイデアです。マウスをバナーの上に置いたとき、またはクリックしたときに、バナー全体を少しだけ暗くすることを検討してください（単純な輝度フィルター/半透明の黒いオーバーレイを表示）。これは、バナーがインタラクティブであることを示しています。
また、デスクトップブラウザでは、クリック可能な領域にカーソルを合わせるとカーソルが変化することを忘れないでください。これがデフォルトで発生しない場合は、CSSでこれを指定できます（カーソル：手;）。これもかなり明確になります。
バナー全体をリンクとして使用することをお勧めします。ターゲットサイズが大きくなり、画像全体がハイパーリンクであると想定するユーザーをサポートします（この動作はテストで確認しました）。偶発的なクリックはそれほど問題ではありません（難しいことです）。新しいウィンドウでライトボックスまたはページを開いて[戻る]ボタンを壊さない限り、問題はありません。