详尽深入分析网页触屏键盘设计的轨道,来看这

2019-09-25 作者:新闻资讯   |   浏览(190)

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

优先保证表单的可浏览性

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

很早之前Jakob Nielsen的研究告诉我们,用户通常只是快速浏览网页而不是细致地从上到下阅读。在填写表单的时候也是这样,尽管设计者希望填写者全心全意,用户也未必如你所愿。让用户能够高效的浏览表单,对避免错填漏填至关重要,尤其是当表单是用户只能填写一次的时候(比如电子商务地址表单,注册表单等等)。

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

标签位置

贴切的将字母自动大写

关于标签的位置已经有了很多研究,然而这场辩论还在继续。表单大师Luke Wroblewski在研究中确定,用户对标签顶部对齐的表单完成时间最短,因为此种方式减少了眼球运动的需要量。在通常意义的表单标签中,右对齐的方式能让用户第二快的完成表单,尤其建议在当页面高度有限时使用这种方式。虽然左对齐标签的表单用户完成的最慢,但是当表单需填写的数据不太常见时,这种方式能提高理解。

提示输入类型

提示文字

保持标签顺序

如果将标签作为框内提示文字,帮助性也不大。一旦表单获取点击焦点,提示文字就消失了,用户不再能看见它。这会让用户产生短期记忆的压力而增加错误的机率。

保持自定义键盘的一致性

即使把标签分开,另外增加框内提示文字,用户乍一看上去也会觉得像已经填写了的样子。举个例子,Nielsen Norman Group曾做过的一项眼球追踪研究就说明,空的输入框比有提示文字的输入框更能引起用户的关注,而且与空的输入框相比,用户更容易忽略有提示文字的输入框。换句话说,被认为是有用的表单提示文本其实弊大于利,尤其是对习惯大致浏览的用户。

图片 1

图片 2

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

好的:空的表单字段

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

图片 3

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

不好的:被提示文字掩盖的表单字段

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

在某些情况下,提示文字比普通文本的颜色较轻,这可能缓解上述问题。然而这种技术产生了一个对比度的问题,在白色背景下配浅灰色文本通常不符合被普遍接受的网络可访问性指南(正常文本对比4.5:1)。此外,根据W3C,提示文字也不支持残疾人的辅助设计,这使得这些残疾人用户更难准确填写表单。

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

浮动的标签

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

浮动标签是一个迅速获得普及的新的交互设计方式。在它的设计中,标签文字开始作为提示文字,然后一旦用户开始填写,标签将升到上面,解决了上述提示文字消失的问题。

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

图片 4

图片 5

虽然这种方式还可以帮助减少页面长度,在移动端特别有帮助。但是它不能解决上述文本框看上去已经被填补的问题。因此,Nielsen Norman Group不建议这种做法,还是应该保持标签在上面,除非页面长度是最重要的设计关注点。

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

提供更易填写的表单格式

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

以前,在填写表格时用户有很多的猜测。“我的电话号码应该是哪种格式?我的信用卡有没有少输一位?这个键盘上的符号“@”在哪里?” 新技术使我们能够不让用户被这些疑虑困扰,提供更清爽的体验。

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

输入掩码

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

帮助用户格式化输入文本的输入掩码,虽然在外观上与提示文字类似,其实有明显的不同。首先,掩码只出现在用户点击输入框的时候,避免了上述浏览障碍的问题。其次,输入的文字自动应用正确的文本格式,让用户将填充字段时的焦点放在所需的数据上,这样更容易注意到错误。在下面的例子中,填写电话号码时括号和破折号自动填充。

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

图片 6

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

在填写手机号、信用卡、货币等等的时候,这种简单的技术可以节省我们的时间和精力。

图片 7

输入字段的HTML属性

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

设计师知道对于输入特定的数据需要展示正确的移动键盘,但是对究竟哪种才是正确的键盘类型有些疑虑。

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

举个例子,对于最常用的“数字”类型属性的输入框,常常不会触发数字小键盘,触发的是普通的带有数字区域的键盘,数字键的大小远小于小键盘。

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

