ここに状況があります:
画像はモバイル配信用に最適化されたdivボックスに表示され、大きな画像がプリロードされています。ユーザーがボックスをクリックすると、大きな画像が表示されます。
UXの観点からモバイルで単一の非常に詳細で大きな画像を表示する方法
1)画像の幅/高さを100%で表示しますか?
-ユーザーは最も詳細な画像を取得しますが、激しくスクロールする必要があります
2)100%デバイスで画像を表示(最適なデバイスの向きを検出)ビューポート?
-ユーザーは詳細画像が低く、ズームを使用する必要があります
3)固定幅/高さのデバイスビューポートよりも大きいイメージウィンドウを表示しますか?
-ユーザーは半詳細なimgを取得し、スクロールする必要があります
何か他に提案はありますか?
携帯電話で製品の画像の各ピクセルを観察することは、退屈(UXの感情面)であり、困難(画面サイズが小さいために広範囲にわたる物理的な相互作用)であり、ユーザーにとってもあまり意味がありません。
より優れたUXを提供するために、インタラクティブな「関心のあるポイント」が埋め込まれた画像を使用できます。このようにして、ユーザーは製品全体の画像を確認し、タップして詳細ビューに切り替えると、製品の重要な機能を見つけることができます。
利点: