色が UX とユーザーの行動に与える影響
公開: 2016-12-24色: デザインがうまくいくと、おそらく気付かないでしょうが、うまくいかないときは? 背景が明るすぎたり、目障りな背景だったり、暗い灰色の背景に黒のテキストだったりしても問題ありません。 デザインの他の側面と同様に、色はアプリにスパイスを加えるためだけのものではありません。 色は、ユーザー エクスペリエンスの他の機能と同様にツールになり得ます。
各要素のサイズから、UI 上でのスライド方法、そして色まで、アプリのデザインに使用されるグラフィック デザインの哲学は、ユーザーの行動に影響を与えます。 結局のところ、デザイナーがプロジェクトの最初の数か月間、ワイヤーフレームではなくカラー パレットに悩まされるのには十分な理由があります。
完璧なパレットを選ぶことは、実際にユーザーがリラックスするのに役立つ瞑想アプリを設計するか、壁に電話を投げつけたくなるような瞑想アプリを設計するかの違いになる可能性があります. 残高の確認に神経質になる銀行アプリと、次の給料がいつ来るかという不安を和らげてくれる銀行アプリとの違いはここにあります。
では、どうすればそれを正しく理解できるのでしょうか? また、デザインの色をマスターするにはどうすればよいでしょうか?
グラフィックデザイン哲学：色の理論
グラフィック デザインの哲学 (および心理学) の詳細に入る前に、色とデザインの基本原則を理解することが重要です。 色は非常に複雑なテーマのようには見えないかもしれませんが、すべてのアート クラスが、色の使い方だけでなく、色の作り方のレッスンから始まるのには十分な理由があります。
カラー ホイールで説明されているように、基本は単純です。原色 (赤、黄、青) を組み合わせて二次色 (緑、紫、オレンジ) を作成できます。 同様に、白のさまざまな部分を色に追加して色合いを作成したり、黒を追加して陰影を作成したりできます。
互いに反対の色 (赤と緑、青とオレンジなど) は補色と見なされます。 これらの色はコントラストが強く、隣同士 (または上) に並べると際立ちます。
隣同士の色は類似色と見なされます。 これらの色はコントラストがはるかに低く、近くに置いてもあまり目立たない傾向があります。
コントラストの高い色または低い色について、本質的に「正しい」または「間違っている」というものは何もありません。 場合によっては、アプリケーションで、互いにはっきりと対照的な明るい色が必要になることがあります。 また、もう少し優しいものが欲しい場合もあります。 一般的に、何かを目立たせたいほど、対照的な色に頼る必要があります。
色がどのように調和するか (そして調和しないか) を感じる最良の方法は、それらをいじってみることです。 現在、プロジェクトに取り組んでいない場合でも、Adobe のカラー ホイールをちょっとひねると、色について新しい考え方が生まれるかもしれません。
感情の見本: 色と心理学
アプリの背後にあるグラフィック デザインの哲学を固めるときは、物事がどのように見えるかだけを考えているのではなく、それらがどのように感じられるかを考えなければなりません。 触覚フィードバックについても話していません。 ヨハン・ヴォルフガング・ゲーテが色の生理学的効果を研究して以来、私たちは色を使って身体的および感情的な効果を生み出すことに夢中になっています.
今日でも、色は多くのブランドのデザイン哲学の中心となっています。 ヘルスケア、ビジネス、および政府はすべて、信頼感とプロフェッショナリズムを与えるため、青を使用する傾向があります. 緑はエネルギーに満ちた若々しい色と見なされており、もちろん、環境保護と自然への親近感を反映しています。 赤はエネルギッシュで衝動的で、スピード、効率、パワーの印象を与えます。 私たちが目にするすべての色 (そして確かに特定のブランドに本質的に関連するすべての色) は、直接的または間接的に、個々のブランドに対する私たちの認識を促進するのに役立つ何かを暗示しています。
あなたが認識しているブランドやシンボルは、非常に色を重視していると考えてください。 アップル、ウィキペディア、ニューヨーク タイムズはいずれもグレースケール カラーを採用しており、落ち着いた信頼性を象徴しています。 これらのブランドは、バランスが取れていて信頼できると見なされています。 Whole Foods、John Deere、および Starbucks はすべて、ロゴに緑の色合いが特徴で、自然と健全性をブランドと製品に結び付けています。
一部の色はブランドを超えて、業界全体を定義しています。 たとえば、赤や黄色の配色を使用しているファースト フードやレストラン チェーンの数を考えてみてください。 これらの色は私たちを精神的に刺激し、ある種の製品を購入するよう促す特定の心理的な場所に私たちを置きます.
これはマーケティング担当者がずっと前に考え出したことですが、科学は色に対する私たちの相互の感情の多くを正当化します. たとえば、赤は、特定の刺激に対してより速く、より強く反応する人がいることがわかっています. また、威嚇することもできます。研究者は、受験者が赤い色を見たとき、スコアが悪くなることを発見しました。
さらに見知らぬ人？ 錠剤の色は、その作用にわずかな影響を与えます。 青い錠剤は鎮静剤として、黄色は抗うつ剤として、そしていずれの場合も明るい色が最も効果的です。 これは、実際の投薬に対する私たちの反応を高めるプラセボ効果に過ぎない可能性がありますが、この効果は、企業が新しい医薬品を製造する際に考慮するのに十分なほど強力です.
気分追跡アプリで黄色ベースの配色を使用することが抗うつ剤として効果的であると言っているわけではありませんが、選択したカラー パレットがユーザーの気分に影響を与える可能性があるため、賢明に選択してください。
あなたにおすすめ:
メタバースがインドの自動車産業をどのように変革するか
反営利条項はインドのスタートアップ企業にとって何を意味するのか?
Edtech スタートアップがインドの労働力のスキルアップと将来への準備をどのように支援しているか...
今週の新時代のテック株：Zomatoのトラブルは続き、EaseMyTripはスト...
インドの新興企業は資金調達を求めて近道をする
デジタル マーケティング プラットフォームの Logicserve が 80 億ルピーの資金を調達し、LS Dig...
色と使いやすさ
デザインとは見た目の美しさだけではありません。UX デザイナーにとって間違いなく最も重要な 2 つの原則である、機能性と使いやすさです。 UX がスムーズでなければ、選択したカラー パレットがどれほど美しくても、UI がどれほど素晴らしいものであっても意味がありません。 ユーザーが効率的にスワイプできない場合、持続力はありません。
しかし、色はそのすべてと何の関係があるのでしょうか?
シンプル: 色は目を導くのに役立つツールです。 色を効率的に使用できれば、長いチュートリアル、一連の複雑なビデオ、または一言も言わずに、新しいユーザーをアプリに誘導することができます。 直感的な UI は色を使用して、ユーザーの注意を向けるだけでなく、エクスペリエンス全体とのやり取りも指示します。
ちょっと想像してみてください。大規模な組織が食品の注文を簡単にカスタマイズできるケータリング会社向けのアプリを開発しているとします。 潜在顧客が初めてアプリをダウンロードして開きます。 彼らは何を見ますか？
アプリでは、ほとんどのメニュー項目 (背景や情報ボックスを含む) が、落ち着いた、くすんだグレー スケール カラーのパレットで色付けされています。 唯一の例外は、「注文」と書かれたオレンジレッドのボックスです。 設計者として、ユーザーがアプリを使用しているときに最もやりたいことは、簡単に食べ物の注文を設定することであることを知っています。 この機能をアプリの奥深くに隠したり、ページを下にスクロールしてアクセスする必要があるのではなく、最前面に配置します。 それだけでなく、すぐに彼らの目を引きます。 色は目立たせるのに役立ち、新しいユーザーがどこに行く必要があるかを正確に示します。
同様に、私たちは日常的にさまざまな方法で色と相互作用し、心の中で特定の社会的関連性を築き上げています. 信号機を例にとると、緑は進行、赤は停止、黄色は減速を意味します (または、前方に何かがあることを知らせてくれます)。 重要な警告を黄色で表示したり、赤色で何かを強調したりすることで、ユーザーに入力を促すメッセージを強力に伝えることができます。
ただし、同じロジックを警告画面以外にも使用できます。 アプリ内購入につながるアプリのボタンの色を変更すると、コンバージョン率に大きな影響を与える可能性があります。
アプリ内ではありませんが、HubSpot は、ボタンを緑ではなく赤にするだけで、コンバージョン率が 21% 増加することを発見しました。 これは、すべてのアプリ内購入ボタンを明るい深紅色に変更する必要があるという意味ではありませんが、色は単にデザイン哲学の一部であってはならないという議論があります。アプリ開発の哲学全体。
色を賢く使う: デザインとアクセシビリティの哲学
Proto.io では、アクセシビリティは常にデザイン哲学の最前線にあります。 率直に言って、アクセシビリティは優れたデザインに組み込む必要があるものです。 そこにない場合、デザインは単にあまり良くありません。
男性の約 8%、女性の 0.5% が何らかの形の色覚異常を持っています。 一般に考えられていることとは反対に、特定の種類の色覚異常はありませんが、赤/緑の色覚異常が最も一般的です。 この形態の色覚異常に苦しむ人は、通常、赤と緑の両方のバリエーションを見るのに苦労します。 この形態の色覚異常の重症度はかなり異なりますが、軽度の赤/緑の色覚異常でさえ、多くのアプリの使用が実質的に不可能になる可能性があります.
色覚異常以外では、近視のユーザーは、画面を顔に近づけない限り、コントラストの低いテキストを読むのに苦労することがよくあります。これは、多くのアプリの使いやすさを損なう可能性があります。
これらの問題の両方に対する解決策は非常に簡単です。背景にテキストを表示するときは、コントラストのない色を使用しないでください。 すべての人が意図したとおりにアプリを表示できるとは限りませんが、対照的な色を使用している場合は、少なくともユーザーが使用できるアプリを提供することになります. 同様に、コントラストの高い色を使用すると、視覚に問題がない場合でも、テキストが読みやすくなります。
アクセシビリティを高めるもう 1 つのオプションは、アプリで交換可能なカラー パレットを提供することです。 これは万人向けのオプションではありませんが、アプリのアクセシビリティを大幅に向上させることができます。 ユーザーが特定の機能の色を変更できるようにすることもできます。 たとえば、アプリのアクセント カラーやアプリ全体のテキストの色を変更するオプションを用意できます。 これらのオプションは両方とも、ある程度の制御を奪う可能性がありますが、より多くのユーザーがアプリにアクセスできるようになります。
アプリのアクセシビリティを損なわずに色をデザイン哲学に統合する方法をまだ見つけられていない場合は、Google のマテリアル デザイン ライブラリをチェックすることをお勧めします。
完璧なパレットを選ぶ: デザイン哲学を固める
色に関して従うべきいくつかのルールがあることは明らかですが、それは必ずしも科学的ではありません. 色はしばしば、感触などのより抽象的なものに関するものです。 アプリがユーザーの感情を表現しようとしていないとしても、そうではないというわけではありません。 完璧なパレットを見つけることは白黒の努力ではありませんが、グレースケールから始めることをお勧めします。
グレースケール グラデーションでアプリのフラット プロトタイプを作成し、それをベースラインとして使用します。 それがどのように見えるか、どのように感じられるかを書き留めてください。それを QA チームに渡し、彼らの意見を見てください。 オンボーディング プロセスは色のない曖昧なものですか? アプリの間違った部分に注意を向けていませんか? このフィードバックを基に、さらにいくつかのプロトタイプをデザインし、今度は色を付けます。 単一のパレットに依存しないでください。 代わりに、Google のマテリアル デザイン Web サイトからヒントを得て、いくつかのスウォッチを試してみてください。
これらの改訂も QA に送信します。 それらを相互に (および元のグレースケール バージョンに対して) A/B テストすることを恐れないでください。 争いに持ち込む色について、難しい質問をしていることを確認してください。 アプリでユーザーの目を誘導するために色を使用していますか? 火花を追加するために画面に色を投げているだけですか? 色は、ユーザーが行きたい場所にたどり着くのを妨げていますか?
ユーザーの心理やアクセシビリティを忘れないでください。 旅行アプリを作成している場合、本当にすべてを真っ赤にしたいですか? ヘルスケア アプリを作成している場合、背景を本当に緑にする必要がありますか? テキストを読みやすくするために、色のコントラストは十分ですか?
優れた UX デザインは、これらすべての質問を考慮に入れています。結局のところ、色はユーザーの行動と楽しみに決定的な影響を与えます。 あなたの設計哲学がこれを考慮していない場合、あなたが思っているほどアクセスしにくく、使いにくいアプリを作っている可能性があります。 あらゆる段階でデザインのプロトタイプを作成していることを確認し、1 つまたは 2 つの色にこだわりすぎないようにします。
試して別の色を選び、自分にぴったりのパレットが見つかるまで修正を続けます。