日本語版
最新ニュース
企業

色を使って混乱を防ぎ、ユーザーを助ける

デザイナーとして、私たちは 色 ユーザーは、タスクを効果的かつ効率的に達成するために正しい方向に導かれます。しかし、ユーザーよりも会社のニーズを重視するデザイナーの中には、色が混乱を招く悪夢となり、ユーザーが本当に必要とするボタンや情報が隠れてしまうことがあります。ここでは、 色 選択肢は、ユーザーを支援し、混乱を防ぐために重要な要素です。下の古いメールニュースレターのメッセージを見てください。色はユーザーを混乱させ、登録解除方法を見つけるのを難しくする可能性があります。メール アドレスのフォントが灰色で、背景が少し明るい灰色だと、ユーザーが正確に何と書かれているかを見るのは非常に困難です。同様に、「登録設定」のテキストに下線が引かれていますが、ユーザーは必ずしもリンクを認識できません。これは、表示に使用されている色が紛らわしいためです。デザイナーは、登録解除のテキストにはっきりと青い下線を引いたテキストを使用するという慣例に従っていないため、 インラインリンクユーザーは、テキストが実際にはクリック可能でリンクされていることに気付かなかった可能性があります。多くの電子メール ニュースレター メッセージは、wonderbly.com のこの過去のメッセージに似たレイアウトになっています。登録解除のオプションは背景とのコントラストがほとんどない色で表示されていたため、オプションを見つけるのが困難でした。© ワンダブリー、フェアユースなぜこれがダークパターンに分類されるのでしょうか?色は前注意属性の1つです。色覚が完全な人は、視覚配列のこの要素を使用してアイテムを区別し、情報を即座に抽出できます。しかし、特定の色が組み合わされると、テキストを読んだり、提示された情報を即座に理解したりすることが非常に難しくなります。このため、ユーザーを1つの方法だけでなく複数の方法で混乱させる可能性があるという問題に遭遇します。 二:テキストの色と背景のコントラストが低いこうすると、テキストはユーザーの目に留まるほど目立たなくなります。さらに、ユーザーはようやくテキストを見つけたとしても、読みにくくなってしまいます。 の色彩 インラインリンク 非インタラクティブなテキストの色と同じです。 こうすることで、ユーザーは ない クリック可能なリンクを区別できず、関連する情報を見つける可能性を見逃してしまう可能性があります。Codecademyのこの古い例では、「利用規約」というテキストは一見するとクリックできるほど目立っていませんでした。 暗黙の了解 この設計パターンでは、このソリューションは、ユーザーがこれらの条件を読まずにサインアップするように誘導する可能性があります。© Codecademy、フェアユースここでカモフラージュについて考えているなら、それは正しい方向です。デザイナーにとってのリスクは、アイテムを隠すためであれ、アイテムを目立たせるためであれ、私たちが作るほぼすべてのものの要素をねじ曲げたり歪めたりできることです。ユーザーの目は パテ 人間の目がどのように機能し、脳と連動してヒントや手がかり、そして 幻想 ( ゲシュタルト原理 証明する)。必要に応じて、ユーザーの注意を要素に引き付け、アクションを促すことができます。また、メッセージをミュートして非表示にすることもできます (「細かい文字」と呼ばれることが多い)。これにより、ユーザーは気にせずに続行します。ここで、ユーザーが何らかの損失を被る可能性があるかどうかを自問する必要があります。答えが「いいえ」であれば、私たちはもっと安心して、ユーザーをより前向きな (または少なくとも無害な) 方法でガイドし、製品でユーザーが望むことを本当に達成できるように支援する方法を検討できます。「色はデザインに心地よい品質を加えるのではなく、それを強化するのです。」— ピエール・ボナール、フランスの画家、版画家、ポスト印象派の前衛画家集団「ナビ派」の創立メンバーテキストと似た色の背景を使用すると、ユーザーは表示内容を読むためにディスプレイにもっと注意を向けなければなりません。ユーザーに見られたくない場合は、このように色を組み合わせると、情報をこっそりとユーザーに伝えることができます。情報はそこにあります。デザイナーがそれを隠すことができるだけです。まるで使い古した黄色の蛍光ペンでページに書き込むのと同じです。 そしてデザイナーの中には ない ユーザーに情報を見逃させたくないが、単に 少し 特定の行動を取るのが難しくなります。たとえば、ニュースレターの購読を中止するなどです。デザイナーは別の方法を検討します。 ダークパターン あるいは、コマンドを通常の位置から外したり、手順に余分な面倒な手順を追加したりするなど、自己中心的な操作を行う。…
お問い合わせ・広告・著作権・不具合に関するご連絡は [email protected] までメールでお願いします。

