改进移动结账 - 为什么你应该关闭 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”/>

将这些标签添加到您的电话号码输入字段将弹出数字键盘,使号码输入变得更加容易。

结论

当谈到手机和平板电脑的可用性时,我显然有很多东西要学习:) 但是现在我对潜在问题有了更多的了解,我能够更好地发现我们设计中的错误和问题。

但是,如果要吸取教训,与客户交谈并询问他们对可用性的意见总是值得的。 毕竟,他们是支付账单的人,他们拥有尽可能顺畅的购物体验符合您的最佳利益。

祝你的店好运!