훌륭한 UI 디자인의 심리학

 

 

좋은 UI 디자인은 단지 예쁜 파란색을 고르거나 멋진 글꼴을 사용했다고 해서 완성되는 게 아닙니다.
그것은 사람들이 어떻게 생각하는지, 무엇에 주목하고 무엇을 무시하는지, 그리고 어떤 요소가 사람들을 속으로 욕하게 만드는지를 이해하기 때문에 효과적인 것입니다.

훌륭한 UI 디자인 뒤에 숨은 심리학을 살펴볼께요.

 

 

 

1. 당신의 뇌는 게으른 천재입니다. (인지 부하)

 

우리는 늘 정신적인 에너지를 아끼려고 합니다.
그래서 좋은 UI 디자인은 사용자가 불필요하게 생각하지 않도록 만들어야 합니다.
당신의 앱이 퍼즐처럼 느껴진다면, 사용자는 이탈할 것이고, 가는 길에 불만 가득한 리뷰를 남길지도 모릅니다.
디자인은 당신이 얼마나 똑똑한지를 자랑하는 게 아닙니다.
사용자가 똑똑하다고 느끼게 만드는 것이 중요합니다.

사용자의 머리를 아프게 하지 않는 팁

• 명확한 계층 구조를 사용하세요. 한 화면에는 주요 행동 하나면 충분합니다.
• 불필요한 선택지를 피하세요. 여기는 퀴즈쇼가 아닙니다.
• 복잡한 기능은 필요할 때까진 숨기세요.

 

2. 선택지가 너무 많은 문제 (힉의 법칙)

힉의 법칙(Hick’s Law)은 간단합니다. 선택지가 많을수록 결정하는 데 시간이 오래 걸립니다.
그리고 그럴수록 사용자는 속으로 울거나, 그냥 떠나버릴 확률이 높아집니다.

디자인은 사용자의 결정 부담을 줄이는 일입니다.
자유를 빼앗는 것이 아니라, 명확한 길을 제시하는 것이죠.

미니멀리스트처럼 디자인하세요.

• 큰 작업은 작은 단계로 나누기
• 가장 흔하거나 추천하는 옵션을 강조 표시하세요.
• 기본값을 설정하세요. 대부분의 사용자는 어차피 그걸 선택할 테니까요.

 

 

3. 목표는 쉽게 누를 수 있어야 합니다 (피츠의 법칙)

 

 

작은 버튼. 가느다란 텍스트 링크. 초파리보다 작은 ‘X’ 버튼이 달린 모달 창.

우리 모두 한 번쯤은 이런 것들에 욕해본 적 있죠.
피츠의 법칙에 따르면, 클릭(또는 탭)하는 데 걸리는 시간은 그 요소의 크기와 거리에 따라 달라집니다.
즉, 사람들이 정말로 버튼을 누르길 원한다면, 제대로 누를 수 있게 만들어야 합니다.

실용적인 아이디어들

• 터치 영역을 넓히세요, 특히 모바일에서는 필수입니다. 아무도 닌자처럼 정밀한 손가락을 갖고 있지 않으니까요.
• 주요 버튼은 손이 닿기 쉬운 위치에 배치하세요. ‘엄지 손가락 존’을 생각하세요.
• 동작 버튼을 너무 가까이 붙이지 마세요. 실수로 눌리는 탭이 요즘의 ‘분노 클릭(rage click)’입니다.

 

4. 시각적 위계: 사용자가 길을 잃는 이유

 

 

사용자들은 화면을 위에서 아래로 읽지 않습니다. 그들은 에스프레소를 마신 다람쥐처럼 스캔합니다.
따라서 시각적 계층 구조를 지휘자가 오케스트라를 이끄는 것처럼 통제해야 합니다. 크기, 색상, 굵기, 간격을 활용해 “여기 먼저 봐주세요!”라고 말하세요.

계층 구조가 없으면 모든 것이 주의력을 경쟁합니다. 그리고 모든 것이 소리치면 아무도 들리지 않습니다.

이렇게 해보세요. 

• 주요 행동에는 굵은 글씨체를 사용하세요. 덜 중요한 부분에는 가벼운 글씨체를 사용하세요.
• 여백을 마치 당신의 직업인 것처럼 활용하세요. (왜냐하면 실제로 그렇기 때문입니다.)
• 빠른 테스트를 원하세요? 디자인을 찡그려보세요. 무엇이 눈에 띄나요? 그게 바로 당신의 초점 포인트입니다.

 

 

