장식 재료 클릭 가능한 색상. RSA 광고에 가장 적합한 색상을 선택하는 스크립트

클릭 가능한 색상. RSA 광고에 가장 적합한 색상을 선택하는 스크립트

나는 크고 광대한 세상에서 흥미롭고 유용한 뉴스를 계속해서 게시하고 있습니다. SEO. 오늘 우리는 웹 사이트 디자인 색상에 대해 이야기하겠습니다. 예, 예, 정확히 색 구성표에 관한 것입니다. 자, 시작해 보겠습니다. 웹사이트 디자인 색상미국 옥스포드 대학의 심리학자들은 광고 클릭률에 영향을 미친다고 믿습니다.

행동: 포털 광고 클릭률에 대한 사이트 색상의 영향

미국 과학자들은 평균 사용자가 하나의 인터넷 포털에서 약 2분을 소비한다고 계산했습니다. 이 중 마지막 4~7초가 우리 SEO 전문가에게 결정적인 시간입니다. 물론 이는 디자이너에게도 적용됩니다. 이 기간 동안 사용자는 웹사이트를 떠나거나 제공된 광고를 클릭합니다. 선택은 다음에 달려있다 웹사이트 및 광고 블록 색상. "가장 나쁜"(바람직하지 않고 클릭할 수 없는) 옵션 웹사이트 디자인- 회색이나 붉은색 톤으로 사이트를 디자인하는 것입니다. 인터넷 리소스에 게시된 광고의 효율성과 마찬가지로 트래픽도 0(클릭률)에 가까워집니다. 흰색이 주요 색상인 사이트에 있는 사용자는 편안함과 평온함을 경험합니다. 그들은 배너를 잘 클릭합니다. 문맥 광고는 헤드라인이 예상외로 (매우) 밝고 대비가 높으며 텍스트와 URL이 최대 크기일 경우에만 관심을 끕니다. 녹색 디자인에서도 거의 같은 일이 발생합니다.

파란색 포털 디자인은 신뢰를 위한 것이며 노란색은 상황에 가장 적합합니다.

파란색 디자인과 레이아웃을 갖춘 웹사이트는 신뢰를 불러일으킵니다(소셜 네트워크 "VKontakte" 및 "Facebook"이 즉시 떠오릅니다). 흥미롭게도 여기의 광고는 흰색 배경에 있고 제목이 2가지 더 어두운 색상으로 설정되어 있으면 작동합니다(이 역시 우리가 가장 좋아하는 "VKontakte" 및 Facebook에 적합합니다). 최다 승리 웹사이트 디자인 색상, 영국 심리학자들에 따르면 노란색입니다. 많은 인터넷 사용자가 한 번에 2~3개의 광고를 보기 때문에 여기서 클릭수에 대한 방문수 비율은 1대 2.5입니다. 하지만 모든 노란색 사이트의 배너는 효과가 없습니다. 사람들이 광고 블록과 배너를 클릭하는 포털 디자인에 적합한 또 다른 색상은 대비되지 않는 갈색입니다. 여기서 배너 광고의 결과는 방문 3회당 클릭 1회이고, 문맥 광고의 경우 약 1:2입니다.

추신. 요약해보자. 우리를 혼란스럽게 만드는 첫 번째 것은 물론 테스트 대상 청중이 러시아어를 사용하는 사람이 아니라는 것입니다. 마찬가지로 CIS 거주자는 미국이나 유럽 거주자가 아닙니다. 러시아 웹사이트는 제한적인 유럽 및 미국 인터넷 리소스와 달리 항상 무지개 색상과 디자인 음영으로 구별되었습니다(놀라운 예는 Apple 웹사이트입니다). 둘째, 이와 관련하여 우리 광고는 밝고 대조적이기 때문에 "클릭"됩니다(내 관찰). 노란색 사이트와 포털에 대해 동의하지 않을 수 있습니다. 국내 네트워크 사용자 사이에 자신감을 불러일으키지 않습니다. (큰 노란색 포털에 대해 바로 말하지 않겠습니다. 아무도 생각나지 않습니다.) 아마도 어린 아이들 사이에서는 예외일 것입니다. 의견)! 일반적으로 작은 테스트를 수행해야 할 수도 있습니다. 이에 대해서는 "실험" 섹션에서 설명하겠습니다.

