モバイルチェックアウトの改善–iPhoneのオートコレクトをオフにする理由
公開: 2021-08-19新しい起業家がオンラインストアの開始を躊躇する理由の1つは、カスタマーサポートを恐れているためです。
スティーブ、ショップのサポートラインを設置する必要がありますか？ 電話で直接顧客に対応する必要はありません。 メールアドレスを入力して1日電話することはできますか？
電話サポートの不便さに対処しなければならないことは間違いなく正当な懸念ですが、私はカスタマーサポートをまったく恐れていません。 実際、私はそれを受け入れます。 そして、もし私が電話ですべての顧客を得ることができれば、私はそうするでしょう。
どうして？ お客さまと直接お話をすると、いつもいいことが起こるからです。 セールを変換する可能性が大幅に増加するだけでなく、顧客からの電話により、私のWebサイトの多くの主要なバグ修正が行われました。
今日は、ほぼ1年間顧客を遠ざけてきた私のモバイルサイトのキラーバグをあなたと共有したいと思います！
ヒント：モバイルチェックアウトとiPhoneのオートコレクトが含まれます！
成功するeコマースストアを開始する方法についての私の無料ミニコースを取得する
あなたがeコマースビジネスを始めることに興味があるなら、私はあなたが完全にゼロからあなた自身のオンラインストアを立ち上げるのを助けるであろうリソースの包括的なパッケージをまとめました。 出発する前に必ず手に取ってください！
ダーンユーオートコレクト！
ある日、非常に奇妙な行動に気づいたとき、たまたまオンラインで顧客をストーカーしていました。 この人はショッピングカートにたくさんの商品を持っていましたが、ウェブサイトの2ページの間を行ったり来たりし続けました。
ある瞬間、彼らはチェックアウトページに行き、次にショッピングカートページに戻り、次にチェックアウトページに戻ります…何度も何度も。 実際、この不可解なWebサーフィンパターンは約10分間続きました。
通常の状況では、私はすぐにこの人に電話をかけたはずですが、彼らがチェックアウトの最初のページを完了していなかったため、私はまだ彼らの情報を持っていませんでした。 だから私にできることは待つことだけだった。
そして、お客様の顔は見えませんでしたが、お客様が不満を感じており、売り上げを失う可能性が高いことがわかりました。
幸いなことに、顧客は最終的に電話で私たちに電話してオンラインで注文することにしました。
妻：ごめんなさい。 どんな御用でしょうか？
顧客：私の息子は、私のiPhoneでの買い物は簡単で簡単なはずだと言っていましたが、私の人生では、あなたのサイトでチェックアウトできないようです。
妻：電話でご注文を承ります。
お客様：ありがとうございました。 私はすでにここまでそれを持っています。 このばかげた電話では、私の街とメールアドレスを正しく入力できませんでした!!! そして、私はとても欲求不満になっていたので、部屋の向こう側に自分の電話を投げたいと思いました。
妻：それについてはとても申し訳ありません。 私たちの知識のためにあなたの正確な問題を私に説明していただけませんか？
この素敵な女性は「サウスボロー」と呼ばれる町に住んでいたことがわかりました。 しかし、彼女のiPhoneは、 「サウスボロー」を「サウスボロー」に変え続けたため、彼女を自分の街に正しく入れることができませんでした。
彼女のiPhoneは、タイピングを修正することで彼女に有利に働いていると思っていましたが、彼女は自分の街に正しく入ることができませんでした。
オートコレクトの問題への対処
案の定、妻のiPhoneで「サウスボロー」に入ろうとすると、街も自動修正しようとし続けました。 そして、この女性のように、私は電話に私のタイピングを正しく登録させるのに非常に多くの労力を要したことに少し不満を感じていました。
少しウェブを調べたところ、モバイルサイトに重大な設計上の欠陥があったことがわかりました。 Webブラウザーが顧客の入力に干渉するのを防ぐために、スマートフォンとタブレットのすべてのフォームでオートコレクトをオフにする必要があります。
幸い、オートコレクトをオフにするのは簡単でした…
すべてのフォームで、すべてのテキスト入力フィールドに次のタグを追加するだけです。
また、適切な対策として、すべてのフォームにもauto-capitalization =” off”とauto-complete =” off”を追加して、自動キャピタライゼーションとオートコンプリートをオフにする必要があります。
これらの変更を行った後は、正しいアドレスを入力するのは非常に簡単でした。 私はおそらくこの潜在的な問題について考えていなかったので、この顧客が電話をかけることを決めたのは幸運でした。
また、モバイルWebサイトを徹底的にテストしましたが、iPhoneが自動修正しようとする名前やフォームをテストすることは考えていませんでした。
電話番号をクリック可能にする
この顧客の大失敗の後、私は特に使いやすさに注意を払ってモバイルWebフォームをより徹底的に分析することにしました。これが、私が思いついたものです。
まず最初に、これは単なる予感ですが、モバイルWebサイトのフッターに電話番号が目立つように表示されていなければ、この顧客を確実に失ったと思います。
しかし、私は本当に幸運でした、そしてここに理由があります。 AndroidとiOSは、デフォルトで電話番号をクリック可能にするという素晴らしい仕事をしています。
ただし、番号をクリック可能にするコードを実際に記述していなかったため、Click-to-Call番号がすべての電話で機能するとは限りません。
一般に、自動検出に頼らずに注意を怠ったほうがよいので、電話で電話番号をクリックできるようにするためのコードを次に示します。
まず、OSが誤って乱数をクリックできないようにするために、電話がすでに提供している自動検出をオフにします。
次に、あなたはあなたの電話番号をリンクに変えたいです
フォーム入力がさらに簡単に
注文しようとしたときに気付いたもう1つのことは、電話番号の入力が少し不格好だったことです。 私の標準的な電話キーボードは私の電話の一番上の行にすべての数字を置くので、タイプミスをするのは非常に簡単です。
幸い、数字の入力を簡単にするHTML5構造がいくつかあります。
電話入力フィールドに次のタグを追加することにより、特定の電話（最も重要なのはIPhone）に、番号を入力するときに標準のキーボードの代わりに電話キーボードを使用させることができます。
これらのタグを電話番号入力フィールドに追加すると、数字キーボードがポップアップ表示され、番号の入力がはるかに簡単になります。
結論
携帯電話やタブレットの使いやすさに関しては、明らかに学ぶことがたくさんあります:)しかし、潜在的な問題をよりよく認識しているので、デザインのバグや問題をよりよく見つけることができます。
しかし、学ぶべき教訓がある場合は、常に顧客と話をして、ユーザビリティについての意見を求めることは有益です。 結局のところ、彼らは請求書を支払う人であり、彼らが可能な限りスムーズなショッピング体験をすることはあなたの最善の利益です。
お店で頑張ってください！