전환율을 높이는 15가지 웹 디자인 원칙

많은 요소가 사이트 전환에 직접적인 영향을 미칩니다. 그러나 웹 디자인은 그 중 가장 중요합니다.

우리가 얻는 첫인상은 시각적이고 결정적입니다. 따라서 사이트의 전환율을 높이려면 웹 디자인이 가장 먼저 시작해야 합니다.

이 기사에서는 이 작업에 도움이 될 기본 원칙과 팁을 정리했습니다.

웹 디자인이 반응형이고 모바일 친화적인지 확인하십시오.

모바일 트래픽의 점유율은 증가하고 있으며 2020년에도 증가할 것입니다. 연구에 따르면 대부분의 사용자는 모바일 장치에서 필요한 작업을 수행하는 것이 불가능한 경우 브랜드와의 상호 작용을 거부할 것입니다. 따라서 더 많은 전환을 얻기 위해 사이트 디자인을 변경하기 전에 모바일 장치에서 웹사이트가 올바르게 표시되고 사용자가 경로에서 장애물을 만나지 않도록 해야 합니다.

그것을 하는 방법? 모든 것은 사이트를 만드는 방법에 따라 다릅니다. 예를 들어 WordPress 및 기타 인기 있는 CMS의 사이트는 생성 순간부터 반응합니다. 다만, 추가적인 사용성 테스트는 무리하지 않을 것입니다.

힉스의 법칙에 따라 선택의 폭을 줄인다

이 법칙은 선택이 적을수록 의사 결정 속도가 빨라지고 그 반대의 경우도 마찬가지임을 시사합니다. 예를 들어, 메인 페이지에서 한 번에 3개의 클릭 유도문안을 사용하는 경우(예: 사이트 등록, 할인 받기, 전자책 다운로드) 사용자가 어떤 조치를 먼저 취해야 할지 결정하기 어려울 것입니다. . 이러한 클릭 유도문안을 논리적인 순서로 배열하는 것이 훨씬 더 합리적입니다.

페이지에 표시하는 제품의 수도 마찬가지입니다. 검색 쿼리에 적합한 모든 가능한 제품을 사용자에게 표시해서는 안 됩니다. 가장 적합한 5가지 옵션을 표시하고 필터를 사용하여 검색을 계속할 수 있도록 하는 것이 좋습니다.

전체 화면 웹 사이트 게이트 추가

사용자가 메인 페이지를 특정 지점으로 스크롤한 순간에 전체 화면 리드 양식을 표시할 가능성을 생각해 보십시오. 첫째, 전체 화면 형식은 모든 사용자의 주의를 끌고 사이트의 다른 요소에 의해 주의가 산만해지지 않도록 하며, 둘째, 이전에 이야기한 선택 가능성에 관한 것입니다. 따라서 사용자는 두 가지 옵션만 받습니다. 첫 번째는 리드 양식을 닫고 사이트와 계속 상호 작용하는 것입니다. 두 번째는 제안에 대한 대가로 그의 이메일 주소를 제공하는 것입니다.

교차로에 가장 중요한 점 배치

사진의 주요 규칙 중 하나인 3분의 1 법칙에 대해 알고 있을 것입니다. 이 규칙에 따르면 두 개의 선이 화면을 가로 세로로 시각적으로 분할하여 결과적으로 9개의 정사각형이 생성됩니다. 따라서 화면 중앙에 있는 네 개의 선이 교차하는 지점이 사용자의 관심의 중심이므로 클릭 유도문안과 같은 필수 정보를 여기에 배치해야 합니다.

웹사이트 로딩 속도 최적화

이 항목은 디자인과 직접적인 관련이 있습니다. 페이지에 과도한 이미지가 가득하여 사이트 로드 속도가 느려질 수 있기 때문입니다. 불필요한 모든 것을 제거하고 핵심 이미지를 최적화하십시오. 통계에 따르면 최적의 사이트 로딩 속도는 2~5초입니다. 그리고 이 경우 사용자의 40%가 로드하는 데 3초 이상 걸리는 사이트를 닫을 것이라고 말했기 때문에 더 낮은 지표를 위해 노력해야 합니다. 즉, 사이트 속도가 느려질 때마다 잠재적인 리드를 잃게 됩니다.

긍정적 인 결과를 얻으려면 음수 공간을 사용하십시오

