web-dev-qa-db-ja.com

ライトボックスギャラリーのサムネイルインジケーター

ライトボックスギャラリーをブログ投稿に追加できるCMSベースのWebサイトを持っています。ギャラリーには1つ以上の画像を含めることができ、投稿の本文には最初の画像のサムネイルが表示されます。サムネイルをクリックすると、矢印と閉じるボタンが付いたライトボックススタイルのように、拡大表示されます。

以下を示すのに適したUXプラクティスはありますか?

  1. これは、クリックするとこの写真の拡大版が表示されるサムネイルです
  2. この1枚の写真は実際には複数の写真を表しており、クリックすると拡大写真が表示されます。 OR 2A。この1枚の写真は実際には1枚の写真のみを表しています。クリックすると拡大版が表示される場合があります。
1
Brian Whitton

最小のユーザーの驚きの原則による設計。それ自体の単一の画像は、背後のギャレーに複数の画像があることをユーザーにアフォーダンス(ヒント)を提供しません。

写真のギャラリーが存在することを示唆するさまざまな方法があります。 「最良の」方法は、ギャラリーを起動するUIを考慮して、実用的な方法によって異なります。

最も便利な便利な方法は、ミニギャラリー、カルーセル、または「カバーフロー」UIを表示することです。これは、ユーザーが目的の画像をすばやく参照してクリックできることを意味します。

ただし、起動UIが制限されている場合、他のアフォーダンスは「12画像」、バッジ「12」、またはマルチイメージスタックのラベルになる可能性があります。バッジとマルチイメージスタックを一緒にスケッチしました。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

すべての場合

  • クリックされたサムネイルの画像を表示するギャラリーを開始します。
  • ユーザーがギャラリー内を移動できるようにし、サムネイルに戻して別の拡大を選択しないでください
1
Jason A.

ライトボックスで1枚の写真を拡大するだけの場合は、拡大鏡アイコンのプレビューとしてサムネイルを使用します。ギャラリーの場合、これは異なります。アクセシビリティの観点からは、ギャラリーを視覚的にだけでなく、「ギャラリーを表示(x画像)」のように言葉で示します。次に、ギャラリービューは常にセット内の最初の画像から開始し、ユーザーが一方向でギャラリーを閲覧できるようにする必要があります。ギャラリーの場合は、一般的なギャラリーアイコンとテキストリンクを使用します。

1
pseudonym