图片 8

图片 9

“数字”键盘和“电话”小键盘

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

对于只包括数字的字段,比如日期,邮编,信用卡等等。使用数字小键盘可以有更大的点击目标,从而使用户用更小的精力输入。(为了使其展示,前端中可用“tel”作为type值或者添加属性“pattern=[0-9]* ”。)然而,为数字状态设置全键盘,对如街道地址等以数字作为开始的混合字段依然有用。

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

这里有其他的几种可以被加入输入框的属性,从而可以消除额外的点击和错误。

图片 10

自动填写:利用浏览器可以保存并列举用户以前填写过的值。对敏感数据应关闭此功能。

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

自动更正:更正输入的拼写错误。对名称,地址等特殊字段应该关闭此功能。

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

自动首字母大写:自动大写输入的第一个字母。这适用于填写姓名,而不可用于电子邮件地址。

图片 11

拼写检查:用红色下划线标出拼写错误的单词。对名称,地址等特殊字段应该关闭此功能。

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

限制输入

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

如今越来越多的人用小屏的移动设备,我们需要考虑到小屏的使用场景,避免用户不必要的输入,在提高用户满意度的同时还可以减少错误率。

图片 12

地址预填充

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

在网上注册表单中地址的填写常常是最麻烦的,因为包括多个字段,长长的地址名。通过把长地址拆解为单个字段,不仅有助于让用户聚焦在输入上(是的他们总是会频繁切换页面),也削减了大量的输入。

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

在下面的例子中输入谷歌总部的地址(街道,城市,州,邮编,国家),完整的输入过程只需键入10个字母,而如果不用自动填充的话,用户需要手动输入50多次。

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

图片 13

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

上面使用谷歌API的解决办法可以在大多数情况下表现良好,但是对于输入标志性建筑和公寓号的适用性有限,因为这些也许不包括在API提供的反馈之中。

针对任何电话号码框,用如下代码:

而ThinkGeek的方法,由软件即服务(SaaS)供应商提供,称为PCA预测,初始搜索时允许输入公寓号码,输入后将地址正确的格式化。

图片 14

图片 15

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

ThinkGeek.com

图片 16

邮箱预填充

针对任何电子邮件地址框,用如下代码:

另一种减少输入的方法就是在邮件地址字段中提供一个常见邮箱域名的列表。列表在用户输入了“@”按钮时出现,主要就是使用了一个预填充的解决方案,这样每次输入邮件地址最多可以节省12次按键。

图片 17

图片 18

正如上面提到的,各种数字键盘之间会有一些区别,在不同平台之间也会有一些不同。例如,在iOS平台上,上述代码调出的电话键盘可以让用户输入数字以及少量电话相关的特殊字符和分隔符,而调起的数字键盘只能输入数字。与此同时,在Android平台上,调起的电话键盘则有着更多的特殊字符,支持更多格式的电话号码。

注意输入框文本 “邮箱地址” 已经消失

但是,由pattern属性调起数字键盘在Android上根本不支持,相反,它只会调起常用的字母键盘。虽然在iOS和Android平台上,你都可以使用type=number调起数字键盘,但将type设置为number带有语义含义,在很多场景下并不合适(比如信用卡号是一个数字队列,不单单是一个数字)。

利用定位

所以,我们推荐更为保守的策略,使用pattern=d*,这样在iOS平台上可以有更好的体验,在其他不支持该属性的平台上也不会有什么影响。(当然了,如果输入框就是针对一个数字的,比如价格或是数量,那么显然应该使用type=number了。)

虽然调用定位数据常用在移动应用程序中,但是我们不能忘记在所有的平板电脑和台式机上也可以使用。特别是当在触摸屏上打字很麻烦时,基于位置的信息预填充可以节省用户宝贵的时间并提高转化率。

3、保持一致,调用合适的键盘(54%的网站犯了此错误)

