만약 당신이 디자이너거나 온라인 마케터 혹은 어쩌다보니 어떤 시점에 어떤 물건을 팔아야 하는 웹사이트를 소유하게 되었다면, 적합한 '구매 버튼'을 디자인할 필요성이 생긴다. 그러고 나면, '지금 구매' 텍스트를 푸른색 사각형 안에 넣는 것만으로는 기대하는 좋은 결과를 얻지 못한다는 사실을 금방 알아챌 것이다.
다행히도, 적합한 '구매 버튼'을 디자인하는 일은 일단 기본 지식만 알고 나면 그다지 어렵지 않다. 시작해볼까.
우선, 버튼 위에 올리는 텍스트가 가장 중요하지만, 갖춰야할 다른 몇 가지 다른 기능도 있다. 왜 텍스트가 가장 중요하다고 했을까? 이걸 상상해보라 - 멋지게 디자인된 버튼 위에 '지옥에나 가라!'는 텍스트가 있다면 어떤 의미가 있나? 상황 종료다. 좋은 카피에서 돈이 만들어진다.
이번 글에선 적합한 '구매 버튼'의 결정적인 다섯 가지 특징에 대해 논하려한다. 한 번 살펴볼까.
1. 전체적인 스타일
이것이 이유 없이 가장 중요한 특징으로 목록의 첫 번째에 올라온 것은 아니다.
버튼을 보랏빛 소로 전환시켜야 한다. 보랏빛 소는 세스 고딘에 의해 유명해진 컨셉이다. 간단히 말해서 버튼을 눈에 띄도록 해야 한다; 눈에 띄도록 한다는 말은 그냥 지나칠 수 없는 무언가를 만든다는 뜻이다. 목장 한가운데의 보랏빛 소같은 무언가 말이다.
어떤 디자이너들은 특별히 이점에 잘 대처하지는 못한다. 버튼이 자리잡은 웹사이트의 색상과 스타일에 아름답게 어울리는 버튼을 만드려 하는 유혹 때문이다. 처음 볼 때는 아주 좋은 생각 같은데, 결국 그렇지는 않다.
문제는 이같은 버튼은 눈에 띄지 않는다는 것이다. 당신도 버튼이 섞여 들어가길 원하지는 않을 것이다; 버튼이 돋보이길 원한다. 그러므로, 버튼은 웹사이트에 섞여들어간 무언가가 아니라, 버튼이 자리잡은 웹사이트에서 완전히 분리된 요소가 되어야 한다.
보랏빛 소 같은 버튼의 멋진 예를 들어보자.
파이어폭스 다운로드 페이지의 모습이다. 여기서 한 가지를 알아채길 바란다. 왼쪽에 있는 다운로드 버튼은 이 페이지에 있는 다른 어떤 것과도 비슷하지 않다. 녹색 요소는 이것 뿐이다. 파이어폭스 로고가 보이는 곳도 여기 뿐이다. 이 페이지에서 가장 큰 요소 중 하나다. 화면을 나눈 부분의 상단에 자리잡고 있다.
이 모든 특징이 이 버튼을 극단적으로 눈에 띄게 만든다. 이것이 보랏빛 소다. 이 버튼이 보이지 않는다고 한다면, 그저 누군가에게 인상적으로 보이고 싶어 그러는거다.
요약하자면: 눈에 띄는 버튼을 만드는데 목표를 두라.
2. 겉모습
색상 얘기로 시작해보자.
눈에 띄도록 하고 싶다면 페이지의 다른 곳 어디에서도 사용하지 않은 색상을 사용하라. 딱 파이어폭스를 만든 사람들이 웹사이트에서 한 것처럼 그대로. Color Scheme Designer 같은 툴을 사용해서 웹사이트의 기존 색상 계획에 어울리면서도 아주 다른 색을 찾아낼 수 있다.
그리고 "다름"이 키워드다. 만약 웹사이트가 대부분 푸른색이라면, 푸른색 구매 버튼은 안된다. 푸른색 음영도 안된다. 푸른 빛깔을 띈 어떤 것도 안된다. 분홍색 혹은 오렌지색 같은 걸 써야 한다. 무슨 말인지 알 것이다.
비법 하나 더. 오렌지색은 붉은색 다음으로 가장 눈에 띄는 색상이다. 그러나 붉은색이 하는 것처럼 부정적인 감정("멈춤", "조심!", "위험" 같은)을 고조시키지는 않는다. 인터넷에서 가장 유명한 오렌지색 버튼은 amazon.com에서 찾을 수 있다.
다음으로 집중할 것은 버튼의 크기다. 뭐, 달리 할 말이 없다. 버튼은 커야 한다. 클수록 좋다. (다시 한 번, 파이어폭스 예시를 떠올려라)
"이보다 더 크게 할 수 있을까?"는 디자인 과정에서의 좋은 질문이다.
단순하게 혹은 화려하게?
버튼은 화려할 수도 있다. 파이어폭스 버튼을 한 번 더 보자. 화려하다. 오렌지색 여우도 있지만 여전히 버튼처럼 보인다. 그리고 이 점이 넘어서면 안되는 경계선이다. 만약 버튼처럼 보이지 않는 버튼이라면 아무도 클릭하지 않을 것이다.
이 점이 둘 중 어느 게 나은지 간단히 말할 수 없는 이유다 - 화려한 것 혹은 단순한 것. 스스로 알아내야만 한다. 언제나 분리된 테스트를 하라. 화려한 것과 단순한 것 두 가지 버튼을 만들어라. 같은 시간에 두 개를 모두 사용해서 어느 것이 더 효과적인지를 알아보라. Google Website Optimizer가 이런 테스트에 도움이 된다.
단순한 버튼의 간략한 예시.
보다시피 어떤 오렌지색 여우도 쓰지 않았지만, 여전히 아주 잘 보인다. 사실 ThemeFuse (내가 속한 프리미엄 워드프레스 테마 스토어)는 shortcodes라 불리는 걸 제공한다. 다른 것도 많지만, 이러한 shortcodes는 멋지게 보이는 버튼 제작을 아주 쉽게 해준다.
한 줄만 사용한 예시:
[button link="domain.com" class="btn_orange"]Click here to buy my awesome product![/button]
내가 얻는 결과:
3. 글꼴
산-세리프 폰트는 모든 종류의 표준이다. 왜냐하면 산-세리프 폰트는 모든 온라인 사용처에서 가독성이 높기 때문이다. (다른 면으로 세리프 폰트는 인쇄 출판용으로 더 좋다)
버튼 위의 카피는 페이지 내에서 가장 중요한 텍스트인만큼, 가능한한 읽기 쉽도록 만들고 싶을 것이다. 모두 대문자를 쓰는 건 좋은 생각이 아니다. 섞어쓰는 것이 훨씬 낫다. 섞어 쓴다는 말은 단어의 첫번째 글자만 대문자로 쓰라는 뜻이다. ("for", "the", "and" 같은 것은 제외하고)
(Image source: Gomediazine)
사용할 수 있는 안전한 글꼴들 몇 개: Arial, Helvetica, Franklin Gothic, Myriad 혹은 그외 어떤 클래식 산-세리프 폰트도. 정말이다.
이제 색상에 대해. 카피는, 당연하게도, 고대비 색상으로 써야 한다. 회색에 회색은 안된다. 흰색에 검은색이거나 오렌지색에 푸른색을 쓰라.
다시 한 번, 텍스트는 가독성이 아주 높아야 한다.
4. 위치
별로 놀랍지 않겠지만, 가장 좋은 자리는 웹사이트의 디자인에 따라 다르다. 그러나 여전히 변치 않는 법칙이 있다.
가능한한 가장 당연한 자리에 놓아라. 이럴 때 창의적으로 하려고 하면 안된다. 고객/사용자에게 당연한 곳에 놓아야 한다.
누군가 웹사이트를 방문할 때마다 일정한 것들은 일정한 자리에 있기를 기대한다. 가령: 로고는 상단 왼쪽 모서리에 있고, 쇼핑 카트는 상단 오른쪽 모서리에 있고, 카피라이트 문구는 하단에 있고, 등등. 당신의 일은 구매 버튼이 있어야할 당연한 자리가 어딘지를 파악해서, 그 자리에 놓는 것이다.
물론, 동시에 가장 잘 보이는 곳이기도 해야 한다. 이건 두 가지를 뜻한다:
- 무조건 화면이 접히는 지점 상단에 있어야 하고,
- 여백을 두려워하지 말라. 여백은 모든 좋은 웹디자이너의 친구이다. 명심하라. 웹사이트에 얼마나 많은 것들을 채워넣느냐가 아니라, 얼마나 많은 것을 덜어낼 수 있느냐가 관건이다.
버튼을 반복해서 페이지 하단에 넣는 것만으로도 배치 계획에 큰 힘을 줄 수 있다. 이렇게 하면 누군가 한 페이지를 다 읽고 난 다음에도 여전히 버튼을 실행할 수 있다.
5. 부가 요소
바로 이것이 화룡점정이다. 부가적인 요소는 버튼이 더 돋보이도록 가시성을 강화한다. 예시 요소: 화살, 쇼핑 카트, 돋보기, 더하기 사인 혹은 여러가지 브랜딩 요소.
내가 가장 좋아하는 예시 -파이어폭스 예시- 는 정말 멋진 부가 요소를 활용했다 - (그들의 로고로 알려진) 오렌지색 여우.
부가 요소를 사용하는 첫 번째 규칙은 버튼의 목적을 강조하는 것이다. 일례로, 두 개의 화살표가 아래로 향한 것은 다운로드 버튼으로 딱이다. 쇼핑 카트 아이콘은 장바구니에 담기 버튼으로 잘 어울린다(위의 아마존 예시). 돋보기는 검색 버튼으로 적합하다. 이런 것들은 더 있다.
어떤 브랜딩 요소도 활용할 수 있다. 가령: 표준 RSS 아이콘을 피드 구독 버튼에 사용하고, 새 아이콘을 트위터에서 팔로우하기 버튼에 사용하고, 오렌지색 여우를 파이어폭스 다운로드에 사용하고, 자체 로고를 내 물건 사기 버튼에 사용하는 식이다.
몇 가지 예시:
"무료"의 힘
또 다른 기법은 영어에서 가장 힘있는 단어를 사용하는 것이다 -무료. 언제든 무료라고 광고하면, 사람들은 예측할 수 있는 불합리한 행동을 한다 (내 말이 무슨 뜻인지를 확인하려면 Dan Ariely의 멋진 책 "The Upside of Irrationality"1를 찾아보라)
더 많은 예시:
다음은?
당신이 포토샵이나 다른 비슷한 소프트웨어에 능숙하다면 지금 당장 멋진 버튼을 만들러 가면 된다. 다른 방법으로 이 포스트에서 앞서 말한 것처럼 ThemeFuse가 제공하는 아무 워드프레스 테마를 사용하는 운좋은 사람이 되거나.
- 국내에는 '댄 애리얼리, 경제 심리학'으로 출간됐다. [본문으로]
'웹과 모바일' 카테고리의 다른 글
| 로딩 상황을 보여주는 프로그레스바 디자인에 따라 체감속도가 달라진다 (0) | 2012.05.30 |
|---|---|
| 외부 사이트 링크를 새 탭으로 여는게 옳은가? (2) | 2012.03.29 |
| 직원을 채용할 때 매번 묻는 질문은? (2) | 2012.02.20 |
| 모서리가 둥근 사각형이 각진 사각형보다 좋은 이유 (2) | 2012.01.18 |
| 모바일 먼저! (0) | 2012.01.18 |