디자인 심리학과 멋진 UX의 신경과학

이 기사의 오디오 버전을 들어보세요

특정 디자인이 당신의 시선을 사로잡고 피를 뿜어내는 이유에 대한 과학이 있습니다.

인간의 두뇌는 게으르고 편향되어 있으며 지름길을 사용하는 경향이 있습니다.

인간 인지에 대한 사용자 경험 연구는 흐릿하고 비과학적이며 잘못된 가정으로 가득 차 있을 수 있습니다. 아마도 이것은 게으른 두뇌의 잘못일 것입니다.

인지는 복잡하며 많은 요인이 장 반응이나 즉각적인 인상에 영향을 미칩니다. 누군가에게 "왜 그랬어요?"라고 물을 때 그들이 대답하지 못하거나 당신이 그들의 대답을 잘못 해석할 가능성이 높습니다 .

신경과학 입문.

관찰 및 인터뷰와 같은 연구 방법을 사용하려면 UX 연구원과 참가자가 추측을 해야 하는 경우가 많지만 시선 추적과 같은 현대 기술 을 사용하면 연구자가 거의 감지할 수 없는 반응 및 선호도를 연구할 수 있습니다 .

트래픽이 많은 제품의 경우 버튼 너비나 텍스트의 색상 대비와 같이 겉보기에 아주 작은 세부 사항이 수백만 달러의 차이를 만들 수 있습니다. 이것이 바로 Facebook 및 Google과 같은 거대 기술 기업이 사람들이 제품을 사용하는 방식을 연구하기 위해 신경과학 기반 기술을 사용하기 시작한 이유입니다.

반응형 "빠른 사고"에 대한 소개로 시작하여 디자이너가 훌륭한 사용자 경험을 만들기 위해 신경과학의 힘을 활용하는 데 도움이 되는 몇 가지 팁을 제공하겠습니다.

디자인 심리학: 빠른 사고, 느린 사고

인간의 행동을 이끄는 많은 부분이 잠재의식이라는 것은 비밀이 아닙니다. 사람이 새로운 앱이나 웹사이트를 만난 후 1000분의 1초 안에 수백만 개의 뉴런이 작동하고 뇌는 수백 가지의 무의식적인 결정을 내립니다.

내가 "올바른" 위치에 있습니까? 이 사이트를 믿어야 하나요?

YouTube UX 연구원인 Javier Bargas-Avila는 2012년 연구에서 사람들이 웹페이지에 노출된 후 처음 17~50밀리초 안에 미적 반응을 형성 한다고 밝혔습니다.

이를 원근법으로 이해하려면 눈을 깜박이는 데 300~400밀리초가 걸립니다. 귀하의 제품은 눈 깜짝할 사이에 재판, 판결, 선고를 모두 받을 수 있습니다.

이러한 노출은 등록되지 않을 수 있지만 행동에 영향을 미칩니다. 예를 들어, 사이트가 느리게 로드되고 두뇌가 "주제에서 벗어난" 항목으로 로드되는 첫 번째 항목을 읽는 경우 사용자는 사이트가 로드되기를 기다리지 않고 즉시 다른 곳으로 이동할 수 있습니다.

Facebook과 같은 회사는 요소의 로드 순서를 연구하는 데 상당한 리소스를 투자합니다. 누군가 Facebook에 로그인했는데 알림 배지가 표시되지 않으면 즉시 다른 곳으로 이동할 수 있습니다. 배지가 먼저 로드되면 콘텐츠가 많은 뉴스피드가 로드되는 동안 기다릴 수 있습니다.

노벨상 수상자인 Daniel Kahneman의 책 사고, 빠르고 느림은 인간의 생각과 의사 결정을 두 가지 시스템으로 나누어 차이점을 설명하는 데 도움이 됩니다.

시스템 1: 빠르고, 자동적이며, 빈번하고, 감정적이며, 고정관념적이며, 잠재의식입니다.

시스템 1 사고는 반응 적입니다. 물체 사이의 거리를 결정하거나 감정적 반응을 결정하는 것과 같이 복잡하지만 본능적인 인식을 담당합니다. 당신의 게으른 두뇌는 일반적으로 시스템 1 사고를 기본으로 합니다.

시스템 2: 느리고, 힘들고, 논리적이고, 계산적이며, 의식적이며, 드물게 발생합니다.

시스템 2 사고는 분석적 이며 적절한 사회적 행동을 결정하거나 가격과 특성이 다른 두 제품을 비교하는 것과 같은 보다 복잡한 시나리오에 적용됩니다.

뇌는 새로운 시나리오에 직면할 때마다 정보를 재처리하거나 새로운 결정을 내리는 것을 원하지 않기 때문에 인간의 의사 결정 대부분은 시스템 1 또는 "빠른 사고"에 속합니다.

빠르게 결정을 내릴 때 뇌는 도식이나 정신 모델 , 즉 친숙한 정보 패턴과 상호 작용에 지나치게 의존할 수 있습니다 . 시스템 1 사고가 개입되면 시스템 2가 효력을 발휘하지 못합니다. 사람들은 뇌의 의사 결정 속기를 인식하지 못할 수도 있지만, 이는 제품에 대한 행동과 인식에 강한 영향을 미칩니다.

