이기는 구입 단추를 디자인하는 5 개의 끝

디자이너 또는 온라인 마케터 인 경우 또는 무언가를 판매하려고하는 웹 사이트를 소유 한 경우 어느 시점에 적절한 "구매 버튼"을 설계해야합니다. 그런 다음 신속하게 “지금 사십시오” 좋은 결과를 얻기를 원하면 파란색 직사각형의 텍스트로 충분하지 않습니다..

다행스럽게도 기본적인 지식을 알게되면 적절한 "구매 버튼"을 설계하는 것이 그리 어렵지 않습니다. 여기에 간다..

우선, 버튼의 텍스트가 가장 중요합니다., 그러나 해결해야 할 몇 가지 다른 기능이 있습니다. 텍스트가 가장 중요하다고 말하는 이유는 무엇입니까? 이것을 상상해보십시오 - 텍스트에 아름답게 디자인 된 단추가 있다면 요점은 무엇입니까? “지옥 에나 가라!”? 경우 폐쇄. 좋은 사본은 화폐가 만들어진 곳이다..

오늘의 기사에서 우리는 5 가지 중요한 특징 적절한 "구매 버튼". 한 번 보자!

1. 전체적인 스타일

이것은 가장 중요한 특성이기 때문에 이유없이이 목록에서 # 1 지점입니다..

너는 싶어. 단추를 자주색 암소로 바꿔라.. 이것은 세스 고딘 (Seth Godin)이 대중화 한 개념입니다. 간단히 말해서, 당신은 그것을 주목해야합니다. 주목할 가치가 있다는 것은 간과 할 수없는 것을 의미합니다. 목초지의 한가운데있는 자주색 암소와 같은 것.

일부 디자이너는이 점을별로 좋아하지 않습니다. 웹 사이트의 색상과 스타일과 아름답게 연결되는 버튼을 만드는 것이 유혹입니다. 처음에는 아주 좋은 생각 인 것 같았습니다..

문제는 그러한 버튼이 현저하지 않다는 것입니다. 당신은 당신의 단추가 섞이는 것을 원하지 않는다. 너는 그것을 두드러지게하고 싶다. 그러므로, 그것은 단지 웹 사이트와 일치 할 필요가없는 어떤 웹 사이트에 앉아있는 완전히 별개의 요소로서 만들어 져야합니다..

그냥 보라색 암소처럼 좋은 예를 들어 보겠습니다..

모질라 파이어 폭스

이것이 Firefox 다운로드 페이지의 모습입니다. 너 한테 한가지 주목 해줬으면 해. 다운로드 단추 인 왼쪽의 단추는 해당 페이지의 다른 것처럼 보이지 않습니다. 유일한 녹색 것입니다. Firefox 로고를 제공하는 유일한 장소입니다. 거기에 가장 큰 요소 중 하나입니다. 스크롤없이 볼 수있는 부분 위에 있습니다..

이러한 모든 특성을 통해이 버튼이 매우 잘 보입니다. 그것은 자주색 암소입니다. 너가 너를 보지 않는다고 말하면 너는 단지 누군가에게 감동을 주려고한다..

요컨대 : 눈에 띄는 버튼이있는 것을 목표로하십시오..

2. 외관

함께 시작하겠습니다. 그 색깔.

눈에 띄기를 원한다면 페이지의 다른 곳에서는 사용되지 않은 색상을 사용하십시오. Firefox 사용자가 자신의 웹 사이트에서하는 것처럼. 색 구성표 디자이너와 같은 도구를 사용하여 웹 사이트의 현재 색 구성표와 잘 어울리지 만 여전히 매우 다른 색을 찾을 수 있습니다.

과 “다른” 여기 키워드입니다. 웹 사이트가 대부분 파란색 인 경우 파랑 구매 버튼을 원하지 않습니다. 파란색 음영은 원하지 않습니다. 너는 푸른 빛이 도는 것을 원하지 않는다. 당신은 핑크색이나 오렌지색 등을 원합니다..

또 하나의 속임수. 주황색은 빨강 바로 다음에 가장 눈에 잘 띄는 색으로 알려져 있습니다. 그러나, 그것은 빨간색이하는 모든 부정적인 감정을 일으키지 않습니다. “중지”, “밖을 내다!”, 과 “위험”). 인터넷에서 가장 인기있는 주황색 버튼은에서 찾을 수 있습니다. amazon.com.

에 집중할 다음 것은 버튼의 크기. 글쎄, 내가 뭐라 말할 수 있겠 니? 더 커질수록 좋습니다. (다시 Firefox 예제.)

“내가 더 크게 만들 수 있을까??” 디자인 단계에서 질문하는 것이 좋습니다. 많이해라..

그것이되어야 하는가? 단순하거나 번쩍 거리는? 버튼은 너무 화려하지 않아야합니다. 다시 한번 Firefox 버튼을보십시오. 화려 해. 그것은 그것에 오렌지색 여우를 가지고 있지만, 여전히 버튼처럼 보입니다. 그리고 그것은 당신이 교차 할 수없는 경계입니다. 버튼이 아무도 보이지 않으면 아무도 클릭하지 않습니다..

