web-dev-qa-db-ja.com

リンクとアクション

この質問は少しあいまいかもしれませんが、とにかく私が尋ねると思いました。

私は自分のインターフェースに多くのリンクとアクションが表示されているアプリケーションに取り組んでいます。

ほとんどのアクションには、ある種のアイコンが付いており、黄色が適用されています。

リンクに黄色が適用されています。

私の問題は、いくつかの画面で、多くのリンクがあり、利用可能なアクションが実際に見つけるのを難しくしていることです。そこで、私は自分の行動を青に変えて、彼らがより目立つようにすることにしました。

リンクとアクションを別々の色にすることをお勧めしますか?それとも事態を悪化させると思いますか? screenshot

4
Mark

私はこのカラーブラインドチェッカー Coblis — Color Blindness Simulator を介して画像を実行しました。これは、単色性に苦しむ人にとってあなたのサイトまたはアプリがどのように見えるかです。

enter image description here

これを例にとると、ここにいくつかの問題があります

  • リンクには、リンクであるという視覚的なアフォーダンスはなく、色のないテキストのように見えます。リンクには、サイト上のコンテンツとは異なることをユーザーに知らせる下線などの視覚的なアフォーダンスが必要です。 MSDNのリンク設計パターンガイドラインに従って

基本的なガイドラインは、ユーザーが目視検査だけでリンクを認識できる必要があることです。オブジェクトの上にカーソルを置いたりクリックしたりして、それがリンクであるかどうかを判断する必要はありません。

色覚異常のユーザーを考慮しない場合でも(これは間違いです)、ユーザーがリンクを特定の色であると判断すると、ユーザーは混乱します(別の混乱しやすいものはリンクが黄色ですリンクに関連付ける通常の色ではありません)

  • 行動を促すフレーズとして、青いアイコンの付いた青いリンクを使用しています。ボタンの背景のために、まだ少し目立ちますが、コントラストが低くなっています。 「メンバーの追加」CTAはボタンであり、「印刷ビュー」と「エクスポートビュー」は単なるアイコンとテキストであり、アフォーダンスの欠如はユーザーをさらに混乱させる可能性があるため、行動を促すフレーズのデザインの一貫性の欠如も混乱を招きます。

リンクの視覚的アフォーダンスの重要性について読むことをお勧めする記事は次のとおりです

ハイパーリンク設計における視覚的アフォーダンスの重要性

行動を促すフレーズをデザインする方法に関する優れた記事はたくさんあり、 迅速なGoogle検索で効果的な行動を促すフレーズをデザインする方法について必要な答え が得られます。あなたの参照のためにここにいくつかあります:

行動を促すフレーズのボタン:例とベストプラクティス

マーケティング担当者がセカンダリCTAについて知っておくべきことすべて

5
Mervin

あなたのスクリーンショットに基づいてそれを追加したいのですが、クリック可能なものの一部は実際にはリンクではなくテーブルの列見出しのようです。

これは、テーブルにデータを表示するための列見出しのベストプラクティスに該当します。クリック可能であることは明らかであるだけでなく、データを並べ替え可能にするテーブルヘッダーの行であることも明らかです。

次に例を示します。

example

2
Pdxd