诺德斯特龙百货网站的产品详情页就是这种技术的一个很好的例子,产品利用定位完全跳过了表单填写。页面调用定位信息,并在最接近的商店自动查找项目的库存,而不是要求用户输入邮政编码来获取地址。这样不仅仅节省了用户的时间,还可以让用户直接看到“最近店面地址”这个有用的信息。

问题:如果一个输入框调用了专用键盘而其他类似的输入框却没有,那么在没有调用专用键盘时用户会感到困惑,并开始质疑这个输入框所需输入的类型。

图片 19

为特定输入框调用合适的键盘是正确的做法(参见上面的推荐),但是要确保在你的网站上保持一致,否则会让用户很困惑。换句话说,如果邮政编码的输入框调用了数字键盘,那么类似的输入框也要有同样的做法。

虽然由于精度问题,预填充一个完整的地址可能是有困难的。通过谷歌的Places API,可以同时使用地理位置信息和地址预填充两种方式以达到最好的效果,根据用户的实时位置给出更为精确的位置填写参考。

图片 20

图片 21

尽管这听起来是显而易见的,但很多网站都没有在调用专用键盘上保持一致。例如,花店FTD(如上图)在填写信用卡号的时候调用了数字键盘,但在紧接着下面的安全码输入框却没有,虽然这两个值都是数字。

当然,因为不能保证准确性,所以需要允许用户可以对自动生成的位置数据进行手动修改。

在50个快速增长的热门在线零售商中,54%的网站在他们的移动站点上犯了这个错误,多多少少都会有一个或是多个电话输入框,信用卡号码或是信用卡核对(CVV)输入框没有调用数字键盘。这54%的数据细则如下(绝对值):24%的网站没有为这三类中任何一种调用数字键盘(尽管这也是一致的,但是错误的示范),剩下30%的网站(包括FTD)不一致,只有在一部分输入框才会调用数字键盘。

总结

更令人惊讶的是,在整个可用性测试中,由于这样的问题让一些被试者很困惑。他们开始质疑对于个别输入框最初的解读,认为可能需要填写一些其他的内容。例如,当看到信用卡安全码输入框弹出了标准键盘时(如上图FTD的网站),被试者开始怀疑这是否就是填写信用卡背面的那三个数字,或是印在卡上的其他字符串。

总之,遵循这些原则可以帮助设计出易用的表单并创造愉悦的表单体验:

4、兑现上一项和下一项按钮的行为(4%的网站犯了此错误)

优先保证表单的可浏览性,设计易于阅读的标签,并避免无关的内容妨碍用户浏览。

问题:如果上一项和下一项按钮把用户带去了不合逻辑顺序的输入框,用户会很烦恼和困惑。

提供更易填写的表单格式,为每个输入条目的类型设计输入掩码,并使用适当的键盘(以及其他HTML属性)。

在测试中,被试者在未能兑现上一项"下一项按钮行为的网站上感到烦恼。用户预期的行为很简单:当用户点击下一项按钮,他们会预期跳到表单中下一个合乎逻辑的输入框,没有其他变化,甚至提交表单。上一项按钮也一样,当然是换个相反的方向。

给予恰当的输入限制,使用预填充

这不仅仅是需要有正确的标签序列(虽说这是一个好的开始)。当需要依赖于用户先前的选择处理动态输入控件时,事情往往会出差错。在这些情况下,我们已经看到用户数据被删除或是标签序列被违反。我们也必须要格外注意自定义表单的接口。例如,在迪士尼商务网站,定制化的状态选择器不属于标签序列(因为从技术上来说它并不是一个输入元素),所以用户就会跳过这个状态控件。

利用定位,无需再次点击添加。

图片 22

图片 23

填写了邮政编码以后(如左图),被试者点击下一项按钮,正确的跳转到菜单中的下一项场所类型(如右图)。但如图所示,网站清空了被试者前一个输入的数据。很显然,当使用下一项和上一项按钮时数据应该是被保留的。

