온라인 상점의 모바일 전환율을 높이는 방법

사람들은 그 어느 때보다 휴대전화를 사용하는 데 더 많은 시간을 보내고 있습니다. 우리는 은행 업무, 투자, 날씨 확인, 운동 모니터링, 음악 감상, 탐색, 그리고 물론 쇼핑 등 거의 모든 일에 그것들을 사용합니다.

웹사이트 트래픽의 거의 55%가 모바일 장치에서 발생하고 온라인 쇼핑객의 60%가 휴대폰을 사용하여 제품을 먼저 찾습니다. 매장이 모바일에서 원활한 사용자 경험을 제공하지 않으면 잠재 고객의 상당 부분을 잃을 위험이 있습니다.

그러나 모바일 전환을 늘리기 위해 온라인 상점을 어떻게 최적화할 수 있습니까?

반응형 WordPress 테마로 시작

고품질 WordPress 테마는 반응형 온라인 상점을 위한 완벽한 출발점입니다. 테마는 전체 사이트의 기초이므로 모든 크기의 장치에서 뛰어난 경험을 제공하는 테마를 선택하세요.

다음은 테마를 평가하기 위한 몇 가지 팁입니다.

• 태블릿 및 휴대폰에서 테마 데모를 테스트합니다. 가능한 모든 화면 크기의 장치를 소유하고 있지 않을 수 있으므로 웹사이트 반응형 테스트 도구와 같은 사이트를 사용하여 경험을 시뮬레이션할 수 있습니다. 데모 요소는 모든 화면 크기에서 보기 좋게 표시되어야 합니다. 잘리거나 읽기 어렵거나 사용하기 어려운 부분이 없어야 합니다.
• 테마 데모를 보면서 브라우저 창의 크기를 조정합니다. 콘텐츠는 그에 따라 조정되어야 하며 어떤 것도 잘려서는 안 됩니다.
• 테마 설명에서 반응형 기능을 찾으세요. 특히 "반응형 디자인"을 언급하거나 테마가 모바일 장치에 맞게 조정되는 방식에 대해 논의해야 합니다.
• Google의 모바일 친화적인 테스트 도구를 통해 테마 데모를 실행하세요.
• 리뷰를 확인하세요. 테마 사용자의 평점과 리뷰를 읽으십시오. 반응형 디자인에 대한 부정적인 의견에 주의하세요.

테마가 WooCommerce와 통합되는 것도 중요합니다. 이렇게 하면 다른 잠재적 충돌과 함께 응답 문제를 방지할 수 있습니다.

Storefront 테마는 위의 모든 사항을 충족하며 유연하고 쉽게 사용자 지정할 수 있습니다. 또한 패션, 장난감, 디지털 제품, 예약 등 특정 산업을 위해 설계된 다양한 어린이 테마가 있습니다.

모바일 사용성을 염두에 두십시오.

사용성은 쇼핑객이 웹사이트와 얼마나 효과적이고 효율적으로 상호작용할 수 있는지를 나타냅니다. 사용성이 좋지 않으면 판매, 전환, 브랜드 인지도 및 SEO에 부정적인 영향을 미칩니다. 모바일 경험을 검토할 때 사용성은 최우선 순위가 되어야 합니다. 다음을 고려하세요:

