さまざまな種類のクリック可能な図形を識別しますか？
インタラクティブなフローチャートのようなアプリケーションを構築しています。ユーザーがフローチャートを表示しているときに、特定の図形を操作できます。
- 別のフローチャートへのリンク。
- 外部ファイルへのリンク
- クリックすると詳細が表示されるポップアップ。
私が遭遇した問題は、図形がクリック可能であることを適切に識別する方法と、クリックしたときに発生するアクションです。
これらは私たちの現在のアイデアです：
フローチャートリンク：
外部ファイルリンク：
ポップアップ：
形状の上にカーソルを置くと、ポインタカーソルも追加されます。しかし、私はこれらを非常に直感的で明確なものとして受け入れるのに本当に苦労しています。 FWIW-各形状は、異なるジオメトリ（長方形、菱形、楕円）と色を持つこともできます。
より良いアイコンの提案もお願いします。
隅にあるこれらの小さなマーカーは非常に微妙です。両者に違いがあることを理解するのにしばらく時間がかかりました。
次のいずれかを実行して、リンクのマーク方法を変更することを強くお勧めします。
- アイコン自体は良い選択ですが、非常に小さく目立ちません。私はサイズを大きくするを提案し、異なる色にすることもできます。
- 色を使用違いを示します。おそらく、背景に異なる色を与えることによって。画像を使用する場合は、画像ごとに異なる境界線を使用することを検討してください。
- 最後に、それがPCのみのアプリケーション（つまり、モバイルなし）である場合、誰かがこれを示しているときに画像の上に、より大きなmaskを追加します。しかし、アイコンに加えてこれを使用してください。そうしないと、誰かがそれが何であるかを知る前にホバーする必要があります。
第一に、私は現在のアイコンに熱心ではありません。ハイパーリンク画像は認識できますが、他の画像は識別が非常に困難です。フローチャートアイコンはポップアップアイコンのように簡単に見え、逆もまた同様です。これらはまだいくつかの作業が必要だと思います。
次に、背景をシェーディングし、わずかなドロップシャドウでそれらを浮き上がらせ、微妙なグラデーションで曲がりを与え、より目に見えるホバー効果を使用して（通常はボタンを部分的に押すか、少しシェーディングする）、形状にアフォーダンスを追加します。また、通常は白いドロップシャドウを追加してインデント効果を作成することにより、境界線に奥行き効果を与えることもできます（白い背景以外でのみ機能します）。最後に、モバイルでは、形状に内側の影を使用して「押しやすさ」を示すのに役立てることもできます（これは、iOSアプリストアでのCTAボタンの動作方法です）。
アイコンをフローチャートの図形の外側に表示し、マウスオーバーでアイコンを目立たせる（塗りつぶすか、色を付ける）ことを検討してください。また、マウスオーバー時に表示されるツールチップを追加して、それが何であるか、または正確なアイコンが明確でない場合の動作を説明するのに役立ちます。
以下の例の画像では、フローチャートの四角形の右の境界に、アイコン/インタラクションを薄い灰色で格納する図形の外側に追加のマージンがあります。アクティブな領域（おそらくマージン全体）にカーソルを合わせると、インタラクティブな性質を強調するためにアイコンが強調表示/色付けされ、ツールチップ「ポップアウト」「リンク」なども含めることができます。
*速度を考慮して、このイラストは「パルス」の鮮やかなデザイン（ http://www.Pulse.me/ ）からキャプチャしたものです。このイラストは、私自身の作品のすべてではありません。 ...