전환율 최적화를 위해 웹 사이트를 디자인하는 방법

게시 됨: 2020-12-16

웹 사이트가 비즈니스 성장에 도움이되는 방법에는 여러 가지가 있습니다. 그러나 웹 사이트 만 있다고해서 더 많은 고객이 보장되는 것은 아닙니다. 잘 설립 된 기업은 고객을 유치하고 전환하기 위해 웹 사이트를 판매 기계로 전환해야한다는 것을 알고 있습니다. HubSpot의 최근 설문 조사에 따르면 :

페이지로드 시간 의 처음 5 초가 전환율에 가장 큰 영향을 미칩니다. 웹 사이트 전환율은로드 시간이 추가 될 때마다 평균 4.42 % 감소합니다.

첫인상을위한 두 번째 기회는 없다고 그들은 말한다. 그리고 첫 순간부터 방문자를 사로 잡고 전환 할 때까지 절대로 보내지 않는 것은 웹 사이트의 디자인입니다. 하지만 웹 사이트를 이런 식으로 "작동" 하는 방법은 무엇입니까? 디자인 기본 사항을 보여 드리겠습니다.

클릭하면 전체 크기로 볼 수 있습니다. 전체 기사를 읽으려면 아래로 스크롤하십시오.

알아야 할 주요 용어

먼저이 튜토리얼에서 논의 된 몇 가지 주요 용어를 이해해야 주제를 더 잘 이해할 수 있습니다.

A / B 테스트 또는 분할 테스트 는 웹 페이지의 두 버전 (A 및 B)을 비교하여 어느 것이 더 잘 변환되는지 확인하는 과학적 프로세스입니다. 제목, 이미지, 클릭 유도 문안 버튼 및 색상을 테스트하여 몇 가지 이름을 지정할 수 있습니다.

클릭 유도 문안 (CTA) 은 방문자가 행동을 취하도록 촉구하는 버튼 또는 텍스트 행입니다. 웹 사이트를 방문 할 때해야 할 일을 알려줍니다. 예를 들면 웹 페이지의 "가입"버튼, 전자 상거래 상점의 "구매"버튼 및 앱의 "다운로드"버튼이 있습니다.

방문자 또는 리드가 원하는 작업을 완료하면 전환이 발생합니다. 방문자가 귀하의 웹 사이트에 성공적으로 가입했거나 귀하의 상점에서 항목을 체크 아웃했음을 의미합니다.

전환율 은 사이트에서 원하는 행동을 취하는 방문자의 비율입니다. 총 전환 수를 웹 사이트의 총 방문자 수로 나누어 전환율을 얻을 수 있습니다.

전환 최적화 또는 전환율 최적화 (CRO) 는 웹 사이트를 개선하는 체계적인 접근 방식이므로 원하는 행동을 취하는 사이트 방문자 수를 늘릴 수 있습니다. 귀하의 목표가 이메일 구독자를 늘리는 것이라면 방문자가 귀하의 뉴스 레터에 가입하기를 원할 것입니다. 또는 판매를 늘리려면 해당 구매 버튼을 누르도록해야합니다.

랜딩 페이지 는 일반적으로 웹 사이트의 홈 페이지이지만 방문자가 리드 또는 고객으로 전환하기 위해 방문하는 사이트의 모든 페이지가 될 수 있습니다.

다 변수 또는 다 변수 테스트 (MVT) 는 특정 페이지에서 동시에 여러 변수를 테스트하는 프로세스입니다. 어떤 조합이 가장 많이 전환되는지 알아 내기 위해 다른 요소를 만드는 것이 포함됩니다.

변환하는 웹 디자인 요소

웹 사이트를 만들거나 재 설계하려는 경우 시각적으로 매력적인 웹 사이트를 만들 때 고려해야 할 사항은 다음과 같습니다.

1. 이미지

이미지는 모든 웹 사이트에서 중요한 역할을합니다. 항상 그런 것은 아니지만 방문자를 쉽게 유치하고 참여시키는 데 사용됩니다. 잠재력을 극대화하기 위해 이미지를 올바르게 사용하는 방법을 알아야합니다.

다음은 사이트에서 이미지를 효과적으로 사용하기위한 몇 가지 팁입니다.

  • 사람 얼굴로 이미지 선택

사이트에서 사람의 이미지를 사용하면 방문자에게 공감과 강한 유대감을 제공합니다.

