[도서] UX/UI의 10가지 심리학 법칙 2
UX/UI의 10가지 심리학 법칙 - 예스24
심리학을 만난 UX/UI 디자인!”좋아 보이는 것”의 비밀, 이 10가지 심리학 법칙에 담겨 있다디자이너가 갖춰야 할 소양은 디자인 지식만이 아니다. 디자이너가 갖춰야 할 필수 소양인 심리학, 특
www.yes24.com
6. 피크엔드 법칙
인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다.
- 사용자 여정 중 가장 강렬한 순간과 마지막 순간을 세심하게 신경 쓰자.
- 제품이 사용자에게 가장 큰 도움을 주는 순간, 혹은 가장 중요하게 여겨지는 순간, 가장 큰 즐거움을 주는 순간 등을 알아내라.
- 사람들은 긍정적인 순간보다 부정적인 순간을 더 생생하게 기억한다는 사실을 명심하자.
예시
1) 감정이 사용자 경험에 미치는 영향
- 메일침프라는 홍보 이메일 전송을 돕는 서비스는 메일 전송 시점(절정)에 전송버튼 클릭을 기다리는 애니메니션을 통해 사용자의 부담 경감시켰고, 메일 발송 이후(마지막)에 사용자의 노고를 알아주듯 하이파이브하는 이미지 노출시켜 성취감 고취시켰다.
- 서비스에 대한 긍정적인 이미지를 심어준 것이다.
2) 불가피한 대기시간을 효과적으로 풀어낸 사례
- 카카오택시나 배달의 민족 등은 사용자에게 이동경로 애니메니션을 제공한다.
- 사용자는 도착예정시간을 알 수 있고, 꾸준히 목표를 향해 가는 것을 느낄 수 있다.
- 서비스 이용 중 부정적인 감정이 절정에 이를 만한 순간을 피한 것이다.
3) 크롬 공룡 게임
- 크롬에서 네트워크가 끊어지면 게임을 할 수 있다.
- 목표 페이지에 도달하지 못한 부정적인 상황을 긍정적으로 전환시킨 사례라고 볼 수 있다.
정리
- 인간의 기억이 사건을 정확하고 완벽하게 기록하는 일은 드물다. 제품이나 서비스를 다시 사용할지, 다른 이에게 추천할지 좌우하는 것은 경험에 대한 기억이다.
- 사용자 전체 경험을 긍정적으로 기억하게 하려면 감정적 절정의 순간과 마지막 순간에 각별한 주의를 기울여야 한다.
7. 심미적 사용성 효과
사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.
- 보기 좋은 디자인은 인간의 뇌에 긍정적 반응을 일으켜서 사용자로 하여금 제품이나 서비스의 사용성이 뛰어나다는 생각이 들게 한다.
- 제품이나 서비스의 디자인이 보기 좋으면, 사용자는 사소한 사용성 문제에 비교적 관대해진다.
- 시각적으로 만족스러운 디자인은 사용성 테스트 중에 문제가 드러나는 것을 방해할 수 있다.
예시
- 독일의 전자회사 브라운
- 1956년 당시 일종의 가구로 여겨지던 전자기기가 아름답고 기능적인 독립체로 홀로 설 수 있다는 것을 보여준 사례
- Less but Better 원칙 기반의 제품들을 탄생시켰다.
2) 애플
- 우아하며 사용하기 편한 인터페이스 디자인으로 비즈니스를 성공시킨 대표적인 사례
- 미학적으로 아름다운 디자인 때문에 사람들이 사용성 문제를 눈감아 줄 확률이 높아진다는 것을 확인할 수 있다.
- 참고) 애플의 디자인 지침 -> https://developer.apple.com/kr/design/tips/
정리
- 보기 좋은 디자인은 사용성에 영향을 미칠 수 있다. (보기 좋은 떡이 먹기도 좋다)
- 디자인이 아름다우면 긍정적인 감정 반응이 일어날 뿐 아니라, 인지 능력이 향상되고 사용하기 편리하다는 인식이 커지며 신뢰도도 높아지기 때문이다.
8. 폰 레스토프 효과
비슷한 사물이 여러 개 있으며 그중에서 가장 차이가 나는 한 가지만 기억할 가능성이 크다.
- 중요한 정보나 핵심 동작은 시각적으로 눈에 띄게 하라.
- 시각적 요소를 강조할 때는 제한을 두어서, 각 요소 간 경쟁을 피하고 가장 중요한 항목이 광고로 오인되지 않게 하라.
- 특정 요소를 강조할 때 색상에만 의존하면 색맹이나 저시력인 사용자가 배제된다는 사실을 유념하라.
- 움직임을 활용해서 대비를 전달할 때는 움직임에 민감한 사용자를 주의 깊게 고려하라.
예시
1) 인터랙티브 요소 디자인
- 대비를 통해 사용자가 중요한 동작에 주목하고, 잘못된 항목을 실수로 선택하지 않도록 도와준 사례
- 버튼, 텍스트 링크, 좋아요 같은 인터렉티브 요소에서 찾아볼 수 있다.
2) 요금제
- 추천하는 요금제를 강조해 보여준다.
- jira의 경우 팀원수를 입력하면 알맞은 요금제를 활성화시켜 준다.
3) 알람 뱃지
- 사용자에게 할 일이 생겼다는 사실을 통보한다.
- 좋든 싫든 사용자의 주의를 환기시킨다.
정리
- 대조를 활용해서 사용자가 가장 중요한 콘텐츠에 주의를 기울이게 할 방법을 알려주는 지침이다.
- 잘 활용하면 사용자가 목표 달성에 필요한 요소를 빠르게 알아보도록 디자인할 수 있다.
- 다만 시각적으로 경쟁하는 요소들이 너무 많으면 강조 효과가 희석되어 어떤 요소도 도드라지지 않는다.
9. 테슬러의 법칙
복잡성 보존의 법칙, 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.
- 모든 프로세스에는 디자인 시 처리할 수 없는 기본적인 복잡성이 존재하므로, 시스템이나 사용자 중 한쪽이 감당해야 한다.
- 내재된 복잡성을 디자인과 개발 과정에서 처리하면 사용자의 부담을 최소로 줄일 수 있다.
- 추상적으로 느껴질 정도로 인터페이스를 단순화해서는 안 된다.
예시
1) 이메일
- 이메일을 작성하기 위해서는 발신인과 수신인 2가지 정보가 필수적이다. (필수적인 복잡성)
- 최신 이메일 클라이언트는 이러한 복잡성을 줄이기 위해 보낸 사람의 정보는 로그인한 사용자의 이메일 주소를 입력해 자동으로 채우고, 받는 사람의 이메일은 연락처 정보를 기반으로 추천한다.
- 추상화를 통해 복잡성을 줄인 사례로, 사용자 대신 디자이너와 개발자가 복잡성을 부담한 것이다.
2) 아마존고 (무인매장)
- 고객은 스마트폰에 아마존 고 앱을 설치하고 로그인한 다음, 매장에 가서 필요한 물건을 그냥 들고 나오면 된다.
- 계산대에 줄을 서거나, 상품 바코드를 스캔하거나, 별도의 결제 프로세스를 거칠 필요가 없이 매장을 나서면 곧바로 아마존 계정에서 자동 결제가 이뤄지고 영수증이 발급된다.
- 고객이 느낄 복잡성을 수많은 기술을 동원해 부담한 사례로 볼 수 있다.
정리
- 모든 디자인 프로세스에는 아무리 노력해도 제거되지 않는 복잡성이 일정량 존재한다는 사실을 인정해야 한다.
- 이렇게 제거하지 못한 복잡성은 그대로 사용자에게 전가되기 때문에, 디자이너와 개발자는 이와 같은 복잡성을 잘 처리해야 한다.
10. 도허티 임계
컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션 하면 생산성은 급격히 높아진다.
- 사용자의 주의가 분산되는 것을 막는 동시에 생산성도 향상하려면 시스템 피드백을 0.4초 이내에 제공하라.
- 반응 시간을 개선하고 체감 대기 시간을 줄이려면 체감 성능을 활용하라.
- 애니메이션은 작업이 진행되는 동안 사람들의 시선을 끄는 한 가지 방법이다.
- 설사 정확하지 않다고 해도 진행표시줄을 보여주면 사용자는 대기 시간에 좀 더 관대해진다.
- 실제 작업이 훨씬 빨리 완료되더라도, 의도적으로 작업 완료를 늦게 알리면 체감 가치를 높이고 신뢰를 형성하는 데 도움이 되기도 한다.
예시
1) 스켈레톤 UI (skyscanner)
- 콘텐츠가 로딩되는 동안 표시하는 화면으로, 콘텐츠가 위치할 곳을 미리 파악할 수 있다.
- 실제 작업이 0.4초 이내에 완료될 수 없는 경우, 애니메이션을 통한 피드백을 제공한 사례로 볼 수 있다.
2) 낙관적 업데이트 (Instagram)
- 인스타그램에서 좋아요/ 댓글 게시 등에서 활용
- 작업을 처리하는 도중에 동작을 성공적으로 수행했다는 낙관적인 피드백을 미리 제공한다.
- 사용자는 앱이 실제보다 더 빠르게 반응하는 것처럼 보인다. (체감 성능을 개선)
정리
- 지연이 1초 이상으로 늘어나면 사용자는 집중하기 어려워지고 작업 수행에 필요한 정보를 놓치기 시작하므로 생산성은 필연적으로 감소한다.
- 성능은 개발팀만 고민하면 되는 기술적인 문제가 아니라 본질적인 디자인 요소이다.
- 사용자에게 적절한 피드백을 제공하고, 체감 성능을 높이고, 진행표시줄을 사용해 기다린다는 느낌을 줄여주는 게 중요하다.
결론
- 디자이너 중심으로 풀어낸 책이지만, 프론트엔드 개발자에게도 필요한 역량이라고 생각한다.
- 개발을 하면서 좋은 UX/UI를 만들기 위해 신경 쓴다고 하지만, 대체로 느낌적인 느낌을 따랐지 왜 이게 더 좋은지 논리적으로 설명하는 것은 어려웠기 때문이다.
- 읽다 보면 당연하다고 느낄 수 있지만, 경험적으로 아는 것과 이렇게 구조화해서 지식으로 가지고 있는 것은 다른 관점인 것 같다.
- 쨌든 이런 법칙들은 선택의 순간에 도움을 줄 수 있으며, 내 구현을 뒷받침하는 근거로 활용할 수 있겠다!
'Frontend > ETC' 카테고리의 다른 글
| [도서] UX/UI의 10가지 심리학 법칙 1 (0) | 2024.02.08 |
|---|
