콘트라스트 효과(대비 효과)

같은 것이라도 전후 대비에 따라 인상이 달라지는 것

같은 상품이나 같은 것을 봐도, 주위와의 대비로 인상이 크게 바뀐다.

주위보다 눈에 띄는 것은 더 깊이 기억한다.

둥근 버튼을 예로 들어 설명한다.

아래에서는 모두 같은 계열의 버튼으로 인해 B가 눈에 잘 띄지 않는다.

한편, 이쪽 줄에서는 주위의 버튼과 전혀 다른 색의 B를 눈에 띄게 할 수 있었다.

가격 대비 효과

판매가격만 그대로 보여주는 것이 아니라 미리 큰 가격을 보여 주고 할인해 줌으로써 심리적으로 낮은 가격으로 보이게 하는 앵커링이 있다.앵커링

여기에 콘트라스트 효과를 더하고, 효과적으로 팔고 싶은 상품을 어필할 수 있다.

다만 아래와 같이 가격차가 너무 크면 오히려 역효과를 낼 수도 있기 때문에 주의가 필요하다.

UI에서의 응용

이하는 데스크탑용 Kindle 앱으로 검색한 화면이다.

마우스 오버한 부분의 배경색을 바꿈으로써, 자신이 어디를 선택하고 있는지 알기 쉽게 표현하고 있다.

또 이하와 같이 검색어를 하이라이트 해 시각적으로 콘트라스트를 내는 것으로, 검색에 매치한 부분을 알기 쉽게 제시할 수 있다.

넷플릭스 회원 등록 화면에서는 등록하고 싶은 플랜을 미리 선택 상태로 해, 한층 더 눈에 띄게 진한 색으로 표시하고, 타 플랜과 대비를 하여 선택하기 쉽게 하도록 인상하고 있다.