어떤 버튼 색상이 가장 높은 전환율을 보이는지는 많은 사람들이 답을 알고 있는 오래된 철학적 질문입니다. "빨간색" - 초보 마케팅 담당자가 대답합니다. "대조적" - 숙련된 마케팅 담당자가 답변할 것입니다. 이 주제에 대해 21,666명의 사용자를 테스트했습니다. 그리고 우리는 꽤 흥미로운 결론에 도달했습니다.

기사의 시작 부분에 관심을 끌기 위해 음모와 흥미로운 사실을 추가해야 합니다. 이 조언을 바탕으로 실제로 버튼 색상만 변경해도 전환율이 최대 65% 증가했다고 말할 수 있습니다. 이 기사에서는 결과와 수행 방법에 대해 설명합니다.

색상을 사용하면 전환율을 얼마나 높일 수 있나요?

우리가 전환 관리를 위한 마법의 약을 발명했다는 사실은 말하지 않겠습니다. 전환율이 증가하는 경우에는 한 가지 간단한 결론에 도달했습니다. 모든 사람에게 항상 적용되는 100% 진술은 없습니다. 마법의 약도요. 우리는 이전에 어떤 경우에는 "무료"라는 단어가 어떻게 전환율을 낮추는지에 대해 썼습니다. 다른 "100%" 진실에 대해서는 무엇을 말할 수 있습니까?

그렇다면 버튼 색상만 바꾸는 것만으로도 전환율을 얼마나 높일 수 있을까요?

전환율이 최대 65% 증가했습니다. 65%가 최대 테스트 결과였습니다. 평균은 11%였다. 하지만 이러한 전환율 증가조차도 매우 좋은 결과입니다. 이는 버튼의 색상을 변경하여 달성할 수 있다는 점을 고려하면 됩니다.

빨간색은 승자의 색이다

많은 전문가 테스트에서는 빨간색 버튼의 전환율이 가장 높다고 합니다. 왜? 우리는 각 색상이 고유한 연관성을 가지며 특정 감정을 불러일으킨다는 것을 알고 있습니다. 빨간색은 정지, 위험, 열정을 의미합니다. 그리고 대부분의 경우 인터넷 마케팅에서 더 나은 결과를 가져온다고 믿어집니다.

다음은 A/B 테스트를 생성하는 알고리즘입니다.

  1. 생성자에서 위젯을 만듭니다. 5분 정도 소요됩니다.
  2. 그것을 복사하고 테스트를 위해 변경하십시오. 1분 정도 소요됩니다.
  3. A/B 테스트를 생성하고 다음 위젯을 선택하세요. 1분 정도 소요됩니다.

1. 생성자에서 위젯 만들기

위젯을 생성하려면 생성자에 등록되어 있어야 합니다.

생성 프로세스는 3단계로 구성됩니다.

  1. 사용할 위젯 템플릿을 선택합니다.
  2. 위젯 편집: - 원하는 텍스트 작성 - 필요한 경우 색상 변경 및 이미지 업로드
  3. 디스플레이 설정 선택: - 위젯을 표시할 시기(시간별, 떠날 때, 페이지를 스크롤할 때 등) - 어떤 장치(컴퓨터, 모바일, 태블릿)에서 - 변환 후 수행할 작업(감사합니다라고 말하고 다음을 통해 리디렉션) 링크를 클릭하거나 위젯을 닫으세요)

위젯 생성에 대한 동영상을 시청하실 수 있습니다. 여기에서는 각 단계에 대해 자세히 설명합니다. 위젯 생성에 대한 텍스트 지침은 여기에서 찾을 수 있습니다.

디자이너에는 훨씬 더 많은 사용자 정의 옵션이 있다는 점에 주목하고 싶습니다. 예를 들어 특정 수의 페이지를 볼 때 요일, 추천 소스, 표시 빈도 등을 기준으로 표시됩니다. 하지만 먼저 기본 설정을 사용한 다음 추가 설정을 시도해 보는 것이 좋습니다.

2. 테스트를 위해 위젯을 복사하고 변경합니다.

위젯을 생성한 후에는 복사본을 만들어야 합니다. 새 위젯을 변경하고 A/B 테스트를 실행합니다. 이렇게 하려면 생성된 위젯에서 “복사” 아이콘을 클릭하세요.

