不規則な形状のオブジェクト/要素をクリック可能に見えるようにする方法は？
私たちのホームページには、スクロールせずに見える範囲でクリックできる不規則な形状の要素があります（実際の画像は、単なるデモではなく、猫ではありません）。
http://codepen.io/aguerrero/pen/pgvJoa
そして、これはホームページでのレイアウト方法です：
問題は、不規則な形状の要素（矢印）が単なる画像のように見え、クリックできないことです。コンテンツをナビゲートするための一般的な方法ではありません。
画像をクリックして操作できるようにするにはどうすればよいですか？それらはすでにホバー効果を持っていますが、あなたが偶然画像の上にマウスを置くまでそれは明らかではありません。
ホバー状態に依存しないでください。
レスポンシブなウェブサイトを開発していない場合でも、タッチデバイスが導入されたため、「対話性」を示唆するためにホバー状態に依存する時代は終わりました。ここに3つのオプションがあると思います：
1。他のアニメーションがない限り、UIに注意を引くために必要なのは 微妙な動き だけです要素—そしてユーザーはおそらくそれらがそれらと相互作用できると思います。
例：
2。要素をクリック/タップできることをユーザーに明示的に指示します。
例：
3。ここでの美的センスが最適なデザインの選択ではないかもしれないという現実を受け入れ、目標とユーザーの期待により適した代替案を模索します。
NNGには クリック可能な要素を認識可能にする 画像に関する特別な記事があります：
- クリックすると小さな画像が拡大することを確認します。
- 互いに関連付けられているすべての要素（画像、アイコン、テキストなど）をクリック可能にします。これにより、ターゲットサイズが増加し、意図したクリックがキャプチャされる確率が向上します。
- ハイパーリンクの箇条書きリストや明確にラベル付けされたボタンなど、画像内のオプションが明確に提示されていない限り、特定の画像に対して複数の行動を促すフレーズを避けます。
あなたのホバー効果は素晴らしいスタートだと思います。あなたが探しているのは、これらの画像がクリック可能であることをユーザーが直感的に理解するのに役立つシグニファイアです。視聴者の年齢やその他の人口統計、サイトの目標によっては、ボタンのように見えるようにデザインを調整したり、戦略を続行したりすることが有利になる場合があります。
たとえば、NNGは Millinnials as Digital Natives：Myths and Realities 、 Page Parking：Millennials 'Multi-Tab Mania 、そして最後に フラットデザインへの長期露出でクリック可能な要素を決定する機能を参照：トレンドがユーザーの効率をゆっくりと低下させる方法
...若年成人ユーザー（18歳から30歳）は、たとえ記号がないか弱い場合でも、クリック可能な要素を検出する点で実際には高齢者よりも優れているようです。具体的には、若年成人は可能なターゲットをより迅速に識別します。
この現象にはいくつかの理由が考えられ、それらの任意の組み合わせが当てはまる可能性があります。
- 若い大人は、微妙な配置の手がかりにもっと慣れているかもしれません。
- 若年成人は、フラットインターフェイスやその他の探索的インターフェイス（ゲームなど）に頻繁にさらされている可能性があります。
- 若者は、クリックしがちな要素を認識し、新しいデザインパターンをすばやく習得することができます。
そして指摘し続ける：
- クリック可能な要素には常にある程度の視覚的シグニファイアを使用することをお勧めします —青いリンクなどの従来の強力なシグニファイアを使用するか、それとも微妙で弱いシグニファイア（ゴーストボタンなど）を使用するか。選択したデザインの美しさに関係なく、クリック可能なものを伝えるためのガイドラインに従ってください。クリック可能性を明確に伝えることは、ユーザーがコントロールできるようにするのに役立ちますが、それ以外の方法では利用できないことに気づかないかもしれないアクションをユーザーに促すことにも役立ちます。
- 主要な要素と機能については、ホバーを署名者を明らかにする唯一の方法として使用しないでください。セカンダリーコンテンツがホバーを使用すると、ユーザーのワークフローに自然に収まる場合は問題ないかもしれません。たとえば、eコマースサイトでは、ユーザーが商品の画像にカーソルを合わせると、その画像の隅に表示される微妙な虫眼鏡のアイコンにより、画像をクリックすると拡大するという期待が高まります。
- 審美的な魅力のために視覚的記号を除外する場合は、強力なフィードバックを提供するようにしてください。使いやすさのために、すぐに目立つフィードバックが常に必要ですが、ユーザーがそれらに自信がない場合はさらに重要になります。何がクリック可能かを知る。ユーザーが不確かなものをクリックすると、すぐに、正しい選択をしたという安心感を探し始めます。
- いつものように、あなたの決定はユーザーの特性に影響されるべきです。若いユーザー向けに設計している場合、強いクリック可能性の記号なしで物事を理解できる可能性があります。受け入れる準備をしてください。ユーザーにインターフェースの「制御」を感じさせないことの結果。そして、いつものように、ユーザーが実際にインターフェイスをどのように処理するかを知るための最良の方法は、ユーザー調査と分析です。
- インターフェースの文脈上の手がかりに注意してください。見出しに下線を引いて、リンクされていないことを伝えるだけでは十分ではありません。ユーザーは以前、同じ要素にシグニファイアがなくてもクリック可能であったという状況に遭遇した可能性があるため、シグニファイアのない要素をクリックする可能性が高くなります。
つまり、最初にユーザーベースのリスクを考慮して、厳密にリンクまたはボタンフォームでクリック可能な要素を認識できない場合はすべてです。デザインを続行したい場合は、シグニファイアのいくつかのアイデアを、行動の呼びかけとして画像のデザインに冗長に組み込んだり、ドロップシャドウなどのスキューモーモーフィズムの要素（これは私のお気に入りのソリューションではありませんが、オプションです） ）。
ホバー効果のような最初のシグニファイア以外のアイテムは非常に便利です。ユーザーが混乱させないように、色あせた画像や、インタラクティブではないサイトで矢印/グリッド効果を繰り返す画像を使用しないようにすることをお勧めします。別のアイデアは、ホバー効果に追加の非常に微妙なアニメーション遷移を追加して、色覚異常に苦しんでいる可能性のある人にそれを本当に明らかにすることです。 NNGによって提案された画像を拡大するだけの簡単なもので十分かもしれません。あなたがコードサンプルを上げているので、あなたはおそらく利用可能な効果について良いアイデアを持っていますが、私はこのサイトを使ってアイデアを得るために Hover.css サイトを得ています。
これらの画像は、（あなたが認めるように）単にナビゲーションのように見えず、そのように認識されません。ユーザーは、奇妙な形の画像がクリック可能であることを期待していません。それを克服する魔法の解決策はないと思います。
ユーザーの期待によりよく適合するために、設計を再考する価値があるかもしれません問題にバンドエイドをかけるよりも。これを行うには2つの方法があることに注意してください。
- 画像を従来の長方形に変更クリック可能と認識される可能性がはるかに高くなります。
- 矢印のデザインはそのままにしますが、ナビゲーションの中心にしないでください。他のナビゲーションをこのコンテンツにアクセスするための主要な方法として機能させます（このシナリオでは、画像はまだクリック可能ですが、これを発見するユーザーに依存する必要はありません）。
移動はオプションを提供するかもしれません。人間の目はそれに同調しているので、微妙なだけで十分です。ページの読み込みが完了すると、右から左に山形を横切って、各画像の画像サイズと影の深さのローリング増加を検討できます。
これにより、サイトを「感じる」必要なく、ユーザーの注意を引くことができます。次に、ホバーに同じ動きを適用します。マウスがポインターに変わると、95％のユーザーがこのアイデアを理解できると思います。
ホバーオーバー
ホバリングを強調表示することは価値がありますが、ご存知のように、ユーザーはインターフェイスを単に見るだけでなく、何ができるかを確認するためにユーザーがインターフェイスを「感じる」ように努力する必要があるため、それだけでは十分ではありません。また、ホバー効果はタブレットユーザーにはあまり効果がありません。
「長方形の矢印」
問題が長方形以外の形状であることが確かな場合は、視覚的なデザインを使用して、長方形と矢印の形状を1つの許容可能な形状に組み合わせます。 1つの代替策は単純です。
元の「ペイン」デザインにもう1つ近いものは
ボーダー
問題が長方形以外の形状ではない場合、または長方形を組み込んだ視覚的に受け入れられる解決策が思いつかない場合は、クリック可能な画像の周囲に静的な境界線を組み込むことを試みることができます。 「盛り上がった」境界線は、クリックを促す可能性のあるボタンのような押しやすい外観を画像に与えます。単に情報を表示するのではなく、「リンク」が実際にアクション（「キティを取得」など）を初期化する場合、これは実際に推奨されます。だから、次のようなもの：
リンクに使用するのと同じ色でクリック可能な画像の輪郭を描くという古い標準もあります。特にリンクの色が青色の場合は、引き続き機能する可能性があります。ページ内のテキストリンク（たとえば、「標準的なナビゲーション」ブロック内）を見ると、同じ色を使用すると形状もリンクであることをユーザーは一般化できます。したがって、次のようになります。
テキスト
許容できるグラフィックソリューションがない場合は、テキストを画像とともに（画像内または画像の下に）含め、視覚的にリンク（色と下線）を付けることができます。テキストは、リンクが何をするか、またはリンクするかを示すラベルになる可能性があります。これは、画像が自明ではない場合が多いため、必要になる場合があります。さらに悪い場合は、「ステップ1」のような一般的なラベルを使用します。 「（クリック）」のような簡単な指示でも役に立ちますが、それはかなり慎重です。
最初は、ユーザーはテキストをクリックするだけで、少なくとも行き詰まるのを防ぎます。初めてクリックすると、画像全体が明るく表示され、次に（クリックしやすい）画像をクリックするように通知します。
同様の質問と回答
ここUX.SEにいる私たちの友人によると、私はドロップシャドウを使用することをお勧めします。
それはおそらくリンクに囲まれているという事実に依存しているかもしれませんが、ドロップシャドウを追加することにより、画像に「特別な」何かがあることを示しています。
これは、Michael Zuschlagの answer と大きな違いはありませんが、画像をボタンに変換するのは正しくありませんでした。
ドロップシャドウは、現在のデザインにあまり影響しません。
私はあなたに基づいて codepenのSVGモックアップ を作成しました
「画像をクリックして操作できるようにするにはどうすればよいですか？」
Answer：そうではありません。この回答はすでに@ dan1111によって提供されていますが、以下を追加したいと思います。
それは本当に問題なのでしょうか？ナビゲーションを再考するよりも。これを「機能的な」ナビゲーションとして使用しない場合、「実際の」ナビゲーションがそれをバックアップしている限り、ここで実際の問題はありません。その場合、矢印を発見するものとして残すことができます（イースターエッグなど）。 。