第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

表单设计总结:构建有趣的界面“对话”(2)

时间:2017-09-08 11:06来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
主动作表示用户填写表单的主要操作方式。比如保存、提交。主动作也可以包含两个意思,比如同意并提交。次动作表示用户填写表单的次要操作方式,大

  主动作表示用户填写表单的主要操作方式。比如保存、提交。主动作也可以包含两个意思,比如同意并提交。次动作表示用户填写表单的次要操作方式,大多数是用来撤销内容。比如取消、重置。

  (2)按钮反馈

  用户提交数据到服务器进行交互需要一定的时间。为了避免重复提交,可以将按钮置灰让用户无法点击,并且加入进度条或加载样式表示提交正在进行中。

  6. 步骤条

  步骤条可以让流程的所有步骤清晰可见。这里有四个原因可以解释多步形式的有效性:

  (1)表单各模块性质不同,比如注册微店设置账号信息和设置店铺信息是明显不同的模块。

  (2)表单是基于不同时间点。比如淘宝买家退款的流程进度条,分为退款申请,退款处理和退货给卖家,十分清晰地告知用户退款的每个进程变化,给予用户安全感。

  (3)通过在一个多步骤表单的最后一步请求敏感信息(电子邮件、电话),用户更有可能填写这些字段——否则它们会丢失填写前一步所取得的进展(这是一种被证实的认知偏差,被称为“沉没成本谬论”)。

  (4)通过查看进度条,用户更有动力完成表单。这又是基于许多被证明的认知偏差,如被赋予的进步效应。

  交互

  1. 逻辑排序

  有逻辑性地组织标签,使表单像对话一般自然流畅。比如通常情况下会要求提供用户名才设置密码,先设置密码再要求填写用户名真的不要太奇怪!还要考虑使用频率,按使用频率由高到低排列。

  2. 清晰的浏览线

  合理地组织标签、操作按钮和提示文字的排版,引导用户的视线在同一方向流动,降低用户的视觉负担。

  

表单设计总结:构建有趣的界面“对话”

  3. 即时校验

  (1)确认

  适用于错误率高、或者有特定格式要求的问题。比如确认用户名是否被占用。

  (2)建议

  适用于有大量可选择有效答案的情况。比如建议密码的格式,从而保证账号安全性。

  (3)限制

  适用于有填写限制的情况。比如输入框有字数限制时,显示限制上限和当前的输入字数,让用户把握输入字数。

  4. 提供帮助

  在标签和输入框旁边增加帮助文字,告诉用户应该如何回答问题。

  (1)自动即时帮助

  显示在对应输入框附近,表示对应输入框的提示。适用于帮助文字较少的局部说明。

  (2)用户激活的即时帮助

  通常采用图标、按钮、图片、文本链接提示人们有帮助可提供,例如问号图标。适用于帮助文字较少的全局说明。

  (3)用户激活的区域帮助

  始终显示在某个特定区域而不是输入框附近。适用于帮助文字非常多的全局说明。

  

表单设计总结:构建有趣的界面“对话”

  5. 对齐方式

  (1)标签

  根据马泰奥·彭佐的2006年的标签对齐眼动实验结果表明。标签的对齐方式在理论效率上比较:顶对齐>右对齐>左对齐。

  

表单设计总结:构建有趣的界面“对话”

  ① 顶部对齐。适用于水平空间有限的情况。

  优点:和输入框联系非常紧密,从上至下的视觉路径清晰流畅,填写效率很高。

  缺点:大量占用垂直空间,不适用于输入框较多的表单。

  ② 右对齐。适用于垂直空间有限的情况并且需要用户快速填写的情况。

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

  缺点:标签可读性不强,降低快速浏览完表单的效率。

  ③ 左对齐。适用于垂直空间有限并且需要用户谨慎填写的情况。

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

  缺点:和输入框联系不紧密,增加用户填写表单的时间。

  ④ 输入框内对齐。适用于水平和垂直空间有限的情况。

  优点:与输入框联系紧密,并且减少占用水平和垂直空间。

  缺点:标签随输入内容而消失,复核表单信息较困难。

  ⑤ 悬浮标签。结合了顶部对齐和输入框内对齐的情况。

  优点:和输入框联系最紧密,填写效率最高,并且减少占用水平和垂直空间。

  缺点:稍微占用了垂直空间,标签字号太小容易造成可读性问题,不过缺点不是很明显。

  

表单设计总结:构建有趣的界面“对话”

  (2)操作按钮

  为了评估哪一种主动作和次动作的效果最好,Luck(Web表单设计作者)和伦敦的可用性测试公司Etre使用眼动跟踪和可用性指标对此进行了测试。

  

表单设计总结:构建有趣的界面“对话”

  方案A、B和C完成任务更快、更有效。只有E方案表现很差,错误点击了取消按钮。使用F方案时,人们的眼球定位时间最长。

  根据收集的数据,所有方案中最有效的设计都有共同特征:提交和关闭按钮左对齐排列,与上方输入框和标签对齐。

  UI

  1. 营造氛围

  (1)品牌基因

  在表单也植入品牌的元素,比如颜色,会使整体界面设计风格协调,使得品牌基因深入人心。

  (2)场景氛围

  将线下的表单搬到线上,可以结合线下场景让用户身临其境,比如预定民宿。

  

表单设计总结:构建有趣的界面“对话”

  2. 缓解页面压力

  (1)静态:利用线条、空间间隔、颜色。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