恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
触摸设计问题——虚拟键盘(二)
0.0°
2014-11-20 好文转载 经验/观点 原作者: 原作者 举报 1524 7 6 0

关于触摸交互之虚拟键盘(二)

建议三、保持同类输入域键盘布局的一致性(54%没有做到)

 

问题:某输入域能够调出针对化的键盘布局,而输入类型相同的、类似的输入域却采用的是常规的布局。用户会感到很不习惯也很不方便,少数服从多数,最后用户便会要求一直使用常规的布局,这样就不会产生频繁的布局切换。

 

针对特殊的输入域调用针对性的键盘布局,这确实考虑的很人性化(请看我之前的建议),

但一定要保持某类输入域键盘布局的一致性,如果做不到这一点,用户会感到很不方便、很烦。换句话说,如果邮政编码这种数字类输入域能够调出数字键盘,那么其他数字类的输入域也应该调用数字键盘布局。这样才能保持一致性。



说起来容易做起来难,很多网站都没有保持同类输入域键盘布局的一致性。例如在线花店FTD(上图)在进行信用卡卡号输入时调用了数字式键盘,而在安全码输入域却使用了常规布局,尽管两个输入域输入的都是数值,可是布局上却有差异。

 

调查中54%的网站没有做到这一点,在电话号码、信用卡号码和信用卡安全码上错误百出,差异重重,而这54%的网站可以分解为:24%的网站不为电话号码、信用卡号码和信用卡安全码的输入提供数字式键盘布局,全部的输入都采用同一种键盘布局(这确实保持了一致性,但是是失败的一致性)。30%的网站这三者的输入有差异,键盘式布局时隐时现。

 

如果无法提供同类输入域键盘布局的一致性,用户会感到很困惑,就拿输入“信用卡安全码”来说,错误的布局可能会导致用户拿不准是输入三位数安全密码,还是输入信用卡上别的什么东西。

 

建议四、合理处理换栏、翻页问题 (4%没有做到)

 

问题:“上一页”和“下一页”按钮经常不合常理的换栏,删除用户之前填写的内容

 

调查中发现,如果网站的表单设计不合理,需要翻页,各种“上一页”“下一页”按钮会让用户眼花缭乱。而换栏问题更是麻烦,一个一个的点击栏目操作起来非常繁琐。用户期望中应该是这样的:当点击“下一页”按钮时,应该进入下一类数据的填写,之前填写的内容、布局,一切都不要变。“上一页”也是同理。

 

我们都会有这样的经验:(1)有时会弹出一个选框进行选择,选择之后我们之前输入的数据都被删除了,不得不重新输入一遍。(2)换栏极其不规律,经常导致内容被误删、误改。这些情况一定要避免。例如,在Disney Store中,提供的传统状态选择器便有这种问题



填完邮政编码后(左图),用户点击“下一页”按钮,便出现了一个“地区类型”的下拉式选择按钮(右图)。可你看,网站删除了用户之前填写的内容。

 

这些按钮是实质上就是桌面键盘“Tab”键的移动版;既然是模仿,用户肯定会想当然,那就顺应用户,保持和桌面的换栏规律一致。我们应该为用户提供更加快捷的换栏方式,并且换栏应无需使用指针、自动执行。这在移动应用中相当重要,因为屏幕空间有限,当虚拟键盘打开时,内容的一部分被遮盖,精细操作极为困难,所以要在“下一页”按钮、换栏功能上多下功夫,以方便使用。

 

好在大部分网站在这一点上做的都很好。只要有没填写的栏目,浏览器便会自动换栏到那一项。仅仅4%这一点没有做到。

 

建议五、适时关闭自动大写功能(38%的没有做到)

 

问题:作为中文用户,自动大写似乎对我们的影响不大,但是在输入英文密码和一些必须区分大小写的邮箱地址时,也会感到很不方便。

 

一般的智能手机都会默认打开自动大写功能,输入域输入的首字母都会改为大写,看起来很美观。但是某些特定的情况下,需要关闭自动大写功能,尤其是在邮箱地址时,大多数用户需要一直使用小写。



不管验证是否区分大小写,用户习惯性的还是会把”James”中大写的“J”改成小写的”j”,因为用户并不确定验证是否区分大小写,所以会选择比较稳妥的方式。

 

多次测试表明,在输入中,用户会特别注意用小写字母更换大写字母以预防输入错误。因此,为了适应用户习惯,让用户心理上更舒服,我们推荐在邮件地址输入域和其它有需要的输入域中关闭自动大写功能。

 

而调研中我们发现,38%的网站没有做到这一点,这让网站的新用户和不太懂科技的用户感到很困扰。

 

通过在<input>标签中加入autocapitalize属性,并设置为off,这样就能实现自动大写的关闭。如下:

<input type="text" autocapitalize="off" />

当然,对于邮件地址输入域,还可以将type属性设置为email:

<input type="email" autocapitalize="off" />

在iOS中,只需将type设置为email便可以自动关闭自动大写功能。而我们还要设置autocapitalize属性,是为了适应更多的平台。

 

总结:

 

大道理都很基本,但是实施起来很难,但是世界上排名前列移动电商网站中,有98%的或多或少有一点输入问题。而70%的网站有两条以上的、带有基础性质的问题。而24%的网站更差,完全没有进行输入上的优化。关闭效果不佳的自动纠错、根据情况选择合理的键盘布局、保持同类输入域键盘布局一致性、合理的换栏翻页、适时关闭自动大写功能。就是这五个问题,很基本,我们在日常使用中也都能遇到。

 

导致问题出现的因素极有可能是急功近利,缺乏对产品的测试。——其实很多问题,只要自己操作一遍,就能立马发现,但是问题还是发生了,这说明根本没有测试。另外值得一提的是,移动和触摸界面代表着一种相对较新的平台,全新的交互方式很空泛,框架是有了,但是具体的细节尚在完善中——我们作为开发者和设计者,有义务去不断完善,统一标准。

 

最后,提供一张非常方便的速查表,分别针对不同的输入类型(域)进行了设计。演示,并给于了一些失败的案例。很方便进行借鉴,从而优化你的设计。

 

cheat sheet for touch keyboards地址:

http://baymard.com/labs/touch-keyboard-types

 

 

更新:2014-11-20

收藏

7人已收藏

Cyy_Emma

接设计私活,q交流群:145065052

  • 35

    作品

  • 425

    粉丝

  • 21

    关注

  • 利用Tableau开发通用性Dashboard指南
  • 优雅Dashboard,附送Sketch源文件~
  • 第二阶段C4D练习
  • 2016年11月移动端交互设计Top 5
相关标签

    猜你喜欢

      2014-11-20 好文转载 经验/观点 原作者: 原作者 举报 1524 7 6 0

      触摸设计问题——虚拟键盘(二)

      0.0°

      你确定要举报触摸设计问题——虚拟键盘(二)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年11月20日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      6
      7
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录