더 많은 고객과 판매를위한 홈페이지를위한 최고의 레이아웃 디자인 계층

온라인 상점을 배치하면 다양한 질문이 제기됩니다. 귀하의 홈페이지는 온라인 상점에서 가장 좋은 물건이미지 슬라이더, 장바구니 버튼, 제품 미리보기 이미지 및 버튼, 이메일 마케팅 가입 양식과 같은 구성 요소가 포함됩니다.

각각은 필수이지만 홈페이지는 일반적으로 사이트에서 가장 자주 방문하는 페이지 인 경우 더 많은 고객을 확보하기 위해 어떻게 구성합니까? 가장 창의적이고 성공적인 전자 상거래 상점을 살펴보면 표준 레이아웃 계층을 파악하여 각 구성 요소가 홈페이지에 위치하는 템플릿을 생성 할 수 있습니다.

홈페이지 상단부터 시작하여 아래로 내려갑니다. 더 많은 고객을 유치 할 수있는 홈페이지를위한 최고의 레이아웃 디자인 계층에 대해 알아 보려면 계속 읽으십시오.

왼쪽 또는 가운데의 로고 (및 헤더 구성 요소)

홈페이지 헤더도 전체 사이트에 걸쳐 있으므로 이러한 모듈에는 약간의 생각이 필요합니다. 헤더의 목표는 사람들에게 귀하의 사이트에 대한 정보를 신속하게 표시하고 사용자에게 콘텐츠를 찾기위한 가장 기능이 우수한 버튼과 필드를 제공하는 것입니다.

로고

로고 위치

로고로 시작하십시오. 멋지게 디자인 된 로고는 여기에서 가장 큰 가치를 제공하지만 헤더 중간의 왼쪽 상단 모서리에 배치해야합니다. 사람들은 왼쪽에서 오른쪽으로 읽으며 로고는 일반적으로 사이트가 제공하는 것에 대한 아이디어를 제공합니다. 로고가 회사를 즉시 설명하지 못하는 경우 로고 아래 또는 측면에 짧은 태그를 포함 시키십시오.

검색 창

검색 창의 중요성

각 전자 상거래 사이트는 내부에 작은 검색 엔진입니다. 당신의 고객 중 한 사람인 그를 스티븐 (Steven)이라고 부르 자면, 목걸이를 찾는 당신의 홈페이지에 도착한다면, 그는 필요한 것을 찾을 수있는 몇 가지 옵션 만 있습니다.

덜 효율적인 첫 번째 방법은 메뉴 탐색 범주 중 하나를 클릭하는 것입니다. 일반적으로 사용자를 적절한 페이지로 조금 더 빨리 안내하는 두 번째 방법은 검색 창입니다. 검색 막대가 슬라이더 아래에 숨겨져 있거나 사이드 바를 따라 배치 된 경우 간단한 검색을 수행하기 위해 고객이 혼란을 겪게됩니다.

이것을 헤더에 넣고 명확하게하십시오.

쇼핑 카트 아이콘 및 버튼

2015 06-01-11.25.00 AM에서 스크린 샷

많은 온라인 상점에서 쇼핑 카트 아이콘을 사이트의 오른쪽 상단 모서리에 배치하기 때문에 대부분의 고객이 본질적으로 쇼핑 카트에있는 물건을 찾기 위해 본다고 가정 할 수 있습니다.

불행히도, 일반적으로 쇼핑 카트 모듈과 관련하여 테마 또는 전자 상거래 플랫폼이 제공하는 모든 것을 고수하고 있지만 디자인 변경 시장에 있다면 다음과 같은 지침이 있습니다.

  • 쇼핑 카트 아이콘 포함
  • 사이트의 모든 페이지에서 원 클릭 체크 아웃을 제공하는 링크 또는 아이콘 통합
  • 장바구니에있는 품목 수를 나타내는 숫자 표시

배송 공지

2015 06-01-11.25.09 AM에서 스크린 샷

긴급 성을 만드는 아름다운 방법은 사용자가 일정량의 제품을 구매 한 후 무료 배송 또는 기타 인센티브를 제공하는 것입니다. 전략에 이와 같은 내용을 포함 시키려면 웹 사이트 헤더에 공지해야합니다.

위의 스크린 샷은 Kutoa 회사가 공간을 많이 차지하지 않고 운송 정책을 설명하는 좋은 예를 보여줍니다.

계절 배너

이는 위에서 언급 한 배송 정책과 유사하지만 계절별 프로모션 또는 특별 거래를 진행하는 경우 사람들이 이에 대해 어떻게 알게 되겠습니까? 작은 홍보 배너를 위해 헤더에 공간을 확보하십시오. 이렇게하면 휴일이 다가 오면 단순히 그래픽을 놓아 프로모션이 끝날 때까지 그대로 두십시오.

로그인 / 등록 버튼

이것은 전자 상거래 홈페이지의 메인 스테이 중 하나입니다. 헤더에 로그인 / 등록 링크를 명확하게 표시하십시오. 고객에 대한 원활한 체크 아웃 프로세스를 작성하고 일부 고객 정보를 수집 할 수 있습니다.

적절한 탭이있는 탐색 메뉴