• 엄지손가락으로 생각하십시오. 모바일 사용자는 엄지손가락만 사용하여 웹사이트와 상호 작용합니다. 클릭 가능한 모든 요소(링크, 버튼, 메뉴 항목, 이미지)는 사이트 방문자가 쉽게 탭할 수 있을 만큼 충분히 커야 합니다. 작거나 너무 가까이 있으면 누군가 실수로 잘못된 것을 클릭할 수 있습니다.
• 팝업 및 기타 주의를 산만하게 하는 것을 피하십시오. 모바일 화면이 너무 작기 때문에 방문자에게 표시할 항목의 우선 순위를 지정하는 것이 중요합니다. 전체 모바일 화면을 덮는 팝업은 사용자 경험을 방해하고 검색 엔진 순위에 부정적인 영향을 미칠 수 있습니다. 광고 및 기타 알림도 마찬가지입니다. 이러한 유형의 콘텐츠를 사용하기로 결정했다면 화면의 일부만 차지하고 쉽게 닫을 수 있는지 확인하십시오.
• 제품 필터를 구현합니다 . 많은 제품을 제공하는 경우 온라인 쇼핑객은 원하는 제품을 찾기 위해 잠시 스크롤해야 할 수 있습니다. 한 번에 몇 가지 제품만 표시하는 모바일 화면에서는 특히 어려울 수 있습니다. 고객은 구매하기 전에 좌절하고 포기할 수 있습니다. 필터는 찾고 있는 것을 기반으로 선택 범위를 좁히는 데 도움이 됩니다. 정렬 기능을 제공하려면 WooCommerce 제품 필터와 같은 확장 프로그램을 사용해 보세요.
• 충분히 큰 글꼴을 사용하십시오 . 웹사이트 텍스트가 너무 작으면 모바일 사용자가 읽기가 매우 어려울 수 있습니다. 제품에 대해 알아보기 위해 손가락을 오므리거나 확대/축소할 필요가 없습니다. 사이트 및 글꼴 선택에 따라 모바일 장치에 대해 다른 글꼴 크기를 설정해야 할 수 있습니다.
• 텍스트를 끊습니다. 정보가 많은 페이지가 있는 경우 작은 화면에서 더 쉽게 탐색할 수 있도록 더 작은 세그먼트로 나눕니다. 아코디언, 토글 또는 글머리 기호로 이 작업을 수행할 수 있습니다. 긴 블로그 게시물에서 사용자가 흥미로운 주제로 바로 이동할 수 있도록 하위 섹션에 대한 링크를 추가합니다.

결제 페이지 간소화

휴대기기에서의 쇼핑은 지난 몇 년 동안 크게 증가했지만 전환율은 그리 크지 않습니다. 실제로 모바일의 평균 전자상거래 전환율은 데스크톱의 3.83%에 비해 2.03%에 불과합니다.

결제 프로세스는 판매에 중요한 역할을 합니다. 전환율을 높이려면 모바일 장치에서 가능한 한 간단하게 만드십시오. 고객이 구매하는 데 시간이 너무 오래 걸리면 고객은 포기하고 다른 곳에서 쇼핑할 것입니다.

불필요한 필드 제거

결제에 필요한 정보를 자세히 살펴보는 것으로 시작하세요. 모든 것이 필요합니까? 제거할 수 있는 필드가 있음을 알 수 있습니다.

• 기업에 판매하지 않는 경우 회사 이름 필드를 제거하십시오.
• 고객에게 전화를 걸어야 하는 시나리오가 생각나지 않으면 전화 필드를 제거하십시오.
• 메모를 수락하지 않는 경우 주문 메모 필드를 제거합니다.

특히 모바일에서는 필드가 적을수록 좋습니다. WooCommerce 결제 필드를 사용자 정의하는 방법에 대해 자세히 알아보세요.

게스트 체크아웃 허용

고객 계정은 훌륭하고 정보를 자동으로 채우고 신용 카드 데이터를 저장하여 재구매 고객의 체크아웃 속도를 높입니다. 그러나 새로운 고객은 어떻습니까?

모든 사람이 스토어, 특히 가능한 한 빨리 체크아웃하려는 모바일 장치에서 계정을 만들고 싶어하는 것은 아닙니다. 사실, 고객 계정을 요구하는 것은 버려진 카트의 35%에 기여하는 것으로 생각됩니다.

WooCommerce로 비회원 결제를 허용하려면:

1. WooCommerce → 설정 → 계정 및 개인 정보로 이동합니다.
2. 고객이 계정 없이 주문할 수 있도록 허용을 선택합니다.
3. 페이지 하단의 변경 사항 저장 버튼을 클릭합니다.

비회원 결제가 매장에 적합한지 확인하는 방법을 알아보세요.

소셜 로그인 수락

귀하의 고객은 아마도 모바일 장치에서 소셜 미디어 계정에 로그인했을 것입니다. 사이트에서 소셜 로그인을 활성화하면 Facebook, Twitter, Google, Amazon 등을 사용하여 로그인할 수 있어 결제가 간편해지고 새 계정을 만들 필요가 없습니다.

WooCommerce 소셜 로그인을 활성화합니다.

여러 지불 옵션 수락

두 가지 이상의 결제 방법을 허용하면 결제 속도가 빨라집니다. 신용 카드 거래를 허용할 수도 있지만 PayPal 또는 Amazon Pay와 같은 옵션을 활성화하면 고객이 신용 카드를 꺼내 모든 세부 정보를 입력하는 대신 기존 계정을 사용하여 결제할 수 있습니다.

WooCommerce 결제 게이트웨이 통합 보기

계산대를 충분히 높이 만드십시오.

고객이 사이트의 결제 필드를 쉽게 채울 수 있도록 하는 것이 중요합니다. 필드가 확대하지 않고도 정보를 탭하고 채울 수 있을 만큼 충분히 높은지 확인하십시오. 간단한 CSS를 사용하여 이 작업을 수행할 수 있습니다.

결제 페이지에서 브라우저 검사기를 사용하여 시작하십시오. 이렇게 하면 각 개별 필드의 클래스를 식별하는 데 도움이 됩니다. 그런 다음 각 특정 클래스에 대해 다음 코드를 사용합니다. 이메일 필드는 이 예에서 사용됩니다.

 /** Customize height of checkout fields **/ input[type='email'].input-text{ padding: 100px !important; }

특정 사이트 및 현재 설정에 따라 패딩을 조정합니다. 작동하는 것을 찾으려면 약간의 플레이가 필요할 수 있습니다. 미디어 쿼리를 사용하여 이 코드가 적용되는 특정 장치를 사용자 지정할 수도 있습니다.

참고: 코드에 익숙하지 않고 잠재적인 충돌을 해결하는 경우 WooExpert 또는 개발자를 선택하여 도움을 받을 수 있습니다. 지원 정책에 따라 사용자 지정에 대한 지원을 제공할 수 없습니다.

제품 페이지 수정

개별 제품 페이지도 반응형이어야 합니다. 고객은 제품 세부 정보를 읽고, 사진을 넘기고, 장바구니에 항목을 추가할 수 있어야 합니다.

장바구니에 추가 버튼을 고정으로 설정

