网页表单设计：主要行为与次要行为.docx

网页表单设计：主要行为与次要行为网页表单设计：主要行为与次要行为本文介绍了 8 个你从未见过的，基于 HTML5 Canvas 和 JavaScript 的动画，这些令人难以置信的效果将使你对 HTML5 彻底折服须要指出的是，这些都是阅读器的原生动画，无需任何插件最近几个月以来，我始终忙于在我的新书中通过实际测试数据来重写设计建议，这本书名叫《网页表单设计最正确练习》〔Web Form Design Best Practices〕为完成这件事，我很荣幸的和伦敦的可用性专家Etre一起合作，并进展了大量的特地针对网页表单设计的眼动试验和可用性探究其中的一项测试便是探究主要行为与次要行为之间的差异化主要行为与次要行为一个典型网页表单通常包含数个“确定性”行为例如“提交”“保存”或者“接着”等行为，他们都是被用来“完成表单”，而“完成表单”那么是任何用户起先填写表单之后的主要目标因为能够被用来触发表单中最重要的行为〔完成表单〕，所以他们常被归为主要行为网页表单设计：主要行为与次要行为 另一便利，次要行为的运用趋势越来越少，同时大多数通常允许用户撤销已经输入的数据例如“取消”“重置”或“返回”之类的选项，他们代表了与用户填写表单时的首要目标刚好相反的次要行为。

由于次要行为包括否认结果，我过去时时和人们争辩说他们应当不应当出此时此刻表单中，尤其是他们常被用户无意中运用相像一下这样的情景，你在填写一个冗长的表单的时候不当心点了“重置”按钮，于是你输入的全部数据都被抹掉了当然某些状况下次要按钮时也是有意义的，例如“暂存”“导出”等等在这些条件下，我主见最好的方式是通过视觉样式来区分主要和次要行为，这样才能确保用户可以找到一条清楚的路径来完成自己的首要目标：完成表单网页表单设计：主要行为与次要行为 降低次要行为的视觉影响可以最小化出现潜在错误的几率，同时也能指引用户更靠近胜利的结果但是如何才是实现这种目标的最好方法？主要行为与次要行为应当被放置于何处？他们之间究竟须要有多大的差异？为了答复这些问题，Etre和我一起进展了一些测试为了评估主要和次要行为的哪种表现方式的运用效果更好，我们共邀请了23位用户，通过运用眼动仪和可用性标准测试了6种不同的设计我们遵照随机依次给参加者介绍了这6种不同的设计〔随机是为了最小化因相像性而引起的偏差〕，同时告知他们“请精确并完整的完成这个表单”网页表单设计：主要行为与次要行为网页表单设计:主要行为与次要行为更多网站建立 网站制作 网页设计 网站优化 网络营销 网页表单设计：主要行为与次要行为视觉差异用户运用其中五种设计的时候都完备的完成了任务。

表单A,B,C,D和F的胜利率都是101%，他们并未导致用户出现任何错误这五个表达的完成时间相差都不大，同时也都收到了类似的较高满足度评价表单B完成的最好 运用这个表单时用户的视觉焦点移动距离较短并且停留次数较少同时相对于其他表单，用户运用表单B能更快更有效率的完成任务 不过也有意外，一些用户评论表单A时认为将“Cancel”选项设计为链接的样式挺有用其中一位用户提到说，这个隐性的表现形式让这个选项较难发觉，同时网页表单设计：主要行为与次要行为也幸免了意外性〔和灾难性〕取消的发生另外一些用户觉得“Submit”更重要一些，这是因为他们认为在界面表现上“Cancel”没有被赐予同等的地位 针对表单C中的灰色“Cancel”按钮，一些用户表达了踊跃的看法一个测试者说它的颜色让人更简单识别出那些“正确的按钮”〔例如“Submit”〕，然而另一局部用户那么认为不同颜色的按钮“减慢了你的速度〔同时〕让你核对自己是否正在点击正确的按钮”好玩的是相对于完成表单B，同样的用户须要额外大约8次的视觉焦点停留来完成表单C；而表单B中的设计中，两个选项都运用了颜色接近完全一样的绿色并且左对齐的按钮看起来是这样，灰色让表单C中的“Cancel”更简单识别，但却导致用户在运用这种设计的时候完成速度更慢一些。

