뇌가 상충되는 정보 흐름을 처리하려고 할 때 어떤 일이 일어날까요? 알아 보자.
이 색상 목록을 직접 읽어보세요.
빨강
Green
Blue
Purple
Black
Brown
Yellow
빨강
Blue
Pink
오렌지
식은 죽 먹기 맞죠? 당신은 단지 하나의 작업과 쉬운 작업을 수행하는 데에만 집중하고 있습니다. 이것을 다른 방법으로 시도해 봅시다. 여기에 보이는 색상의 이름을 말하십시오.
그것도 그리 어렵지 않았습니다. 당신의 뇌는 각 색의 이름을 기억하기 위해 조금 더 열심히 일해야 했지만 여전히 매우 간단한 작업입니다.
이제 이것을 시도하십시오 : 단어가 아래에 인쇄 된 COLOR를 말하십시오.
Yellow
빨강
Blue
Pink
Orange
빨강
Green
Blue
Purple
Black
Brown
꽤 어려웠죠? 뇌에 두 가지 상충되는 문제를 한 번에 해결하도록 하면 상황이 매우 빠르게 혼란스러워질 수 있습니다. 스트룹 효과(Stroop effect)로 알려진 이 현상은 1935년 실험 심리학자 존 리들리 스트룹(John Ridley Stroop)에 의해 처음 설명되었습니다. 스트룹 효과는 색상 단어가 단어와 같은 색상으로 인쇄될 때 색상 단어가 단어와 다른 잉크 색상으로 인쇄될 때보다 잉크 색상의 이름을 더 빨리 지정할 수 있음을 보여줍니다.
이에 대한 한 가지 설명은 간섭입니다. 유치원부터 읽기는 사람들이 매일 연습하는 과제입니다. 우리는 단어를 너무 잘해서 단어를 자동으로 읽게 됩니다. 단어를 읽는 대신 단어의 색을 지정하라는 요청을 받으면 단어의 자동 읽기는 단어의 색상을 명명하는 데 방해가 됩니다. 물론, 당신은 여전히 그것을 할 수 있지만, 뇌의 신호를 의도적으로 무시해야 할 때 반응 시간이 훨씬 느려집니다.
UX 디자인에 미치는 영향
그렇다면 이것이 UX 디자인에 의미하는 바는 무엇일까요? 글쎄요, 간단합니다 – 사용자의 자연스러운 사고 과정을 방해하지 마십시오. 누군가 당신의 인터페이스를 쉽게 탐색하기를 원한다면, 자연적으로 발생하는 인간의 인지 과정을 활용하는 방식으로 사물을 설계해야 합니다. 혼합된 메시지를 최소화하십시오.
예를 들어, 매우 일반적으로 잘못 처리되는 'OK – 취소' 패러다임을 생각해 보십시오.
이 인터페이스는 두 가지 방식으로 사용자에게 혼란을 줍니다.
- 두 버튼은 정확히 동일하게 보입니다.
- 'reset' 버튼은 'submit' 버튼 오른쪽에 있습니다.
두 동작의 모양이 동일하기 때문에 두 동작을 구별하기 어려울 뿐만 아니라 배치도 오해의 소지가 있습니다. 제출은 앞으로 이동하는 작업이며 재설정은 뒤로 이동하는 것과 동일합니다.
사용자에게 이것을 제시 한 적이 있습니까?
물론 아니에요. 정신적으로 처리하는 것은 다음과 같이 까다롭습니다.
RED BLUE
이러한 작업 버튼을 직관적으로 만들기 위해 무엇을 변경할 수 있습니까? 우선, 이치에 맞는 위치에 배치합시다.
이것이 '취소 – 확인' 예제에 어떻게 적용되는지 확인할 수 있습니다.
우리는 거기에 도달하고 있지만 아직 몇 가지 개선해야 할 점이 더 있습니다. 작업 구분을 지우는 핵심 중 하나는 기본 및 보조 단추 스타일 집합을 사용하는 것입니다. 이들은 색상, 그림자 및/또는 텍스트 처리의 차이를 활용할 수 있습니다.
'기본' 또는 이 경우 '제출' 버튼을 더 우세하게 만들어 사용자가 실수로 '재설정'을 선택하는 것을 방지합니다. 상호 작용의 주어진 지점에서 더 일반적으로 수행되는(또는 디자이너가 더 강렬하게 원하는) 작업이 항상 하나 있는데, 그것은 '기본' 역할을 맡는 작업입니다.
이 디자인은 가장 결석한(또는 반대되는) 사용자를 제외한 모든 사용자가 수행하려는 작업을 선택하도록 보장합니다.
그들의 수준으로 스트룹을 하지 마십시오
따라서 그레이트 데인의 이름을 '타이니'라고 짓는 것은 재미있을 수 있지만 UX 디자인은 아이러니한 예술 형식이 아닙니다. 사용자는 항상 투명하고 직관적인 경험을 선호합니다. 당신은 일을 필요 이상으로 어렵게 만들고 싶지 않으며 오해의 소지가 있기를 원하지 않습니다.
이번 주말에 할 수 있는 재미있는 일을 찾고 있다면 친구와 가족에게 온라인으로 스트룹 테스트를 시도해 보세요: http://s3.mirror.co.uk/click-the-colour-and-not-the-word/index.html.