通常来说，人们会理所当然的认为触屏设备要比几十年的电脑鼠标和键盘直观的多。用户与触屏直接交互，缩小了用户行为与软件响应之间的距离。然而，在移动设备上——尤其是在智能手机上——打字是一件相当恐怖的事情。因为那既慢，又痛苦，而且容易出错。

　　最明显的原因是键盘字符的尺寸和按键之间的临近，但是还有很多其他重要因素需要考虑，包括：

　　适当的使用自动更正的字典

　　贴切的将字母自动大写

　　提示输入类型

　　保持标签顺序

　　保持自定义键盘的一致性

　　在最近一次大规模的针对18个最大的移动电子商务网站的1：1可用性测试中，我们观察了在填写表格过程中，现在的触屏键盘的某些功能与限制是如何与用户的预期相冲突的。一旦冲突出现，用户的受挫感会立刻上升，比如表单字段验证错误的提示一个接一个的弹出来，或者更糟的是，用户被卡住并最终放弃了网站。

　　当面对一个不那么理想的触屏键盘是，用户会对网站失去信心，有的甚至怀疑自己用智能手机填完一个表单的能力。显然，好的移动终端的用户体验需要一个具有良好可用性的表单，触屏键盘也是其中的关键一环。

　　在本篇文章里，我们将围绕触屏键盘的可用性问题做深入一点的探讨，包括5条设计准则，可以缓解一些问题。这个设计准则摘自移动电子商务可用性报告中147条指南。前段时间我们在Smashing Magazine上看了移动电子商务10条准则，这5条触屏键盘的准则会更具有通用性，可以应用于用户与触屏键盘有交互的任何站。

　　此外，我们还以这5条准则为基准审视了排名前50的在线零售商的移动端网站，发现98%的网站犯了一个或多个错误，70%的热门移动端网站犯了至少两个错误(截至到2013年7月31日)。尽管有些指南可能刚开始看起来是显而易见的，但当如此多的电子商务站点都犯了这样的错误，我们显然需要更仔细的审视这些指南。

　　1、当词典匮乏时，禁用自动更正(92%的网站犯了此错误)

　　问题：当用户真的注意到差劲的自动更正时会感到很挫败，如果他们没有注意到更改，将会是一件更糟糕的事情。

　　自动更正通常在以下情况表现非常糟糕：缩写，街道名称，email地址以及其他词典里没有的词汇。这在整个测试过程中造成了很大的问题，随着被试者完成购买，大量错误数据被提交。

　　当被试者在网站上街道名称一栏输入”westheimer”时，手机将其错误的更正为”weathermen”(如左图)。然而，被试者并没有注意到，提交表单后收到了一个错误验证(如右图)。

　　关于自动更正的一个主要问题就是，用户通常不会注意到更正(因为用户通常关注的是他们正在输入什么，而不是已经输入的内容)。如果更正是正确的，那就没问题，但如果更正是错误的，那将会是很糟糕的事情。例如，在测试过程中多次碰到的例子，由于被试者并没有注意到自动更正，原本有效的地址信息被自动更正为无效信息并被提交。

　　在没有地址验证的网站上，这会导致订单被送到错误的地址，除非被试者特意仔细的查看订单确认页(毕竟，自动更正的信息通常看起来与输入的信息非常相似，这也使得用户很少会注意到信息是错误的)。当然，自动更正在地址上的惨痛失败并不仅仅是在边界的例子(如”weatherman”)，而且在一些常见的(标准化)缩写也是如此，比如”Rd”会被自动更正为”Ed”。

　　话虽这么说，自动更正在其他场景还是有用处的，会将无效数据更正为有效数据。因此，并不推荐在所有场景(如评论区)禁用自动更正。相反，要慎重使用自动更正，只在词典匮乏的场景禁用。这通常包括各式各样的正确名称(街道，城市，人物)以及其他标识(email地址，优惠券代码，等等)。

　　尽管看似简单，实践起来这却是迄今为止触屏键盘可用性当中最容易被忽视的部分;几乎所有的热门移动电子商务网站都会犯这个错误。上文提到的调查显示，其中有92%的网站在地址输入框里没有禁用自动更正。鉴于在地址和email地址输入框使用自动更正带来问题的严重性，却几乎没有什么网站在这里禁用自动更正，这真的很惊人。

