WooCommerce에서 모바일 결제 간소화를 위한 특별 고려 사항

데이터에 따르면 많은 사이트에서 데스크톱 트래픽보다 더 많은 모바일 트래픽이 발생하고 있지만 휴대기기에서의 전환은 여전히 ​​훨씬 뒤쳐져 있습니다. 그래서 사람들은 휴대전화를 더 많이 사용하지만 실제로 구매하기 위해 컴퓨터를 사용하는 것이 마찰의 포인트입니다.

오늘은 모바일 사용자가 WooCommerce 스토어에서 유료 고객으로 쉽게 전환할 수 있도록 할 수 있는 몇 가지 사항을 살펴보겠습니다. 이러한 제안을 시도할 때 사이트에 대해 A/B 테스트를 수행하는 것을 잊지 마십시오. 그들이 다른 사람들을 위해 일했다고 해서 그들이 특정 결제 프로세스에 긍정적인 영향을 미칠 것이라는 의미는 아닙니다.

양식 필드를 쉽게 만드십시오

모바일 장치에는 소프트웨어 키보드라는 훌륭한 기능이 있습니다. 즉, 양식 필드를 정확하게 식별하면 입력해야 하는 데이터에 적합한 키보드가 모바일 사용자에게 제공됩니다.

위에서 볼 수 있듯이 WooCommerce는 이메일 필드를 식별할 때 기본적으로 이 작업을 수행합니다. 내 이메일을 더 쉽게 입력할 수 있도록 @ 기호는 다른 키 세트 뒤에 숨겨져 있지 않고 쉽게 액세스할 수 있습니다.

검토할 다른 필드는 우편 번호 및 전화 필드입니다. 이러한 필드를 특정 형식으로 지정하려면 사용자에게 맡기는 것보다 형식을 미리 프로그래밍하는 것이 가장 좋습니다. 필드 중 하나의 형식이 잘못되어 결제가 두 번 이상 거부되었습니다. 전화 키보드에서 문자와 숫자 사이를 왔다갔다 하는 것은 이미 성가신 일입니다. 따라서 원하는 데이터를 정확한 형식으로 입력하도록 강요하여 사용자를 더 이상 좌절시키지 마십시오.

사용자는 이 문제를 처리할 필요가 없습니다. 시간을 내어 입력을 완료한 후 필드 형식을 지정하거나 서버 측 형식 지정을 처리하는 JavaScript를 작성하십시오. 다른 모든 옵션은 사용자에게 추가 부담을 주어 구매 가능성을 낮춥니다.

필드 오류 형식 지정

양식 필드를 지나다가 사이트에서 만든 오류 스택만 표시되는 "체크아웃"을 클릭한 적이 있습니까? WooCommerce는 다른 플랫폼과 마찬가지로 사용자가 결제 정보와 관련된 문제를 찾도록 만드는 죄를 범하고 있습니다.

물론, 그들은 필수 필드 옆에 작은 빨간색 *을 제공하지만, 하나를 놓치면 페이지 상단에 있는 큰 빨간색 상자만 얻을 수 있습니다. 제공된 알림으로 문제를 찾아내는 것은 스스로 하는 일입니다.

이 시스템에는 더 나은 접근 방식이 있으며, 내가 가장 좋아하는 방법은 필드를 입력할 때 유효성을 검사하는 것입니다. 사용자를 기다리게 하지 말고 필드가 맞는지 여부를 즉시 보여줍니다.

내가 좋아하는 두 번째 옵션은 필드 오류를 인라인으로 직접 표시하는 것입니다. 즉, 오류가 있는 경우 필드를 빨간색으로 강조 표시하고 동일한 보기에서 문제가 무엇인지 설명합니다. 이것을 구현하려면 Business Bloomer에 WooCommerce 필드와 함께 인라인 오류를 추가하는 방법에 대한 훌륭한 자습서가 있습니다. 나는 몇몇 클라이언트 사이트에서 이것을 사용했고 결과에 매우 만족했습니다.

알림으로 체크아웃을 숨기지 마세요.

데스크톱 결제 경험에서 일부 상향 판매 전략을 사용할 수는 있지만 모바일 결제 경험을 망치는 것은 너무 쉽습니다. 터치 대상은 종종 너무 작으며 때로는 모바일 장치에 팝업이 표시될 때 화면을 벗어나기도 합니다.

팝업이나 기타 시각적 혼란 대신 Smart Offers를 보고 총 주문 가치를 높이십시오. 사용자가 구매하기 전에 장바구니에 추가하도록 요청하는 대신 Smart Offers는 초기 체크아웃 작업을 완료 한 후 사용자에게 묻습니다.

연결 가능성 확인

사용자가 휴대폰과 상호 작용하는 방식에 대한 연구가 있지만 성별이 휴대폰 상호 작용에 미치는 영향에 대해서는 아직 찾지 못했습니다. 이것은 일반적으로 여성이 남성보다 손이 작아서 도달 가능성에 잠재적으로 영향을 미치기 때문에 연구에서 중요한 격차입니다.

프로그래머가 압도적으로 남성이기 때문에 이것은 온라인 상점을 구축하는 사람들이 인구의 50%에 대해 인터페이스의 도달 가능성을 테스트하지 않는다는 것을 의미합니다.

