资讯
欣赏
资源
服务
返回首页
触屏键盘设计准则
作者:克里斯蒂安  来源:333cn.com  :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

上一页  1 2 3 [4] 5  下一页
本文相关关键字: 触屏键盘 | 设计准则 | ui | 交互设计 | 创意
继续阅读:
[让好设计发声 请将设计讯息稿件发至Email:news@333cn.com]  编辑:shx
推荐
无法抗拒的诱惑 ...
全球最新商品包装...
阿姆斯特丹全新的...
笔触小韵味大 王...
花边
超HOT纹身的妩媚...
MISS VAN和她的猪...
回味五十年代的时...
神奇的百度镜子
抢看VOGUE法国版...
永远的美丽 性感...
排行
专题
  • 平面设计

  • 工业设计

  • CG插画

  • UI交互

  • 室内设计

  • 建筑环境

设计服务友情链接网站地图广告服务合作伙伴关于我们版权申明
中国设计之窗 © 版权所有 粤ICP备09030610号 
Tel:0755-21041837 客服:serve@333cn.com 资讯提交:news@333cn.com