모바일 체크아웃 개선 – iPhone 자동 고침을 꺼야 하는 이유
게시 됨: 2021-08-19신규 창업가들이 온라인 쇼핑몰 창업을 주저하는 이유 중 하나는 고객 지원이 두려워서다.
스티브, 내 상점에 지원 라인을 설치해야 합니까? 전화로 직접 고객을 상대할 필요가 없습니다. 이메일 주소를 입력하고 하루만 불러도 될까요?
전화 지원의 불편함을 처리해야 하는 것은 분명히 유효한 우려이지만 고객 지원이 전혀 두렵지 않습니다. 사실, 나는 그것을 받아들입니다. 그리고 내가 모든 고객에게 전화를 걸 수 있다면 그렇게 할 것 입니다.
왜요? 고객과 직접 대화를 하면 항상 좋은 일이 일어나기 때문이다. 판매로 전환할 가능성이 크게 증가 했을 뿐만 아니라 고객 전화로 인해 내 웹사이트에 대한 많은 주요 버그 수정 이 이루어졌습니다.
오늘 저는 거의 1년 동안 고객을 이탈시킨 제 모바일 사이트의 치명적인 버그를 알려드리고자 합니다!
힌트: 모바일 체크아웃 및 iPhone 자동 고침이 포함됩니다!
성공적인 전자 상거래 상점을 시작하는 방법에 대한 무료 미니 과정 받기
전자 상거래 비즈니스를 시작하는 데 관심이 있다면 처음부터 온라인 상점 을 시작하는 데 도움이 되는 포괄적인 리소스 패키지 를 준비했습니다 . 떠나기 전에 꼭 챙기세요!
젠장 자동 고침!
어느 날, 나는 아주 이상한 행동을 발견했을 때 온라인에서 고객을 스토킹했습니다. 이 사람은 장바구니에 엄청난 양의 상품을 가지고 있었지만 웹사이트의 2페이지를 계속 왔다갔다했습니다.
한 순간에 그들은 체크아웃 페이지에 있었다가 장바구니 페이지로 되돌아갔다가 체크아웃 페이지로 돌아갔습니다… 반복해서요. 사실 이 알 수 없는 웹서핑 패턴이 10분 정도 계속됐다.
지금 정상적인 상황이라면 바로 이 사람에게 전화를 걸었을 것입니다. 그러나 그들이 첫 번째 결제 페이지를 완료하지 않았기 때문에 아직 정보를 얻지 못했습니다. 그래서 내가 할 수 있는 일은 기다리는 것뿐이었다.
그리고 고객의 얼굴은 볼 수 없었지만 고객이 불만을 품고 있으며 판매를 잃을 가능성이 높다는 것을 알 수 있었습니다.
다행히 고객은 마침내 전화로 저희에게 전화를 걸어 온라인으로 주문하기로 결정했습니다.
아내: 정말 죄송합니다. 어떻게 도와 드릴까요?
고객: 내 아들은 내 iPhone에서 쇼핑하는 것이 쉽고 간단해야 한다고 말했지만 내 평생 동안 귀하의 사이트에서 결제할 수 없는 것 같습니다.
아내: 전화로 주문을 받겠습니다.
고객: 정말 감사합니다. 여기까지 이미 했습니다. 이 바보 같은 전화는 내가 내 도시와 이메일 주소를 올바르게 입력할 수 없습니다!!! 그리고 너무 답답해서 방에 전화기를 던져버리고 싶었습니다.
아내: 정말 죄송합니다. 귀하의 정확한 문제를 저희가 알 수 있도록 설명해 주시겠습니까?
이 멋진 여성이 "Southborough"라는 마을에 살았다는 것이 밝혀졌습니다. 그러나 그녀의 아이폰은 그녀 가 "Southborough"를 "South borough"로 계속 바꿔놓았 기 때문에 그녀가 그녀의 도시에 올바르게 들어가는 것을 허용하지 않았습니다.
그녀의 iPhone은 그녀의 타이핑을 수정함으로써 그녀에게 호의를 베풀고 있다고 생각했지만 그녀가 그녀의 도시에 올바르게 입력할 수는 없었습니다.
자동 고침 문제 해결
물론 아내의 iPhone으로 "Southborough"에 입력하려고 했을 때 도시도 자동으로 수정하려고 했습니다. 그리고 이 여성처럼, 나는 전화가 내 타이핑을 올바르게 등록하도록 하는 데 너무 많은 노력이 필요하다는 사실에 약간 좌절했습니다.
약간의 웹 조사를 한 후 내 모바일 사이트에 중대한 디자인 결함이 있음이 밝혀졌습니다. 웹 브라우저가 고객의 입력을 방해하는 것을 방지하려면 스마트폰 및 태블릿의 모든 양식에서 자동 수정 을 꺼야 합니다 .
다행히 자동 고침을 끄는 것은 쉬웠습니다...
모든 양식에 대해 모든 텍스트 입력 필드에 다음 태그 를 추가하기만 하면 됩니다.
그리고 좋은 측정을 위해, 당신은 또한 모든 양식에 "OFF"자동 완성 = "해제"= 자동 대문자를 추가하여도를 자동으로 대문자와 자동 완성 기능을 해제해야합니다.
이러한 변경을 수행하고 나면 올바른 주소를 입력하는 것이 매우 간단합니다. 나는 이 잠재적인 문제를 생각하지 못했을 것이기 때문에 이 고객이 전화하기로 결정한 것은 운이 좋았습니다.
그리고 모바일 웹사이트를 아주 철저하게 테스트했음에도 불구하고 아이폰이 자동으로 수정하려고 하는 이름과 형식을 테스트할 생각은 하지 않았습니다.
클릭 가능한 전화번호 만들기
이 고객 실패 이후, 저는 특히 사용성에 주의를 기울여 모바일 웹 양식을 보다 철저하게 분석하기로 결정했고 여기 제가 생각해낸 것이 있습니다.
우선, 이것은 직감에 불과하지만, 모바일 웹사이트 바닥글에 전화번호가 눈에 띄게 표시되지 않았다면 이 고객을 잃어버렸을 것 입니다.
하지만 저는 정말 운이 좋았고 여기에 이유가 있습니다. Android와 iOS는 기본적으로 전화번호를 클릭할 수 있도록 자동으로 만드는 훌륭한 작업을 수행합니다.
그러나 명시적으로 번호를 클릭할 수 있도록 하는 코드를 실제로 작성하지 않았기 때문에 클릭 투 콜 번호 가 모든 휴대전화에서 작동하지 않을 수 있습니다 .
일반적으로 자동 감지에 의존하지 않고 조심스럽게 실수하는 것이 더 낫습니다. 그래서 여기 전화번호를 전화에서 클릭할 수 있도록 하는 코드가 있습니다.
먼저 OS에서 실수로 임의의 숫자를 클릭할 수 없도록 하기 위해 전화가 이미 제공 하는 자동 감지 기능 을 끄고 싶습니다.
그런 다음 전화 번호를 링크로 바꾸고 싶습니다.
양식 입력을 더욱 쉽게 만들기
주문 하는 동안 알아차린 또 하나 는 내 전화 번호 를 입력 하는 것이 약간 서투른 이었다 . 내 표준 전화 키보드는 내 전화의 맨 위 행에 모든 숫자를 입력하기 때문에 입력 실수를 하기가 매우 쉽습니다.
다행히 숫자를 더 쉽게 입력할 수 있도록 하는 몇 가지 HTML5 구문이 있습니다.
전화 입력 필드에 다음 태그를 추가하면 특정 전화(가장 중요한 iPhone)가 숫자를 입력할 때 표준 키보드 대신 전화 키보드 를 사용하도록 할 수 있습니다.
전화 번호 입력 필드에 이러한 태그를 추가 하면 숫자 키보드 가 팝업되어 번호 입력이 훨씬 쉬워집니다.
결론
휴대폰과 태블릿의 사용성에 관해서는 분명히 배울 것이 많습니다. :) 하지만 이제 잠재적인 문제에 대해 더 많이 알게 되었고, 우리 디자인의 버그와 문제를 더 잘 찾아낼 수 있게 되었습니다.
그러나 배워야 할 교훈이 있다면 항상 고객과 이야기하고 사용성에 대한 의견을 물어보는 것이 좋습니다. 결국, 그들은 청구서를 지불하는 사람들이며 가능한 한 가장 원활한 쇼핑 경험을 제공하는 것이 귀하의 최선의 이익입니다.
당신의 가게에 행운을 빕니다!