5. 익숙함이 창의성을 이긴다  

당신은 버튼의 피카소가 되거나 네비게이션 바를 재발명하고 싶을 수도 있습니다. 하지만 알아두세요. 사람들은 익숙한 것을 선호합니다.

로그인 양식이 항상 이메일과 비밀번호를 같은 순서로 배치하는 이유는 게으름이 아닙니다. 익숙하기 때문입니다.  

어떻게 해야 할까요.

• 핵심 흐름(가입, 결제, 네비게이션)에는 표준 UI 패턴을 유지하세요.
• 창의적인 요소는 마이크로 인터랙션이나 시각적 요소에는 적용하되, 기본 레이아웃에는 적용하지 마세요.
• 기억하세요: 익숙함 = 신뢰성. 이상함 = 의심스러움.

 

 6. 함께 속하는 물건을 그룹화하라 (게슈탈트 심리학)

 

 

게슈탈트 심리학은 기본적으로 우리 뇌가 현실을 빠르게 읽는 방식입니다. 우리는 사물을 고립된 요소로 보지 않습니다. 우리는 근접성, 유사성, 정렬, 연속성에 따라 사물을 그룹화합니다.

UI가 이러한 패턴을 준수하지 않으면 사용자는 혼란을 겪을 것입니다. 그리고 혼란은 탭을 닫는 가장 빠른 길입니다.  

예시

• 같은 모양의 버튼은 유사한 기능을 수행해야 합니다. 사용자를 속이지 마세요.
• 폼의 관련 필드는 가까이 배치하세요. '이름'과 '이메일'을 부활절 달걀처럼 여기저기 흩어놓지 마세요.
• 콘텐츠를 정렬하세요. 정렬되지 않은 항목은 무의식적인 불편함을 유발합니다.

 

 

7. 감정 > 논리 

 단순히 느낌이 좋아서 버튼을 클릭한 적이 있나요? 그 만족스러운 호버 효과? 그 미묘한 애니메이션?  

디자인은 기쁨을 불러일으킬 수도 있고, 짜증을 유발할 수도 있습니다.  

감정을 위한 디자인 방법

• 개성 있는 마이크로카피를 사용하세요. 작은 매력도 큰 차이를 만듭니다. 
• 애니메이션은 버터처럼 부드러워야지, 과하지 않아야 합니다.  
• 기쁨의 순간을 만들어보세요. (즐거운 성공 메시지, 콘페티 애니메이션, 또는 만족스러운 로딩 상태 등)

 

 

8. 사람들은 최고점과 결말을 기억합니다 (피크-엔드 법칙)

 

 

사용자들은 자신의 여정에서 모든 순간을 기억하지 않습니다. 그들은 가장 강렬한 순간과 결말을 기억합니다. 이것이 바로 피크-엔드 법칙입니다.

따라서 결제 과정이 원활하더라도 확인 화면이 404 페이지처럼 보인다면, 그들이 무엇을 기억할지 짐작이 가시나요?

 

디자인 팁

• 귀하의 “피크 순간”을 식별하세요. 그 순간을 즐겁게 만드세요.
• 끝을 소홀히 하지 마세요. 확인 메시지, 감사 화면, 가입 성공 페이지 등은 생각보다 훨씬 중요합니다.

 

 

9. 진정한 UX의 적: 불확실성

사용자가 버튼이 무엇을 할지 확신하지 못하면 망설이게 됩니다. 그리고 망설임은 흐름을 끊습니다.

최고의 UI는 의심을 제거합니다. 그들은 “여기를 클릭하세요. 안전합니다. 실수로 모든 것을 삭제하지 않을 거예요”라고 말합니다.

이 도구들을 사용하세요.

• 명확한 라벨: “초안 저장”은 “제출”보다 좋습니다.
• 마이크로카피: 작은 텍스트 한 줄이 두려움을 없애줍니다.
• 피드백: 방금 일어난 일과 다음에 일어날 일을 보여주세요.

 

 

 

 

출처:

https://medium.muz.li/the-psychology-behind-great-ui-design-54e24af5a63a