“얼굴을 볼 때 우리는 자동으로 무언가를 느끼거나 그 사람과 공감하도록 트리거됩니다. 문제, 딜레마, 습관 등 웹 사이트의 콘텐츠를 인식하면 연결되고 이해되었다고 느낍니다. " (예쁘지 않음 : 웹 사이트에 감정 구축 by Sabina Idler)

PayPal이 랜딩 페이지에서이 기술을 사용하는 방법을 살펴보십시오.

PayPal의 랜딩 페이지

  • 이미지 최적화

웹 사이트를 만들 때 사용하는 이미지를 최적화하여 사이트의 로딩 속도에 영향을주지 않도록하는 것이 중요합니다. 또한 연구 결과에 따르면 페이지 응답이 1 초 지연 되어도 전환율이 7 % 감소 할 수 있습니다.

이미지 최적화의 아이디어는 품질에 영향을주지 않고 이미지를 압축하여 이미지를 밝게 만드는 것입니다. 무료로 사용할 수있는 이미지 최적화 도구는 다음과 같습니다.

  1. 작은 PNG
  2. Compressor.io
  3. JPEG 최적화
  4. Optimizilla
  5. Kraken.io
  6. 쉬운 랭킹
  7. 사진 크기 조정
  8. 사진 압축
  9. 이미지 변환
  • 영웅 이미지 사용

명확하게 말하면 영웅 이미지는 슈퍼 히어로의 이미지가 아닙니다. 히어로 이미지는 웹 사이트 상단에 배치되는 큰 웹 배너 이미지입니다. 일반적으로 텍스트 줄 또는 클릭 유도 문안 버튼과 함께 배경에 배치됩니다.

예를 들면 다음과 같습니다.

Netflix 히어로 이미지

보너스 팁 : 방문자에게 좋은 사용자 경험을 제공하기 위해 사용하는 이미지가 반응 형인지 확인하십시오.

2. 타이포그래피

Wikipedia에 따르면, 타이포그래피 는 글씨가 표시 될 때 읽기 쉽고, 읽기 쉽고, 매력적으로 보이도록 문자를 배열하는 기술과 기술입니다. 여기에는 서체, 포인트 크기, 줄 길이, 줄 간격 및 문자 간격을 사용하고 문자 쌍 사이의 간격을 조정하는 작업이 포함됩니다.

이 비디오는 타이포그래피가 종이에서 화면으로 어떻게 발전했는지 설명합니다.

얼마나 많은 글꼴이 있는지 아십니까? 답은 아무도 모릅니다. 이것이 올바른 글꼴 조합을 선택하는 것이 쉬운 일이 아닌 이유입니다.

따라서 사용할 조합을 결정하는 데 도움이되는 몇 가지 글꼴 페어링 도구는 다음과 같습니다.

  1. 유형 연결
  2. Google 유형
  3. 글꼴 쌍
  4. Genius 유형
  5. 유형 늑대
  6. 아름다운 웹 유형
  7. 사용중인 글꼴
  8. 그냥 내 타입
  9. Typ.io
  10. 블렌더
  11. 글꼴 조합기
  12. 타이포 테크
  13. Adobe Typekit
  14. Matcherator
  15. 조판

웹 사이트에 가장 적합한 글꼴을 선택하는 방법

3. 공백

Google이 웹 사이트의 공간을 최대화하지 않는 이유가 궁금하십니까? 공백의 힘을 사용하기 때문입니다.

Google은 공백을 사용합니다.

공백 이라고도하는 여백은 웹 사이트에서 비어 있거나 비어있는 부분입니다. 방문 페이지에서이를 사용하여 방문자가 클릭 유도 문안에 집중하고 전환을 늘릴 수 있습니다. 공백이 반드시 사이트의 배경이 흰색이어야 함을 의미하지는 않습니다. 색상을 가지고 놀거나 이미지를 배경으로 사용할 수도 있습니다. 목표는 단순하게 만들면서 최고의 사용자 경험을 제공하는 것입니다.

기억하세요 : 깔끔한 웹 사이트는 방문자의 관심을 사로 잡습니다. 깔끔하고 잘 정리 된 사이트를 검색하는 것은 그들에게 즐거운 경험입니다.

4. 색상

웹 사이트를 만들 때 고려해야 할 또 다른 중요한 요소는 색상입니다. 색상에는 의미가 있으므로 어떤 색상을 선택하든 청중에게 전달하려는 메시지를 반영해야합니다.