这些按钮的功能基本上是充当键盘上tab键的移动版;所以,它们应该采用和电脑键盘tab一样的序列规则。它们应该提供从一个输入框到下一个输入框的快捷方式,不需要任何点击(不论是鼠标还是手指)。这在手机上是尤为重要的,因为当键盘呼出的时候,屏幕空间是有限的,下一个输入框可能被部分遮挡,这个时候下一项按钮则用起来很方便。所以,尽管上一项和下一项按钮有可能不会被所有用户用到,但禁用这些按钮的行为会导致很严重的后果。

幸运的是,大部分网站这一点都做的很好。只要代码是清晰的,手机浏览器会默认将输入框出现的顺序作为标签序列。在热门移动端网站中,只有4%的网站犯了此错误。

5、在适当的情况下,禁用自动大写(38%的网站犯了此错误)

问题:几乎所有的被试者都认为他们的电子邮件地址必须要小写,所以这项数据自动大写会给整个过程带来不必要的麻烦。

智能手机默认会把标准文本输入框的首字母大写,这在大部分情况下是合适的。然而,在有些情况下禁用自动大写是更合适的,特别是像电子邮件地址这种绝大多数用户都以为要小写的情况。

图片 24

该名被试者注意到了首字母J,并移回光标将其改为小写j,因为他不确定大写字母是不是可以通过验证。

测试中的大部分时候,被试者都注意到了大写字母,并明确的将其改为小写。最合理的解释是他们不确定是否允许填写大写字母,或电子邮件地址是否区分大小写。在那些电子邮件输入框禁用了自动大写的网站上,没有被试者会主动将首字母大写。推荐大家在电子邮件或是其他合适的场景(如网址URL)禁用自动大写。

在热门移动电子商务网站中,38%的网站在电子邮件地址输入框没有禁用自动大写,把它们设置为纯文本输入框,给用户留下非技术性的困惑。

可以在标签上加入autocapitalize属性并设置为off,来禁用自动大写,如下所示:

图片 25

当然,针对电子邮件输入框,你也可以设置一个type属性为email:

图片 26

在iOS系统上,设置type属性为email将会自动禁用自动大写。然而,最好仍然设置autocapitalize属性,因为这不仅在iOS系统上奏效,而且在其他还不支持email输入框类型或是实现方式不同的平台也可以使用。

测试以及绝密小抄

虽然这些基本原理看上去是显而易见的,但是要记得全球最大的移动电子商务网站中98%的网站违反了至少一条(参看任务完成列表)。70%的网站违反了两条甚至更多的基础触摸键盘准则。事实上,24%的网站根本没有为触屏键盘输入做过什么优化,就算是省掉标准键盘(在输入电话、电子邮件、数字等情况),偶尔调用专用键盘(一致性很差),在合适的地方禁用自动更正,抑或是在电子邮件地址输入框禁用自动大写,这些都没有。

不遵守设计准则的一个原因可能是,针对一个大型网站所做的全局测试需要去发现所有的明显缺陷——故而,理想情况下的第三项建议中提到调用键盘的一致性问题,是不必要被提及的。另外一个原因是,在前一篇文章中提到的,手机和触屏界面是一个相对较新的平台,它的全新的界面理论需要大家去关注无数的小的细节——这些细节对于我们网页设计师和开发者来说还不习惯去主动寻找和设计。

综合以上原因,我们将用一个绝密小抄来作为文章的结尾,此小抄是设计触屏界面输入框最常见的细节点,包括可复制粘贴代码以及正确调用了键盘的手机触屏优化demo,你可以把它当作是一个设计开发手机端以及桌面端网站的清单。

可交互的触屏键盘小抄,以及手机端优化demo

这些输入框通常都会出现在以下类型的表单中:帐号注册,帐号登录,搜索,调查,完整的结账过程,注释表单以及联系表单。我们建议你搜索整个代码库,来捕获到每一个实例。

本文由管家婆正版四不像图发布于新闻资讯,转载请注明出处:详尽深入分析网页触屏键盘设计的轨道,来看这

关键词: 香港