ストループ効果とUXデザインにおけるその意味合い

あなたの脳が相反する情報の流れを処理しようとしているとき、何が起こるのでしょうか?確認してみましょう。

この色のリストを自分で読んでください。

赤い

Green

Blue

Purple

Black

Brown

Yellow

赤い

Blue

Pink

オレンジ
ケーキですよね?あなたはただ一つのタスクとそれで簡単なタスクを行うことに集中しています。これを別の方法で試してみましょう。ここに表示されている色の名前を言ってください。

それもそれほど難しくありませんでした。あなたの脳は各色の名前を思い出すために少し苦労しなければなりませんでしたが、それでもかなり簡単な作業です。

次に、これを試してみてください:下に単語が印刷されている色を言ってください。

Yellow

赤い

Blue

Pink

Orange

赤い

Green

Blue

Purple

Black

Brown

それはかなり難しかったですね。脳に2つの相反する問題を同時に解決させると、物事はすぐに混乱する可能性があります。ストループ効果として知られるこの現象は、1935年に実験心理学者のジョン・リドリー・ストループによって初めて報告されました。ストループ効果は、カラーワードがワードと同じ色で印刷されている場合、カラーワードが単語とは異なるインクカラーで印刷されている場合と比較して、インクカラーにすばやく名前を付けることができることを示しています。

これを説明する1つは干渉です。幼稚園から、読書は人々が毎日実践する課題です。私たちはそれがとても上手になり、自動的に単語を読みます。単語を読む代わりに単語の色に名前を付けるように求められた場合、単語の自動読み取りは単語の色の名前付けを妨げます。もちろん、まだ可能ですが、脳からの信号を意図的に無視しなければならない場合、反応時間はかなり遅くなります。

UXデザインへの影響

では、これはUXデザインにとって何を意味するのでしょうか?まあ、それは簡単です–ユーザーの自然な思考プロセスを邪魔しないでください。誰かがあなたのインターフェースを簡単にナビゲートできるようにしたい場合は、自然に発生する人間の認知プロセスを利用するような方法で物事を設計する必要があります...また、混在するメッセージは最小限に抑えます。

たとえば、非常に一般的に誤って処理される「OK – キャンセル」パラダイムを考えてみましょう。

このインターフェースは、次の 2 つの異なる方法でユーザーを混乱させます。

1. どちらのボタンもまったく同じに見えます
2. 「リセット」ボタンは「送信」ボタンの右側にあります

2つのアクションは、外観が同一であるために区別が難しいだけでなく、配置も誤解を招く可能性があります。送信は前進するアクションであり、リセットは戻ることと同じです。

これをユーザーに提示することはありますか?

もちろんそうじゃないです。これと同じくらい、精神的に処理するのが難しいです。

RED       BLUE

これらのアクションボタンを直感的にするためには、何を変更できるのでしょうか?まず、彼らを理にかなった位置に置きましょう。

これが「キャンセル – OK」の例にどのように適用されるかを確認できます。

私たちはそこに到達していますが、まだいくつかの改善点があります。アクションの区別を明確にするための鍵の 1 つは、プライマリ ボタン スタイルとセカンダリ ボタン スタイルのセットを使用することです。これらは、色、影、テキストの処理の違いを利用できます。

「プライマリ」ボタン(この場合は「送信」ボタン)をより重視することで、ユーザーが誤って「リセット」を選択しないように保護します。インタラクションのあるポイントで、より一般的に実行される(またはデザイナーがより強く望む)アクションが常に1つあり、それが「主要な」役割を引き受けるアクションです。

この設計により、最もぼんやりとした(または反対の)ユーザーを除くすべてのユーザーが、実行しようとしているアクションを選択することが保証されます。

彼らのレベルまで歩かないでください

ですから、グレートデーンに「Tiny」と名付けるのは楽しいかもしれませんが、UXデザインは皮肉な芸術形式ではありません。ユーザーは常に、透明で直感的なエクスペリエンスを好みます。必要以上に物事を難しくしたくはありませんし、誤解を招くようなことは絶対にしたくありません。

今週末に何か楽しいことを探しているなら、オンラインで友達や家族にStroopテストを試してみてください: http://s3.mirror.co.uk/click-the-colour-and-not-the-word/index.html。