UX UI 5가지 심리학 법칙으로 보는 화해.
UX 심리학
극예민 민감성 피부의 소유자로서 화장품을 구매할 때 빼놓지 않고 들여다보는 앱이 있다. 바로 '화해'이다. 화해는 화장품의 주요 성분 중 해로운 성분을 분석해 보여준다. 피부 타입별로 작성된 유저들의 솔직한 후기도 가득하다. 이러한 실용적인 정보들은 화해를 8년 연속 1위 뷰티앱으로 우뚝 서있을 수 있게 만들어 주었다. 화해에 대해 낱낱이 파헤쳐 보는 것도 흥미로울 테지만 오늘은 UX 포스팅이기 때문에 서비스 분석이 아닌 UX 심리학으로 화해를 바라보도록 할 것이다.
지난 포스팅에서는 존 야블론스키의 책 UX/UI의 10가지 심리학 법칙에 나온 심리학 법칙들 중 5가지를 '왓챠' 앱에 대입해 바라보았다. 오늘은 나머지 5가지 법칙을 '화해' 앱을 통해 정리해 볼 예정이다.
목차
6. 피츠의 법칙 (Fitts’s Law)
7. 힉의 법칙 (Hick’s Law)
8. 심미적 사용성 효과 (Aesthetic-Usability Effect)
9. 폰 레스토프 효과 (Von Restorff Effect)
10. 도허티 임계 (Doherty Threshold)
6. 피츠의 법칙 (Fitts’s Law)
The time to acquire a target is a function of the distance to and size of the target.
타깃에 도달하기까지의 시간은 타깃의 크기와 거리에 달려있다.
좌 화해 / 우 올리브영피츠의 법칙은 터치하는 대상이 커지고 거리가 가까워질수록 대상을 선택하는 데 소요되는 시간이 줄어드는 현상을 말한다. 이를 앱 UX에 적용하면 터치해야 할 아이콘이 적당한 크기와 간격을 유지하여 유저가 화면에서 터치하는 데 불편함이 없게 서비스를 설계해야 함을 의미한다.
화해는 추천 제품들을 작은 모바일 화면에서도 정확히 터치할 수 있도록 충분히 큰 크기와 간격으로 상품들을 노출시키고 있다. 또한 다양한 네비게이션 아이콘들도 적당한 간격과 크기로 설정되어있어 사용자가 잘못 누르는 상황을 최소화하고 있다. 실제 같은 네비게이션 목록이 있는 뷰티 앱 올리브영과 비교해 보았을 때 버튼의 확연한 크기, 간격 차이를 발견할 수 있었다. 이 두 앱을 비교했을 때는 화해의 UX 설계가 사용자들을 개별 카테고리로 안내함에 있어 더 편리한 UX 설계를 가졌다고 볼 수 있을 것이다. 또한 제품 후기 작성 아이콘을 사용자들의 오른쪽 엄지 손가락이 잘 닿는 부분, *thumb zone에 위치시켜 사용자들의 후기 작성을 적절히 유도하고 있다.
thumb zone? 한 손으로 기기를 사용했을 때 가장 터치하기 쉬운 영역
7. 힉의 법칙 (Hick’s Law)
The time it takes to make a decision increases with the number and complexity of choices.
선택지의 복잡성에 따라 결정을 하는데 소요되는 시간은 증가한다.
선택지의 복잡성이 늘어나면 결정하는 데 소요되는 시간도 늘어난다. 따라서 앱을 설계할 때는 사용자들의 인지 부하를 줄일 수 있도록 선택지를 최소화하는 설계가 필요하다. 추상적일 정도로 선택지를 축약하지는 않되 직관적이고 단순하게 UX를 설계할 필요가 있다. 새로운 유저가 무엇을 선택할지 혼란에 빠지는 상황을 방지하기 위해 온보딩 화면에서 앱에 대한 설명을 더하는 것도 힉의 법칙의 예라고 볼 수 있다.
화해 서비스 특성으로 미루어 보았을 때, 유저들은 대부분 사용 목적이 존재할 때 앱을 접속하는 경우가 높으리라고 생각한다. 그 목적은 대부분 제품 성분에 대한 검색이나 자신에게 맞는 제품을 찾기 위한 경우일 것이라고 조심스레 추측해본다. 화해에서는 첫 접속 화면에서 유저들이 관심을 둘 법한 3가지 제품을 추천해주고 있다. 이를 클릭하면 나에게 맞는 추천 제품을 제품 타입 별로 추천해주고 있는데 상품 카테고리 별 3개의 상품만을 기본적으로 노출하고 있어 유저들이 너무 많은 선택지 사이에서 고민할 시간을 단축해주는 설계라고 볼 수 있다.
8. 심미적 사용성 효과 (Aesthetic-Usability Effect)
Users often perceive aesthetically pleasing design as design that’s more usable.
유저들은 주로 심미성 높은 디자인을 사용성이 더 높다고 느낀다.
사람들은 보기 좋은 앱을 기능이 더 좋은 앱으로 인식한다. HCI 연구 결과에 따르면 유저들은 심미성이 높은 앱을 사용할 때 작은 사용성 이슈를 더 관대하게 받아들인다고 한다. 이를 통해 UI 디자인이 UX 사용성에도 직접적인 영향을 끼침을 알 수 있다.
화해는 하늘색의 메인 컬러를 사용해 일관된 톤앤 매너로 깔끔한 UI 디자인을 보여주고 있다. 앱의 분위기에 알맞게 디자인된 아이콘들이 단번에 눈에 띄었고 디테일한 부분에도 신경을 기울였음을 알 수 있었다. 앱 디자인은 뛰어나므로 디테일한 부분에 대해 이야기해보자면, 개인적으로 '성분' 표시가 좋았었던 기억이 있다. 화해는 성분 위험도에 따라 아이콘을 각각 다르게 디자인해 쉬운 유해성분 확인을 도왔다. 가시적인 효과로 인해 사용성이 높아진 것이다.
9. 폰 레스토프 효과 (Von Restorff Effect)
The Von Restorff effect, also known as The Isolation Effect, predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
고립 효과라고도 알려진 폰 레스토프 효과는 여러 비슷한 물체가 존재할 때 나머지 것들과는 다른 한 가지가 기억에 오래 남는 것을 설명한다.
폰 레스토프 효과에 따르면 조금 다르거나 돋보이는 디자인은 대상이 기억에 오래 잔존할 수 있도록 만들어준다고 한다. 따라서 앱을 설계할 때는 중요한 정보나 CTA 버튼과 같이 강조해야 할 부분을 조금 더 눈에 띄게 디자인하는 것이 좋다. 이는 콘트라스트와 같은 디자인 강조 효과나 특정 영역을 돋보이게 할 수 있는 화면 분할 설계 등을 통해 나타낼 수 있다.
화해는 사용자들의 상세한 실제 후기를 통해 사용자들에게 인생템을 찾아주는 서비스를 운영하고 있다. 이때 화면 설계상 노출 텍스트가 굉장히 많기 때문에 시선 분산에 관한 문제가 존재할 수 있었다. 이 부분에서 화해는 텍스트 하이라이팅 처리를 통해 중요 부분에 시선이 먼저 갈 수 있도록 했다. 또한 쇼핑 홈에서 온리 화해와 한정 특가만 나머지 아이콘들과는 다른 색상의 아이콘을 사용하여 식별이 조금 더 쉽도록 만들었다.
10. 도허티 임계 (Doherty Threshold)
Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
생산성은 컴퓨터와 유저가 서로를 기다리는 일이 없도록 하는 속도(0.4초 미만)로 상호작용 할 때 급증한다.
로딩 애니메이션도허티 임계값 0.4초를 초과하면 사용자의 주의가 분산되기 시작하므로 시스템 피드백 시간은 0.4초 미만인 것이 좋다. UX 설계에서는 사용자의 주의 분산의 최소화를 위해 로딩, 프로그래스 애니메이션을 사용해 볼 수 있다. 사용자는 이러한 설계가 있을 경우 서비스와 지속적으로 상호작용하는 느낌을 받아 시간이 실제보다 더디게 간다고 느낀다. 따라서 로딩 시간에 대해 조금 더 관대해질 수 있다.
화해는 제공하는 서비스가 많은 만큼 각 화면당 로딩해야 할 정보의 용량도 작지 않다. 하지만 각 화면마다 로딩 애니메이션을 삽입함으로써 유저들에게 충분히 앱과 상호작용하고 있다는 느낌을 준다. 단순한 프로그래스 바가 아닌 화해 캐릭터로 이뤄진 애니메이션은 심미적 사용성 효과도 높여 앱에 대한 신뢰를 강화한다.
참고 자료
Laws of UX Web Site