사람들이 결제 양식과 상호 작용하는 방식을 테스트하는 것은 확실한 전환을 보장하는 데 중요합니다. 그러나 편리한 것으로만 테스트하는 함정에 빠지지 마십시오. 손 크기와 장치 크기의 광범위한 스펙트럼에 걸쳐 테스트에 노력을 기울이십시오.

한 고객의 경우 모바일에서 구매하는 여성 고객의 기반이 넓지 않았기 때문에 손이 작은 사람들을 위한 계산대 조정에 대한 반발이 있었습니다. 나는 그들에게 작은 손을 위한 더 나은 결제 프로세스를 만들기 위해 몇 가지 작은 조정을 하도록 설득했고 몇 주 만에 모바일 장치에서 여성 고객의 구매가 증가하는 것을 보았습니다. 계산대가 여성 고객을 염두에 두지 않았기 때문에 이전에는 여성 고객을 본 적이 없습니다.

사이트 속도

모바일 체크아웃에 대해 고려해야 할 또 다른 고려 사항은 타겟 시장이 있는 맥락에서 사이트 속도를 이해하는 것입니다. 도시의 사용자는 4G 속도를 얻을 수 있지만 시골 사용자는 3G 연결만 사용할 수 있고 데이터 요금제가 심각하게 제한될 수 있습니다.

타겟팅하는 국가를 보는 것만으로도 사이트 속도 측면에서 여러 가지를 고려해야 할 수 있습니다. 캐나다에서는 괜찮은 속도를 가지고 있지만 세계의 다른 많은 지역에 비해 데이터 요금제가 빈약합니다.

모바일 결제 경험을 개발할 때 제한된 인터넷 연결에서 테스트해야 합니다. Firefox와 Chrome에서는 상당히 쉽습니다.

Safari에서 테스트하는 경우 느린 연결을 시뮬레이션하려면 Charles Proxy와 같은 타사 도구를 보거나 xCode용 네트워크 링크 조절기 도구를 설치해야 합니다. 이 도구를 iOS 테스트 장치와 함께 사용하여 브라우저에서 시뮬레이션된 장치 대신 적절한 모바일 장치에서 사이트를 테스트할 때 라이브 연결을 제한할 수도 있습니다.

직장에서 연결만 확인하는 대신 사용자의 느린 연결에 대해 사이트를 테스트해야 합니다.

눈에 보이는 신뢰 표시

신뢰 표시는 SSL 공급자의 이미지 또는 안전하고 신뢰할 수 있는 지불 공급자가 있음을 보여주는 기타 아이콘입니다. 종종 이들은 데스크탑 사용자를 위한 사이트의 맨 아래로 분류되지만 모바일 레이아웃을 위해 배치할 위치를 재평가할 가치가 있습니다.

나와 함께 일한 한 고객의 경우 결제 상단에 바로 배치하는 실험을 했습니다. 그렇게 하면 사용자가 휴대전화로 결제할 때 가장 먼저 본 것은 악성코드가 없는 안전한 사이트가 있다는 작은 표시였습니다. 이 작은 변화로 인해 전환율이 1~2% 증가했으며, 이는 한 해 동안 많은 추가 수입을 합산했습니다.

비밀번호 입력 애플리케이션

모바일 체크아웃 프로세스를 완료하는 사용자를 늘리는 데 도움이 되는 마지막 방법 중 하나는 모든 사용자 계정 필드가 1Password, Dashlane 및 LastPass와 같은 도구와 함께 작동하는지 확인하는 것입니다.

암호는 풀 키보드 앞에 앉아 있는 것만으로도 충분히 고통스럽지만, 다른 키보드 사이에서 앞뒤로 전환해야 하는 보안 암호를 적용하면 더 나빠집니다.

이것을 테스트하는 것은 상당히 쉽습니다. 위의 모든 도구의 무료 사본을 가져 와서 암호를 입력하십시오. 그런 다음 결제 양식에 있는 비밀번호나 사용자 필드를 채우는 데 사용합니다. 체크아웃 시에도 이러한 각 애플리케이션을 사용하여 계정을 만드는 것을 잊지 마십시오.

여기에서 저지를 수 있는 최악의 실수는 암호를 복사하여 계정 필드에 붙여넣는 기능을 차단하는 것일 수 있습니다. 이것이 암호 응용 프로그램이 작동하는 방식이며 보안 암호를 생성하는 모든 사용자는 수동으로 입력하지 않고는 멋진 임의의 암호를 추가할 수 없다는 것을 알게 되면 떠날 가능성이 매우 높습니다.

좋은 체크아웃 프로세스를 구축하는 것은 수익성 있는 전자 상거래 사이트를 만드는 데 매우 중요합니다. 모바일 구매가 증가함에 따라 모바일 구매자에게 최고의 경험을 제공하는 것이 더욱 중요해졌습니다.

여기의 단계를 수행하면 모바일 사용자에게 탁월한 경험을 제공할 수 있습니다. 그들은 행복할 것이고 당신은 더 많은 구매를 전환할 것이며, 이는 당신을 행복하게 할 것입니다.

고성능 WooCommerce 스토어 구축

Nexcess의 Managed WooCommerce 호스팅 솔루션으로 트래픽을 전환하는 상점을 만드십시오. 그들은 Jilt와 함께 표준으로 제공되어 버려진 카트를 복구하고 필요할 때마다 성능 테스트를 수행할 수 있으며 플랫폼은 쿼리 로드를 95%까지 줄여 더 빠른 매장으로 이어집니다.