梦见屎沾身跟以往不同的是,写这篇文章并不是我多有经验,而是我意识到自己的表单体验很糟糕,一直以来我觉得表单设计的需求简单且索然无味,更愿意去把精力投入有挑战性的需求上。后来发现往往是这些糟糕的表单把用户与平台沟通的入口堵死了,于是花了一段时间专门研究表单设计,下自己。
繁琐的表单一直被人们所诟病,减少用户的操作可以提高用户的输入效率,从而提高用户的率。比如表单中需要用户提供地址信息,点击“我的”可以自动获取地理信息,避免了用户填写长长的地址的烦恼,在移动场景下大大节省了用户的操作时间。
凡是涉及数据的设计都有这个特点,你需要很直观的向用户展示他最终所要付出的或他所能得到的。比如AA收款,用户填写总金额和总人数,这时候自动展现人均收款,是不是更人性化了~
给表单配上规则,会使你的表单更加聪明。比如需要用户输入银行卡号,自动空格断行可以避免填写错误。
要明确表单填写的目的,剔除掉其余非必要的信息。比如购物网站的注册表单,像学历的录入框,不但增加了用户的操作时间,而且毫无意义。
有些问题不需要马上获得答案,可以在使用过程中引导用户完善,有效简化了用户的注册流程。比如等到用户进行结算时再请求输入收货地址。
涉及到用户隐私问题的选项,给予解释,降低了用户的使用负担。比如要求用户填写手机号,可以告诉用户手机号是用于登录和找回密码。
只标注少数,减少信息量。大多数必填,标明“选填项”。大多数选填,标明“必填项”。如果差不多,标注必填项即可。
合理选择输入框的类型可以引导用户正确填写表单。比如时间选择器限定了该输入框的输入内容为时间类型。
默认内容可以提示用户需要输入的内容,避免用户误操作。也可以预填充输入框内容,减少用户操作,但是预填充内容必须是用户需要的,不然会达到适得其反的效果。
主动作表示用户填写表单的主要操作方式。比如保存、提交。主动作也可以包含两个意思,比如同意并提交。次动作表示用户填写表单的次要操作方式,大多数是用来撤销内容。比如取消、重置。
用户提交数据到服务器进行交互需要一定的时间。为了避免重复提交,可以将按钮置灰让用户无法点击,并且加入进度条或加载样式表示提交正在进行中。
(3)通过在一个多步骤表单的最后一步请求信息(电子邮件、电话),用户更有可能填写这些字段——否则它们会丢失填写前一步所取得的进展(这是一种被的认知偏差,被称为“沉没成本”)。
适用于有填写的情况。比如输入框有字数时,显示上限和当前的输入字数,让用户把握输入字数。
通常采用图标、按钮、图片、文本链接提示人们有帮助可提供,例如问号图标。适用于帮助文字较少的全局说明。
根据马泰奥·彭佐的2006年的标签对齐眼动实验结果表明。标签的对齐方式在理论效率上比较:顶对齐右对齐左对齐。
为了评估哪一种主动作和次动作的效果最好,Luck(Web表单设计作者)和伦敦的可用性测试公司Etre使用眼动和可用性指标对此进行了测试。
根据收集的数据,所有方案中最有效的设计都有共同特征:提交和关闭按钮左对齐排列,与上方输入框和标签对齐。
对于较为复杂的表单,需要对信息进行整理归纳,否则杂糅的表单会让用户失去填写的耐心。合理有层次的组织信息,按照不同信息的类别、属性和相关性进行区块的划分,利用线条、空间间隔、颜色进行视觉表现,给用户喘息的机会。
用户只有完成当前操作,页面才渐进展现下一步操作,让内容的增加顺其自然。比如Gogobot在邀请用户进行评价时,巧妙地运用高斯模糊后续内容来缓解用户的压力。
人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集、培训、社群为一体,全方位服务产品人和运营人,成立9年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。