디자인 심리학 과학

인간의 뇌는 전체 질량의 2%에 불과하지만 신체 산소의 무려 25%를 소비합니다. 두뇌는 생존 메커니즘으로 게으르다. 패턴 인식과 지름길은 상황을 의식적으로 처리하는 데 소비되는 에너지가 적다는 것을 의미합니다 . 뇌는 사물을 식별하고 라벨을 붙이고 다시 관련이 있을 때까지 무시합니다.

패턴에 대한 두뇌의 선호와 게으른 의사 결정은 생존을 더 쉽게 만들지 모르지만 UX 디자인을 더 어렵게 만듭니다. 연구 대상도 인식하지 못하는 것을 어떻게 연구합니까?

최근 몇 가지 신경과학 기술이 UX 연구에 뛰어들어 연구자 들이 "빠른 생각"을 자극하는 것에 대해 밝힐 수 있도록 도왔습니다.

시선 추적 카메라로 주의력과 지각력을 연구할 수 있습니다. 감정적 반응과 각성은 피부 센서 또는 얼굴 분석으로 결정할 수 있습니다. 뇌의 전기적 반응은 뇌파검사로 측정할 수 있습니다.

디자이너에게 눈 깜짝할 사이에 누군가의 관심을 사로잡고 중요한 정보를 전달하는 것은 불가능한 작업처럼 들릴 수 있습니다. 다행히도 신경과학이 문제 진단에 도움이 될 수 있는 것처럼 일반적인 솔루션과 모범 사례도 드러낼 수 있습니다.

다음은 디자이너가 디지털 제품을 디자인할 때 사용할 수 있는 신경과학 사용자 경험 연구에서 얻은 몇 가지 일반적인 교훈입니다.

디자인 심리학 팁 #1: 식별하기 쉽게 만드세요

누구나 웹사이트나 앱이 어떤 모습일지 어느 정도 기대하면서 방문합니다. 이러한 기대에 가깝게 유지하면 디자이너가 즉각적인 잠재의식적 의사 결정을 통해 이점을 얻을 수 있습니다.

귀하의 앱이나 웹사이트를 여는 사람이 알고 싶어하는 것) 내가 찾고 있는 것이 여기에 있습니까? 그리고 b) 이것은 고품질입니까? 디자인을 단순하게 유지하고 브랜드, 서비스 및 제품을 전면 및 중앙에 유지 하면 사람들이 방향을 잡는 데 도움이 됩니다.

일부 정보를 전면 중앙에 배치한다는 것은 다른 정보가 밀집되지 않도록 하는 것을 의미합니다. 디자인을 깔끔하게 정리하는 것은 구성 요소를 재배치하는 것만큼 중요합니다.

기술 회사 전반에서 더 단순하고 덜 복잡한 인터페이스로의 움직임을 볼 수 있습니다. 이러한 미니멀리스트 디자인은 작업 완료에서 더 복잡한 디자인보다 우수하며 시각적 선명도는 온/오프라인 구매 결정에 영향을 미치는 것으로 나타났습니다.

시각적으로 단순하고 깔끔한 디자인이 더 나은 성능을 발휘한다는 것이 과학적으로 입증되었습니다. 게으른 두뇌는 사이트의 목적을 즉시 파악하고 취해야 할 조치를 이해할 수 있습니다.

디자인 심리학 팁 #2: 다가오는 것을 표시하십시오

예정된 정보 또는 상호 작용을 위해 준비하거나 누군가를 준비시키면 사용자가 새로운 정보를 이해하고 반응하는 능력을 향상시킬 수 있습니다. UI 요소, 특정 상호 작용 또는 프로세스의 타이밍과 같은 것을 기대하도록 누군가를 준비시킬 수 있습니다.

예를 들어, Yelp는 사용자에게 Yelp를 떠나 타사 사이트를 방문하도록 경고하는 추가 화면을 사용합니다. 추가 컨텍스트는 사용자가 새로운 디자인 및 정보 아키텍처를 기대하도록 신호를 보내는 데 도움이 됩니다.

프라이밍은 양날의 검입니다. 의사 소통을 의도하지 않은 정보는 여전히 의사 결정에 영향을 미칠 수 있습니다 . 예를 들어 사진 회사에서 아기 사진만 제공하는 경우 영유아 고객에게만 서비스를 제공한다는 가정이 잘못된 것일 수 있습니다.

디자인 심리학 팁 #3: 게으른 독자를 위한 정리

시선 추적 연구는 제품과 상호 작용할 때 사람의 시선을 따를 수 있습니다. 그들은 화면의 한 부분에 집중하는 데 보낸 시간을 보여주는 히트 맵이나 페이지 주위에서 눈이 어떻게 움직이는지를 보여주는 맵을 생성할 수 있습니다.

