web-dev-qa-db-ja.com

同じページ上のクリック可能な画像とクリックできない画像

私のポートフォリオには、私がプロジェクトについて少し説明し、テキストとともにさまざまなサイズの画像を配置するケーススタディがあります。一部の小さな画像では、ユーザーはクリックして大きなバージョンを表示できますが、他の一部の画像はページ上で十分に鮮明です(ユーザーがクリックしなくても、ほぼ元のサイズで画像を表示できます)。だから私のオプションは:

  1. クリック可能な画像とクリック不可能な画像を区別する(たとえば、ある列に境界線のある画像があり、別の列にそれがない画像があると見栄えがよくないので、私はそれをしたくありませんでした)
  2. 一部の画像を拡大したときに画像が繰り返される場合でも、すべてがクリック可能になるようにします
  3. そのままにしておくと、クリック可能な画像とそうでない画像があります。

質問は:ユーザーにとって本当の問題ですか?十分に鮮明な画像がある場合でも、クリックして拡大表示しますか?クリックして何も起こらないことにイライラするのでしょうか、それともクリックして同様の画像を表示するのにイライラするのでしょうか。 (タッチデバイスのユーザーはホバー効果がないため、推測はより問題になります)

3
Taly Emmanuela

noクリック可能な画像とクリック不可能な画像を区別する方法を提供すると混乱を招き、クリックによって利益が得られないことは煩わしいことになるので、どれが何かを特定する方法を提供するのに苦労していると思います画像はクリック可能であり、クリック可能ではありません。

境界線の代わりに(見た目が乱雑になる可能性があります)、クリック可能な画像の隅に虫眼鏡アイコンを追加できます。

thumbnail without iconthumbnail with icon

2番目の方法は、すべての画像に境界線を追加することですが、色で区別します。

thumbnail with grey borderthumbnail with blue border

...しかし、違いを耳障りにすることと、たとえば、色覚異常。

7
user21395

ユーザーの最終目標について考えます。それは、より大きなバージョンを表示することです。タッチスクリーンでは、最初の直感は、シングルタップアクションではなく、拡大マルチタッチアクションを実行して画像を表示することです。イベントを検出したときにサムネイル画像を大きな画像に置き換えて、拡大された大きな画像がピクセル化された混乱にならないようにすることは興味深い解決策です。

私はこれが以前に行われたのを見たことがなく、いくつかのGoogleクエリは何も見つかりませんでした。誰かが以前にこのアプローチを実験したことがありますか?

最大の課題は、ユーザーが常に画像自体に対してこのマルチタッチイベントを実行するわけではないため、ページに複数ある場合は、すべてを置き換えるか、どれを置き換えるかを判断する必要があることです。

0
designninja