Jan Tschichold는 부정적인 공간을 수동적인 배경이 아닌 능동적인 요소로 보아야 한다고 말합니다. 거리와 관심 사이에는 연관성이 있습니다. 거리가 멀수록 주목을 받고 다른 요소가 없으면 기존 요소를 더 강력하게 구별합니다. 디자이너는 이 공간 속성을 사용하여 중요한 요소를 강조 표시할 수 있습니다. 콘텐츠의 특정 부분에 공백을 추가하면 화면에 더 이상 주의를 끌 만한 것이 없기 때문에 사용자가 이 영역에 주의를 기울이게 됩니다. 아래 예에서 볼 수 있듯이 Google은 프로젝트에서 공백을 적극 지지합니다. 이 프로젝트의 목적을 즉시 이해하는 데 도움이 됩니다. 초점은 페이지의 주요 목표에 있습니다.

적절한 연결을 설정하기 위해 올바른 색상을 선택하십시오

불행히도 어떤 색상이 더 잘 변환되는지에 대한 보편적인 조언은 없습니다. 모든 것은 귀하의 비즈니스의 특성에 달려 있습니다. 예를 들어 흰색과 파란색은 안정감과 안정감을 줍니다. 따라서 PayPal은 이 조합을 사용하여 올바른 연결을 형성합니다.

색상이 제대로 작동하는지 확신이 서지 않는다면 마케팅에서 색상 심리학의 기원으로 돌아가 회사의 가치를 재검토하고 완벽한 조화를 찾으십시오.

게다가, 더 나쁘게 또는 더 좋게 변환되는 버튼의 색상에 대해 다른 의견이 있습니다. 버튼의 정확한 색상은 오래된 철학적 질문입니다. 누군가는 빨간색 버튼을 통해 가장 높은 전환율을 달성했다고 주장합니다. 다른 사람들은 녹색 또는 파란색이라고 말합니다. 정답은 다음과 같이 들립니다(마케팅 및 디자인의 다른 많은 답변과 마찬가지로): "테스트해야 합니다." 따라서 디자인의 기본 색상과 대조되는 버튼 색상을 선택하고 몇 가지 테스트를 수행하여 어떤 색상이 더 잘 변환되는지 이해합니다.

여러 개의 작은 이미지 대신 하나의 큰 이미지 사용

올바른 이미지는 텍스트의 몇 단락 이상을 말할 수 있습니다. 따라서 사이트 디자인에 시각적 인식과 감정의 힘을 사용하십시오. 예를 들어 이미지를 사이트의 배경으로 만든 다음 웹 디자인의 기본 규칙을 따르는 방식으로 모든 요소를 ​​배치할 수 있습니다. 그건 그렇고, 그것은 또한 더 나은 전환에 기여합니다.

또한 이러한 접근 방식은 최근 트렌드인 심플함과 미니멀리즘을 추구하며, 올바르게 선택된 이미지는 필요한 감정과 연상을 불러일으킵니다. 그리고 그 반대의 경우도 마찬가지입니다. 앞서 말했듯이 너무 많은 이미지는 선택을 더 복잡하게 만들고 사용자의 주의를 분산시킵니다.

디자인과 관련이 없는 모든 것을 제거하십시오

즉, 최대한의 단순성을 위해 노력하십시오. 현대의 풍부한 정보 소음 속에서 단순함과 명료성은 진정한 부족이 되었습니다. 연구에 따르면 사용자의 76%가 웹사이트 디자인의 주요 결정 요인으로 단순성을 고려합니다. 그리고 여기에서 단순함, 미니멀리즘, 그러나 동시에 기능 사이의 유능한 균형을 유지해야 합니다. 단순함은 또한 몇 번의 클릭으로 사용자가 필요로 하는 것을 찾을 수 있는 기회이기 때문입니다.

얼굴 및 기타 사회적 증거 사용

불행히도 인터넷은 가짜 리뷰로 가득 차 있으며 사용자도 이에 대해 알고 있음을 의심하지 마십시오. 따라서 경쟁업체가 귀하의 비즈니스를 약화시키기 위해 작성할 수 있는 귀하의 제품 또는 서비스에 대한 피드백을 검색하도록 강요하는 대신 바로 그 자리에서 이러한 기회를 제공해야 합니다.

따라서 페이지 끝 부분에 실제 리뷰(더 나은 캐러셀)를 넣을 수 있는 방식으로 사이트 디자인을 고려하세요. 그리고 강력한 사회적 증거의 인상을 만들기 위해 살아있는 사람(이상적으로는 실제 고객)의 사진을 사용하십시오.

탐색 간소화

백만 개의 카테고리가 포함된 사이트를 본 적이 있을 것입니다. 첫 번째 시도에서 올바른 섹션을 선택하는 것은 불가능합니다. 그리고 이전에 사용자가 여전히 그러한 검색에 시간을 지불했다면 오늘날에는 추가 조치 없이 필요한 것을 보고 싶어합니다.

