UX 법칙에 따라 개선하기
UX/UI의 10가지 심리학 법칙
디자인을 개선하는 방법은 여러 가지가 있지만 UX 법칙에 따라 개선한 작업물을 모았다.
해당 페이지는 가입내역으로 매출 상승을 위한 메이저 한 페이지는 아니다.
그래서 특정 수치를 개선하기보다는 페이지 내에서의 사용자의 가시성을 높이고
더 나아가 심미성까지 고려할 수 있도록 디자인 부분에서의 개선이 필요하다고 판단하였다.
가시성 또는 심미성은 사람마다 주관적으로 느낄 수 있다.
그래서 논리적으로 설명하기 위하여 기준에 따라 개선을 하는 것이 좋겠다고 생각하였고
UX/UI의 10가지 심리학 법칙을 참고하여 개선하였다.
01. 제이콥의 법칙
https://designcompass.org/2020/12/02/2296/
사용자는 다른 곳에서 썼던 대로 작동할 것이라고 예측할 것이다.
카카오페이의 사용자는 간편 결제/간편 송금 이용률이 높은 편으로
대부분의 사용자는 결제, 송금을 하기 위해 들어온다고 가설을 지을 수 있다.
현재 내가 담당 중인 서비스 진입을 위해서는 카카오페이 홈 > 전체 > 보험이라는 3뎁스를 거쳐야 한다.
그래서 페이 서비스를 처음 사용하는 사용자보다는
1. 결제, 송금 서비스를 이용해 본 사용자
2. 페이 서비스를 자주 사용하는 사용자
위주로 우리 서비스를 이용할 것이라고 생각하였다.
그렇다면 사용자는 이미 페이 UX에 익숙한 사용자일 것이다.
만약 새로운 UX시스템을 사용한다면 새로운 학습 비용이 요구되고 이는 사용자 이탈로 연결될 수 있다.
그래서 아래에 나오는 모든 디자인은 기본적으로 제이콥의 법칙에 따라 디자인을 개선하였다.
02. 밀러의 법칙
https://designcompass.org/2020/12/11/%eb%b0%80%eb%9f%ac%ec%9d%98-%eb%b2%95%ec%b9%99/#more-2460
흩어진 정보를 맥락에 따라 정돈해 사용자가 머릿속에 기억하기 쉽게 구조화시키는 것이 중요하다.
- 기존(As-is)에는 상품 구분 없이 가입일 기준으로 정렬하여 리스트를 구성하였다.
하지만 아래 그림처럼 [상품]은 [보험상품], [서비스상품]으로 나눠지고 그 안에서 [보장 기간이 남은 경우], [보장 기간이 끝난 경우]로 나눠져 있다.
상품 구조밀러의 법칙에 따르면 흩어진 정보를 맥락에 따라 정돈하는 것이 사용자 머릿속에 쉽게 구조화가 된다고 한다. 개선(To-be)에서는 Tab과 row 컨퍼넌트를 이용하여 정보를 성격에 따라 덩어리로 정리하였다.
(1,2번 참고)
또한 기존(As-is)에는 그레이 백그라운드 위에 화이트 카드를 올려 구조를 나눴다. 하지만 디자인 트렌드가 변화함에 따라 그레이 배경이 답답하게 느껴져 배경을 삭제하였다.
03. 폰 레스토프 효과
https://designbase.co.kr/dictionary/von-restorff-effect/
폰 레스토프 효과는 동일한 요소들 중에서 눈에 띄는 요소가 기억에 더 오래 남는 현상을 말한다.
- 기존(As-is)에는 쿠폰 안내 영역이 존재하지 않았으나, 장기적인 이벤트로 쿠폰을 발급하고 있기 때문에
개선(To-be)에서는 쿠폰 안내 영역을 추가하였다. (1번 참고)
사용자는 [가입내역 > 쿠폰 배너]를 탭 하여야 쿠폰을 확인할 수 있기 때문에 주의를 끌 수 있는 디자인을 하는 것이 중요하였다. 시각적으로 강조하기 위하여 채도가 높은 배너를 이용하여 쿠폰 배너를 제작하였다.
역시나 그레이 배경이 답답해 보여, 통일성을 위하여 배경을 삭제하였다.
04. 심미적 사용성 효과
https://designbase.co.kr/dictionary/aesthetic-usability-effect/
심미성이 좋은 디자인은 사용성이 더 뛰어난 디자인으로 인식한다.
- 기존(As-is)에는 라인형 일러스트를 사용하였으나 심미적 사용성을 높이고 디자인 트렌드에 맞춰 3D 그래픽으로 변경하였다. 3D그래픽의 장점은 입체감과 공간감이 추가되어 사용자에게 보다 풍부한 표현이 가능하다.
그러나 3D그래픽의 단점은 여러 개를 사용할 경우, 자칫하면 과해보일 수 있다는 점이 있기 때문에
상황에 맞춰 사용하는 것이 중요하다.
Illustration by Icons 8 from Ouch!
