「译文」输入框的设计自查清单

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

文本输入框是最基本的界面控件之一。它看似简单,但使用场景多,交互频次高,值得我们花些时间好好设计。全球著名的用户体验咨询公司 Nielsen Norman Group 整理了一份设计自查清单,共 14 条。供大家参考。

当你在移动设备上设计输入框时,应该查查它是否满足下表中的14条可用性要求。

无论是设计网页,还是 web app,或是原生的移动 app,文本输入框都是设计中的基础组成控件。

这是一个输入框应该有的样子:

一只安静的输入框

下面是移动端输入框应该遵守的 14 条用户体验准则:

到底需不需要输入框

这个输入框真的是必须有的吗?

输入框的描述

输入框的文字描述在它的上方吗?(不在里面,也不在下面)

这个输入框是必填的(*)还是选填的?

有没有把输入框里的占位符都去掉?(为什么要去掉占位符:http://www.nngroup.com/articles/form-design-placeholders/)

可见性

输入框是否足够大,以便完整显示那些最有可能出现的输入内容?

当键盘出现的时候,输入框是否在横屏和竖屏两个模式下都能被看到?

帮助用户填写信息

输入框是否有合适的默认值?

  • 任何可用的历史记录值?
  • 用户经常使用的值?

能不能用手机的特有功能(摄像头,GPS,语音,联系人)来填充呢?

能不能根据其他信息帮助用户得出要填的值(例如,根据邮政编码,或者优惠券输入码来推测用户所在的地区)?

输入过程

是否支持直接复制并粘贴到输入框内?

适合这个输入框的键盘是哪个类型的?(译注:如英文键盘还是数字键盘)

能不能根据前面输入的字符进行自动联想或自动匹配?

  • 对姓名、地址和电子邮件地址,不启用自动更正。

允许单词拼写错误或是缩写吗?

允许用户以任何格式输入信息吗?(译注:如信用卡号、电话号码里的「-」符号)

  • 可以把用户输入的各式信息自动转换为统一格式

根据这个清单检查你设计中的每一个输入框。这的确是有点耗时费神,但是你受累总比用户受累要好得多。

理想情况下,你的网站或是应用中所有的输入框都应该百分百地符合这个清单。少了任何一项,都会影响用户体验。

实践中,你可能做不到让所有输入框都百分百满足这些用户体验要求。在这种情况下,优先让那些最常被用到的或者是对完成任务最为关键的输入框尽可能符合这个清单。

 

译者:Aven

来源:设计译言(微信公众号:shejiyiyan)

原作者 Raluca Budiu

原文 A Checklist for Designing Mobile Input Fields

您的赞赏,是对我创作的最大鼓励。

评论( 1

登录后参与评论
  1. 有意思哈。

    回复
加载中