　　你可以在标签上增加属性并设置为关闭，来禁用自动更正，就像这样：

　　2、弹出不合适的键盘(60%的网站犯了此错误)

　　问题：弹出不合适的键盘会降低输入速度，用户经常会因为标准键盘上数字的很小的点击区域以及间距而打错很长一串数字。

　　智能手机上触屏键盘的一个很大局限就是它的尺寸。字符本身也都是非常小的。事实上，在iPhone4竖屏时一个字符的大小是4*5.9毫米。

　　再来对照一下苹果自己的设计准则，其中提到所有可点击的界面元素至少要有6.85*6.85毫米，因为任何小于这个尺寸的元素点击准确度都会非常的差(微软和诺基亚同样制定了最小点击区域为7*7毫米)。可以预见，这将会导致拼写错误。

　　但是通过更改输入框代码的一到两个属性，你就可以让用户的手机自动显示所需输入的最合适的键盘。例如，你可以为信用卡号输入框调用数字键盘，为电话号码输入框调用拨号键盘，为电子邮件地址输入框调用电子邮件的键盘。这样可以节省用户必须切换传统键盘的时间，并且在输入数字的场景中，最大限度的减少输入错误，因为这样的专用键盘按键尺寸更大，会减少意外输错的机率。

　　Best Buy的信用卡号输入框调用了标准键盘，所以用户必须先切换至数字和字符键盘，然后准确无误的输入16位数字。这对于被试者是件很困难的事情，他们要来回看着信用卡和手机，小心翼翼的点击数字键，不碰到旁边的键。

　　在整个测试中，很多被试者都注意到了专用键盘，并对它们赞许有加。事实上，在iOS中，数字键盘的点击区域要比标准键盘大471%(数字键盘209*108像素vs标准键盘52*76像素)。更重要的是，我们发现在数字输入框里采用数字键盘时错别字明显减少。这会导致更少的验证错误，反过来，也可以将网站引向一个更好更无缝的购物体验。这对于长数字队列尤为明显，比如电话号码以及信用卡号。

　　左图，一个被试者由于标准键盘按键尺寸小且邻近，在输入”1″的时候不小心按到了横划线。这个时候调用数字键盘会更加合适。右图，用户在GAP网站上输入”日间联系电话”时，调出的是专门优化过的键盘，按键比标准键盘大471%。

　　调用专用键盘的另一个好处就是可以表明需要输入的是什么内容，如果输入框标题滑出视线范围或是用户不确定要输入什么的时候，这会很有用。然而，数字键盘也有一定的局限性，因为它不允许用户输入拼音字符，只有少量特殊字符或分隔符，也可能连这个都没有。所以，只有最合适的时候再调用这样的键盘，这很重要，比如输入电话号码、邮政编码、信用卡号以及信用卡安全码。同样的，在调用键盘时，确保你给出的格式样例是可以复制的。

　　根据给出的样例格式(比如”555-555-5555″)输入电话号码在iOS上是不可能的，因为调出的键盘是没有横划线的。(有趣的是，在Android系统上输入是可以的，这也说明了为什么在多个平台测试有助于确保在格式样例只在有些平台上必须。)

　　说了这么多可用性上的优点，你可能会想这种专用键盘是被广泛应用的。然而，60%的热门移动电子商务网站在对应的场景并没有调用它们，如电子邮件(电子邮件键盘)、电话号码(拨号键盘)以及信用卡号(数字键盘)。

　　技术上来说，有很多种方式可以调出数字键盘，每种键盘之间略有差别(如拨号键盘和数字键盘)，不同平台间行为也会有轻微的不同(iOS，Android等)。大体来说有两种HTML属性可以调用数字键盘，分别是type和pattern属性。

　　Type属性承载语义的含义，仅仅当输入时有合适的类型可调用时才会被用到，这主要是针对电话号码和电子邮件地址的场景。不过对于数字输入，更推荐使用pattern属性来替代。(注意如果你仅仅是想要浏览器调用键盘，并不强制格式，可以加入novalidate属性。)

　　针对任何电话号码框，用如下代码：

　　针对其他你想要调用数字键盘的输入框，用如下代码：