改進移動結賬 - 為什麼你應該關閉 iPhone 自動更正

已發表: 2021-08-19

新企業家對開設在線商店猶豫不決的原因之一是因為他們害怕客戶支持。

史蒂夫,我需要為我的商店安裝一條支持熱線嗎? 我寧願不必直接通過電話與客戶打交道。 我可以只提供一個電子郵件地址並收工嗎?

雖然不得不處理電話支持的不便絕對是一個合理的問題,但我根本不擔心客戶支持。 事實上,我擁抱它。 如果我可以讓每個客戶都接電話,我會的

為什麼? 這是因為當我直接與客戶交談時,好事總會發生。 不僅轉化銷售機會大大增加,而且客戶來電導致我的網站修復了許多重大錯誤

今天,我想與您分享我的移動網站的一個致命錯誤,該錯誤已將客戶趕走了近一年!

提示:它涉及移動結賬和 iPhone 自動更正!

獲取有關如何開設成功電子商務商店的免費迷你課程

如果您有興趣開展電子商務業務,我整理了一個全面的資源包,可幫助您從頭開始開設自己的在線商店。 離開前一定要抓住它!

目錄

該死的自動更正!

Improving Mobile Checkout - Why You Should Turn Off IPhone AutoCorrect

有一天,當我注意到一些非常奇怪的行為時,我碰巧在網上跟踪一位客戶。 此人的購物車中有大量商品,但一直在網站上的 2 個頁面之間來回切換。

有一刻他們會在結賬頁面上,然後他們會回到購物車頁面,然後又回到結賬頁面......一遍又一遍。 事實上,這種莫名其妙的網上沖浪模式持續了大約10分鐘。

現在在正常情況下,我會馬上給這個人打電話,但我還沒有他們的信息,因為他們還沒有完成結賬的第一頁。 所以我能做的就是等待。

即使我看不到客戶的臉,我也能看出他們很沮喪,我們很可能會失去這筆交易。

幸運的是,客戶最終決定打電話給我們在線下訂單。

顧客:我無法告訴你我有多沮喪!

妻子:我們很抱歉。 我怎麼幫你?

顧客:我兒子告訴我,在我的 iPhone 上購物應該是簡單直接的,但我這輩子似乎無法在你的網站上結賬

妻子:我很樂意通過電話接受您的訂單。

顧客:非常感謝。 我已經到這裡了。 這個愚蠢的電話不會讓我正確輸入我的城市和電子郵件地址!!! 我感到非常沮喪,以至於我想把手機扔到房間對面。

妻子:我們對此感到非常抱歉。 你介意向我描述你的確切問題嗎?

原來,這位漂亮的女士住在一個叫“南堡”的小鎮。 但是她的iPhone不讓她正確進入她所在的城市,因為它不斷將“Southborough”變成“South borough”

她的 iPhone 認為通過糾正她的打字來幫她一個忙,但它不會讓她正確進入她的城市。

解決自動更正問題

iphone orm

果然,當我嘗試在我妻子的 iPhone 上輸入“Southborough”時,它也一直在嘗試自動更正城市。 和這位女士一樣,我有點沮喪,因為花了很多精力讓手機正確註冊我的打字。

在進行了一些網絡研究後,我發現我的移動網站存在嚴重的設計缺陷。 為了防止 Web 瀏覽器干擾客戶的輸入,您應該關閉所有智能手機和平板電腦表單的自動更正

幸運的是,關閉自動更正很容易做到……

對於所有表單,您只需將以下標記添加到所有文本輸入字段。

<input type="text" name="name" autocorrect="off">

為了更好地衡量,您還應該通過在所有表單中添加 auto-capitalization="off" 和 auto-complete="off" 來關閉自動大寫和自動完成

<input type="text" name="name" autocorrect="off" auto-capitalization="off" auto-complete="off">

一旦我進行了這些更改,輸入正確的地址就非常簡單了。 我們很幸運,這個客戶決定打電話,因為我可能沒有想到這個潛在的問題。

即使我非常徹底地測試了我們的移動網站,我也沒有考慮測試 iPhone 會嘗試自動更正的名稱和表格。

使電話號碼可點擊

在這次客戶慘敗之後,我決定通過特別關注可用性來對我的移動網絡表單進行更徹底的分析,這就是我的想法。

首先,這只是一種預感,但我相信如果我們沒有在移動網站的頁腳顯眼地顯示我們的電話號碼,我們肯定會失去這個客戶

clickable phone number

但我真的很幸運,這就是原因。 默認情況下,Android 和 iOS 在自動使電話號碼可點擊方面做得很好。

但由於我實際上並沒有編寫任何代碼來明確地使號碼可點擊,因此我們的點擊通話號碼可能無法在所有手機上使用

一般來說,最好謹慎行事,不要依賴自動檢測,所以這裡是使電話號碼可在手機上點擊的代碼。

首先,您想關閉手機已經提供的任何自動檢測,因為您想防止操作系統意外點擊隨機數。

<meta name=”format-detection” content=”telephone=no” />

然後,你想把你的電話號碼變成一個鏈接

我們的電話號碼:<a href=”tel:6505555555″>650-555-5555</a>

使表格輸入更容易

telephone form

我在嘗試下訂單時注意到的另一件事是輸入我的電話號碼有點笨拙。 由於我的標準手機鍵盤將所有數字都放在手機的第一行,因此很容易打字錯誤。

幸運的是,有一些 HTML5 結構可以使輸入數字更容易。

通過將以下標籤添加到電話輸入字段,您可以使某些電話(最重要的是 iPhone)在輸入數字時使用電話鍵盤而不是標準鍵盤。

<input type=”tel” name=”tel”/>

將這些標籤添加到您的電話號碼輸入字段將彈出數字鍵盤,使號碼輸入變得更加容易。

結論

當談到手機和平板電腦的可用性時,我顯然有很多東西要學習:) 但是現在我對潛在問題有了更多的了解,我能夠更好地發現我們設計中的錯誤和問題。

但是,如果要吸取教訓,與客戶交談並詢問他們對可用性的意見總是值得的。 畢竟,他們是支付賬單的人,他們擁有盡可能順暢的購物體驗符合您的最佳利益。

祝你的店好運!