사이트에서 자동으로 활성화됩니다. 이제 편집되지 않았으므로 꺼야 합니다. 이렇게 하려면 상태를 변경하세요.

이제 "편집기에 추가" 아이콘을 클릭하여 설정으로 이동하세요.

여기에서 테스트하려는 요소를 변경하세요. 예를 들어 버튼의 색상을 변경해 보겠습니다. 이 작업은 한 번의 클릭으로 완료됩니다. 다른 버튼 색상을 선택하기만 하면 됩니다.

"버튼 색상"을 클릭하고 원하는 색상을 선택하세요.

그런 다음 위젯을 저장하십시오. 4단계에서는 이전 위젯의 설정을 유지하기 위해 아무것도 변경할 필요가 없습니다. 이렇게 하려면 "저장" 버튼을 클릭하기만 하면 됩니다.

이제 서로 다른 버튼 색상으로 2개의 위젯을 만들었습니다. A/B 테스트 생성으로 넘어갈 수 있습니다. 편의상 남은 것은 두 번째 위젯에서 이름을 변경하는 것뿐입니다.

3. A/B 테스트 만들기

테스트를 생성하려면 'A/B 테스트' 메뉴로 이동해야 합니다. 그리고 '테스트 만들기' 버튼을 클릭하세요.

여기에는 다음이 필요합니다.

사이트 선택 - 테스트 이름 작성

테스트 유형 선택

시험 종류에 관해서. KEPLER LEADS에는 클래식과 개인이라는 두 가지 유형의 A/B 테스트가 있습니다. 차이점은 재방문자에게 위젯을 표시한다는 점입니다. 재방문자에게 새 위젯 옵션을 표시하려면 클래식 테스트를 선택하세요. 재방문 사용자에게 다른 위젯 옵션이 표시되지 않도록 하려면(표시된 첫 번째 위젯이 기억되고 디스플레이 설정에 따라 항상 이 위젯만 실행됨) 개별을 선택하세요.

테스트 유형을 선택한 후 '추가' 버튼을 클릭하세요. 마지막 단계가 남았습니다. 테스트할 위젯을 선택하세요. 이렇게 하려면 "위젯" 셀을 클릭하고 선택하세요.

위젯을 선택한 후 모두 활성화되어 있는지 확인하세요. 비활성 위젯이 있는 경우 여기에서 바로 활성화할 수 있습니다.

모두! 테스트가 생성되었습니다. 테스트 통계에서 모든 결과를 볼 수 있습니다. 이렇게 하려면 테스트 이름 오른쪽에 있는 "보기" 아이콘을 클릭하세요. 1,000회 노출의 총 트래픽에 대해 테스트를 실행하는 것이 좋습니다(이 내용은 '조회수' 열에서 확인할 수 있음). 그런 다음 다음 테스트를 실행하기로 결정합니다.

결론

귀하의 작업은 여기서 끝나지 않습니다. 이제 결과를 추적해야 하며 중요한 데이터(1000명 이상의 방문자 권장)에 도달한 후 다른 가설을 테스트해야 합니다. 이는 헤드라인, 클릭 유도 문구, 가치 제안, 이미지 등이 될 수 있습니다. 다음 기사에서는 다른 A/B 테스트에 대해 쓸 것입니다. 댓글로 결과를 공유해 주세요.

HTML을 사용하면 페이지의 모든 링크 색상을 설정할 수 있을 뿐만 아니라 개별 링크의 색상도 변경할 수 있습니다.

페이지의 모든 링크 색상 설정

링크 색상은 태그 속성으로 설정됩니다. . 속성은 선택사항이며, 지정하지 않을 경우 기본값이 사용됩니다.