우리는 산업과 앱 유형 전반에 걸쳐 두뇌가 일반적으로 F 패턴(또는 E 패턴)의 정보를 검색 한다는 것을 알고 있습니다. 그 사람은 상단의 정보를 보고 오른쪽으로 읽은 다음 관련 정보 또는 아이콘을 찾기 위해 페이지를 아래로 스캔합니다.

예를 들어 오른쪽 하단 모서리에 중요한 정보를 넣는 것과 같이 F 패턴을 깨면 찾기가 더 어려워집니다.

텍스트 길들이기

45,237 페이지 뷰에 대한 Nielsen Norman 연구에 따르면 사람들은 페이지에 있는 텍스트의 약 20%만 읽습니다. 설상가상으로 더 많은 콘텐츠가 있는 사이트에서 사람들은 텍스트 100단어를 추가할 때마다 약 4초만 추가로 할애했습니다.

사람들이 단어 하나하나를 읽지 않는 세상에서 Nielsen Norman은 스캔 가능한 텍스트에 대해 다음 지침을 사용합니다.

• 강조된 키워드
• 의미 있는 소제목
• 글머리 기호 목록
• 단락당 하나의 아이디어
• 역피라미드 스타일 - 결론부터 시작
• 기존 작문 단어 수의 절반 (또는 그 이하)

컬러 팝 및 대비 작업

텍스트 구성과 위치는 디자인에서 유일한 중요한 요소가 아닙니다. 색상 이론, 가중치 및 대비를 사용하여 사용자의 주의를 끌 수 있습니다.

NASA의 조종석 설계 팀은 휘도(설계의 인지된 밝기)를 사용하여 경쟁 정보로 붐비는 지역에서 조종사의 주의를 관리하는 데 도움을 줍니다. 조종석 디자인 팀은 색상과 대비를 사용하여 가장 중요한 요소를 시각적으로 강조합니다.

휘도 및 대비는 특정 정보를 강조하거나 축소하기 위해 제품 전체에서 사용할 수 있지만 버튼 또는 클릭 유도문안 디자인에서 가장 자주 참조됩니다. 아래 빨간색 예제 버튼에서 볼 수 있듯이 왼쪽 상단 모서리에 있는 버튼이 가장 채도가 높지만 대비가 가장 높기 때문에 가장 밝게 "느껴집니다".

대비와 휘도는 첫 번째 단계에 불과합니다. 색상 이론은 시간의 지배적인 색상 60%, 보조 색상 30%, 강조 색상 10%를 사용하여 제품 색상의 균형을 맞추는 것을 제안합니다. 이 고장은 눈길을 끄는 것 뒤에 있는 신경 과학과 일치합니다. 액센트 컬러를 가장 적게 사용하기 때문에 가장 시선을 끈다.

밝은 색상을 사용하면 시선을 끌 수 있는 것처럼 차분한 색상을 사용하면 사용자가 어떤 정보가 부차적인지 덜 중요한지 판단하는 데 도움이 될 수 있습니다. 예를 들어, 대부분의 웹 사이트는 페이지의 나머지 정보와의 구분을 표시하기 위해 보다 중성적인 색상의 바닥글 영역을 사용합니다.

모든 기능 또는 정보 디자이너가 우선 순위를 낮추면 사용자가 가장 중요한 상호 작용 또는 정보에 직접 집중할 수 있습니다.

디자인 심리학 팁 #4: Gut Check

다행히도 디자인이 제대로 작동하는지 확인하기 위해 수천 달러의 시선 추적 소프트웨어나 뇌파도가 필요하지 않습니다.

5초 테스트는 설계를 즉시 이해할 수 있는지 여부를 판단하는 강력한 도구입니다.

5초 테스트에서 참가자는 5초 동안 사이트 또는 앱을 보고 주제 및 디자인에 대한 질문에 응답합니다. 이미지를 다시 참조할 수 없는 참가자는 "인상"을 제공합니다. 참가자는 제품의 목적과 기능, 무엇을 할 것인지 또는 다음 단계에서 찾을 것이라고 가정했습니다.

귀하의 제품에는 사용자가 원하는 모든 기능이 있을 수 있지만 게으르고 패턴을 좋아하는 두뇌가 즉시 이를 파악하지 못하면 계속 진행됩니다 .

"마인드 리더"로서의 디자이너

디자인 심리학, 두뇌, 인식에 대해 더 많이 알게 되면 디자인 규범은 업계 전반에 걸쳐 계속 변할 것입니다. 연결 고리는 데이터입니다. 신경 과학 및 인지 연구 방법이 향상됨에 따라 UX 디자인에 사용할 수 있는 데이터의 유형과 품질도 향상될 것입니다.

훌륭한 사용자 경험 디자인은 마술이 아니라 과학입니다. 신경 과학.

이 기사는 UX 연구원 Caitria O'Neill (이전에는 Facebook에서, 현재는 Airbnb에서 근무)과 Stanford의 d.school 펠로우와 공동으로 작성되었습니다 .

• • •

Toptal Design 블로그에 대한 추가 정보:

• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 제품 디자인에서 인간 중심 디자인의 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 모바일 인터페이스에 대한 경험적 원리
• 예측적 디자인: 마법 같은 사용자 경험을 만드는 방법