質問: 不規則な形状のオブジェクト/要素をクリック可能に見えるようにする方法は? 私たちのホームページには、スクロールせずに見える範囲でクリックできる不規則な形状の要素があります(実際の画像は、単なるデモではなく、猫ではありません)。 http://codepen.io/aguerrero/pen/pgvjoa そして、これはホームページでのレイアウト方法です: 問題は、不規則な形状の要素(矢印)が単なる画像のように見え、クリックできないことです。コンテンツをナビゲートするための一般的な方法ではありません。画像をクリックして操作できるようにするにはどうすればよいですか?それらはすでにホバー効果を持っていますが、あなたが偶然画像の上にマウスを置くまでそれは明らかではありません。
回答: nngには クリック可能な要素を認識可能にする 画像に関する特別な記事があります: クリックすると小さな画像が拡大することを確認します。 互いに関連付けられているすべての要素(画像、アイコン、テキストなど)をクリック可能にします。これにより、ターゲットサイズが増加し、意図したクリックがキャプチャされる確率が向上します。 ハイパーリンクの箇条書きリストや明確にラベル付けされたボタンなど、画像内のオプションが明確に提示されていない限り、特定の画像に対して複数の行動を促すフレーズを避けます。 あなたのホバー効果は素晴らしいスタートだと思います。あなたが探しているのは、これらの画像がクリック可能であることをユーザーが直感的に理解するのに役立つシグニファイアです。視聴者の年齢やその他の人口統計、サイトの目標によっては、ボタンのように見えるようにデザインを調整したり、戦略を続行したりすることが有利になる場合があります。たとえば、nngは millinnials as digital natives:myths and realities 、 page parking:millennials 'multi-tab mania 、そして最後に フラットデザインへの長期露出でクリック可能な要素を決定する機能を参照:トレンドがユーザーの効率をゆっくりと低下させる方法 ...若年成人ユーザー(18歳から30歳)は、たとえ記号がないか弱い場合でも、クリック可能な要素を検出する点で実際には高齢者よりも優れているようです。具体的には、若年成人は可能なターゲットをより迅速に識別します。 この現象にはいくつかの理由が考えられ、それらの任意の組み合わせが当てはまる可能性があります。 若い大人は、微妙な配置の手がかりにもっと慣れているかもしれません。 若年成人は、フラットインターフェイスやその他の探索的インターフェイス(ゲームなど)に頻繁にさらされている可能性があります。 若者は、クリックしがちな要素を認識し、新しいデザインパターンをすばやく習得することができます。 そして指摘し続ける: クリック可能な要素には常にある程度の視覚的シグニファイアを使用することをお勧めします —青いリンクなどの従来の強力なシグニファイアを使用するか、それとも微妙で弱いシグニファイア(ゴーストボタンなど)を使用するか。選択したデザインの美しさに関係なく、クリック可能なものを伝えるためのガイドラインに従ってください。クリック可能性を明確に伝えることは、ユーザーがコントロールできるようにするのに役立ちますが、それ以外の方法では利用できないことに気づかないかもしれないアクションをユーザーに促すことにも役立ちます。 主要な要素と機能については、ホバーを署名者を明らかにする唯一の方法として使用しないでください。セカンダリーコンテンツがホバーを使用すると、ユーザーのワークフローに自然に収まる場合は問題ないかもしれません。たとえば、eコマースサイトでは、ユーザーが商品の画像にカーソルを合わせると、その画像の隅に表示される微妙な虫眼鏡のアイコンにより、画像をクリックすると拡大するという期待が高まります。 審美的な魅力のために視覚的記号を除外する場合は、強力なフィードバックを提供するようにしてください。使いやすさのために、すぐに目立つフィードバックが常に必要ですが、ユーザーがそれらに自信がない場合はさらに重要になります。何がクリック可能かを知る。ユーザーが不確かなものをクリックすると、すぐに、正しい選択をしたという安心感を探し始めます。 いつものように、あなたの決定はユーザーの特性に影響されるべきです。若いユーザー向けに設計している場合、強いクリック可能性の記号なしで物事を理解できる可能性があります。受け入れる準備をしてください。ユーザーにインターフェースの「制御」を感じさせないことの結果。そして、いつものように、ユーザーが実際にインターフェイスをどのように処理するかを知るための最良の方法は、ユーザー調査と分析です。 インターフェースの文脈上の手がかりに注意してください。見出しに下線を引いて、リンクされていないことを伝えるだけでは十分ではありません。ユーザーは以前、同じ要素にシグニファイアがなくてもクリック可能であったという状況に遭遇した可能性があるため、シグニファイアのない要素をクリックする可能性が高くなります。 つまり、最初にユーザーベースのリスクを考慮して、厳密にリンクまたはボタンフォームでクリック可能な要素を認識できない場合はすべてです。デザインを続行したい場合は、シグニファイアのいくつかのアイデアを、行動の呼びかけとして画像のデザインに冗長に組み込んだり、ドロップシャドウなどのスキューモーモーフィズムの要素(これは私のお気に入りのソリューションではありませんが、オプションです) )。ホバー効果のような最初のシグニファイア以外のアイテムは非常に便利です。ユーザーが混乱させないように、色あせた画像や、インタラクティブではないサイトで矢印/グリッド効果を繰り返す画像を使用しないようにすることをお勧めします。別のアイデアは、ホバー効果に追加の非常に微妙なアニメーション遷移を追加して、色覚異常に苦しんでいる可能性のある人にそれを本当に明らかにすることです。 nngによって提案された画像を拡大するだけの簡単なもので十分かもしれません。あなたがコードサンプルを上げているので、あなたはおそらく利用可能な効果について良いアイデアを持っていますが、私はこのサイトを使ってアイデアを得るために hover.css サイトを得ています。