画像ギャラリーの複数選択のヒント

Question

画像のギャラリーをグリッドで作成していますが、いくつかの懸念があります。ユーザーは、写真にカーソルを合わせるとメタデータを表示でき、複数の画像を選択することもできます。

画像にカーソルを合わせる

画像の選択

私の懸念

ほとんどの場合、これは機能します。ただし、少し気になる点がいくつかあります。

1. チェックマークは、deleteアイコンがあった場所に表示されます。この配置は大丈夫ですか、それともユーザーを困らせるでしょうか？
2. ユーザーがホバーする画像が選択可能であることをユーザーにヒントするための理想的な方法は何ですか？
3. チェックマークの理想的な配置は何ですか？私はそれを3つの主な理由でそこに置いた。 （1）以前あった削除ボタンを「ブロック」します。（2）左側では、ホバリング時にメタデータを非表示にします。（3）目立たせるために上部に保持するのが妥当と思われます。
4. 特定の画像では、境界線の色が緑がかって見えます。この場合、画像によって異なって認識されない安全な色はありますか？現在、一貫性のためにウェブサイトの他の場所のフォームで使用される色をそれに与えました。
5. ユーザーは、メタデータを取得するために、選択した画像の上にカーソルを置くことができます。これは良い考えですか？

他のヒントやコメントを開いてください。

Answer 1

1. それはいいです。
2. 下の画像を参照してください。単語は常に機能します（メタデータを読みやすいものに再配置し、削除アイコンに合わせました）。
3. チェックマークの配置は問題ありません。
4. ボーダーを少し「オフセット」して目で見やすくするには、白または背景のグレーの小さな内側のボーダーを追加します（画像を参照）。すべての画像に適した色を見つけることはできません。
5. はい。

他の画像ライブラリと、このタイプの相互作用をどのように処理するかを確認しましたか

Answer 2

これは、写真を扱うときにホバーにメタデータを表示することをお勧めします。

要件の流れを理解することについての私の観察、メタデータはホバーに表示されるため、メタデータ表示を閉じるために閉じるアイコンを必要とせず、ユーザーはカーソルを離すだけで済みます。選択機能の表示と選択機能の表示を考慮に入れることは、非常に優れた視覚的な選択方法です。

私はあなたを助けるかもしれない何かを作りました。小切手。ここで相互作用を確認してください。

選択とメタデータの表示 のために作成しましたこれらのショットも。