끈끈한 장바구니에 추가 버튼은 쇼핑객이 제품 정보를 읽을 때 페이지 아래로 따라갑니다. 그들이 구매를 확신한다면 구매하기 위해 위로 스크롤할 필요가 없습니다. 사실, 끈끈한 Add to Cart 버튼은 주문을 7.9% 증가시키는 것으로 나타났습니다! 이 CSS를 추가하여 모바일 장치에서 버튼을 고정시키십시오.

 /** Make the Add to Cart button sticky **/ @media only screen and (max-width: 900px) { .cart { position: fixed; bottom: 0; background: #ffffff; width: 100%; z-index: 3; } }

테마와 웹사이트 디자인에 따라 CSS를 약간 다루어야 할 수도 있습니다. 그러나 코드를 편집하고 싶지 않다면 WooCommerce용 Sticky Add to Cart와 같은 플러그인을 사용할 수도 있습니다.

이미지를 직관적으로 만들기

쇼핑객은 제품 페이지를 방문할 때 이미지 갤러리를 스와이프하여 더 많은 사진을 보고 손가락을 사용하여 항목을 확대할 수 있기를 기대합니다. 이러한 모바일 제스처는 매우 직관적이어서 거의 무의식적으로 만들어집니다. 귀하의 사이트가 이를 지원하는지 확인하십시오.

여러 장의 사진이 있는 경우 화살표나 점을 추가하여 표시합니다. 그렇지 않으면 모바일 사용자가 스와이프할 수 있는지조차 모를 수 있습니다!

중요한 정보의 우선순위 지정

고객이 멀리 스크롤하지 않고도 중요한 제품 정보를 볼 수 있는지 확인하십시오. 가격, 변형(색상, 크기 등), 할인, 리뷰 및 제품과 관련된 기타 세부사항에 우선순위를 지정합니다. 의류를 판매하는 경우 재료가 중요할 수 있습니다. 또는 전자 제품 매장인 경우 구매할 때마다 제공되는 보증을 강조 표시할 수 있습니다.

전체 제품 설명 및 사양(세탁 지침, SKU, 성분 등)과 같은 추가 정보는 페이지 아래로 더 떨어질 수 있습니다. 이렇게 하면 고객이 더 많은 정보를 원할 경우 쉽게 찾을 수 있지만 기본 사항에만 만족하면 압도당하지 않습니다.

모바일 메뉴 간소화

모바일 장치의 기본 메뉴를 가능한 한 단순하게 유지하십시오. 페이지의 긴 목록은 사이트 방문자를 압도하고 혼란스럽게 할 것입니다. 필수 항목으로 범위를 좁힌 다음 가장 중요한 페이지가 먼저 표시되도록 나열된 순서의 우선 순위를 지정하십시오.

Good Batch는 로그인 및 장바구니 링크 외에 5페이지만 포함하도록 모바일 메뉴를 줄입니다. 간단하고 요점입니다.

많은 페이지를 포함해야 하는 경우 확장 가능한 토글이 있는 하위 메뉴를 사용해 보십시오. 기본 메뉴 항목을 제한하고 사용자가 각 항목을 확장할 때 하위 메뉴 항목을 표시합니다. 메뉴가 확장되었음을 나타내기 위해 화살표와 같은 기호를 사용하십시오!

Nuria는 모바일에서 5개의 기본 메뉴 항목을 제공하며 각 항목 옆에 더 많은 옵션이 있음을 나타내는 화살표가 있습니다. 사용자가 클릭하면 기본 메뉴가 슬라이드되어 명확한 "뒤로" 버튼이 있는 하위 메뉴가 나타납니다. 이를 통해 고객에게 부담을 주지 않으면서 필요한 모든 옵션을 표시할 수 있습니다.

모바일 메뉴를 표시하는 방법에는 여러 가지가 있으므로 청중에게 가장 적합한 방법을 선택하세요. 여기에는 다음이 포함됩니다.

• 햄버거 메뉴 입니다. 햄버거 기호는 세로로 세 줄을 쌓아 올린 것입니다. 메뉴는 사용자가 기호를 클릭할 때까지 숨겨집니다. 이것은 페이지가 많은 사이트에 좋은 옵션이지만 사이트 방문자가 찾기가 더 어려울 수 있습니다.
• 탭 메뉴 . 이것은 일반적인 데스크탑 탐색과 매우 유사하며 사이트 상단에 가로로 메뉴 항목을 나열합니다. 이것은 최소한의 링크가 있는 메뉴에만 사용해야 합니다. 사용자는 모든 항목을 보기 위해 확대/축소하거나 스크롤할 필요가 없습니다.
• 플로팅 작업 버튼 . 메뉴 아이콘이 있는 버튼은 페이지에 떠 있고 사용자가 스크롤할 때 따라갑니다. 클릭하면 메뉴가 표시되도록 확장됩니다. 이것은 기본 메뉴에 액세스할 수 있도록 하는 좋은 방법이지만 주의를 산만하게 하거나 콘텐츠를 가릴 수 있습니다.
• 드롭다운 메뉴 . 클릭하면 페이지 상단의 메뉴 표시줄이 열리고 페이지 옵션이 표시됩니다. 햄버거 메뉴보다 공간을 조금 더 차지하지만 사이트 방문자가 더 쉽게 볼 수 있습니다.

일반적으로 테마에는 반응형 메뉴 스타일이 포함됩니다. 그렇지 않거나 다른 옵션을 사용하려면 다음 플러그인을 확인하세요.

• WP 모바일 메뉴
• ShiftNav
• 반응형 메뉴

어떤 옵션을 선택하든 고객이 사용하기 쉽고 요구 사항에 맞는지 확인하십시오. 그리고 이는 완전히 별도의 모바일 메뉴를 만드는 것을 의미할 수 있음을 기억하십시오!

중요한 기능을 쉽게 찾을 수 있도록 합니다.

모바일 장치의 제한된 화면 공간으로 인해 물건을 잃어버리기 쉽습니다. 방문자가 중요한 기능을 빠르게 찾을 수 있는지 확인하십시오.

검색창을 보이게 하기

많은 웹 사이트의 사이드바에 검색 상자가 포함되어 있지만 일반적으로 모바일 장치에서는 페이지 하단으로 푸시됩니다. 데스크탑 헤더의 검색 기능은 전화기의 동일한 공간에 맞지 않을 수 있습니다. 그러나 원하는 제품을 찾을 수 있는 기능의 이점을 누릴 수 있는 온라인 쇼핑객에게는 중요한 기능입니다.

훌륭한 솔루션은 쇼핑객이 쉽게 볼 수 있는 모바일 메뉴에 검색창을 포함하는 것입니다. 일부 테마는 이 기능에 대한 설정을 제공하지만, 그렇지 않은 경우 사용자 정의 코드를 사용하여 동일한 것을 얻을 수 있습니다.

header.php 파일을 열고 다음 함수를 추가하십시오: <?php get_search_form(); ?> <?php get_search_form(); ?> . 그런 다음 CSS를 사용하여 필요에 따라 스타일을 지정할 수 있습니다.

그리고 코드를 건드리지 않으려면 Ivory Search와 같은 플러그인이 동일한 기능을 수행합니다.

연락처 정보를 명확하게 표시

바닥글이나 사이드바에 연락처 정보를 포함하면 모바일 사용자는 페이지 맨 아래로 스크롤해야 하므로 보기가 어렵습니다. 메뉴에서 연락처 페이지로 연결되는 링크를 표시하여 대응합니다.

사용자가 쉽게 연락할 수 있도록 기본 메뉴에 클릭 가능한 전화번호 및/또는 이메일 주소를 포함할 수도 있습니다. 이것을하기 위해:

1. WordPress 대시보드에서 모양 → 메뉴 로 이동합니다.
2. '수정할 메뉴 선택' 옆의 드롭다운에서 올바른 메뉴를 선택합니다. 설정 방법에 따라 기본 메뉴 또는 모바일 메뉴가 됩니다.
3. 왼쪽 열에서 사용자 지정 링크 를 확장합니다.
4. URL 상자에 적절한 링크를 추가합니다. 전화번호의 경우 tel:+18005553927을 추가하여 해당 번호를 귀하의 번호로 바꿉니다. 공백이나 기타 기호가 없는지 확인하십시오. 이메일 주소의 경우 mailto:[email protected]을 추가합니다.
5. 링크 텍스트 상자에 메뉴에 표시할 텍스트를 추가합니다. 예를 들어 "전화해" 또는 "800-555-3927로 전화해"라고 말할 수 있습니다.
6. 메뉴에 추가 버튼을 클릭하고 선택한 위치로 끕니다.
7. 오른쪽 하단에 있는 파란색 메뉴 저장 버튼을 클릭합니다.

사용자가 모바일 장치에서 전화번호를 클릭하면 자동으로 전화를 겁니다. 그들이 귀하의 이메일 주소를 클릭하면 기본 이메일 앱에서 새 이메일이 열립니다.

카트에 쉽게 접근할 수 있도록 만들기

고객이 장바구니에 제품을 추가한 후에도 계속 쇼핑하기를 원하는 경우 해당 장바구니를 편집하고 나중에 체크아웃할 수 있어야 합니다.

WooCommerce용 미니 카트 플러그인은 웹사이트의 데스크톱 및 모바일 버전 모두에 카트 옵션을 추가합니다. 데스크탑에서 장바구니에는 항목 이름, 사진 및 가격이 포함되며 쇼핑객이 페이지를 떠나지 않고도 수량을 편집할 수 있습니다. 모바일에서는 장바구니에 있는 항목 수와 주문 총액을 표시합니다. 또한 구매자는 한 번의 클릭으로 장바구니 페이지로 이동할 수 있습니다.

웹사이트 속도에 집중

웹 사이트 속도는 모든 장치에서 중요하지만 작은 장치에서는 틀림없이 더 중요합니다. 모바일 쇼핑객은 종종 느린 인터넷 연결이나 셀룰러 데이터를 사용하여 탐색하므로 사이트가 최대한 빨리 로드되도록 최선을 다해야 합니다. 모바일 사용자의 53%는 로드하는 데 3초 이상 걸리면 사이트를 포기하고 Google의 새로운 모바일 우선 색인 생성은 웹사이트의 모바일 버전을 우선적으로 처리합니다.

사이트의 현재 로드 시간을 이해하는 것으로 시작하십시오. GTMetrix 및 Pingdom 웹사이트 속도 테스트는 사이트 속도를 이해하고 개선을 위한 권장 사항을 제공하는 데 도움이 될 수 있습니다. Google PageSpeed ​​Insights는 휴대기기 전용 테스트도 제공합니다.

그런 다음 다음 리소스를 사용하여 사이트를 최적화하세요.

• 이미지를 최적화하여 온라인 스토어 속도를 높이는 방법
• WooCommerce 및 속도에 대해 가장 먼저 고려해야 할 사항
• 내 WooCommerce 사이트가 느린 이유와 해결 방법
• WooCommerce용 Google PageSpeed ​​Insights에서 고성능 점수를 얻는 방법
• Jetpack 기능으로 WooCommerce 사이트 속도 향상

가볍고 능률적인 모바일 환경을 만들기 위해 Google에서 구축한 프레임워크인 AMP(Accelerated Mobile Pages)를 활성화하는 것도 고려할 수 있습니다. 특히 특정 온라인 상점의 경우 블로그 게시물 속도를 높이는 좋은 방법입니다. AMP로 사이트 속도 향상에 대해 자세히 알아보세요.

모바일에서 온라인 상점 테스트

상점을 정기적으로 테스트하고 모든 것이 모바일 장치에서 어떻게 작동하는지 이해하는 것이 중요합니다. 사이트 프로세스는 테마 데모 테스트를 위해 위에 나열된 단계와 유사합니다. Google의 모바일 친화적 테스트와 같은 도구와 브라우저 창 크기 조정과 같은 수동 방법을 조합하여 사용하세요.

모든 것을 테스트하십시오! 모든 링크를 클릭하십시오. 모든 페이지를 스크롤하십시오. 모든 기능을 확인하십시오. 사이트의 모든 측면은 휴대전화와 태블릿에서 쉽게 보고, 읽고, 탐색할 수 있어야 합니다.

모바일에서 몇 가지 작은 변화가 고객 만족도와 전환에 큰 변화를 줄 수 있습니다. 더 많은 팁을 찾고 계신가요? 모바일에서 WooCommerce의 기능을 활용하는 방법을 읽어보세요.