link - 웹 페이지의 링크 색상을 정의합니다(기본 색상은 파란색, #0000FF).

vlink - 이미 방문한 링크의 색상입니다. 기본 색상은 보라색, #800080입니다.

HTML에서 색상은 일반적으로 #rrggbb 형식의 16진수로 지정됩니다. 여기서 r, g 및 b는 각각 빨간색, 녹색 및 파란색 구성 요소를 나타냅니다. 각 색상에는 00부터 FF까지의 16진수 값이 부여되며, 이는 10진수로 0부터 255까지의 범위에 해당합니다. 그런 다음 이러한 값은 앞에 # 기호가 붙은 단일 숫자로 결합됩니다(예 1).

예 1: 링크 색상 설정

링크 색상

사이트 콘텐츠



색상을 16진수 형식으로 지정할 필요는 없으며 키워드를 사용할 수도 있습니다. 이 예에서는 웹 페이지의 배경색을 검정색으로, 링크 색상을 빨간색으로 설정했습니다.

링크 색상을 변경하려면 CSS를 사용하는 것이 더 편리합니다. 웹 페이지의 모든 링크에 대한 색상을 설정하기 위해 다음 의사 클래스가 적용되어 A 선택기에 추가됩니다.

Visited — 방문한 링크의 스타일입니다.

active — 활성 링크의 스타일입니다. 링크를 클릭하면 링크가 활성화됩니다.

예제 2에서는 스타일을 사용하여 웹 페이지의 링크 색상을 변경하는 방법을 보여줍니다. 이를 위해 특정 텍스트(이 경우 링크)의 색상을 설정하는 색상 스타일 속성을 사용합니다.

예 2. 스타일을 통해 지정된 링크 색상

스타일 사용

사이트 콘텐츠



페이지의 개별 링크 색상 설정

위의 색상 설정 방법은 웹 페이지의 모든 링크에 적용됩니다. 그러나 때로는 서로 다른 색상을 동시에 사용해야 하는 경우도 있습니다. 예를 들어 웹 페이지의 어두운 영역에는 밝은 색상을, 밝은 영역에는 어두운 색상을 사용합니다. 이를 위해 스타일을 사용할 수도 있습니다.

링크 색상을 변경하려면 태그에서 style="color: #rrggbb" 속성을 사용하세요. , 여기서 #rrggbb는 16진수 색상입니다. 색상 이름을 사용하거나 rgb (132, 33, 65) 형식으로 색상을 지정할 수도 있습니다. 빨간색, 녹색, 파란색의 소수점 값은 괄호 안에 표시됩니다(예 3).

링크 색상

사이트 콘텐츠

인터넷 마케팅

유용성



이 예에서는 스타일을 사용하여 색상을 설정하는 세 가지 방법을 보여줍니다.

방문자가 클릭할 가능성이 높은 광고의 색상 디자인을 추측할 필요가 없습니다. 다양한 색상으로 광고를 표시하는 실험이 필요합니다. 그리고 그 결과를 바탕으로 귀하의 사이트 방문자의 선호도를 알아낼 것입니다. 그러나 창밖은 21세기다. 그러므로 우리는 우리를 위해 모든 것을 할 수 있는 작은 스크립트를 작성할 것입니다.

광고에 어떤 색상을 선택해야 할까요?

내 실험에서는 파란색, 빨간색, 녹색의 세 가지 기본 색상을 결정했습니다. 각각의 밝기를 다르게 해서 찍어봤습니다. 그리고 내 사이트의 링크 색상이라는 색상을 하나 더 추가했습니다. 따라서 일곱 가지 색상이 내 실험에 참여하게 됩니다.

광고 색상 순환 스크립트

기본적으로 Profit-Partner에서 제공한 YAN(Yandex Advertising Network)의 광고 표시 스크립트를 사용합니다. 자동 색상 변경을 추가해 보겠습니다. 각 색상마다 고유한 라벨을 만듭니다. 따라서 앞으로는 이러한 섹션을 사용하여 사이트의 어떤 광고 색상이 방문자에게 더 매력적인지 분석할 수 있습니다.

스크립트를 실행하고 데이터 수집을 시작하겠습니다. 통계에는 스크립트에서 생성된 조각이 표시됩니다.

광고 색상 디자인 선택에 대한 실험을 올바르게 수행하는 방법

실험은 적어도 일주일 동안 24시간 내내 수행되어야 합니다. 주말과 근무일의 모든 시간 종속성과 기능을 고려합니다. 각 색 구성표가 최소 1000번 이상 표시되는 것이 중요합니다.

실험 결과, 어떤 색상이 더 나은지

세 가지 주요 색상 중에서 선택하면 내 사이트에는 명확한 리더가 없습니다. 오류로 인해 몇 퍼센트의 차이가 발생할 수 있습니다. 그러나 일반적인 추세는 Profit-Partner COP 전문가의 권장 사항과 일치합니다. 클릭하기 쉬운 색상은 빨간색입니다.

7가지 색상을 모두 자세히 살펴보면 방문객이 선호하는 그룹은 진한 빨간색(#990000), 밝은 녹색(#00CC00), 진한 파란색(#000099)입니다.

내 통계를 보지 말고 Yandex 광고 네트워크에서 광고의 색상 디자인을 선택하는 방법에 대한 직접 실험을 수행하는 것이 좋습니다.
사이트가 여러 개인 경우 각 사이트에 대해 자체 실험을 수행해야 합니다.
설계를 변경한 경우 실험을 다시 실행하세요.
저처럼 여러 광고 단위가 있는 경우 각 광고 단위에 대해 자체 실험도 수행해야 합니다. 놀라시겠지만 제 사이트에서는 기사 중간과 끝 부분의 광고 단위에 따라 사용자 선호도가 다릅니다.
실험은 최소 7일 동안 24시간 내내 진행되어야 합니다.

색상 작업은 모든 웹 디자이너에게 가장 중요한 기술입니다. 이를 적절히 활용하면 사이트의 성공을 가져올 수 있으며, 범위를 만드는 데 있어 작은 실수라도 향후에 많은 문제를 일으킬 수 있습니다. 이 글에서는 디자이너들이 웹사이트에서 색상 작업을 할 때 저지르는 10가지 실수를 살펴보고 이를 방지하는 방법을 알려드리겠습니다.

심리적 기법을 시행하는 것을 꺼림

웹사이트의 색 구성표에 대한 사용자 반응과 감정을 설명하는 많은 연구가 있습니다. 물론 이것은 논쟁의 여지가 있는 분야입니다. 색상 선호도는 국가 문화, 개인 경험 및 기타 이유에 따라 결정되지만 색상이 전달하는 분위기를 고려하지 않는 것은 불가능합니다. 웹사이트를 만들 때 색상 인식에 대해 우리가 알고 있는 지식을 적용하는 것도 마찬가지로 가치가 있습니다.

예를 들어, 주황색은 쇼핑 동기를 부여하는 훌륭한 색상입니다. 온라인 상점에 적합한 클릭 유도 문구를 완벽하게 전달합니다.

녹색은 신뢰를 상징합니다. 음식에 있어서 신뢰보다 더 중요한 것이 있을까요?



1. 맹목적인 모방

고객의 전형적인 실수는 디자인에 대한 자신의 생각을 투영하는 것입니다. 귀하가 가장 좋아하는 포럼은 따뜻한 "캐러멜" 색상으로 구성되어 있고, 주요 텍스트는 짙은 갈색이며, 메시지 배경은 연한 노란색입니까? 이는 에어컨 전용 사이트가 이 범위를 상속해야 한다는 의미는 아닙니다. 에어컨은 상쾌한 느낌을 주어야 합니다. 이러한 종류의 대부분의 사이트가 파란색과 흰색 톤으로 디자인된 것은 아무것도 아닙니다.

특정 사이트가 정말 마음에 들더라도 "정확히 동일하지만 내 제품에 관한 것"을 주문하기 전에 다시 한번 생각하십시오.

2. 부족한 클릭 유도 문구

웹사이트에 강력한 클릭 유도 문구가 있다면 사용자가 눈에 띄게 표시되어야 합니다. 즉, 사용자의 시선이 거기에 집중되어야 합니다. 창백하고 구별되지 않는 클릭 유도 문구는 완벽하게 공식화되어 있어도 효과가 없습니다. CTA가 말 그대로 "PRESS ME"라고 외치는 반대 상황은 그리 좋지 않습니다. 행동 촉구는 조화롭고 대비되는 색상과 디자인을 선택하여 눈에 띄어야 합니다.

3. 사이트의 과도한 색상 팔레트

대부분의 경우 두세 가지 색상이면 웹사이트를 디자인하기에 충분합니다. 물론 다양한 색상을 사용하는 매우 성공적인 디자인 솔루션이 있지만 이는 예외입니다. 두 가지 색상이 좋아 보이지만 세 번째 색상을 추가하면 엉망이 되는 경우가 있습니다.

색상 팔레트를 선택할 때 최소한 색상환을 사용하는 것이 좋습니다. 도움을 받아 색상을 선택할 때 인접한 색상과 그 반대편에 있는 색상이 서로 잘 어울리는 것을 기억해야 합니다.


전문 사이트를 이용하는 것도 추천드립니다. 여기에서 자신만의 범위를 만들거나 기성 제품 중 하나를 사용할 수 있습니다.

첫 번째 예에서는 3가지 색상을 사용하여 텍스트를 디자인했지만, 두 번째 예에서는 2가지 색상만 사용했습니다. 두 번째 옵션이 더 보기 좋고 텍스트도 읽기 더 쉽습니다.




4. 유사한 요소에 대해 다른 색상

랜딩 페이지에 결제 버튼이 3개 있는 경우 모두 동일한 색상이어야 합니다. 사용자는 첫 번째 항목을 본 후 다른 항목도 같은 방식으로 인식하게 됩니다. 서로 다른 색상의 버튼이 동일한 기능을 갖고 있는 경우 혼란이 발생할 수 있습니다.

다음은 동일한 웹사이트에서 동일한 목적을 가진 두 개의 버튼의 예입니다. 나쁜 결정.




5. 다양한 유형의 요소에 대해 동일한 색상

반대 상황은 아름답게 표현되어야 한다고 생각되는 모든 곳에 "좋아하는" 색상을 사용하는 경우입니다. 작업 버튼과 클릭할 수 없는 요소는 색상이 유사해서는 안 됩니다. 이는 사이트 사용 논리에 위배됩니다. 특정 색상과 스타일의 클릭 가능한 버튼을 만들어 행동 패턴을 만들고, 그러한 요소가 비활성화된 것으로 판명되면 사용자의 일반적인 행동을 방해하게 됩니다.

6. 대비 부족

독특하고 밝은 색상을 추구하면서 디자이너는 중요한 점을 놓치는 경우가 많습니다. 텍스트 색상과 배경색은 텍스트를 쉽게 읽을 수 있도록 충분한 대비를 이루어야 합니다. 이 원칙은 아래 예에서 명확하게 설명됩니다.

7. 비표준 링크 색상

사용자는 마우스를 움직이지 않고도 링크와 텍스트를 구별할 수 있어야 합니다. 물론 여기서 색상은 디자이너의 유일한 도구는 아니지만 아마도 가장 효과적인 도구일 것입니다. 세 가지 규칙:

  • 링크 위에 마우스를 올리지 않고도 링크가 표시되어야 합니다.

  • 링크 위에 마우스를 올리면 색상이 변경되어야 합니다.

  • 방문한 링크는 다른 색상으로 표시되어야 합니다. 이는 출판물이 많은 정보 사이트의 경우 특히 중요합니다.

이 예에서 디자이너는 포트폴리오 탐색을 위한 링크 디자인에 매우 불행한 색상을 선택했습니다.

8. 빛 바랜 미니멀리즘은 충동판매를 위한 것이 아니다.

오늘날 일반적으로 충동 판매를 목표로 하는 랜딩 페이지를 만드는 것이 매우 유행합니다. 그러한 페이지는 사람의 감정에 영향을 미쳐 일시적으로 제품을 사고 싶은 욕구를 불러일으킵니다. 웹 사이트 제작의 또 다른 유행 추세는 미니멀리즘입니다. 이는 일반적으로 한두 가지 색상이 특징이며 종종 엄격합니다.

이 두 가지 패션 트렌드는 대부분 호환되지 않습니다. 귀하의 사이트를 볼 때 이러한 감정을 생성하지 않으면 감정을 기반으로 판매할 수 없습니다.


차분한 톤과 엄격한 미니멀리즘은 구매가 합리적일 때 적합합니다. 예, 미니멀리즘은 지루하지도 않고 다채롭고 감정적일 수도 없습니다. 그러나 이제 많은 디자이너들은 랜딩 페이지 판매에 잘 어울리지 않는 회색 톤과 "공기"를 선호합니다.

그러나 이것이 판매하는 감성 랜딩 페이지가 무지개의 모든 색상으로 빛나야 한다는 것을 의미하지는 않습니다.

9. 부적절한 검정색

마케터들은 검정색 포장이 거의 항상 높은 비용과 프리미엄 수준의 제품 품질을 의미한다는 사실을 현실 세계의 소비자들에게 오랫동안 익숙해져 왔습니다. 다음은 엘리트 브랜드의 만두와 값비싼 시리얼의 예입니다.



마케팅 담당자의 방식과 마찬가지로 우리의 습관은 슈퍼마켓에서 인터넷으로 이동합니다. 예를 들어 검정색으로 만들어진 보석 회사의 웹 사이트는 우아하고 비싸 보입니다.


저가형 서비스를 제공하거나 저렴한 상품을 판매하는 경우 웹사이트에 검정색을 많이 배경으로 사용해서는 안 됩니다. 귀하의 사이트 방문자의 인상은 귀하의 판매 제안과 일치하지 않습니다.

10. 디자이너를 위한 색상 제한

이 규칙은 웹사이트 디자인 및 색상 팔레트 선택에 직접 적용되지 않습니다. 웹 사이트를 개발할 때 디자이너의 작업 설정에 대해 이야기하고 있습니다. 확립된 기업 아이덴티티나 인식 가능한 로고가 아직 없는 경우(이 경우 규칙이 부분적으로 적용 가능하더라도) 디자이너에게 사용되는 색상에 대해 엄격한 경계와 제한을 설정해서는 안 됩니다.

당신의 비전은 당신이 원하는 만큼 아름다울 수 있지만, 디자이너가 자신의 비전을 제시하도록 하세요. 여러 번 시도한 후에도 디자이너가 여전히 원하는 것을 보여줄 수 없는 경우에만 색상 선택에 엄격한 제한을 주어야 합니다.

또 다른 예외: 색상 디자인 옵션이 잘 고려되었다고 확신하고 이 선택을 스스로 정당화할 수 있는 경우입니다. 일반적으로 고객은 텍스트 가독성, 버튼의 충분한 밝기 및 최적의 색상 수 등 디자이너가 고려하는 사항을 고려하지 않습니다.

결론

색 구성표는 사이트에 대한 사용자의 첫인상을 결정합니다. 긍정적인 것이 매우 중요합니다. 하지만 사람들의 관심을 색상에만 집중시킬 수는 없습니다. 색상을 사용하여 정보를 전달하세요. 올바른 선택이 무엇인지 확실하지 않은 경우 히트맵 데이터를 사용하거나 기성 인터페이스 솔루션을 흐리게 하는 간단한 기술을 사용하십시오. 이 기술의 본질은 매우 간단합니다. 그래픽 프로그램을 사용하여 전체 페이지를 흐리게 처리하고 처음에 어떤 요소와 블록이 관심을 끄는지 확인해야 합니다. 관심을 끄는 첫 번째, 두 번째, 세 번째 블록은 사용자 시나리오 측면에서 가장 중요한 요소가 되어야 합니다.

예를 들어, Aviasales.ru의 첫 번째 화면을 흐리게 했습니다. 제목을 읽은 후 요소 1, 2 및 3의 블록이 관심을 끕니다. 사용자의 올바른 기대치를 형성하면서 그는 (대조 규칙을 기억하여) 매개 변수 및 클릭 유도 문안 선택에 필요한 요소를 살펴볼 것입니다.


그리고 ostrovok.ru 웹사이트의 주요 작업이 흐린 배경과 얼마나 뚜렷하게 눈에 띄는지 살펴보세요.


귀하의 인터페이스가 이러한 테스트를 성공적으로 통과했다면 사용자 심리학에 대한 이해를 바탕으로 사이트에 대한 추가 개선이 수행되어야 합니다. 실제 사용자의 피드백을 분석합니다. 다음과 같은 질문을 사용합니다. “어디를 먼저 보셨나요? 사이트의 어떤 3개 요소와 어떤 순서로 보셨나요? 어디를 먼저 클릭하고 싶나요? 그리고 그 이유는 무엇인가요?” AskUsers에서는 사용자의 관심이 어떻게 분산되는지뿐만 아니라 사용자가 특정 요소를 보는 이유도 이해할 수 있습니다. 이 정보는 현재 인터페이스의 여러 가지 문제를 식별하고 이를 해결하기 위한 최선의 옵션을 찾는 데 도움이 됩니다.

형식은 내용에 종속된다는 점을 기억하세요. 컬러 디자인은 사용자와 사이트 소유자에게 중요한 정보에 사용자의 관심을 집중시키는 도구 역할을 합니다.



사이트의 새로운 내용

>

가장 인기 많은