심리를 고려한 가격 페이지 디자인
사용성과 전환을 모두 높이는 과학적 방법들
이 글은 Medium의 <Pricing Page Design with Psychology in Mind>을 번역한 글입니다. 글 초반에는 10가지 심리학 이론과 함께 디자이너가 고려할 질문이 정리되어 있고, 글 중반에는 가격 인터페이스 구조가, 글 후반에는 올바른 가격 페이지 디자인을 위한 10가지 원칙이 정리되어 있습니다. 긴 글임에도 불구하고 관성적으로 봤던 가격 페이지 디자인을 논리적으로 접근할 수 있어 좋았습니다. 가격 페이지를 디자인할 때 읽어보시길 추천합니다.
아름다운 가격 UI는 너무 많지만 실제로 그다지 사용되지는 않는다. 밝은 카드와 귀여운 종이비행기와 우주왕복선 일러스트레이션에 어떤 문제가 있을까? 대부분의 이유는 바로 낮은 전환이다. 비즈니스에서는 거대한 UI와 일관성 없는 색상은 용서해도 페이지에서 구매가 없다면 문제가 된다. 이 글에서는 가격 페이지를 팔리게끔 하는 동시에 디자인 원칙을 따르는 방법에 대해 알아보도록 하자.
주의를 끌기 위한 일러스트레이션선택 심리학 Psychology of choice
경제 이론에서는 사람들이 항상 논리적으로 행동하고 가장 유익한 선택을 한다고 가정한다. 그러나 우리는 항상 이성적으로 선택하지는 않는다. 우리는 꼭 완벽한 옵션이 아니더라도 단순히 만족스러운 옵션을 선택할 수도 있다. 많은 선택들이 자동적이고 ‘휴리스틱(heuristics)’이라는 사고 형식에서 비롯된다. '휴리스틱'은 1950년대에 미국의 경제학자, 인지심리학자, 노벨상 수상자인 허버트 사이먼에 의해 발견되었다. 1970년대에 이스라엘계 미국인 심리학자 아모스 트베르스키와 다니엘 카네만은 우리의 잘못된 의사결정을 이끄는 인지적 편견과 효과를 탐구했다. 그럼, 선택을 하는 인간의 주요 습관을 분석해보자.
1. 가용적 휴리스틱 Availability heuristic = 얼핏 보고 판단하기
사람들은 최근에 배웠거나 생각한 것에 근거해 판단을 내린다. 이 정보가 반드시 완전하고 일관적이지는 않다. 예를 들어, 클라우드 스토리지 누출 및 개인 정보 보호 위반에 대해 자주 접했다면 Dropbox 계정을 구입하는 대신 자체 서버를 설치하게 될 것이다. 사용자의 선택은 앞서 소비한 콘텐츠와 연결된다. 이커머스 사이트에서는 회사들이 사람들이 이전에 무엇을 보았는지 그리고 그것이 사람들의 판단에 어떤 영향을 미칠지 알기 위해 사용자 활동을 추적하곤 한다.
디자이너가 고려할 질문들
메인 페이지 상단에 있는 것은? 즉, 메뉴의 가격 링크를 클릭하기 전에 사람들은 무엇을 보는가?
사람들이 가격 페이지 이전에 방문한 페이지에 대해 웹 분석은 어떤 걸 말해주는가?
사람들이 당신의 사이트를 방문하기 전에 보통 무엇을 하는가? 월요일 아침에 쉬는 금요일인가, 많은 이메일을 정리하는 날인가?
2. 경험적 휴리스틱 Affect heuristic
사람들의 선택은 그 순간 경험하는 감정에 영향을 받는다. 기분이 좋을 때 우리는 대부분 더 많은 이익과 적은 손실을 보려 한다. 기분이 좋지 않다면, 우리는 불리한 면에 초점을 맞춘다. 예를 들어, 화가 난 유저는 무료 가입 플랜에 유용한 기능 대부분이 빠져있는지 알아채고선 가입하지 않을 것이다.
디자이너가 고려할 질문들
사람들이 기분이 좋은 순간에 선택하게 할 수 있을까?
사람들이 선택하면서 기분이 좋아지도록 하는 게 가능할까?
어떻게 하면 사람들의 기분을 좋게 할 수 있을까?
3. 대표성 휴리스틱 Representativeness heuristic
만약 사물이 비슷해 보인다면, 사람들은 그것들의 나머지 특징, 원인, 결과도 비슷하다고 생각한다. 각 카테고리의 체계와 대표 타입을 마음에 두고 있기 때문이다. 수학적으로, 두 가지 이상의 특징이 똑같을 가능성은 적다. 그러나 사람들은 그들의 기억에서 가장 대표적인 타입에 맞다면 같다고 생각한다.
예를 들어, 디자이너라는 카테고리가 있다면 호버보드를 타고 스무디를 좋아하는 개성 있는 턱수염을 기른 남자로 대표된다. 카페에서 그런 남자를 보면, 우리는 자동으로 디자이너라고 추측할 거고 아마도 그는 아이폰을 가지고 있고 아보카도 샐러드를 좋아할 것이다.
디자이너가 고려할 질문들
유저가 보통 당신의 제품을 어떤 카테고리로 생각하는가? 그들은 이 제품이 아주 편하고, 안전하고, 실용적이라 생각하는가?
사람들이 원하는 카테고리와 연관되려면 제품이 어떤 특징을 가져야 하는가?
4. 골드락스 원리 Goldilocks principle
일반적으로 고객들은 특히 가격에 있어서는 중간 옵션을 선택한다. 사람들은 자신이 똑똑한 구매자라 생각하고 과대 지불하지 않는다. 동시에 그들은 가장 저렴한 요금제보다는 더 나은 서비스를 제공할 수 있다고 느낀다. 중간 옵션은 대표적인 경험 휴리스틱과도 연결된다. 즉, 매우 전형적이라는 말이다. 한편, 골디락스 효과의 이름은 어린 소녀 골디락스가 세 그릇의 죽 맛을 보고 너무 뜨겁지도 춥지도 않은, 즉 적당한 온도의 죽을 더 좋아한다는 동화 “곰 세 마리”의 이름을 따서 지었다.
디자이너가 고려할 질문들
중간 옵션이 고객의 요구에 얼마나 핏한가?
고객 대다수가 중간 옵션 값을 선택한다고 할 때, 회사는 사업 목표를 달성할 수 있는가?
5. 미끼 효과 Decoy effect
이 효과는 초기에 다른 장점을 가진 두 상품(예를 들면 저렴한 가격 상품과 더 많은 기능을 가진 상품)을 두었을 때 일어날 수 있다. 몇몇 사람들은 더 비싼 상품을 좋아하는 것처럼 사람들은 본인에게 적합한 상품을 더 선호한다. 물론 기업들은 사용자가 더 비싼 옵션을 구매하길 원한다. 그래서 그들은 “미끼(decoy)” 옵션을 추가한다. 미끼(decoy)는 초기 옵션에서 한 파라미터는 더 좋고 다른 파라미터는 더 나쁜 것을 말한다. 결과적으로 고객들은 옵션을 변경한다. 그들은 결국 가장 비싼 상품을 사는데 그게 가장 유익해 보이기 때문이다.
2018년 콜로라도대와 중국과학원 연구진이 식품공장 노동자들의 행동을 연구했다. 처음 20일 동안, 근로자들은 시간당 손을 씻기 위해 스프레이 세정제를 받았다. 그 후 연구원들은 그들에게 일반 스프레이 또는 덜 편리한 병인 스퀴즈 병이나 세면대를 선택하라고 제안했다. 노동자들은 원래 스프레이의 사용을 60%에서 90% 이상으로 늘렸다.
디자이너가 고려할 질문들
회사에서 가장 판매하고 싶은 상품은 무엇인가? 고객들이 그것이 가장 유익하다고 생각하는가?
어떤 옵션이 가장 인기 있을까? 왜 사람들은 그 옵션을 자주 선택할까?
어떻게 비싼 상품을 더 유익하게 보이게 할까?
6. 앵커링 효과 Anchoring effect
앵커링 효과는 선택을 할 때 한 가지 정보(보통 첫 번째 정보)에 지나치게 의존하는 경향이다. 기준점(앵커)이 서게 되면, 다른 판단과 추정이 모두 그 영향을 받게 된다. 예를 들어, 당신이 처음 보는 가격은 기준점이 될 것이고, 당신은 무의식적으로 다른 모든 가격을 처음과 비교하게 될 것이다. 사람들이 1에서 8까지 숫자를 곱하는 실험이 있었다. 시간은 한정되어 있었고, 그들은 정확한 계산 대신에 가늠해야 했다. "1 × 2 × 3 ×4 × 5 × 6 ×7 × 8"의 순서로 곱한 사람들은 "8 ×7 × 6 × 5 ×4 × 3 ×1"을 곱한 사람들보다 4배 적은 금액을 추측했다. 처음 계산된 제품은 기준점이 돼서 나중에 사고 과정에 영향을 준다.
디자이너가 고려해야 할 질문
당신의 웹사이트에 고객이 올 수 있는 앵커는 무엇인가?
선택을 결정하고 제품이나 서비스를 구매하기 위해 고객이 가장 먼저 주목해야 할 것은 무엇인가?
7. 사회적 증거 Social proof
이 용어는 1984년 로버트 시알디니에 의해 발명되었고 다른 사람들의 결정이 자신의 결정에 영향을 주는 것을 말한다. 만약 유저가 최적의 행동을 결정하거나 선택할 수 없다면, 그들은 다른 유저들의 행동을 모방하는 경향이 있다. 사회적 증명 효과는 우리의 인지적 게으름, 즉 사고 노력을 줄이고자 하는 욕망과 다른 사람들이 현재 상황에 대해 더 많은 지식을 가지고 있다는 믿음에서 비롯된다. 이커머스에서 추천 글, ‘우리의 클라이언트들' 코너, 제품 평점은 모두 사회적 증명을 반영한다.
디자이너가 고려해야 할 질문
누가 당신의 유저들의 의견 리더인가? 그들의 도움을 받아서 어떻게 제품을 판매할까?
현재 당신의 제품 고객들은 다른 사람들에게 충분한 평판을 얻어 모범 고객으로 보이는가?
8. 손실 회피 Loss aversion
사람들은 보통 이익을 얻기보다는 손실을 피하는 것을 선호한다. 예를 들어, 10달러를 찾는 것보다 10달러를 잃지 않는 것이 낫다. 심지어 어떤 연구들은 우리가 이윤을 얻는 것보다 두 배나 더 손실에 민감하다고 한다. 때로는 디자이너가 사람들을 더 잘 이해시키기 위해 이익을 손실 회피로 보여줘야 한다는 뜻이다. 그러나 일명 '청개구리 심보'로 역효과가 생길 수 있으니 너무 과장하거나 사람들을 두렵게 해선 안된다.
이와 관련해 2002년, 피자 만들기로 실험을 했다. 첫 번째 그룹은 올인원 기본 피자에서 재료를 빼면서 만들었고 두 번째 그룹은 피자 베이스에 재료를 더하면서 만들었다. 피자의 크기를 줄인 참가자들이 결국 더 많이 먹게 되었다.
디자이너가 고려해야 할 질문
당신의 제품을 선택할 때 사람들이 잃기 두려워하는 건 무엇인가?
당신의 서비스나 제품을 구매함으로써 문제를 피할 수 있다는 것을 어떻게 보여줄 수 있을까?
9. 리액턴스 Reactance
우리의 자유를 위협하는 제안과 규칙에 대한 불쾌한 반응을 만한다. 리액턴스는 사람이 누군가 또는 무언가가 선택을 뺏거나 제한하고 느낄 때 일어난다. 예를 들면, 십 대들은 담배를 좋아하기보다 부모들의 통제에 항의하려는 반항심으로 피우곤 한다. 이커머스에서 리액턴스는 과도한 홍보와 설득에 대한 반발로 일어난다. 제품이나 서비스가 너무 많이 광고되면, 사람들은 부정적인 태도를 갖게 되어 경쟁 제품을 구매하게 되는 것이다.
디자이너가 고려해야 할 질문
사람들이 당신의 웹사이트에 있는 메시지를 어떻게 인식하는가? 너무 몰아붙이지는 않는가? 충분히 설득력 있는가?
반발심을 들지 않으면서 고객이 구매하게끔 하려면 무엇이 필요한가?
10. 본 레스토프 효과 Von Restorff effect
이 효과는 1933년 연구에서 Hedwig von Restorff이 발견했다. 사람들은 눈에 띄거나 강조된 대상을 더 잘 기억한다. 일부 과학자들은 사람들이 고립된 물건을 더 오랫동안 상기한다고 한다. 다른 한 이론에서는 고립된 것들을 기억하면 뇌에서 별개의 일을 하는 반면, 유사한 것들은 하나의 범주로 기억해서 더 많은 노력이 든다고 한다. 예를 들어, 쇼핑 목록 항목이 노란색으로 강조되면 사람들은 다른 항목보다 기억하기 쉽다. 이 효과는 단어의 의미에서도 동일하게 나타나는데 ‘프로페셔널한,’ 편안한’,’ 안전한’,’ 내구성이 뛰어난’,’ 최상 퀄리티’,’ 마법 같은’,’ 책임감 있는’에서 '마법 같은'이 가장 두드려져 기억에 남을 것이다.
디자이너가 고려해야 할 질문
비즈니스 입장에서 고객의 관심을 끌고 싶어 하는 것은 무엇인가? 이 옵션을 어떻게 적절하게 강조할 수 있을까?
지금 가격 페이지에서 강조되어 있는 것은 무엇인가? 고객도 마음에 드는 것인가? 전환으로 이어지는가?
이렇듯 심리학은 경향성과 알려주고 디자인할 때 무엇을 주목할지 알려주므로 디자이너에게 훌륭한 부차 기술이다. 인간의 사고가 어떻게 움직이는지 알면, 초기 버전 디자인을 만들거나 사용자들과 테스트할 때 도움이 된다.
가격 인터페이스의 구조
가격은 별도 웹 페이지일 수도 랜딩 페이지 섹션일 수도 있다. 하지만 어쨌든 가격 옵션, 기능, 가격 및 CTA과 같은 늘 고정된 속성이 있다. 디자이너들은 가격을 시각화하기 위해 주로 카드, 테이블, 슬라이더를 사용한다. 이 방법들에는 모두 장단점이 존재한다.
1. 카드 Card
카드는 작은 2-3개의 결제 옵션을 나타낸다. 상품 간 차이가 명확할 때 가장 효과적이다. 카드가 너무 길어져 화면에 맞지 않으면 내용을 줄이거나 테이블 형식을 사용하는 게 낫다. 보통 비전문가를 위해 직설적이고 단순한 상품에 카드를 사용한다.
일반적인 구성 요소
플랜 이름 (보통 아이콘이나 일러스트가 함께 있음)
간단한 설명 (또는 2-5개의 기능 목록)
가격 및 지불 일정 (일, 주, 연간 등)
'권장', '유명한' 또는 기타 레이블 표시
CTA 버튼
2. 테이블 Tables
카드와 달리, 테이블은 가격 옵션이 있는 열과 기능이 있는 행 등 구조가 더 엄격하다. 교차되는 부분에서는 기능이 상품에 포함되어 있는지 또는 기능의 내용이 들어있는지 보여준다. 카드와 달리 테이블은 기능 리스트를 길게 보여줄 수 있다. 테이블은 접속 관리, 동기화 설정, 다른 소프트웨어와 통합 등 특성이 많은 기업용 시스템에서 자주 사용한다. 종종 비즈니스 요구사항에 따라 결정을 내리는 기술자 혹은 관리자를 위해 디자인한다.
일반적인 구성 요소
플랜 이름 (간단한 설명, 목적)
기능별 리스트
가격 및 지불 일정
권장, 유명한 또는 기타 레이블 표시
CTA 버튼
3. 슬라이더 Sliders
슬라이더 방식은 여러 옵션이 있다는 것을 보여주고 제품의 사용자 커스터마이징이 매우 높다. 사람들은 그들의 취향에 맞게 구성할 수 있다. 슬라이더는 사용자 수, 구성원 범위, 용량 등 같이 정의된 상품이 없을 때 적합하다. 서버 스토리지 판매, 소셜 네트워크에서 프로모션, 대출 또는 임대 같은 비즈니스가 대표적이다.
일반적인 구성 요소
파라미터에 대한 슬라이더 혹은 슬라이더 세트
슬라이더 위치와 상관없이 포함된 기능 및 서비스
가격(일반적으로 움직임에 따라 실시간으로 보임)
CTA 버튼
요약하면, 카드는 상품 간 차이가 명확한 상품에, 테이블은 많은 기능이 있는 복잡한 상품에, 슬라이더는 고객이 직접 제품을 구성하고자 할 때 적합하다. 하지만 가격 인터페이스를 어떻게 디자인하는 게 좋을까?
모범 사례들
무엇을 봐야 할지 모른 채 다른 디자이너들의 작업을 보는 것은 효과가 없을 것이다. 가격에 대한 다양한 접근법을 모았고 이것들이 어떻게 유용하고 유용하지 않은지 알려준다.
1. 상품 세트를 균형적으로 만들어라
몇 가지 옵션 중에 어떤 걸 넣어야 할까? 비즈니스 오너와 디자이너가 신중히 고려해야 할 부분이다. 선택지가 너무 많으면 길을 잃고 아예 선택하지 않는데, 특히 처음 구매하는 것이라면 더 그렇다. 예를 들어, 당신이 문구 전문가가 아닌데 130개 검은색 펜을 보면 어떤 걸 고를까? 얼마나 오래 선택할까? 디지털 세계에서는 질감, 무게, 냄새 등으로 옵션을 만지고 선택할 수 없기 때문에 더욱 어렵다. 따라서 단일 옵션이거나 2-4개의 상품 정도로 옵션 수가 적을 때 혼란도 줄어든다.
판매자는 매출을 늘리려고 슈퍼마켓 트롤리를 더 크게 만들어서 고객들이 더 많이 사길 원한다. 우리는 디지털 세계에서도 같은 경향을 관찰할 수 있다. 소프트웨어 회사들은 서비스 상품에 더 많은 옵션을 포함하고 가격을 인상한다. 그러나 이용할 수 있는 제일 작은 상품에 불필요한 기능이 너무 많이 들어있고 심지어 비싸다면 사람들은 사지 않는다. 가장 작은 상품도 실제 상황의 요구에 맞게 유용해야 한다.
2. 목적에 맞는 이름을 지어라
Economy/Standard/Premium 같은 호칭은 특징이 보이지 않고 차별적으로 들린다. 이러한 이름은 사람들이 본인의 요구가 맞는지 알기 위해서 설명글을 읽어야 한다. 더 좋은 방법은 “Individual/Team/Corporation”나 ““Personal/Business”처럼 사용 상황에 따라 이름을 짓는 것이다. 이것은 무엇을 선택해야 할지 알려준다. "Basic/Plus/Maximal"과 같은 이름도 유용하다. 이러한 이름들은 서비스 용량이나 범위의 차이를 나타낼 수 있다.
3. 주요 정보는 항상 보이도록 해라
서비스 요금제의 설명이 너무 길어 스크롤을 해야 한다면 이름, 가격, CTA 버튼은 고정해야 한다. 주요 정보가 항상 보이면, 사람들은 스크롤을 다시 올려 특징들이 그 가격의 가치에 맞는지 다시 확인할 필요가 없다.
기능이 그룹화되면, 각 그룹을 확장하기 위해 여러 번 클릭하는 것보다 스크롤하는 것이 더 자연스럽기 때문에 기능을 확장된 채로 표현해라.
4. 편하게 비교하도록 디자인해라
태블릿이나 노트북 화면은 모든 옵션이 보일만큼 매우 넓다. 쉽게 비교할 수 있어 편하다. 그렇다면 모바일에서는 어떻게 할까? 디자이너들은 간단히 캐러셀 구조로 바꾼다. 이는 결국 표시된 카드는 보이는 반면 나머지는 스크린 뒤에 묻히도록 하므로 문제가 된다. 사람들이 중요한 차이를 바로 볼 수 있도록 요약된 형태의 카드로 하나씩 차례대로 보이게 해라.
5. 민감한 액션에 대해서는 미리 언급해라
사람들은 모든 단계를 진행하다가 “신용카드를 등록하세요”라고 하면 실망한다. 사용자들은 종종 여기서 그만 두지만, 만약 동의하게 되면 또 다른 위험을 겪는다. 당신이 상품 사용을 시작하고 신용카드 등록을 잊어버리고, 결제 통지를 받고, 바로 구독을 취소하고, 마치 돈을 잃어버린 것처럼 느낄 수 있다... 물론, 신용카드를 요구하지 않고 무료 플랜을 만드는 게 제일 좋다. 하지만 그럴 수 없다면 불쾌함과 혐오를 막기 위해 미리 언급해주자.
6. 반복되는 정보에 주의해라
만약 다음 상품이 이전 상품에 추가 기능을 더한 거면, 디자이너는 “기본(basic) 기능에 좀 더 강화된 보안과 개인 컨설팅 기능 추가” 과 같은 문구를 쓴다. 인터페이스는 깔끔하겠지만 사람들은 이전 옵션을 읽고 기억해야 하고 추가 기능을 봐야 한다. ‘A + Z’와 같은 공식이 두 번 이상 반복되면 성가시다. 이전 것을 읽지 않고서는 다음 옵션을 이해할 수 없기 때문이다.
7. CTA 버튼을 올바르게 사용해라
버튼은 모든 인터페이스에 필수지만 가격 페이지에서는 전환에 직접적으로 영향을 준다. 만약 버튼을 “무료로 시작하기” 혹은 “체험판 시작하기”이라 하고 그다음 페이지에서 “문의 연락” 폼을 본다면 고객은 이탈한다. 또는 실패 사례는 구매 버튼 대신 “더 많은 정보(더보기)” 로 유도하는 것이다. 만약 버튼에 “구매하기” 혹은 “바로 구매”가 있으면 상식적으로 그다음 페이지에는 결제 창이 보여야 한다. “실행하기” 혹은 “체험판 시작하기” 라면 그다음 페이지는 프로필을 작성하거나 아니면 더 간단하게 빈 프로젝트 혹은 데모 프로젝트가 보여야 함을 명심해라.
8. 가격을 애매하지 않게 보여주지 마라
2009년 코넬 대학 호텔 보고서에 따르면 레스토랑 메뉴에서 통화 기호($)나 이름(dollar)을 제거하면 평균 지출이 12% 높아졌다. 통화는 돈을 쓰는 것을 상기시키기 때문인데 이전에 언급한 '손실 회피'와도 관련된다. 사람들은 얻는 것보다 잃는 것에 더 민감하다. 디자이너와 마케터들은 이 연구를 잘못 해석해 가격을 숨기거나 글꼴 크기를 두고 악용한다. 디자이너는 유저들이 돈에 너무 집중하지 않게 하는 것과 정직하게 보여주는 것 사이에서 균형을 두어야 한다.
기업들은 장기 계약을 장려하고 연간 청구 금액에 대해 할인을 제공한다. 가격 페이지는 장기간일 때를 기본으로 두고 더 낮은 가격을 나타내되, 애매하지 않아야 한다. 가격을 설명하는 각주는 눈에 덜 띄기 때문이다. 나중에 사용자가 본인의 예상보다 더 높은 가격 청구에 불쾌하지 않게끔 하자.
9. 제안하되 속이진 마라
“추천” “가장 많이 선택” “고객들의 선택” 과 함께 “바로 구매”의 환한 버튼은 전환을 높이는 동시에 급격히 낮게 할 수도 있다. 사람들은 조작에 대한 반발심으로 인터페이스의 시각적 계층 구조를 따르기를 거부할 수도 있다. 만약 유료 옵션만 너무 돋보이고 무료 옵션은 흐릿하고 작아지면 사람들은 당신을 신뢰하지 않을 것이다.
10. 자주 묻는 질문과 답변을 보여줘라
사람들이 인터넷에서 돈을 쓰려할 때, 그들은 안전과 보증을 원한다. 가상의 제품을 살 때, 고객들은 직접 판매자를 보지 못하므로 설득할 수 있는 강력한 방법이 없다. 다행히 FAQ 섹션을 통해 진솔한 대화를 할 수 있다. 당신은 너무 많은 텍스트를 추가해서 페이지가 붐비는 것을 원치 않을 수 있다. 하지만 실제로 사람들은 인터페이스가 깨끗하고 미니멀한 지 보기보다는 문제에 대한 해결책에 찾는데 더 신경 쓴다.
위의 팁들은 마법의 레시피는 아니더라도 좋은 시작점이 될 수 있으므로 사용자들과 자유롭게 당신의 디자인을 테스트해라. 결국, 가격 페이지는 전환과 고객 만족도 둘 다 동시에 높여야 한다. 사람들이 나중에 후회하지 않게 원하는 것을 얻으면서 회사는 충분한 수익을 내는 것이 바로 성공이다.