色を使って混乱を防ぎ、ユーザーを助ける

1719426513
2024-06-13 06:00:00

デザイナーとして、私たちは ユーザーは、タスクを効果的かつ効率的に達成するために正しい方向に導かれます。しかし、ユーザーよりも会社のニーズを重視するデザイナーの中には、色が混乱を招く悪夢となり、ユーザーが本当に必要とするボタンや情報が隠れてしまうことがあります。ここでは、 選択肢は、ユーザーを支援し、混乱を防ぐために重要な要素です。

下の古いメールニュースレターのメッセージを見てください。色はユーザーを混乱させ、登録解除方法を見つけるのを難しくする可能性があります。メール アドレスのフォントが灰色で、背景が少し明るい灰色だと、ユーザーが正確に何と書かれているかを見るのは非常に困難です。同様に、「登録設定」のテキストに下線が引かれていますが、ユーザーは必ずしもリンクを認識できません。これは、表示に使用されている色が紛らわしいためです。デザイナーは、登録解除のテキストにはっきりと青い下線を引いたテキストを使用するという慣例に従っていないため、 インラインリンクユーザーは、テキストが実際にはクリック可能でリンクされていることに気付かなかった可能性があります。

多くの電子メール ニュースレター メッセージは、wonderbly.com のこの過去のメッセージに似たレイアウトになっています。登録解除のオプションは背景とのコントラストがほとんどない色で表示されていたため、オプションを見つけるのが困難でした。

© ワンダブリー、フェアユース

なぜこれがダークパターンに分類されるのでしょうか?

色は前注意属性の1つです。色覚が完全な人は、視覚配列のこの要素を使用してアイテムを区別し、情報を即座に抽出できます。しかし、特定の色が組み合わされると、テキストを読んだり、提示された情報を即座に理解したりすることが非常に難しくなります。このため、ユーザーを1つの方法だけでなく複数の方法で混乱させる可能性があるという問題に遭遇します。 :

  • テキストの色と背景のコントラストが低いこうすると、テキストはユーザーの目に留まるほど目立たなくなります。さらに、ユーザーはようやくテキストを見つけたとしても、読みにくくなってしまいます。

  • の色彩 インラインリンク 非インタラクティブなテキストの色と同じです。 こうすることで、ユーザーは ない クリック可能なリンクを区別できず、関連する情報を見つける可能性を見逃してしまう可能性があります。

Codecademyのこの古い例では、「利用規約」というテキストは一見するとクリックできるほど目立っていませんでした。 暗黙の了解 この設計パターンでは、このソリューションは、ユーザーがこれらの条件を読まずにサインアップするように誘導する可能性があります。

© Codecademy、フェアユース

ここでカモフラージュについて考えているなら、それは正しい方向です。デザイナーにとってのリスクは、アイテムを隠すためであれ、アイテムを目立たせるためであれ、私たちが作るほぼすべてのものの要素をねじ曲げたり歪めたりできることです。ユーザーの目は パテ 人間の目がどのように機能し、脳と連動してヒントや手がかり、そして 幻想ゲシュタルト原理 証明する)。必要に応じて、ユーザーの注意を要素に引き付け、アクションを促すことができます。また、メッセージをミュートして非表示にすることもできます (「細かい文字」と呼ばれることが多い)。これにより、ユーザーは気にせずに続行します。ここで、ユーザーが何らかの損失を被る可能性があるかどうかを自問する必要があります。答えが「いいえ」であれば、私たちはもっと安心して、ユーザーをより前向きな (または少なくとも無害な) 方法でガイドし、製品でユーザーが望むことを本当に達成できるように支援する方法を検討できます。