그래서 단순한 답이 없습니다. 화려하고 단순합니다. 너 자신을 찾아야 해. 항상 테스트를 나눕니다. 하나는 화려하고 하나는 간단한 두 개의 버튼을 만듭니다. 동시에 두 가지를 모두 사용하고 어떤 것이 더 나은지 확인하십시오. Google 웹 사이트 최적화 도구가 도움이 될 것입니다..

간단한 버튼의 간단한 예.

테마 퓨즈

보시다시피 버튼은 오렌지 여우를 사용하지 않고 있지만 여전히 눈에.니다. 사실, ThemeFuse (프리미엄 WordPress 테마 스토어, 내가 참여하고있는 곳)는 shortcodes라고하는 작은 것을 제공합니다. 다른 것들 중에서도 이러한 단축 코드를 사용하면 멋진 모양의 단추를 만드는 것이 매우 쉽습니다..

예를 들어, 다음과 같이 한 줄만 입력하면됩니다.

[button link = "domain.com"] 내 멋진 제품을 구입하려면 여기를 클릭하십시오! [/ button]

나는이 결과를 얻는다.

3. 글꼴

산세 리프 글꼴 모든 종류의 버튼에 대한 표준입니다. 산세 리프 글꼴은 모든 온라인 사용에 대해 매우 읽기 쉽기 때문입니다. (반대로, 인쇄 출판물의 경우 serif 글꼴이 더 좋습니다.)

페이지의 텍스트 중 가장 중요한 부분이므로 단추의 복사본을 가능한 한 읽을 수 있어야합니다. 모든 대문자는 좋은 생각이 아닙니다. 혼합 케이스가 훨씬 효과적입니다. 대소 문자를 혼합하면 각 단어의 첫 글자가 대문자라는 뜻입니다. (같은 단어를 제외하고 “...에 대한”, “그만큼”, “과”, 기타.)

(이미지 소스 : Gomediazine)

사용할 수있는 안전한 글꼴은 Arial, Helvetica, Franklin Gothic, Myriad 또는 기타 고전적인 산 세리프체 글꼴입니다..

색깔은 어떨까요? 물론 사본은 버튼 색상과 높은 대조를 이루어야합니다. 그레이 - 온 - 그레이를 원하지 않습니다. 당신은 black-on-white 또는 blue-on-orange를 원합니다..

다시 말하지만, 텍스트는 매우 읽을 수 있어야합니다..

4. 배치

최고의 게재 위치는 귀하의 웹 사이트 디자인에 달려 있습니다. 이는 놀라운 일이 아닙니다. 그러나 여전히 준수할만한 규칙들이있다..

그것을 가능한 가장 확실한 장소. 여기에서 창조적으로 노력하지 마십시오. 게재 위치는 고객 / 사용자에게 분명해야합니다..

누군가가 웹 사이트를 방문 할 때마다 특정 장소에서 특정 물건을 볼 것으로 예상합니다. 상황 : 상단 왼쪽 모서리에 로고, 오른쪽 상단 모서리에 장바구니 요약, 바닥 글에 저작권 조항 등. 귀하의 직업은 구매 버튼에 대한 가장 확실한 장소를 파악하고 거기에 넣으려고 시도하는 것입니다..

물론, 동시에 가장 눈에 잘 띄는 장소 여야합니다. 이것은 두 가지를 의미합니다.

그것 전혀 배치되어야한다. 접을 수있는 부분, 과
공백을 두려워하지 마십시오. 공백은 모든 훌륭한 웹 디자이너의 친구입니다. 웹 사이트에 얼마만큼 물건을 놓을 지 중요하지 않다는 것을 기억하십시오. 중요한 것은 물건에서 얼마나 많은 물건을 지울 수 있는지입니다..

버튼 복제 및 페이지 하단에 배치하여 스테로이드에 배치 전략을 적용 할 수 있습니다. 그렇게하면 누군가가 전체 페이지를 읽을 때 여전히 페이지 맨 아래에서 조치를 취할 수 있습니다..

5. 추가 요소

이것은 케이크 위에 장식입니다. 추가 요소는 버튼의 가시성을 더욱 향상시킵니다. 요소의 예 : 화살표, 장바구니, 돋보기, 더하기 기호 또는 다양한 브랜딩 요소.

내가 좋아하는 예 - Firefox 예제 - 정말 멋진 추가 요소 인 오렌지 여우 (일명 로고).

경험 법칙은 다음과 같은 추가 요소를 사용하는 것입니다. 버튼의 목적 강조. 예를 들어, 두 개의 아래쪽 화살표는 다운로드 버튼에 대해 잘 작동합니다. 쇼핑 카트 아이콘은 장바구니 추가 버튼 (위의 아마존 예제)과 함께 잘 작동합니다. 돋보기는 검색 버튼으로 잘 작동합니다. 등등.

브랜딩 요소를 사용할 수도 있습니다. RSS 피드 버튼이있는 표준 RSS 아이콘, 트위터 미투데이 트위터 버튼이있는 새 아이콘, 다운로드 - 파이어 폭스 버튼이있는 오렌지 폭스, buy-my- 물건 버튼.

여기 예시들이 있습니다 :

Wakeinteractive