交互,我们未来携手共进!

最全表单交互设计原则

bamboo-ling:

一、 表单的设计


1.对齐


根据马泰奥·彭佐的2006年的标签对齐眼动实验,顶对齐标签移动到输入框需要50毫秒,右对齐标签需要240毫秒,而左对齐标签则需要500毫秒。研究表明:顶部对齐>右对齐>左对齐,下图所示 




顶对齐


优点:和输入框联系最紧密,效率最高


缺点:增加了垂直空间


右对齐


优点:和输入框联系紧密,减少垂直空间占用


缺点:标签可读性不强


左对齐


优点:标签可读性强,减少垂直空间占用


缺点:和输入框联系不紧密


2.输入框大小


输入框的长度要与用户的心理预期保持一致,要不然输入框太短,用户看不到全部输入内容就会容易输错。UX大会2130位参与者的所住城市名大多在3个字符(如 Leo, Indianna)到22个字符(如San Pedro Garza Garcia, Mexico)不等。99.9%用户的城市名含19个字符或更短,所以19个字符的宽度是字段“城市”的最佳填写宽度。


3.选填与必填


首先,选填字段越少越好(请参考第一条原则)。若该字段确定不可删除,且只适合部分用户,则不要让用户在反复验证后才弄明白它该怎么处置。一个表单最好只设置1-2个选填项,同时要清晰地将“选填”二字标注出来。


4.给出输入要求和格式规范


如果需要输入某种特殊格式,请给出具体要求。不要让用户对你含糊不清的密码输入要求进行猜测。这一原则也同样适用于句法格式,如电话号码或信用卡卡号等的标点符号的使用、空格的使用。


Netgear的密码重置表单对密码输入做出了要求,但却在密码输错之后才将其展出。优化方法是用户输入密码之前就给出要求。所以,不要让用户因你的“秘密要求”而犯错。


 



  • 内嵌标签(占位符文本、提示文本、字段标签),是位于表单域里面的文本,当用户输入的时候它会自动消失


    缺点:很容易造成用户短期记忆的压力以及增加犯错的机会;用户把文本误以为是默认填写的数据而忽略它,还有部分用户会尝试手动去删除文本。

    优点:节省了宝贵的屏幕房地产。

    来自NN Group的研究,研究中表明了空字段对比有文字的字段更吸引用户注意,以及用户更多的会跳过那些有提示文本的字段。


    在某些情况下,为了减轻上面所说的问题,占位符文本可以使用比普通的文本更浅的颜色。然而这种方法容易导致一个对比度的问题,白色背景上的浅灰色文本不符合W3C Web内容的可访问性指南(正常文本比4.5:1)。此外,根据W3C,占位符文本不支持辅助残疾人的设计(如屏幕阅读器),这会让这部分用户填写表单变得很困难。




  • 标签上方的字段或浮动标签


    表单标签应高于表单域,使用户可以很容易地看到他们在标签在字段上方


    优点:表单字段延长屏幕的整个宽度,使它们足够大,以显示整个输入(在一个体面的字体大小16像素一样);字迹清晰、有意义的字段标签,因为我们没有做限定于1-2词语。

    缺点:需要更多的垂直空间,这意味着用户必须滚动多。然而,这并不是一个严重的问题 - 现在这是绝对自然滚动。


    浮动标签确保他们填写了正确的外地用户。占位符文本默认情况下显示,但一旦一个输入字段被窃听和输入文本占位符文本淡出和顶部对齐的标签的动画。整个交互过程,一开始标签文本作为占位符文本,之后一旦用户开始填写它就会移动到表单字段的上方。



    优点:解决了上面所说关于标签消失的问题;减少页面长度。

    缺点:用户扫描式的浏览很容易误会框内已经被输入了文字。

    因此,NN Group建议还是避免这种交互方式,仍然采用标签在字段上方的做法,除非页面长度是现阶段你需要解决优先级最高的问题。




5.清空表单内容按钮


一不小心误点,就得重头再来,用户之前的所有付出顷刻白费。如果表单中含用户财务信息之类的敏感字段,可以提供一个“取消”按钮,让用户自行决定是否放弃表单填写。但要注意的是“取消” 按钮在视觉上要比 “提交” 按钮弱一些,以避免发生误点。


6.限制输入


如今越来越多人使用手机去处理生活中各种各样的事情,考虑到手机的使用场景以及它本身屏幕小的情况,我们需要让用户在填写表单的时候避免一些不必要的输入,这样不仅能够提高用户满意度还可以降低操作的错误率。


二、 表单输入


1.输入方式


常规输入方式有:文字框(text field)、下拉框(dropdown list)、单选框(radio button)、复选框(checkbox)。


衍生的输入方式有:滑块(range slider)、(加减)微调钮、开关钮(toggle switch)、Tab选框、搜索框等。


效率上,自动填充 > 选择填充 > 自由填充


 


平铺单选但互斥的选项


如果选择值只有2-3个,尽量避免使用下拉框,可以考虑使用一个水平标签陈列的方式,减少点击。


下拉选择:可以更好地利用可用的屏幕空间,也能减少用户的输入成本,例如时间的选择。传统的选择交互是给一个时间选择器,用户需选择小时以及分钟。但如果我们能确认大致时间以及范围就可以采用如下形式:






最低/最高区间的选择可考虑使用滑块交互


