Web表单设计创建高可用性的网页表单PDF带目录书签

内容简介 · · · · · ·网页表单无处不在——从注册表单到联系信息表，从商业领域到政府部门。成功的表单设计不仅能提高用户满意度，还能收集更加精确的数据并降低维护费用；而失败的表单设计不仅会收集到与需求相悖的冗余信息，还极有可能导致潜在消费者的流失。设计具有高可用性的表单绝非易事。两位作者通过丰富的实例，明确阐述了如何从表单的关系、对话和外观三层模型出发，设计出具有高可用性的优质网页表单，并通过可用性测试及早发现表单的潜在问题。通过阅读本书，读者能够了解到如何定义需求，如何提出与用户期望相符且容易理解的问题，以及如何撰写说明文字、设置进度指示器和处理出错信息。经实践检验的实用建议将部爱多盛Caroline Jarrett经营着一家可用性咨询公司 Effortmark Ltd。自1992年开始开发税务表单,从此迷恋上了易用表单设计。她每月在www.usabilitynews.com撰写专栏“ Carolines Corner”,阐述关于可用性的理念。Gerry Gaffney经营着一家可用性咨询公司 Information& DesignProprietary Ltd。主编过几期《用户体验》杂志,还创建了广受欢迎的“用户体验播客”uxpod. com)。他认为表单设计是个难题,但还是试图从客观的角度来分析表单。5L.色点代表用户视线所及的位置绿包代表用户瞟了一眼:多系黄色代表用户注视的时间稍长红色代表用户注视的时间最长灰色表示用户一眼都没有看过。X代表用户点击过的地方图1用户连一眼都没有看过logo一些人简单浏览了说be fedja明和帮助地址在前一页中填过了,用户瞟了一眼用户没有理会预填充字段的标签。当填到这些插入式问题时,用户开始仔细阅读表单询问了生日。在当前的关系下这个问题提得不合时宜。用户停在这里稍作思考决定是否填写。这些创造性答案的问didnd题过于复杂,用户读得更加仔细,而且点击下拉箭头查看了下拉列表中的选项。表单热图(预定开放大学的招生简章)图25TitleClose)Other titleirst name6sast name热图的细节摘录。用户的视线密切关注字段左侧当用户初次看到表单时,地址已经预先填入(我图3们抹掉了他的个人资料)他瞟了一哏这个字段。他跳过了“称谓”的下拉列表,稍后这一行为将导致错误。这个字段ctus Request中的文字看上去就像预Order for myself先填人了一样。wie have filed in your address (amend where necessar). pleas complete the datast ru nestlEMelds marked"must be fled in他的视线向下跳到第一中een个开放的输入字段。44《)4:2559他的视线扫视过了“其他头衔”的标签,但是Town/CityIOCOT跳过了这个字段。untyokonpostcode他继续向下搜寻,下Titlechioose个标有星号的标签是名字”、于是他把视线oUvertFrst nX移动到对应的空白输入框并点击输入。该图用浅灰色线(代表扫视)、大圆点(代表视线固着)和点击(“×”标志)表示用户自上而下填写表单的眼动跟踪图4白底黑字形成了一个极佳的对比度CONTRAST但是蓝底黑字的对比度却很差白底黄字的对比度很差THAS但蓝底黄字的对比度稍好一些CONTRAST图5部吾爱念(R)Oxfamlsearcht小m③很好心网站上给非了大量该机构的相ome about us what we do what you can doshop图cm[nm对mm关信息。about uslAboutuscontronarms5 History of OxfamOxfam GB i a development tellef, andb This is oxfamcampaigning organ Daton that worke withothers to find lasting solutions to poverty and>Oxfam news bysunenng around he wordemail> Frequently asked Who we areWhat we doquestlons2 ASK OxNamQurnurmoseOMam works with others to overcome povertymergenceOxfam scotland and suNderingOdam is currently responding toemergencies in over 30Oxfam CymrucountriesOxfam videoRecent asked questions售Find the informaton you need as quickly andeasly as possibleDevelormentn3m is warking wi to: olAshort historyin 1042 Tho oxford committee for Faminepeople wordwide. helping themRelief was set up F nd out how Oxfam grew1 mprove neir Mes for°。dover the years图6TestTestestTestTestTestTestTestTestTestTestTestTestTestTestTesteTestTestTeTestTestTestTestTest下面仔细研究JuTestTestStudio的色彩对比度分Test析器( juicystudio. com/seTestTestTestTestrvices/colourcontrast php见左图。TestTestTestTestTestTestTestTestTestest创建一个测试模型可以告诉你哪个配色方案更加有效。这个测试模型是用于了解在使用亮红色、蓝色和黄色配色方案时的易读性图75L.FANSCAPE)TA LOOKING FOR FANSCAPE'S BUSINESS SITE?命COM VISIT FANSCAPE. BIZ TODAY!BROWSEHOME COMMURITY: CONTESTS i BLOG: SHOPREGISTER TODAYIMEMBER LOGINREGISTER TODAY and get access to online teams, discussion Not a membe? click hete to register nowareas, special content, and much moreEmat AddressPlus, you'l also receive email updates on our featured artistsLOGINPasswordWe promise werg not going lo spam you or send you weird samt mg smrz ck et t osL.阅读在蓝色背景emails from long lost relatives in contricou ye neverheard of. Unless you want us to.been Musle Tickets上的橙色文字确ntree Browse 100s ef Ads实很困难。Reguired felds go markedParreN tonem over 35000 downed Easy and fast Hottestwp to get excuse content, we nfo and competion,当 nsonAoL!ck out PAlaC A Tme Dsco on AOL Exease LNe UsicLATEST DISCUSSIONGENERAL厘gmn1 takegyet-mme f1 postUSAaHtantsy 1. Die b [4 posts这个网站的品牌风格使用了亮蓝色和橙色——这种配色可读性差图8FANSCAPEBPz LOOKING FOR FANSCAPE,S BUSINESS SITE?VISIT FANSCAPE. BIZ TODAY!BR。wSEHOME: COMMUNITY COHTESTS BLOG: SHoP)REGISTER TODAYIMEMBER LOGINREGISTER TODAY and get access to online teams, discussion Not a member cick hote to register nowareas,special content, and much moreEmat AddressPlus,you/ll so receive email updates on our featured artists,LOGINts, and other preomolon we hyou' ll be intoPasswordWe promise we re not going lo spam you or send you weird eorodtyuraasswnre2ckkheretegetL使用了更大的粗emails from long- lost relatives in countries you' ve never体字,现在更容heard of. (Unless you want us tohean Musis TicketsFnd Cheap Music Ticke suan Gunter Browse 1CO's of Ads易阅读了。Required fields are marked in ORANGEFirst Name:Mps trippin tonehoose from over 35000 downloads Easy and fast HottesLast Name:erpo-Mew ARumup to et excusive content, le ntoE-Mail:nDnA0LM线es- PAJC AI The Deseo on AOL Exesle Live Wusi但它仍旧不是我Confirm E-mail:们见过的最漂亮的表单—可能对比Address Line 1LATEST DISCUSSION度还不够强烈。GENERALCountryEmo's arm going to take gyer[1 posnHEO GALESUSAEinaLFpnfasy 12 sould hwe been be f posts我们的改进版本使用更大的粗体字来提升它的易读性图95部吾t1d5 JIFfYnpart N Srv In the News这段位于正中的文字Please fill out the form below to receive our FREE Updated Recipe没有与任何网格线对Book. It now includes nutritional facts and camping recipes齐—很明显不够整洁Continental US d标签左对齐,画一条粗线。字段左对齐,再画一条粗线。.me edgesaad omrlzanfrfaeh但是字段的右端没有For ues a recipe bock. press ts buma对齐,这样不够整(°°5m耐u洁在我们改进的设计图中画出几条垂直的网格线,结果表明还可以做得更好图10Your name这些标釜落到了邻近our g. ma I address却没有精确对齐同条粗网格线的垂直线Subject of your message上ru wcud you categanze your messag这条租网格线表明短gGeneral quest cn or comment字段与文本框排列整Technical question about AOl Canada齐。Technical question about the Interne: the Webcomment about an AOL members us of the internetBiling questiRequest tor billing credrt而这些单选按钮没有Question or comment about thig Web ie与任何网格线对齐。Question abou AOL MobileEnter your message below, then click Su mit.利用几条红色的网格线,可以看出标签与单选按钮并未完全对齐图115.Your nameYour e-mail addressSubject ofow would you categorize your messag通过把标签和单选按钮移动对齐到这条网o General question or cor mentOTechnical question abod: AoL Canada格线,界面上的所有③Technical question about the Intemet or the Web元素都被排列得井井O comment about an Aol members use of the Intemet有条O Billing questionO Request for billing crediO Question or comment a lout this Web siteo Question about AoL Mdpilenter your message below, then click Su miL.画一条全新的网格线来解决这些问题,现在所有元素都精确对齐了图12Submit a StoryHave you been helped byor its partner agencies? We'd like to hear yourtory. Please fill out the foilowing form. Arepresentative may call for afollow-up interview. Thanks.denotes reguired information.Featured Person. First Name:.Last Name:这些大块的红底白字Organization清楚地把这个表单分成两个组块。AgencyStonContact Person但是许多用户会疑e First Name:. Last Name感:它为什么要两次.Email:. phone:询问名字呢?submitreset这个表单在视觉上分为两组,但是许多用户填写时只会仔细阅读字段和标签所以他们会认为该表单询问了两次“名字”和“姓”图13部拼爱Biocomplexity Data SearchKNB Home菜确一看米Use this page to submit a new data set descnption for inc'usicn in the registry.Please have a look at the Guide on How to Complete Data Registry Entries before you start filling in this catalogform. Also, use your browser s Reload/ Refresh function to make sure you see the latest version of this page.必填字段仅通过颜色标识。说明文字混杂在前Fields in red are required.言中。If you have any questions, comments or problems regarding this form please contact the repository administra or athe/panceas, ucs. eduBASIC INFORMATION (what's thia)③a在视觉上标题与前言混杂在一起。Name of Person completing this form-First Name标题看起来好像隶属于Last name这个段落中的全部4个Data Set Title字段,但事实上它仅与organization Name前两个字段相关联。PRINCIPAL DATA SET OWNER (What'a this?)IFirst Name错误地把标签放在字段末尾Last NameOrganization NameE-Mail字段偏移,没有对齐网FAX格线。图14