如何让用户更高效地完成表单填写.pdfVIP

如何让用户更高效地完成表单填写 填写互联网表单几乎是每个用户每天的经历 ，如用户进行网站 册和登录、购物等 ，都需要填写各 种表单。用户为了获得想要的东西 ，表单成了用户完成需求和网站系统需要数据之间的互动形式。 那么表单设计的首要目标也更清晰 ：让用户迅速高效快捷并且轻松地完成填写。 设计目标已清晰 ，那么如何设计表单呢 ，以下从表单的内容、组织方式、流程、表单元素控件及交 互等方面详细阐述。 表单的元素 研究如何提高表格可用性之前 ，我们先简要了解下一般表单的元素 ，这里我们暂且这么总结 ： 标签 ：告诉用户表单问题是什么 ？ 输入框 ：供给用户填写答案信息 ； 动作 ：用户提交表单 ，即用户点击一个按钮或链接 ，执行一个操作 ； 帮助文字 ：为如何填写表单提供帮助 ； 输入反馈 ：针对用户输入给出反馈 ，输入正确还是错误 ； 提高表单可用性的一些技巧 一 信息内容的合理组织 考虑用户填写表单的目的 ，哪些表单需要填写 ，去掉没必要的表单项 ，确定完表单内容。如何组织 起来呢 ？表单项并不是一个个从上到下无序罗列 ，而是根据表单内容 ，按照一定的逻辑 ，经过组织 ，分成不同的内容组 ，不同的主题。同时各个逻辑组和同一个主题的表单项 ，也是按照逻辑顺序或 者用户熟悉的模式顺序 ，使用户浏览和填写自如。如果表单过长时 ，也可拆解成不同网页 ，类似于 任务拆解 ，让用户一步步填写。 品牌1.0系统 ，新建订单时 ，将表单内容 ，进行逻辑划分为两个内容组 ：基本信息 （重要/必填 ）和附 加信息 （次要/选填 ），通过分割线区分内容组 ，结构清晰 ，易于浏览。考虑区分内容组时 ，应当考 虑采用较少的视觉信息 ，过多的视觉信息可能会导致 意力分散 ，给表单带来大量视觉噪音。 新建百度Unio n账户 ，表单内容较长 ，同时有若干主题 ，一个网页信息量太大 ，所以采用多个网页 来组织表单 ，分步骤给用户 ，提供清晰的路径步骤 ，即清晰又简单。用户在填写时 ，提供进程指示 ，避免紧张和疑惑。 二 简化表单 突出重点 根据用户使用数据 ，适当将使用频次不高、或者提供给专业用户的高级表单项隐藏起来。比如品 牌1.0的新建创意表单 ，90%的人不进行曝光监控链接的填写 ，那么默认收起 ，保持表单的简洁 ，让 绝大多数用户快速完成 ，避免大量的表单给用户的焦虑 ，而又满足了小众用户的需求。 三 清 的浏览线 思考如何设计表单结构和路径时 ，需要有个基本原则 ：由始至终提供清晰的浏览线。采用眼动仪实 验即可检验用户的浏览线。如标签的对齐方式、输入框的布局等都影响着用户的浏览线。当提供了 垂直单一路径 ，使用户减少 意力分散 ，可以迅速对问题作出回答 ，完成任务所花时间最少。 如下面Et re(www.et re.co m)提供的眼动跟踪数据图 ，表单各个元素构成垂直轴 ，提供了单一路径 ， 用户有清晰的浏览线 ，可以迅速对问题做出答复。而另一张图 ，完成过程变成了弯曲的眼球运动 ， 采用单一路径更容易处理表单问题。 四 考虑用户场景 保证主流程顺畅 我们在设计表单时 ，定义了清晰的线性步骤 ，但很少真正实现。考虑用户场景 ，保证主流程不要 中断 ，将导致人们放弃填写的元素解决。例如 ，招商银行卡号密码的付款流程 ，分为三项表单步骤 ：填写银行卡号、填写其他验证信息、支付成功。但在用户填完卡号和其他验证信息后 ，经常会发 现付款额超出每日限额 ，以前的流程是 ，用户中断付款流程 ，不得不新打开一个网页 ，招行主页 → 网上个人银行登录 → 选择一卡通 （输一卡通卡号、查询密码、附加码 ）登录后→ 网上支付 → 网上 支付额度管理调整额度 ，然后再次重新支付 ，使用户在两个操作流程中切换 ，让用户各种折腾。而 改版后的设计 ，可谓十分贴心 ，给予信息提示的同时 ，用户可在当前流程设置限额 ，避免了付款流 程的中断 ，同时大大节省了用户的操作成本。 还有新建广告位时 ，选择所属频道 ，如果没有想要的频道 ，就需要新建频道 ，增加额外的页面来添 加新频道 ，而在设计时 ，考虑到用户的此场景 ，在下拉选择框旁边 ，增加“新建频道”按钮 ，为用户提 供便捷 ，减少了新建广告位流程的打断。 五 选择合适的标签对齐方式 “输入框标签应该是顶对齐、右对齐、左对齐还是输入框内标签 ？”是我们在设计表单时最常见的 问题。其实业界有很多针对此问题的实验和研究 （Mat t eo Penzo 的眼动实验、Luke Wro lewski 的Luke Wro lewski’s f indings、Vit aly Fr