따라서 사이트 탐색에 대한 접근 방식을 재고하고 카테고리 수를 줄이고 불필요한 부분은 모두 제거하고 가장 중요한 섹션만 남겨두십시오. 우리가 이미 말했듯이, 선택의 전체 범위는 결정을 복잡하게 하거나 일반적으로 사용자가 페이지를 떠나고 나중에 작업을 연기하도록 강요합니다.

성취 카운터 통합

이것은 잠재 의식 반응을 유발하는 심리적 속임수입니다. 사람들은 통계를 믿는 경향이 있습니다. 그리고 이것은 신뢰를 구축하고 신뢰감을 심어줌으로써 전환율을 높일 수 있는 또 다른 기회입니다. 하지만 결정적인 포인트가 하나 있습니다. 우리가 3분의 1 법칙과 전략적 교차점에 대해 이야기한 것을 기억하십니까? 이것은 통계가 주의와 인식의 중심에 오도록 통계를 넣어야 하는 곳입니다.

인공 적자에 대한 인상 만들기

마케터들은 이 판매 전략에 동의하지 않지만, 빠른 계절 판매의 경우 이 접근 방식이 여전히 적절합니다. 따라서 계절별 또는 판촉 행사가 있거나 신제품에 대한 관심을 테스트하는 경우 희소성의 환상을 만들고 이를 디자인의 도움으로 반영하는 것이 합리적입니다. 예를 들어, 카운트다운 타이머를 설정하고 방문자의 주의 초점에 숫자를 다시 넣을 수 있습니다.

그러나 여기에서도 클릭 유도문안 버튼을 적절하게 배치해야 합니다. 그리고 이 경우 Z 방식에 따라 수행하는 것이 좋습니다.

사용자의 주의는 위쪽 수평을 따라 대각선 아래쪽으로 미끄러지며 아래쪽 정보로 이동합니다. 왼쪽 상단 모서리에 로고를 수평으로 배치합니다(헤더). 오른쪽 하단은 클릭 유도문안을 위한 이상적인 장소입니다.

필요한 단계 수 줄이기

이것은 UX 디자이너의 책임이라는 것을 알 수 있지만 실제로는 웹 디자이너와 UX 디자이너가 함께 작업하여 하나의 결과를 얻어야 하는 경우일 뿐입니다. UX 디자인은 전환에 직접적인 영향을 미치는 또 다른 요소이며 사용자를 대상 액션에서 분리하는 단계가 적을수록 완료할 가능성이 높아집니다.

따라서 그가 필요로 하는 정보나 제품이 세 번의 클릭을 넘지 않도록 다시 한 번 확인해야 합니다.

행동 촉구가 올바른 위치에 있는지 확인하십시오

사이트의 전환율을 높이려면 클릭 유도문안을 작성할 때 3분의 1 법칙과 Z 체계를 활용하십시오. 당신은 그것을 복제하면 행동 유도의 인식을 향상시킬 수 있습니다 - 라인의 교차점과 문자 Z의 상단 라인이 끝나는 페이지의 오른쪽 상단 모서리에. 따라서 사용자의 주의는 먼저 오른쪽 상단 모서리에서 멈춘 다음 대각선 아래로 미끄러져 왼쪽 선의 전략적 교차점에 직접 놓입니다.

사용자 입력 최소화

현대 사용자는 매우 참을성이 없으며 페이지 로딩 속도에 대한 단락에서 이미 이에 대해 이야기했습니다. 그리고 아무도 특히 모바일 장치에서 시간을 낭비하고 싶어하지 않기 때문에 거대한 채우기 양식은 전환을 죽일 수 있습니다. 따라서 등록 양식을 검토하고 이름, 이메일 주소 및 비밀번호에 대해 세 줄만 남기고 Google 및 Facebook을 통한 등록 기능을 추가하십시오.

결론

보시다시피 많은 트릭이 전환에 영향을 줄 수 있습니다. 그러나 기억해야 할 가장 중요한 점은 모든 새로운 접근 방식은 사용자를 대상으로 테스트해야 한다는 것입니다. 각 비즈니스와 각 대상은 구체적입니다. 따라서 디자인에서 전환율을 높이기 위해 무엇을 사용해야 하는지에 대한 템플릿 지침이 있을 수 없습니다. 또한 디자인은 전환(또는 전환하지 않음)하는 첫 번째 요소이지만 마지막 요소가 아니며 이 또한 기억해야 합니다.