商品画像ギャラリーで多くのサムネイルを最適に処理する方法
サムネイルをクリックして画像ビューを拡大すると、ビューポートにサムネイルが表示されます。
レイアウトが満たす必要があるいくつかの条件を次に示します。
- ギャラリーはさまざまな画像の比率に対応する必要があるため、画像のサムネイルはビューポートの下ではなく横に表示する必要があります。
- ビューポートが優先されるため、サムネイルをメインビューポートの上に配置することはできません。
- サイトはレスポンシブで、小さいサイズのサムネイルはメインビューポートの下に表示されます。
- このページは実際にはeコマースサイトの商品ページであるため、ユーザーが1つを購入していないことを明確にするために、ビューポートが必要です製品。
そして、これが現在のインターフェースのスケッチです
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ご覧のとおり、問題は、サムネイルが多いとリストがぎこちなくなることです。この問題を緩和するために、スクロールバーを使用して自分自身を確認できます。
または他のスクロールメカニズム これのように
どちらのソリューションも非常にエレガントに見えません。
どちらがUX標準に従っているのか、それともユーザーフレンドリーで完全に異なるアプローチがあるのですか？提案を裏付けるために、調査または既存の実装を提供してください。
同じ製品なので、重要なサムネイル画像の数があるかもしれません：
- 画像は製品を異なる色で示していますか？次に、色のみ 。を表示します
- 画像は製品をさまざまな角度から示していますか？次に、矢印を使用する方が良いオプションになる場合があります（または偽の3D）。
- 画像は製品の詳細を示していますか？次に、メイン画像に「注釈」を付けて「ズーム」画像を作成することをお勧めします。
- この画像はすべて便利で意味がありますか？たぶん、製品の2または3ショットで十分です。
このリストの各質問と回答は排他的ではありません。
これらの質問が役に立たない場合：別のアプローチを試してください。
- それらの写真をセクションにグループ化できますか？サイズ、形状、場所、顧客のタイプ、レイアウトをより意味のある方法で再編成します。
ユーザーはページ分割に慣れており、ページをめくることを気にしません。まるでお店のカタログみたい。実際のユーザー（Argosなど）、仮想のユーザー（Amazonなど）がそれを行います。
ページネーションを使用する利点のいくつかは次のとおりです。
- ページネーションは、ユーザーに彼らがどこまで進んでいるかの感覚を与えます
- ページネーションにより、好きなものを見た場所を簡単に思い出すことができ、簡単に戻ることができます。スクロールすると覚えにくくなります。
- ページ分割により、ページをより速く読み込むことができます
もう1つのコメントは、レイアウトにスペースがあり、画像が密集していない場合は、二重列を使用できるということです。それは本当にあなたがデザインしているサイトとグラフィックスに依存します。白い背景の画像が本当にきれいに表示されているミニマリストの白いサイトであれば、このアプローチを使用できますが、非常に明るいカラー画像が実際に視覚的に読み込まれたサイトでは、ユーザーが何を購入するかを決定するのが難しくなります。
大きな画像には専用のスペースを使用しません（必要でない場合）。代わりに、サムネイルのすべての領域を使用して、ユーザーが一度にできるだけ多くの画像をスキャンしてから、興味のある画像をクリックします。クリックされた画像はモーダルポップアップに表示されます。
モーダルポップアップには、「前の」画像と「次の」画像を表示するためのオプションが含まれているため、ユーザーは各サムネイルをクリックしたり閉じたりせずにすべての画像をフルサイズで参照できます。これは、写真の右端または左端（facebookスタイル）などをクリックすることにより、ボタンで実行できます。
