蒙在股里 发表于 2015-1-15 23:17:05

带来一篇网页表单计划:次要举动与主要举动

但他也直言说,这就像写软件时,在添加改善的新功能时,难免遭遇稳定性的问题,必须先把问题清除干净,才能推出新产品。网页制造poluoluo文章简介:一个典范网页表单一般包括数个“决意性”举动。比方“提交”“保留”大概“持续”等举动,他们都是被用来“完成表单”,而“完成表单”则是任何用户入手下手填写表单以后的次要方针。由于可以被用来触宣布单中最主要的举动(完成表单),以是他们常被回为次要举动。
作者先容:LukeWroblewski,今朝在Yahoo!担当首席计划师(ChiefDesignArchitect),次要举行互联网、挪动设备、电视等等产物线及前瞻性的客户体验整合。在这之前他曾是eBay公司平台组的用户界面计划向导者。他同时也是两本出名网页计划书本的作者(WebFormDesign和Site-Seeing:AVisualApproachtoWebUsability)。
译文:
比来几个月以来,我一向忙于在我的旧书中经由过程实践测试数据来重写计划倡议,这本书名叫《网页表单计划最好实习》(WebFormDesignBestPractices)。为完成这件事,我很侥幸的和伦敦的可用性专家Etre一同互助,并举行了大批的专门针对网页表单计划的眼动实行和可用性研讨。个中的一项测试即是研讨次要举动与主要举动之间的差别化。
次要举动与主要举动

一个典范网页表单一般包括数个“决意性”举动。比方“提交”“保留”大概“持续”等举动,他们都是被用来“完成表单”,而“完成表单”则是任何用户入手下手填写表单以后的次要方针。由于可以被用来触宣布单中最主要的举动(完成表单),以是他们常被回为次要举动。

另外一便利,主要举动的利用趋向愈来愈少,同时年夜多半一般同意用户打消已输出的数据。比方“作废”“重置”或“前往”之类的选项,他们代表了与用户填写表单时的主要方针恰好相反的主要举动。

因为主要举动包含否认了局,我已往经常和人们争辩说他们应当不该该呈现在表单中,特别是他们常被用户偶然中利用。相像一下如许的情形,你在填写一个冗杂的在线表单的时分不当心点了“重置”按钮,因而你输出的一切数据都被抹失落了。
固然某些情形下主要按钮时也是成心义的,比方“暂存”“导出”等等。在这些前提下,我主意最好的体例是经由过程视觉款式来区分次要和主要举动,如许才干确保用户能够找到一条明晰的路径来完成本人的主要方针:完成表单。

下降主要举动的视觉影响能够最小化呈现潜伏毛病的概率,同时也能指援用户更接近乐成的了局。可是怎样才是完成这类方针的最好办法?次要举动与主要举动应当被安排于那边?他们之间究竟必要有多年夜的不同?为了回覆这些成绩,Etre和我一同举行了一些测试。
为了评价次要和主要举动的哪一种体现体例的利用效果更好,我们共约请了23位用户,经由过程利用眼动仪和可用性尺度测试了6种分歧的计划。我们依照随机按次给介入者先容了这6种分歧的计划(随机是为了最小化因类似性而引发的偏向),同时告知他们“请正确并完全的完成这个表单”。

视觉差别

用户利用个中五种计划的时分都完善的完成了义务。表单A,B,C,D和F的乐成率都是100%,他们并未招致用户呈现任何毛病。这五个表达的完成工夫相差都不年夜,同时也都收到了相似的较高中意度评价。
表单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在测试中的体现来讲,完成工夫与视觉核心停止数均匀值更好一些,但视觉核心整体挪动间隔的均匀值标明用户完成表单时仅快了一点罢了。
固然,主要举动不存在的时分这些关于差别化的请求就变得毫偶然义。确保你的表单上真的必要这个主要举动而且不要不加思索地随便增加他们。
相反地,举动控件与表单输出控件的对齐能够供应一个明晰的路径来匡助用户更快的完成表单。你必需懂得将表单举动作为次要举动,并间接地与输出控件对齐可以进步表单的完成率同时也能削减用户在你的表单上停止的工夫,只要如许用户才会更乐意。
</p>
就在新标准备受瞩目之际,两大网络监督机构却起冲突。

乐观 发表于 2015-1-17 21:25:11

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。

冷月葬花魂 发表于 2015-1-25 18:10:29

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。

老尸 发表于 2015-2-3 13:34:14

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

不帅 发表于 2015-2-9 03:58:30

所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.

再见西城 发表于 2015-2-26 21:44:30

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.

小女巫 发表于 2015-3-8 18:23:55

还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。

分手快乐 发表于 2015-3-16 12:30:12

在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。

海妖 发表于 2015-3-22 23:15:29

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
页: [1]
查看完整版本: 带来一篇网页表单计划:次要举动与主要举动