Be For Web - 用户输入 http://www.beforweb.com/taxonomy/term/128 en 表单设计与转化率的提升 http://www.beforweb.com/node/143 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-s-form-web-design-interactin-user-experience-interface-convert.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>话说这一周好像就没几天的好天气,目前正在下雨,大冬天也没个暖气什么的...16号了诶,还有一周,希望下周这个时候我们依然可以在博客当中见面。快要到总结过去展望未来的时候了,最近在工作中频繁而剧烈的刷三观,整个人一坐那儿就感觉懵懵懂懂的,一会笑一会愁;我赶脚这日子是到了不变不行的地步了。</p> <p>说到这到突然想起来,之前在微博上也有求助过,今天再来一发叭:我和一名优秀的UI设计同学做了个小App,东西不大,有点儿意思...卡在开发阶段,希望寻找一名上海本地的iOS开发者共同推进项目;东西不复杂,有项目经验的开发者应该可以搞定;目前确实难以提供实质性的回报,只求彼此有缘对路,一步一个坑的迈向未来。有兴趣的同学可以到<a href="http://weibo.com/c7210">我的微博</a>私信一下,或是通过coda7210这个gmail邮箱联系;成不成的大家聊聊交个朋友也好=) &nbsp;那么开始今天的译文叭,关于表单设计与转化率的提升。</p> <p>无论是用于注册、支付还是联络,我们总是需要通过表单来获取用户的信息。不幸的是,在现实当中,总会有很多访问者一见到表单就会立刻点击浏览器上的后退按钮。这里面原因有很多,例如表单篇幅太长、不大友好、不那么值得信任,或是用户还没真正准备好进行交易等等。</p> <p>这种情况每发生一次,我们就失掉了一个潜在用户。怎样将表单设计的让尽量多的访问者更愿意完成填写,这是设计师们必须面对的挑战。站在用户的角度,我们可以将问题分为四个方面。</p> <!--break--><h3> 我能得到什么?</h3> <p>一提到&ldquo;转化&rdquo;,设计师们首先想到的往往是一些相关操作的细节问题,包括按钮的颜色、标题的字号、对比度、对其方式等等。当然,这些是必须考虑的,但最最首要的问题是:作为网站的访问者,我为什么要填写表单?我能得到什么?</p> <p>访问者不会简单的因为你提出了相关要求而把自己的个人信息透露给你;你要让他们看到这样做的好处在哪里。不妨把这件事看作一种交易,你的访问者提供他们的名字与邮箱地址,从而换取到一些他们需要的东西,例如享受服务、免费试用软件、下载PDF文档等等。</p> <p><img alt="01-value-form-design-user-convert-experience.jpg" src="/sites/default/files/images/201212-2/01-value-form-design-user-convert-experience.jpg" /></p> <p>除了让浏览者知道他们能得到什么东西以外,你最好还能告诉他们这东西为什么是他们所需要的。要聚焦在产品的价值上,如果你能用最简单的介绍文字描述出你的产品能帮用户解决怎样的问题,唤起他们的共鸣,那么即使表单本身稍微复杂些,他们也会愿意完成填写;否则,字段最少的表单也不会引起他们的兴趣。</p> <div class="embed"><article id="node-302" class="node node-related-books" about="/node/302" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/众妙之门-抓住访客心理的网页设计-德-Smashing-Magazine/dp/B00CD6TTKG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="众妙之门:抓住访客心理的网页设计" src="http://beforweb.com/sites/default/files/images/products/48.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/众妙之门-抓住访客心理的网页设计-德-Smashing-Magazine/dp/B00CD6TTKG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">众妙之门:抓住访客心理的网页设计</a></h4> <p><a href="http://www.amazon.cn/众妙之门-抓住访客心理的网页设计-德-Smashing-Magazine/dp/B00CD6TTKG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书介绍了主要的Web设计心理学知识和理论成果,结合实例介绍了目前主要的可用性指导原则,分享了设计师如何在初创型企业更好地体现自身价值,介绍了色彩理论,并结合实例介绍了具体的配色方案...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 我凭什么相信你?</h3> <p>当人们第一次访问你的网站或接触到你的产品时,他们确实没什么理由一下子产生信任。不妨试着展示一些具有公共效应的&ldquo;证据&rdquo;,例如相关媒体报道、来自现有用户的赞许,以及任何可以鼓舞访问者对产品产生积极态度的元素。</p> <p><img alt="02-w-pocket-changed-value-form-design-user-convert-experience.jpg" src="/sites/default/files/images/201212-2/02-w-pocket-changed-value-form-design-user-convert-experience.jpg" style="width: 600px; height: 232px;" /></p> <p>Pocket Changed的订阅表单是个不错的例子,他们向访问者展示了当前已有多少人进行了订阅下载;此外,他们也非常简单直接的让访问者了解到在填写邮箱后可以得到什么。如果可以再加入一些来自真实订阅用户的赞许反馈,这个表单的转化效果会更好。</p> <p>另外一种很有效的&ldquo;证据&rdquo;就是将所有报道过你家产品的知名媒体的logo陈列在页面中,当然前提是必须有相关的报道真实存在。这些具有很高识别效应的元素可以有效增强用户的信赖感。</p> <p><img alt="03-media-logo-form-design-user-convert-experience.jpg" src="/sites/default/files/images/201212-2/03-media-logo-form-design-user-convert-experience.jpg" style="width: 600px; height: 216px;" /></p> <p>推荐阅读:</p> <ul> <li> <a href="http://beforweb.com/node/103">为产品赋予人格 - 情感化设计的组成要素及实践案例</a></li> <li> <a href="http://beforweb.com/node/133">真人之间的交流 - 通过手绘元素提升产品的个性与亲和力</a></li> </ul> <div class="embed"><article id="node-303" class="node node-related-books" about="/node/303" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/怦然心动-情感化交互设计指南-安德森/dp/B007HWLYSQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="怦然心动:情感化交互设计指南" src="http://beforweb.com/sites/default/files/images/products/49.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/怦然心动-情感化交互设计指南-安德森/dp/B007HWLYSQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">怦然心动:情感化交互设计指南</a></h4> <p><a href="http://www.amazon.cn/怦然心动-情感化交互设计指南-安德森/dp/B007HWLYSQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书精彩地阐述出了当人们访问网站,打开软件,购买实体产品和被某人吸引时的心理状态,并且非常深入地用心理学的方法解释了刺激和触发人类行为的因素。书中提供的众多方法,让我们可以创造出更加持久和深刻的用户体验...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 你会用我的信息做些什么?</h3> <p>在为访问者提供积极引导的同时,我们还要想办法避免掉那些负面因素。人们在填写表单时的最大顾虑就是信息被网站方收集之后的用途。用户不会希望收到垃圾邮件,更不愿意自己的个人信息被传播出去。如果你确实运营着一个值得信赖的产品,那么不妨直接让用户知道你不会把他们的信息贩卖出去或是向他们发送垃圾邮件,就像FogBugz做的那样,在注册表单旁边以非常直白的口语化的方式告诉用户&ldquo;我们不会出售或分享你的邮箱地址,就是这样。&rdquo;</p> <p><img alt="04-s-information-secure-form-design-user-convert-experience.jpg" src="/sites/default/files/images/201212-2/04-s-information-secure-form-design-user-convert-experience.jpg" style="width: 600px; height: 216px;" /></p> <p>相关阅读:<a href="http://beforweb.com/node/18">怎样通过更好的用户体验促进网站转化率的提升</a></p> <h3> 这会占用我多少时间?</h3> <p>正像我们在前文中说到的,如果可以让访问者明确的了解到产品价值,唤起他们的需求共鸣,得到他们的信任,那么表单的长度将不会成为影响转化率的最主要因素,但这并不意味着我们不需要对表单进行简化。即使访问者决定执行转化行为,他们的时间和耐心也都是非常有限的。</p> <p>我敢打赌,在很多时候,那些标注着&ldquo;必填&rdquo;的表单字段其实并非是真正需要的。</p> <p>Gumroad在未登录状态的支付表单中剔除了很多常见的&ldquo;必填&rdquo;字段,最终只保留了用于输入邮箱地址、信用卡号、有效期和CV码的文本框。如果连未登录时的支付环节都可以被如此简化,我相信对于其他方面业务的那些复杂表单来说,不会没有优化空间的。</p> <p><img alt="05-gumroad-signup-payment-information-secure-form-design-user-convert-experience.jpg" src="/sites/default/files/images/201212-2/05-gumroad-signup-payment-information-secure-form-design-user-convert-experience.jpg" style="width: 600px; height: 414px;" /></p> <p>在对表单进行了充分的简化之后,我们还可以试着通过一些设计技巧让填写表单的环节看上去更轻量。在这方面,我个人最喜欢的一个案例来自原型制作工具InVision的注册表单。他们使用浮层的形式呈现表单,作为访问者,我可以感知到,当我填写完成之后就可以立刻回到之前的界面继续应用流程。</p> <p><img alt="06-invision-signup-overlay-form-design-user-convert-experience.jpg" src="/sites/default/files/images/201212-2/06-invision-signup-overlay-form-design-user-convert-experience.jpg" style="width: 600px; height: 293px;" /></p> <p>相关阅读:<a href="http://beforweb.com/node/134">一个文本框搞定信用卡相关信息的输入</a></p> <h3> 总结</h3> <p>现在就打开你的网站,看看哪些表单可以在以上四个方面有所改进。当然,你不必将目光局限在我们之前讨论的这些要点上;最重要的是在思考和设计的过程中时刻记得站在访问者的角度进行观察和体验,去发现那些对转化率的提升具有正面或负面影响作用的要素。</p> <div class="embed"><article id="node-279" class="node node-related-books" about="/node/279" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/深入理解网站优化-提升网站转化率的艺术与科学-培基/dp/B00E11HG2O/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="深入理解网站优化:提升网站转化率的艺术与科学" src="http://beforweb.com/sites/default/files/images/products/23.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/深入理解网站优化-提升网站转化率的艺术与科学-培基/dp/B00E11HG2O/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">深入理解网站优化:提升网站转化率的艺术与科学</a></h4> <p><a href="http://www.amazon.cn/深入理解网站优化-提升网站转化率的艺术与科学-培基/dp/B00E11HG2O/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书揭示了改进任何类型网站所需的工具、测试思路、优化策略及其实现方法,以及最佳实践,使你的网站更有吸引力,能大大提升它的转化率。它结合网站分析、网站测试、网站易用性、在线营销4大方面的最佳实践,帮助你最大限度地从优化工作中获益...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/127" typeof="skos:Concept" property="rdfs:label skos:prefLabel">表单</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/128" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户输入</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/56" typeof="skos:Concept" property="rdfs:label skos:prefLabel">转化率</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 16 Dec 2012 14:47:12 +0000 C7210 143 at http://www.beforweb.com http://www.beforweb.com/node/143#comments 一个文本框搞定信用卡相关信息的输入 http://www.beforweb.com/node/134 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-s-ios-iphone-mobile-app-web-form-credit-card-information-user.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>大家周四下午好。打破每周日上一篇译文的规矩,临时来一发。今天刚刚看到的东西,很简短的图文,介绍了一个蛮赞的交互模式,于是把拿来把译文做掉,特别推荐给交互设计师们。走你!</p> <p>移动应用的设计师们一直在努力降低用户的输入量。屏幕太小了,手指无法精准触摸,输入过程中产生错误简直是家常便饭。输入量是无法被无限制的降低的,很多时候我们更需要考虑的是怎样使输入变得更加容易。</p> <p>输入蒙板是一种限制内容格式、避免输入错误的方式。举个例子,我们可以使电话号码输入框只接受数字内容,而不对其它任何类型的字符做出响应。所接纳的数字也可以被限定在某个范围或模式当中。不过,输入蒙板的功能不仅限于防错,它同样可以被用在更加&ldquo;积极&rdquo;的地方,例如将多项输入内容合并为一个逻辑序列,使用户不必在多个输入框中来回切换。</p> <p>最近我(英文原文作者)在Square的iPhone应用(<a href="https://itunes.apple.com/us/app/square-wallet/id455018546?mt=8">Square Wallet</a>)当中见到的输入方式就蛮有意思的,用户在一个输入框当中就可以完成信用卡类型、卡号、有效期、CVV号(卡片背后的3位数字)和邮政编码的填写。</p> <!--break--><p><img alt="01-credit-card-screen-payment-information-input-single-input.jpg" src="/sites/default/files/images/01-credit-card-screen-payment-information-input-single-input.jpg" style="width: 400px; height: 600px;" /></p> <p>输入框当中的最左端是一个代表信用卡的图标,主要内容部分用于输入卡号,蒙板规则是典型的4位分隔。随着用户的输入,系统会根据卡号判断卡片的类别,例如VISA或MasterCard,并相应的改变左侧的信用卡图标。这种方式帮用户省掉了一个选择卡片类型的步骤,而且是一种很积极的信息回馈方式,让用户能够感受到系统对他们的操作产生了响应(相关阅读:<a href="http://beforweb.com/node/98">为用户的成功操作提供正面反馈</a>)。</p> <p><img alt="02-card-number-date-cvv-screen-payment-information-input-single-input.png" src="/sites/default/files/images/02-card-number-date-cvv-screen-payment-information-input-single-input.png" style="width: 620px; height: 143px;" /></p> <p>当用户正确的完成了16位卡号的填写,文本框会自动改变显示模式,之前输入的卡号只会显示出最后的4位,节省出的3个字段就分配给了有效期、CVV码和邮编。用户在键入这些内容的时候同样会得到输入蒙板的辅助,例如格式限定、日期有效性的判定、自动添加斜杠、自动聚焦到下一个字段等。</p> <p><img alt="03-input-mask-card-number-date-cvv-screen-payment-information-input-single-input.png" src="/sites/default/files/images/03-input-mask-card-number-date-cvv-screen-payment-information-input-single-input.png" style="width: 620px; height: 143px;" /></p> <p>这里有一个很棒的细节,当用户在输入CVV码时,左侧的图标会发生变化(如上图所示),提示用户所谓的CVV码就是卡片背后的3位数字;非常贴心<a class="eLink" href="http://beforweb.com">。</a></p> <p>目前看来人们对这套交互模式的反响很好;这简直是一定的。只用到一个文本框,即有效的利用了输入蒙板的防错与辅助功能,又极大减少了传统模式当中文本框的使用量&mdash;&mdash;Squre给力!</p> <p>另外值得一提的是,Zachary Forrest通过前端技术将这套交互模式&ldquo;移植&rdquo;到了Web端,有兴趣的朋友们也不妨去<a href="http://zdfs.github.com/toscani/paymentInfo/index.html">围观</a>。</p> <p>本文整合编译自两篇相关文章:<a href="http://www.lukew.com/ff/entry.asp?1667">Collecting Payment Information Within a Single Input</a>和<a href="http://functionsource.com/post/beautiful-forms">Making beautiful forms; Square and Recurly</a></p> <div class="embed"><article id="node-339" class="node node-related-books" about="/node/339" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/Web表单设计-点石成金的艺术-罗博乌斯基/dp/B003XT6NS8/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="Web表单设计:点石成金的艺术" src="http://beforweb.com/sites/default/files/images/products/66.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/Web表单设计-点石成金的艺术-罗博乌斯基/dp/B003XT6NS8/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">Web表单设计:点石成金的艺术</a></h4> <p><a href="http://www.amazon.cn/Web表单设计-点石成金的艺术-罗博乌斯基/dp/B003XT6NS8/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">精心设计的表单,能让用户感到心情舒畅,愉快地注册、付款和进行内容创建和管理,这是促成网上商业成功的秘密武器。本书通过独到、深邃的见解,丰富、真实的实例,道出了表单设计的真谛...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/127" typeof="skos:Concept" property="rdfs:label skos:prefLabel">表单</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/128" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户输入</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/114" typeof="skos:Concept" property="rdfs:label skos:prefLabel">反馈</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Thu, 29 Nov 2012 08:09:52 +0000 C7210 134 at http://www.beforweb.com http://www.beforweb.com/node/134#comments