메뉴 항목은 운영하는 비즈니스 유형에 따라 다르지만 분명히 홈페이지 계층 구조에 포함되어야합니다. 가장 좋은 방법은 고객이 먼저 이동할 위치를 기록하고이를 기반으로 메뉴 항목을 선택하는 것입니다. 주로 셔츠를 판매합니까? 첫 번째 메뉴 항목 중 하나를 가장 인기있는 셔츠에 직접 연결하십시오.

오버레이 된 클릭 유도 문안 및 버튼이있는 이미지 또는 슬라이더

CTA 슬라이더

이미지 슬라이더는 헤더 바로 아래에 있으며 제품의 멋진 사진을 공유하는 방법으로 사용됩니다. 이미지 만있는 슬라이더는 쓸모가 없습니다. 사용자에게 가장 인기있는 제품이나 프로모션으로 안내하는 클릭 유도 문안 및 버튼을 통합합니다.

슬라이더에 XNUMX ~ XNUMX 개의 슬라이드를 포함시키고 자신의 전략에 따라 슬라이드를 변경하십시오.

제품 썸네일 그리드 또는 슬라이더

슬라이더 또는 그리드로 축소판 그림

그리고, Shopify 블로그는 너무 많은 선택을 제공하는 것이 고객을 혼동하는 방법을 설명합니다웹 사이트를 떠나거나 구매 횟수를 줄 이도록합니다. 홈페이지에는 이미지 슬라이더 바로 아래에 제품 격자가 필요하지만 XNUMX ~ XNUMX 개 이상의 품목을 포장하는 것에 대해 두 번 생각하십시오.

이메일 마케팅 가입 양식

향후 프로모션 및 뉴스 레터 발송을 위해 이메일을 수집하는 것은 고객을 유지하고 지속적으로 고객을 유지하는 가장 쉬운 방법 중 하나입니다. 뉴스 레터 가입이 홈페이지에서 어디에 있는지에 따라 인기있는 전자 상거래 상점이 다른 영역 중 하나입니다. 그러나 한 가지 결론은 분명합니다. 사람들이 가입하려면 홈페이지에 가입 양식을 배치해야합니다.

첫 번째 방법은 헤더에 가입 양식을 사용하여 사용자를 공격하는 것입니다. 이것은 당신의 회보가 고품질의 내용을 제공하고 당신이 바로 그것을 당황하게 마케팅하는 것을 느끼지 않는다고 가정합니다.
헤더에 가입 추가

다른 상점에서는 뉴스 레터 가입 양식을 공유 할 때 사이드 바 또는 바닥 글을 선호합니다. 온라인 상점은 일반적으로 많은 이메일을 보내지 않을 때 페이지 하단 근처에 양식을 배치하는 것으로 나타났습니다. 그들은 간혹 프로모션을 보내기 위해 이메일을 수집하려고합니다.
2015 06-01-11.25.39 AM에서 스크린 샷

내가 가장 좋아하는 이메일 획득 전술은 팝업 양식으로, 사용자가 몇 초 동안 사이트를 방문한 후에 표시됩니다. 이들은 일반적으로 가장 많은 구독을 생성하며 고객이 대가로 무언가를 받는다는 것을 분명히 말할 수 있습니다.
팝업

사이드 바 또는 그리드 기반 레이아웃?

사이드 바는 중요하지 않은 구성 요소를 통합하면서도 적절한 노출을 제공 할 수있는 고유 한 기회를 제공합니다. 비슷한 방법으로 그리드 레이아웃이라고합니다. 전체 홈페이지에는 정사각형 모듈이 나란히 배치 된 다소 체크 무늬가 있습니다.

그리드 기반 레이아웃

사이드 바에 포함 할 견고한 구성 요소는 무엇입니까?

  • 블로그 버튼 또는 링크
  • 프로모션 또는 계절 배너
  • 미디어 링크
  • 소셜 모듈 또는 링크
  • About us 위젯 또는 사이트의 모든 내용을 설명하는 영역

최근 트위터

바닥 글

대부분의 고객은 바닥 글로 이동하지 않지만 몇 가지 중요하지만 덜 긴급한 링크가 필요합니다.

바닥 글

필자는 완벽한 전자 상거래 바닥 글을 구성하는 것이 몇 가지 필수 항목을 잊기 쉽기 때문에 지루한 작업이라고 생각합니다. 시작하기위한 목록은 다음과 같습니다.

  • 문의 링크
  • 이메일 링크
  • 연락처
  • 주문 상태 링크
  • FAQ 링크
  • 소셜 버튼
  • 보증 링크
  • 개인 정보 보호 정책 링크
  • 블로그 링크
  • 배송 정보 링크
  • 반품 정보 링크
  • 회사 정보 링크
  • 채용 정보 링크

효과적인 전자 상거래 홈페이지 계층 구조를 생성하는 것은 예술이지만 대부분의 고객을 전환하는 영역에 대한 약간의 도움과 이해를 통해 홈페이지를 활동의 허브로 만들 수 있습니다. 이 목록에 속한 다른 항목을 생각하면 아래에 의견을 남겨주십시오.

특집 이미지 curtsey 크리스 배니스터

카탈린 조르지 니

나는 웹 디자인 블로거이고 몇 주를 보냈다가 최고의 전자 상거래 플랫폼 나를 위해. 내 현재 확인 10 대 전자 상거래 사이트 구축 업체.