예를 들어, 미국의 대부분의 은행은 신뢰를 의미하는 파란색을 사용합니다.

미국의 주요 은행

이미지 크레딧 : The Epoch Times

올바른 색상 조합을 선택할 때 색상이 나타내는 긍정적 인 느낌과 부정적인 느낌을 기록해 두십시오.

  • 검은 색 – 물리학에서 검은 색은 사람에게 심리적 영향을 미치지 만 색상이 아닙니다. 그것은 힘과 힘을 상징하지만 죽음, 불행, 악을 상징하기도합니다.
  • 흰색 – 일반적으로 흰색은 순수함과 순수함을 나타냅니다. 병원은 흰색을 사용하여 불임 감을 만듭니다. 그러나 차갑고 단조롭고 고립 된 것을 나타낼 수도 있습니다.
  • 빨강 –이 색은 우리의 감정을 불러 일으 킵니다. 그것은 사랑, 흥분, 자신감과 관련 될 수 있습니다. 부정적인 측면에서는 공격성과 분노를 상징합니다.
  • 파란색 – 하늘색, 바다색이며 남성이 가장 선호하는 색상입니다. 파란색은 평온함, 평온함, 안정감 및 신뢰성을 상징합니다. 그러나 슬픔을 나타낼 수도 있으므로 "푸른 느낌"이라는 용어가 사용됩니다.
  • 녹색 – 숲의 색이며 종종 자연을 나타냅니다. 녹색은 평온함, 낙관주의 및 행운을 의미합니다.
  • 노란색 – 태양과 마찬가지로 노란색은 밝기와 따뜻함을 나타냅니다. 색상을 얻는 것이 가장 관심을 끌기 때문에 도로 표지판에서 일반적으로 사용됩니다. 그러나 반사되는 빛의 양으로 인해 눈의 피로를 유발할 수도 있습니다.
  • 보라색 – 라벤더 색입니다. 보라색은 왕족과 부를 상징하지만 일부는 그것을 이국적이거나 인공적인 것으로 해석 할 수 있습니다.
  • 브라운 – 그것은 자연스럽고 자연스러운 색상입니다. 탄력성, 신뢰성 및 안전성을 나타냅니다. 슬픔과 고립을 의미 할 수도 있습니다.
  • 주황색 – 노란색과 마찬가지로 주황색도주의를 끌기 위해 사용됩니다. 그것은 따뜻함, 흥분 및 에너지를 나타냅니다. 종종 할로윈과 관련이 있습니다.
  • 핑크 –이 색상은 진정 효과가 있습니다. 그것은 친절, 양육 및 여성 성과 관련이 있습니다. 브랜드가 너무 여성스러워 보이지 않게하려면이 색상을 사용하지 않아야합니다.

보너스 팁 : 웹 디자인에 가장 적합한 색상을 결정할 수없는 경우 A / B 테스트 또는 다 변수 테스트를 사용할 수 있습니다. 어떤 색상이 더 잘 변환되는지 아는 데 도움이됩니다.

5. 모바일 친화적

웹 사이트에서 전환을 극대화하려면 모바일 친화적이어야합니다. 스마트 폰 사용의 증가로 인해 오늘날 사람들은 데스크톱, 태블릿 및 휴대폰과 같은 여러 화면에서 웹 사이트에 액세스합니다. 10 명 중 8 명은 스마트 폰을 통해 인터넷을 사용합니다.

모바일 트래픽을 위해 WordPress 레이아웃을 최적화하는 방법

다음 도구를 사용하여 다양한 화면 크기에 대한 웹 사이트의 응답 성을 파악하십시오.

  1. Google Search Console의 모바일 친 화성 테스트
  2. MobileTest.me
  3. Bing의 모바일 친 화성 테스트 도구
  4. MobiReady 모바일 친화적 검사기
  5. Urlitor
  6. 브라우저 스택
  7. RankWatch
  8. Google의 PageSpeed ​​Insights

기억하세요 : 모바일 친화적 인 웹 사이트는 그렇지 않은 웹 사이트보다 순위가 높습니다.

결론

전환율 최적화를 수행 할 때 웹 디자인이 트래픽을 수익으로 전환하는 데 큰 역할을한다는 점을 명심해야합니다. 사이트에서 높은 이탈률을 방지하려면 위에서 제공 한 도움말을 따르세요.