「色はデザインに心地よい品質を加えるのではなく、それを強化するのです。」
— ピエール・ボナール、フランスの画家、版画家、ポスト印象派の前衛画家集団「ナビ派」の創立メンバー

テキストと似た色の背景を使用すると、ユーザーは表示内容を読むためにディスプレイにもっと注意を向けなければなりません。ユーザーに見られたくない場合は、このように色を組み合わせると、情報をこっそりとユーザーに伝えることができます。情報はそこにあります。デザイナーがそれを隠すことができるだけです。まるで使い古した黄色の蛍光ペンでページに書き込むのと同じです。

そしてデザイナーの中には ない ユーザーに情報を見逃させたくないが、単に 少し 特定の行動を取るのが難しくなります。たとえば、ニュースレターの購読を中止するなどです。デザイナーは別の方法を検討します。 ダークパターン あるいは、コマンドを通常の位置から外したり、手順に余分な面倒な手順を追加したりするなど、自己中心的な操作を行う。 身を引く チェックボックスは、ユーザーが意識的にチェックしなければ自分の情報を共有したり購読を申し込んだりするのを防ぐことができます。または、チェックボックスをオフにすることもできます。デザイナーは、ユーザーがチェックボックスを読んでオフにしなくても、「OK」をクリックするだけで、たとえばニュースレターを自動的に購読できるデフォルト オプションを設定できます。また、デザイナーが目立たない色を使用すると、コントラストがないため、ユーザーが混乱して、意図せずに不要なものを購読してしまう可能性もあります。

別の古い例では、Shutterstock は特定のサブスクリプションを目立たせるために色を使用しました。グレースケールが使用されているため、他のサブスクリプションは非アクティブのように見えます。

© Shutterstock、フェアユース

時には、魅力的なサブスクリプションやお得な情報を目立たせることが重要です。上記のように、色は無害なものです。 味方それをうまく使えば、ターゲットを的確に捉えられるだけでなく、ユーザーにあまり注目してほしくないものを隠すこともできます。クライアントが倫理的な組織である限り、望ましいターゲットを巧みに強調しながら、必要な(あまり望ましくない)要素や情報を含める際にはユーザーの目を引かない色を選択することで、クライアントに付加価値を与える方法を計画する十分な余裕があるはずです。

色彩を巧みに操る豊富な可能性を考える際、もう1つ考慮すべき点があります。赤と青、青と赤の相互作用など、「大失敗」の選択を避けることに加え、何らかの形で 色覚異常、特に赤と緑の要素については、常に「何を見せたいのか、なぜ見せたいのか?」「強調したくないことはあるか、なぜなのか?」と自問し、次のような倫理的配慮とバランスをとるようにしてください。 アクセシビリティ ユーザーの行動や結果が予測できる。とはいえ、適切な色の選択によって、ユーザーを次の行動に誘導できることに驚くかもしれません。 変換 彼らが望むものを、望む場所で手に入れられるよう手助けしながら、一切策略を使わずに領土を守ります。

まとめ

色は 使いやすさ インターフェースの色合いは、色彩の美しさを左右します。適切なコントラストがあれば、ユーザーは自分のタスクに関連するコンテンツをすばやく見つけることができます。しかし、インターフェース作成者は、色彩をそれほど高尚ではない目的に使用することもできます。企業がユーザーをだましてより高価なサブスクリプション オプションを選択させたい場合や、特定の「登録解除」オプションを見つけにくくしたい場合、デザイナーは色彩に関する同じ知識を暗い方法で使用できます。注意をそらすために低いコントラストを選択したり、ユーザーを引き付けて行動を誘導するために明るい色を選択したりできます。したがって、責任あるデザイナーになりましょう。ユーザーに害を与えず、手を差し伸べる相手にとってのメリットを最大化し、関係者全員が Win-Win の状況を作りましょう。

参考文献と詳細情報

ヒーローイメージ: © Unsplash、CC0。

ジェニファー・ティドウェル インターフェースの設計:効果的なパターン インタラクションデザイン2010

マルティン・ファン・ヴェリー パターンライブラリ2008

ハリー・ブリグナルのウェブサイト ダークパターン

#色を使って混乱を防ぎユーザーを助ける

執筆者について: nipponese

Nipponese News編集部は、国内外のニュースを日本語で分かりやすくお届けします。