온라인 스토어에서 전환율을 높이는 11 가지 웹 사이트 디자인 팁
게시 됨: 2020-12-17시간과 기술이 우리 곁에 흐르면서 온라인 상점을 시작하는 것이 그 어느 때보 다 쉬워졌습니다. 사람들은 온라인 방문자를 유치하고 매출을 높이기 위해 비즈니스를 온라인으로 전환하고 전자 상거래 웹 사이트 형태로 제공하는 경향이 있습니다.
성공적인 전자 상거래 웹 사이트에는 웹 사이트 디자인이 필수 요소 인 여러 구성 요소가 있습니다. 제품, 랜딩 페이지, 제안 등을 포함하여 온라인 상점의 표시 가능성은 중요한 요소이며주의해야합니다.
이 기사에서는 전환율을 높이기위한 전자 상거래 웹 사이트 디자인 팁을 공유 할 것입니다. 하지만 그 전에 독특한 웹 사이트 디자인에 집중하는 것이 왜 필수적인지 말씀 드리겠습니다.
매력적인 웹 사이트 디자인이 중요한 이유는 무엇입니까?
웹 사이트의 첫인상은 디자인과 관련된 94 %이고 웹 사이트의 전체적인 미학을 기준으로 웹 사이트 신뢰성에 대한 판단은 75 %라는 사실을 알고 계셨습니까?
이는 웹 사이트 디자인이 웹 사이트의 신뢰성, 전환 및 성공에 미치는 영향을 확인합니다. 웹 사이트 청중에게 첫인상을 줄 시간이 거의 없습니다. 뿐만 아니라 좋은 웹 사이트 디자인은 SEO를 돕고 SERP에서 웹 사이트 순위를 매 깁니다. 그리고 우리 모두는 이것이 우리가 무시할 수없는 한 가지라는 것을 알고 있습니다.
사람들은 항상 귀하의 사이트를 탐색 할 때 제공되는 경험으로 귀하와 귀하의 비즈니스를 판단 할 것입니다. 디지털 비즈니스 세계에서 웹 사이트 디자인은 고객 대표입니다.
전자 상거래 비즈니스를 운영 할 때 고객은 웹 사이트에서 거래를 수행합니다. 그들이 당신을 믿지 않으면 당신에게서 사지 않을 것입니다.
네, 잘 들었습니다.
방문자를 전환하려면 방문자가 귀하를 믿어야하며 웹 사이트 디자인은 그렇게하는 데 중요한 역할을합니다.
놀라운 전자 상거래 웹 사이트 디자인 통계를 공유하겠습니다.
- 인터넷 사용자의 57 %는 웹 사이트가 특히 모바일 기기에서 제대로 디자인되지 않은 경우 누구에게도 추천하지 않습니다.
- 38 %의 사람들이 매력적이지 않은 레이아웃의 웹 사이트 사용을 중단합니다.
- 88 %의 고객은 슬픈 경험 후에 사이트를 다시 방문 할 가능성이 적습니다.
- 느리게로드되는 웹 페이지는 소매 업체에게 연간 26 억 달러의 매출 손실을 초래합니다.
- 개인의 75 %는 웹 사이트 디자인을 기반으로 온라인 비즈니스의 신뢰성을 평가합니다.
지금까지 고도로 최적화 된 웹 사이트 디자인을 만드는 것이 얼마나 중요한지 이해 했어야합니다. 이 모든 것은 사용자가 귀하의 비즈니스를 인식하는 방법을 결정하는 것이 전자 상거래 웹 사이트의 디자인이라는 것을 이해하게하는 것입니다. 나쁜 웹 사이트 디자인은 비즈니스 신뢰도에 잠재적 인 적이 될 수 있습니다.
2020 년에 매력적인 전자 상거래 웹 사이트 디자인을 만드는 팁
이제 기사의 가장 중요한 부분입니다. 전환을 늘리고 리드를 확보하기 위해 정말 중요한 전자 상거래 웹 사이트 팁을 확인해 보겠습니다.
1. 웹 사이트에서 일관된 브랜딩 유지
브랜딩은 웹 사이트 전환에 큰 영향을 미칩니다. 브랜딩의 미술을 마스터 한 브랜드 인 Apple을 확인해 보겠습니다.
애플은 페이지 전체에 브랜딩을 드물게 표시했습니다. 그들의 사이트를 살펴보면 랜딩 페이지에 브랜딩 요소를 사용자에게 압도적이지 않고 미묘하게 표현했음을 알 수 있습니다.
따라서 여기에 Apple의 예에서 주목할 핵심 사항이 있습니다.
- 눈에 잘 띄는 동시에 압도적이지 않은 완벽한 위치에 배치 된 독특한 로고.
- 조직의 목표와 목표를 설명하고 청중에게 메시지를 전달하는 간단한 텍스트입니다.
- 세련된 제품 이미지와 결합되었습니다.
브랜드 구축은 종종 오해되는 이야기를하는 것과 같습니다. 브랜딩은 단순히 로고, 디자인 미학 또는 회사 목표가 아닙니다. 오히려 그것은 세 가지 요소의 조합입니다. 따라서 비즈니스를 브랜드로 발전 시키려면 청중이 듣고 읽고 싶어하는 올바른 이야기를 청중에게 전달해야합니다.
2. 사이트 요소에 공간 제공
부정적인 공간은 웹 사이트를 깔끔하게 만드는 데 중요한 역할을합니다. 그러나 공백은 페이지가 어색하게 비어있는 것처럼 보이도록 구현해서는 안됩니다. 대신 사이트 요소에 공간을 제공하는 데 집중하세요.
MakeWebBetter의 홈 페이지에서 아래 예를 확인하십시오.
방문자가 사이트 요소를 명확하게 볼 수 있도록 부정적인 공간이 사용되는 것을 볼 수 있습니다. 전자 상거래 웹 사이트를 디자인하는 동안 여백과 패딩을 사용하고 페이지 요소가 시각적으로 숨을 쉬도록하십시오.
다음은 성공적인 웹 사이트 디자인 전략의 중요한 부분으로 부정적인 공간을 고려하는 몇 가지 요점입니다.
- 공백을 사용하면 방문자가 페이지에서 휴식을 취할 때 페이지를 탐색 할 수 있습니다.
- 네거티브 공간을 통해 사용자는 웹 사이트의 특정 항목을 다듬을 수 있습니다. 웹 사이트의 중앙 집중식 메시지를 강조 할 수도 있습니다.
- 음수 공간을 사용하면 사이트 소유자가 페이지 흐름을 미묘하게 제어 할 수 있습니다.
- 마지막으로 가장 중요한 공백은 CTA와 같은 중요한 사이트 요소를 잘 정의 된 것처럼 보이게합니다.
전자 상거래 웹 사이트 디자인에서 공백 또는 부정적인 공간은 사용자 경험을 형성하는 데 중요한 역할을하며 나중에 고려해서는 안됩니다.
3. 너무 많은 옵션으로 사용자를 압도하지 마십시오.
사용자가 귀하의 웹 사이트를 방문 할 때 빠른 조치를 취하기를 원합니다. 그러나 많은 사이트 소유자는 많은 옵션으로 사용자를 압도합니다.
가능한 선택의 결과로 사람이 결정을 내리는 데 걸리는 시간을 설명하는 Hick-Hyman 법칙의 도움으로이 이론을 이해합시다.
법률에 따르면 사용자에게 더 많은 선택권을 제공합니다. 결정하는 데 더 오래 걸립니다. 결과적으로 사이트를 떠날 가능성이 높아집니다. 이 법칙에서 결론을 내릴 수있는 또 다른 사실이 있습니다.
사람들은 포기할 수 있습니다.
예, 올바르게 읽었습니다.
사람들이 제공되는 선택에 압도 당하면 포기하는 경향이 있으며이를 분석 마비라고합니다. 방문자를이 상황에 처하게하지 않으려면 다음 기술을 따르십시오.
- 옵션 수를 제한하십시오.
- 뚜렷한 선택을하십시오.
- 맞춤 추천을합니다.
- 빠른 의사 결정 전략을 장려하십시오.
4. 삼등분의 법칙 – 미술에 사용되는 기법
The Rule Of Thirds는 이미지, 영화 및 사진과 같은 시각적 콘텐츠를 구성하기 위해 미술 및 사진에 사용되는 오래된 기술입니다. 그러나 요즘 이러한 기술은 웹 디자이너들 사이에서 매우 인기가 있습니다.
이 모든 것은 사이트를 디자인 할 때 균일 한 간격으로 두 개의 가로선과 두 개의 세로선을 오버레이하는 것으로 시작됩니다.
점은 풍경이든 웹 사이트이든 사용자의 눈이 장면을 볼 때 유기적으로 표류하는 지점을 나타냅니다. 이제 중요한 사이트 요소를 어디에 배치해야하는지 알았으므로 최대한 활용할 수 있습니다.
따라서이 구성 전략은 모든 유형의 웹 사이트에서 구현 될 수 있습니다.
구성은 웹 사이트 디자인에서 중요한 요소입니다. 사용자에게 지저분한 형태로 제공된다면 글꼴과 이미지를 얼마나 창의적으로 사용하든 상관 없습니다. 따라서 삼등분의 법칙은 웹 페이지의 전체 레이아웃을 구성하는 데 지원 이론 역할을합니다.
Adamas를 살펴 보겠습니다.
위의 예에서 홈 페이지와 스크롤없이 볼 수있는 부분은 세 번째 규칙이 적용되는 주요 영역입니다. 그 이유는 스크롤없이 볼 수있는 부분은 사이트의 주요 정보가 축적되는 곳입니다.
5. 느리게로드되는 페이지로 인해 판매 감소
멋진 웹 사이트 디자인을 만드는 것만으로는 충분하지 않습니다. 인상적인 사이트를 만들어야 할뿐만 아니라 성능에도 집중해야합니다. 빠른 로딩 페이지는 이탈률을 방지하고 방문자가 웹 사이트에 머무를 수 있도록하는 데 중요합니다.
사람들은 느리게로드되는 페이지를 싫어하고 청중은 그러한 사이트에 대한 관심을 잃습니다. 따라서 판매 감소에 대한 책임이 있습니다. Google의 Page Speed Insights에서 페이지 성능에 대한 아이디어를 얻을 수 있습니다.
전자 상거래 웹 사이트의 주요 목표는 전환을 늘리는 것이며이를 위해 페이지로드 시간을 줄여야합니다. 이미지 압축과 같은 기본적인 것은 큰 구세주가 될 수 있습니다.
다른 페이지 로딩 최적화 기술은 다음과 같습니다.
- 빠르고 안정적인 호스팅 서비스에 투자하십시오.
- CDN (Content Delivery Network)의 도움으로 콘텐츠로드를 분산합니다.
- 웹 사이트에서 최소한의 팝업을 사용하십시오.
- 웹 페이지에서 잘못 코딩 된 HTML, CSS 및 JavaScript를 제거하여 코드를 축소하십시오.
- 리디렉션 및 끊어진 링크 수를 줄이십시오.
업로드하기 전에 항상 이미지를 압축하고 화면에 필요한 크기보다 크지 않게 유지하십시오.
목적에 따라 무료 또는 프리미엄 경량 플러그인을 선택할 수 있습니다.
6. 올바른 방향을 보여주는 빵 부스러기
우편물이나 지하철역에서“여기 있습니다”라는 간판을 본 적이 있습니까? 이동 경로는 웹 사이트 방문자의 간판 역할을합니다.
이동 경로는 사이트 소유자가 웹 사이트 내에서 방문자의 위치를 표시하기 위해 사용하는 탐색 체계입니다.
이동 경로는 방문자가 어떻게 도착했는지에 따라 페이지를 방문 할 수있는 유연성을 제공하여 잃어버린 느낌을 피할 수 있습니다. 전자 상거래 사이트에는 일반적으로 수십 또는 수백 개의 중첩 카테고리가 있으므로 방문자가 길을 잃을 가능성이 높아집니다.
이동 경로는 사용자가 제품을 효율적으로 탐색하고 마지막으로 구매하는데도 도움이됩니다. Breadcrumb을 사용하면 고객이 여러 웹 페이지에서 거대한 홉을 만들어 원활하게 이동할 수 있습니다.
7. 색상과 대비를 선택하여 나머지 부분에서 돋보입니다.
색상과 대비는 웹 사이트를 다른 웹 사이트와 구별하는 데 중요한 역할을합니다. Contrast는 CTA 또는 로고와 같은 중요한 사이트 요소 또는 중요한 콘텐츠 부분에 적합합니다.
아래 예를 확인하십시오.
MyProtein은 브랜드 로고 및 제품에 대한 중요한 제안과 같은 중요한 요소를 강조하기 위해 색상과 대비의 조합을 사용했습니다.
8. 유사성을 위해 게슈탈트 원칙 적용
게슈탈트 원칙은 그룹화 원칙이라고도합니다. 이 법은 마음이 특정 규칙에 따라 자극의 패턴을 인식하는 타고난 성향을 가지고 있다는 주장을 설명합니다. 이는 단순히 인간의 뇌가 유사한 물체를 자동으로 그룹화하는 경향이 있음을 의미합니다.
Interaction Design Foundation에 따르면 :
인간의 눈은 디자인에서 유사한 요소가 분리되어 있더라도 완전한 그림, 모양 또는 그룹으로 인식하는 경향이 있습니다.
따라서 관계의 요소를 인식하여 다른 디자인 요소와 구분합니다. 따라서 인간은 "틈"을 채우거나 "점"을 연결하는 데 능숙합니다.
능력은 크기, 모양 및 색상의 영향을받습니다. 이 원칙은 전자 상거래 웹 사이트에 매우 쉽게 적용 할 수 있습니다. 방법을 봅시다.
전자 상거래를위한 게슈탈트 원칙 :
시작하기 전에 게슈탈트가 '양식'을 의미하는 독일어라고 말씀 드리겠습니다. 게슈탈트 원칙은 인간의 마음이 웹 사이트의 시각적 구성 요소를 어떻게인지하고 뇌가인지 된 시각의 이미지를 생성하도록하는 방법을 기반으로합니다.
이 원칙을 전자 상거래 웹 사이트에 적용하려면 게슈탈트 원칙의 각 범주를 자세히 살펴 봐야합니다.
1. 지상과 그림
도형은지면에서 시각적으로 분리 할 수있는 물체입니다. 그림과 바닥 원칙의 배후에있는 아이디어는 끊임없는 혼란을 피하기 위해 시각적으로 구별 할 수 있도록 만드는 것입니다.
실제 예를 통해 이것을 이해합시다. 진지하게 무가당, 인물을 땅에서 분리하는 원칙을 올바르게 따랐습니다.
제품과 콘텐츠를 강조하기 위해 밝게 칠하고 바닥을 흰색으로 유지했습니다. 배경을 미묘하게 유지하고 중요한 요소를 강조함으로써 온라인 상점의 USP를 눈에 띄게 만들 수 있습니다.
2. 근접
시간 또는 공간에서의 근접성을 근접성이라고합니다. 전자 상거래 맥락에서 우리는 더 큰 연관성을 만들기위한 다양한 요소의 그룹화에 대해 이야기 할 것입니다. 요소 그룹화는 요소와 시각적 경험 간의 원활한 관계를 구축하는 데 중요합니다.
Proximity는 Mashable이 navbar에서 수행 한 작업 인 navbar 또는 웹 사이트를 디자인 할 때 매우 편리합니다.
위의 스냅 샷에서 동일한 카테고리의 요소가 메뉴 내에서 근접하게 배치되는 방식을 그룹화하여 볼 수 있습니다.
Amazon은 정확한 근접성에있는 요소를 그룹화하는 또 다른 완벽한 예입니다.
아마존은 상품이 미묘하면서도 심오한 좁은 공백을 사용하여 구분되는 그리드 프레임에 상품을 나열합니다.
근접성은 navbars, 제품 나열, 정보를 가장 낮은 것에서 높은 것까지 또는 그 반대로 그룹화하는 데 매우 중요합니다.
3. 대칭
인간은 대칭을 미학적으로 기쁘게 생각합니다. 웹 사이트 요소에 대칭을 추가하면 조화를 이루고 객체를 보는 동안 게스트가 편안하게 사용할 수 있습니다.
다음은 웹 사이트 HvD Fonts의 대칭 배열에 대한 좋은 예입니다.
이 페이지는 동일한 그레이 스케일 테마를 사용하여 동일한 글꼴로 작성된 동일한 절반으로 비즈니스 기능을 분석했습니다. 이뿐 만 아니라 페이지에는 그림과 기본 원리도 포함되어 있습니다.
대칭은 시청자를 즐겁게하는 완벽하고 간단한 방법이지만, 비대칭으로 사용자를 파악할 수도 있습니다. 많은 웹 사이트에서는 모든 공백의 균형을 맞추기위한 요소로 비대칭을 사용합니다. Xplode Marketing이 한 것과 같은 것 :
Xplode는 매우 유쾌한 방식으로 미학을 보여주는 독특한 방식으로 비대칭을 사용했습니다.
4. 유사성
근접성은 유사성의 원리에 더 가깝게 작동합니다. 모양, 색상, 크기, 방향 또는 기타 속성을위한 것입니다. 연결은 동일한 근접에 표시된 개체간에 우선해야합니다.
Influenster의 랜딩 페이지 예제를 확인하십시오.
유사성은 명확하게 정렬 된 상자를 통해 쉽게 확인할 수 있습니다. 각 상자의 제품은 다르지만 개념은 전체 페이지에서 일관된 텍스트 필드로 전달됩니다.
5. 폐쇄
인간의 뇌는 불완전한 물체의 틈새를 채우도록 훈련되어 그림을 시각적으로 완성하고 전체적으로 볼 수 있습니다. 이것이 바로 폐쇄 원칙입니다. 긍정적이고 부정적인 공간은 하나에 가깝고 전체적으로 더 큰 그림을 형성합니다.
Cult라는 예를 들어 개념을 이해합시다.
텍스트의 철자가 명확하지 않지만 인간의 두뇌는 쓰여진 내용을 쉽게 인식 할 수 있습니다. 클로저의 텍스트 배열과 정렬로 인해 글자가 불완전하더라도 쉽게 해독 할 수있게되었습니다.
6. 연속성
마지막 게슈탈트 원칙은 연속성의 원칙입니다. 연속성은 일관된 경로로 이어지는 육안으로 따를 수있는 패턴을 생성하는 데 필요합니다.
OscilloScope 웹 사이트를 살펴 보겠습니다.
웹 방문자에게 360도 뷰를 제공하기 위해 연속성 원칙을 사용하여 방문자가 원하는 섹션으로 이동할 수 있도록합니다.
9. 고객의 기대에 충실
인간으로서 우리에게는 기대가 있습니다. 또한 때때로 우리는 특정 상황이나 특정 장소에서 명백한 기대치를 가지고 있습니다. 예를 들어, 식당을 방문하면 배고픔을 채울 수있는 좋은 음식을 얻을 수있을 것으로 기대합니다.
마찬가지로 소비자는 온라인 상점의 특정 페이지 요소를 기대합니다. " 지금 구매 "버튼이나 제품 페이지의 가격과 같은 간단한 것입니다.
CTA를 실험하는 것은 항상 좋은 방법으로 간주되지만 웹 페이지의 관련성을 유지하는 데있어 기본 사항을 고수합니다. 방문자의 구매 결정에 영향을 미칩니다.
10. 유료 및 유기적 잠재 고객을위한 다양한 랜딩 페이지 생성
랜딩 페이지를 만들 때 가장 먼저 떠오르는 것은 다음과 같습니다.
"사용자 컨텍스트와 목적은 무엇입니까?"
모든 인터넷 검색자는 다르며 검색 의도와 목표가 다릅니다. 웹에서 동일한 제품을 검색 할 수 있지만 하나는 구매할 목표가 있고 다른 하나는 탐색하고 읽고 싶어 할 수 있습니다.
권장되는 팁 중 하나는 다른 방문 페이지로 유료 방문자와 유기적 방문자를 타겟팅하는 것입니다.
보험 회사의 예를 보여 드리겠습니다.
아래에 보이는 첫 번째 스크린 샷은 검색 광고의 결과로 방문자를 위해 생성 된 방문 페이지입니다.
이제 동일한 도메인에서 다른 청중을 대상으로 한 또 다른 스크린 샷이 있습니다.
유료 청중을위한 콘텐츠는 직접 전환을 목표로 짧고 간결하게 유지됩니다. 두 번째 예에서는 페이지 순위를 매기고 유기적 방문자를 끌어들이려는 의도로 단어 수가 증가한 것을 볼 수 있습니다.
기억하세요 : 시작하는 캠페인마다 다른 방문 페이지를 설정 하세요 . 이렇게하면 대상 사용자에 대한 고유 한 컨텍스트가 생성됩니다.
11. 웹 사이트 방문자 행동 활용
성공적인 웹 사이트 디자인 전략을 만드는 것은 만족스러운 방문자 없이는 불완전합니다. 전환을 늘리려면 잠재 고객이 원하는 것을 제공해야합니다.
위의 사항은 규칙을 위반하지 않는 웹 페이지를 만들기위한 시작 단계 일뿐입니다. 그러나 성공 여부는 실제 방문자를 대상으로 테스트했을 때만 판단 할 수 있습니다.
사용자 친화적 인 페이지를 만들려면 방문자와 행동 데이터에서 학습을 시작하세요. 히트 맵과 같은 기본 도구를 사용하면 사용자가 콘텐츠를 어떻게 사용하는지 알 수 있습니다.
HotJar와 같은 도구를 사용하면 클릭, 스크롤 및 이동과 같은 방문자 데이터를 매우 쉽게 수집 할 수 있습니다. 방문자가 전자 상거래 상점을 방문 할 때 수행하는 활동을 시각적으로 볼 수도 있습니다.
전자 상거래 결제 디자인과 흐름 또한 매우 중요합니다. 최상의 결과를 얻으려면 전자 상거래 결제 최적화의 모범 사례를 따라야합니다.
마지막 단어
2020 년에 전환을 촉진하기위한 전자 상거래 웹 사이트 디자인을 만드는 데 필요한 몇 가지 기본 팁이 있습니다.이 팁은 무시할 수없는 웹 디자인의 정수를 아는 데 도움이 될 것입니다. 그러나 이것은 일반적인 단계임을 기억하십시오. 온라인 상점에 가장 적합한 특정 전략을 만들려면 사용자 행동 분석을 시작해야합니다.
팁은 시작점을 제공 할 수 있지만 나머지 여정을 다루려면 정기적 인 테스트를 수행해야합니다. 내 경험상, 테스트와 학습을 통해 이루어진 관찰은 직감을 검증하고 전환을 기하 급수적으로 높이는 데 도움이 될 수 있습니다.
히만 슈 로탄
게스트 저자