这说明，运用表单B之时，一些用户表现出他们关怀自己“可能很简单就点到错误的按钮” 网页表单设计：主要行为与次要行为总的来说，看起来用户针对这种将“Cancel”以某种方式突出的设计的反应还不错，即使这些设计在必须程度上减慢了他们的速度这说明相对于提交表单的速度，用户更关注幸免丧失自己输入的数据 摆放位置只有表单E在测试中的表现最差有6位用户在运用这个表单并试图完成任务时错误的按下了“Cancel”按钮，并且有其他更多的用户在这个按钮上徘徊数次，直到他们意识到自己即将犯下一个错误从整体上来看，完成表单E的时候用户会比运用表单B之时慢大约整整6秒钟〔值得考虑的一点是这两个表单之间的差异仅仅是按钮摆放位置的不同而已〕同时，与视觉焦点数据的平均值相比，完成表单E须要的这个数值更高〔以视觉焦点移动距离总和与平均视觉焦点移动距离进展比拟〕网页表单设计：主要行为与次要行为 一举我们收集的数据，表单A，B和C是最有效率的三个设计这些设计原型拥有一个共同特征：全部的“Submit”与“Cancel”选项都是出此时此刻页面的最左侧这说明将这两个选项进展左对齐是最好的设计选择，尤其是当其他表单控件也是左对齐的时候。

将“Submit”与“Cancel”按钮放置于左侧意味着用户的视觉焦点只须要更少的距离就能到达就视觉焦点移动来说，用户运用表单F时的效率是最低的但全部的用户运用这个表单却都胜利的完成了任务，我们的眼动试验视觉说明用户运用其他表单的时候比运用表单F更有效率相比与其他表单，运用表单F时用户的视觉焦点移动距离最长，同时用户视觉焦点停留次数也最多我们坚信这是因为用户期望这两个按钮应当是左对齐的〔例如干脆出此时此刻页面最终一个表单的后边〕但却发觉此时并不是这样，只能在四周来搜寻他们网页表单设计：主要行为与次要行为 这个查找路途图很好的说明白一个存在已久的表达设计原那么：指示一条清楚的完成任务的路径以常见的垂直轴线对齐输入控件和行为控件〔这里指按钮动作等〕可以很清楚的让用户看懂如何才能够完成这个表单这个原那么可以通过下方的视觉热区图中以垂直轴线排列的用户凝视路径发觉网页表单设计：主要行为与次要行为 〔注释：在这里以及其他测试中，有一个重要的方位前提条件就是“Submit”按钮总处于“Cancel”按钮的左侧〕总结尽管大多数网页表单设计的主要目标是保证用户能尽量快速并毫不费劲地完成表单，但在一些状况下减慢用户的速度是明智的。

当用户从主要行为与次要行为之间进展选择时，视觉差异化是个有助于用户做出正确选择的方法网页表单设计：主要行为与次要行为相比与表单C中按钮的不同颜色，表单A中的按钮与链接间的差异是否更明显？就表单A在测试中的表现来说，完成时间与视觉焦点停留数平均值更好一些，但视觉焦点总体移动距离的平均值说明用户完成表单时仅快了一点而已当然，次要行为不存在的时候这些关于差异化的要求就变得毫无意义确保你的表单上真的须要这个次要行为并且不要不加思索地随意添加他们相反地，行为控件与表单输入控件的对齐可以供应一个清楚的路径来协助用户更快的完成表单你必需了解将表单行为作为主要行为，并干脆地与输入控件对齐能够提高表单的完成率同时也能削减用户在你的表单上停留的时间，只有这样用户才会更开心 本文来源：网络收集与整理，如有侵权，请联系作者删除，谢谢！第7页 共7页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页。