デスクトップからモバイルへのレスポンシブリンク画像に最適なアプローチは？
私は90年代初頭からウェブサイトを再設計し、より「応答性」の高いものにしようとしています。モバイルデバイスで表示したときにホームページに2つの画像が含まれるという問題が発生しました。これらの画像は、Webサイト内にある対応するWebページにリンクされています。画像をモバイルデバイスで表示すると、非常に小さく見えにくくなります。
これらのクリック可能な画像をボタンに変えることができるモバイルレベルでユーザーに良いユーザーエクスペリエンスを提供すると思いましたが、ユーザーを混乱させる可能性があると考えました。私はこのジレンマに近づくパターンを探して、手ぶらで出てきました。
デスクトップからモバイルへのクリック可能な画像に最適なアプローチは何ですか？
モバイルデバイスでボタンに変わるデスクトップ画像はユーザーを混乱させるでしょうか？
デスクトップ上の画像がモバイル上のボタンに変わる例
通常のレスポンシブソリューションを試してみませんか？モバイルで画像を表示するとき、並べて表示から積み重ね表示に切り替えます。 Webユーザーが見るのと同じ画像があり、好きな画像をクリックできます。
画像をクリックしてページにアクセスする問題について：視覚的な手掛かりの問題は、両方のプラットフォームで類似しています。ハイパーリンクまたはボタンを画像の下に追加して、より良い手がかりを持つ機能を繰り返し使用できます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
"Mobile Web Browsing：Usability Study、" というタイトルの論文で、Sujan Shresthaは、ユーザーがデスクトップサイトに精通している場合、モバイルのナビゲーションを変更すると混乱し、速度が低下することを発見しました。
とは言っても、ディスプレイ全体が基本的にこれら2つのボタンだけである場合、デスクトップとモバイルの間で位置とラベル付けの一貫性を維持している限り、どちらをクリックする必要があるのか誰もが混乱することはないでしょう。
古いユーザーはWebサイトのリンクをそれらの画像に関連付け、ボタンに変更すると混乱する可能性があるため、これはお勧めしません。あなたが行くことができるアプローチは、を使用することです レスポンシブな画像 これはサイズを拡大します、したがってユーザーがそれらを表示できるようにしますモバイルデバイス。
また、これらの画像の用途を知りませんが、それらがWebサイトに関する重要な視覚的アフォーダンスである場合（たとえば、1つのWebサイトがeコマースサイトであり、他のWebサイトが内部ポータルである可能性があります）、2つのボタンを提供するだけでユーザーが混乱する可能性があります。期待する。また、ボタンの形状とサイズが似ていると、誤ってクリックしてユーザーを間違ったWebサイトに誘導する可能性があります
私はあなたのイラストの「コンテンツ」がテキストであることを前提としています、そしてそれはモバイルボタンとそれらのデスクトップの対応物との間の関連付けをするいくつかの方法になります。また、同じフォント、色などを使用すると、その関連付けが強化されます。デスクトップ版の画像をアイコンに抽象化できれば、さらに良いでしょう。