如果是在一个区间去选择选项可考虑使用滑块方式,用户只需要在一个设定的最低和最高值之间移动滑块就可以,和传统下拉菜单相比大大地降低了输入成本。对用户而言,通过视觉的提示滑块可以容易的横向或纵向调节来适应各种交互场景。但请记住,当操作滑块时调节轴上方的指示数字一定要给用户清晰的提示数据变动,这里也请考虑到大手指操作时候会被遮挡住的场景,例如: 



2.交互设计与用户输入数据的行为强兼容


确保表单所有字段没有被界面中的任意元素遮挡,例如键盘唤起时。当用户完成输入表单的某一字段,页面位置自动往下前进至下一个字段更好利用有限空间。



3.智能缺省补全


智能缺省选项可让用户的表单输入完成更快,更准确。例如,根据其地理位置数据提前帮助用户选择用户的地理位置信息。


预填充


预填充如字面义是判断用户意图预先为其填充表单,例如电商中填充用户默认地址,登录前填充用户上次用户名等。Apple Store在再次购买时,同一Apple ID下会默认填充好和上一次相同的信息,如若修改,则可选择设置默认值。


预填充设计时可以考虑:默认值、可选值、常用值、历史值、上次填充值等。


 


邮件地址预填充


另一种减少输入的方法就是在邮件地址字段中提供常见的域名。当用户开始输入@键的时候就会出现这些常见的域名。


地址预填充(Pre-Fills)


地址的填写是任何注册表单中最麻烦的部分,里面含有多个字段。通过调整表单字段至单个字段,我们发现用户不仅仅能保持在当前输入的状态(不需要频繁的切换),还可以削减大量的用户输入。





我们试着填写了谷歌总部的地址(街道、城市、州、邮编、国家)。整个表单我们只用了不到10次按键就完成了填写。这看似简单的输入背后隐藏了超过50次的潜在手动输入。


输入掩码


字段掩码,能帮助用户输入的文本编排格式。



首先,用户填写一个字段的时候只能出现一种掩码,以免出现上述问题。其次,当用户填写时自动为文本编排格式,让用户将关注的重点放在所需要填写的信息以及更容易被发现的错误上面。在下面的例子中,括号、破折号和间隔被应用于电话号码的输入上面。如填写电话号码、信用卡号、货币等


利用定位


在移动端APP里面调用地理位置信息是很常见的做法,但也别忘了这种做法同样适用于平板电脑和台式电脑。特别是触摸屏,众所周知,在触摸屏上填写表格特别麻烦。使用基于地理位置信息的预填充方式刚好能帮助用户节省宝贵的时间,同时提高用户转化率。


 


Nordstrom网站的产品详情页就是个很好的例子,该页面调用了位置信息来自动搜寻离用户最近的店铺。这样做除了节省时间外,用户不需要花费精力就能得到可能对其有用的信息。



但是,由于精度问题,想要通过预填充填写一个完整的地址是很困难的。谷歌的Places API基于用户位置,通过使用地理位置信息和地址预填充两种方式来解决这个问题,为用户提供准确的位置参考。




zuppler.com


当然,因为不可能完全准确,所以需要允许用户对这些自动生成的位置信息进行修改。


4.匹配键盘与所需的文本输入框


用户认识到,提供适当的键盘用于文本输入的应用程序。例如,当用户需要输入信用卡号码,只显示拨号盘,其输入限制到数字和不字符。这将减少他们的选择和错误,并加速完成。(前端的实现方式,标签的type属性里使用“tel”或者添加属性“pattern=”[0-9]*”)




确保这是整个应用程序,而不是只针对某些任务而不是其他一致的实现。 


5.输入时实时验证


用户将填补必要信息的形式,并顺利完成他们的工作。在现实世界中,用户经常犯错误。但是,用户在通过填写表单只在提交找出来,他们已经犯了一个错误的过程中不喜欢。以通知提供的数据的成功/失败的正确时间是正确的用户提交信息后。实时在线验证立即通知有关用户提供的数据的正确性。这种方法允许用户以纠正他们做出更快的错误,无需等待,直到他们按下提交按钮查看错误。




如果在一个特定的格式都需要答案,提前告知用户,而无需额外的例子通信的征收规则(格式规范)。



内嵌的验证也有助于减少硬反弹。在下面的例子中你可以看到在线验证,提供用于固定一个潜在的问题的解决方案的一个很好的例子。



6.提供在上下文中的有用的信息


有时候,你需要有相关的,在上下文信息准备协助用户通过表单很容易移动。但它真正需要的相应的文字只应该用于:


当调度日期,用户也喜欢像月历范围内查明星期几,无需离开应用程序,检查智能手机的日历。它也降低了用户的风险变得另一任务分心。




人可能对他们的数据的安全或隐私的关注,你需要向他们保证数据不会与第三方资源共享。



一个经验法则,不要超过解释100个字符




三、提示反馈


用户犯的错误不仅要有颜色提示,还要有文字提示。比如,用户漏掉了字段AND内容的输入,将AND加红加粗,防止用户再将它忽视。


输错的信息要让用户看到,同时给出错误原因,这样用户会知道自己犯的是什么错、以及怎样改正。


即时的反馈可以帮助用户更好地填写表单而不至于在提交时出错影响体验,同时,反馈作为一种交互方式,可以玩出各种花样,让你的表单更个性化。


将注册按钮、出错提示、完成状态提醒设计合一多态按钮,简洁实用。



按钮、提示、状态合一






尾声

评论
热度(2)
  1. ISnailbamboo-ling 转载了此文字

© ISnail | Powered by LOFTER