Be For Web - 行为召唤 https://www.beforweb.c7210.info/taxonomy/term/134 en 应用推广站点的最佳设计实践及优秀范例 https://www.beforweb.c7210.info/node/177 <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="https://www.beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-app-store-iphone-ios-application-idea-design-development-marketing-success.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>眼下正用电视放着上周的Slash末日之爱现场。是的,周二,本小博主去现场看了,也在<a href="http://weibo.com/c7210">微博</a>上发了些照片。这是我等了将近20年的Live,真正来到眼前时却有些不大敢相信是真的了,当时唯有靠不停的摇着喊着跳着跟周围的人挤着才能提醒自己真的是身临其境了。不过后果就是接下来的几天脖子都直不起来,多多少少有些没精神。对我来说这辈子必看的现场还真不是很多,活到30岁算是实现了第一个也是最重要的一个。好吧,说正事儿喽,今次是关于App推广站点的话题。</p> <p>这里进入译文。人们对于应用产品的需求总是没够的,毕竟,这些小东西可以让我们的生活变的更加简单快捷,它们帮助我们记住事情,寻找信息,发现身边的事物,结交各种有意思的人。</p> <p>应用类产品迅猛而持续的发展趋势无需多言,当人们需要一款软件时,无论是用在iPhone、安卓,还是在MacBook上,他们通常都会面对非常多的选择。应用在让人们的生活变的更轻松的同时,也越来越容易被创建。</p> <p>要打造一款成功的应用,你需要做的再也不只限于产品自身的设计与开发,营销推广方面的工作同样是非常重要的,其中最典型的做法就是创建产品推广页面或minisite,向人们介绍你的产品。曾几何时,所谓的&ldquo;介绍&rdquo;就是告诉人们这个产品是个什么东西,你为什么需要它,等等等等,和其他传统行业的产品介绍网站没有多大区别。不过在我(英文原文作者)看来,这里还是有些很关键的区别和技巧的。本文中,我将和大家分享五点应用推广页的最佳设计实践,以及若干非常不错的设计范例。</p> <!--break--><h3> 1.别只依赖截屏,要展示人们怎样使用产品</h3> <p>确实,在应用推广页面中使用实际界面截图是很流行的做法,毕竟人们在下载之前希望看到它的具体情况,包括长的什么样子,以及在实际当中是怎样工作的。</p> <p>问题在于,这些图片即使再漂亮,也只能展示界面的面貌,有时它们容易给人们留下太多的想象空间。如果条件允许,不要只依赖这些截屏,试着搭配一些真实的人使用该产品时的图片。</p> <p>举个栗子,除了游戏之外,应用产品通常都是用来解决实际生活中的各种问题的。所以,与其单纯的展示界面,不如尝试展示用户在典型情境中使用应用的样子,让访问着了解你的产品是在怎样的环境中如何帮人们更加轻松的解决问题的。如果你宣称自己的产品可以帮助人们找到附近最棒的餐馆,不妨通过一系列图片展示一个典型而完整的用例,让人们一下子就能了解你的产品能够切实帮他们解决怎样的实际问题。</p> <h3> 2.像产品着陆页那样,在折线以上明示&ldquo;行为召唤&rdquo;</h3> <p>设计良好的着陆页(landing page)在传达信息和提升转化率方面是很有效的。着陆页一方面会向目标用户传达产品的关键信息,一方面还要促使他们产生转化行为。</p> <p>对于应用推广页面来说也是同样的道理,我们的目的就是让人们知情并且成为用户。你要确保在首屏,即折线以上,简短明确的向访问者呈现最关键的信息,同时提供&ldquo;行为召唤&rdquo;或相关入口。</p> <p>另外,信息内容和行为召唤当中的内容风格会对转化效果产生重要的影响&mdash;&mdash;要时刻记得产品的目标用户是怎样的群体,要说他们的语言。如果你的产品是面向职业医师的,那么在内容风格上就不要表现出像是在客厅中和好朋友聊天那样。</p> <p>相关阅读:<a href="http://beforweb.com/node/171">行为召唤之后是什么?</a></p> <h3> 3.讲故事,而不只是功能描述</h3> <p>在介绍内容方面,仅仅呈现功能列表或规格参数的效果是很有限的,其实我们还有很多其他的方式可以选择。不要让情况变成大家都在功能特色列表上拼命的你争我夺,而忽略了通过最符合用户目标的方式来展示产品。</p> <p>试着通过讲故事的方式呈现产品的价值。所谓&ldquo;讲故事&rdquo;,就是要与目标用户及市场建立情感层面的关联。如果产品的目标用户是那些自由设计师,那么与其翻来覆去的干巴巴的强调你的产品可以帮助他们找到多少客户,不如从他们的角度出发,表达出你对他们在寻找客户时所承受的压力的理解,而你的产品又能带来怎样的关怀。</p> <p>这种方式可以有效的抓住目标用户的痛点,唤起他们情感上的共鸣,促使他们更加自主的去了解你的产品。而且这样的情感关联一旦建立,便很难被打破,除非你自己搞砸了。</p> <p>相关阅读:</p> <ul> <li> <a href="http://beforweb.com/node/181">八个小方法,帮你成为更具同理心的设计师</a></li> <li> <a href="http://beforweb.com/node/103">为产品赋予人格 - 情感化设计的组成要素及实践案例</a></li> </ul> <h3> 4.保持简短,条理清晰</h3> <p>我们说的是互联网,是移动应用;在这里,你没有足够的时间和空间去絮絮叨叨的陈述和表达,用户也没有足够的时间和耐心去阅读冗长的信息。很多统计都会提到,你通常只有5秒甚至更少的时间来通过文字信息抓住用户的注意力。</p> <p>对于文字内容,要精炼,再精炼,并以项目列表(bullet list)的方式条理清晰的呈现出来,迅速解释产品的价值。没人喜欢在网上阅读(那我的博客怎办呢?译者C7210注),如果他们想一大段一大段的读文字,他们会看书;如果他们想要得到某个应用,他们只想尽快了解并得到它。另外,列表形式的内容更利于人们快速扫描并获取信息。</p> <h3> 5.视觉风格与应用本身保持一致</h3> <p>要确保推广站点与应用产品在设计语言与美学风格上保持统一。一方面是由于品牌识别方面的原因,另一方面也可以帮助目标用户在实际使用之前对应用产品的定位与风格产生预先认知。如果你的推广网站在视觉风格上非常简约和干练,那么目标用户就会对应用产品本身产生同样的期许。</p> <p>对于游戏类应用,人们自然期望得到轻松、快乐、有趣的体验。作为产品整体体验的一个环节,推广站点自身的风格也要向这个方向靠拢;对于其他类型的应用产品来说也是同理。</p> <p>相关阅读:<a href="http://beforweb.com/node/127">移动应用的视觉美学 - 谈三款拥有高收入的应用产品</a></p> <h3> 一些优秀的设计范例</h3> <h4> Drip</h4> <p>Drip是一款Mac上的桌面端应用,帮助人们更方便快捷的上传文件。他们的推广页面非常简洁,一句话概括了产品的用途,然后一步步的逐渐引导你了解其特性,并完成下载。</p> <p><img alt="01-drop-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/01-drop-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Duet</h4> <p>用户可以通过Duet发起事件并邀请他人参与,当对方接受邀请后,大家可以通过Duet保存与事件相关的照片、视频等作为共同的回忆。在Duet的页面上有一个很棒的视频,不仅对应用进行了介绍,而且通过讲故事的方式让人们更直观的了解了Duet的价值,为有需求的潜在用户建立了有效的需求关联。</p> <p><img alt="02-duet-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/02-duet-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Flow</h4> <p>大字标题,只包含三条关键信息的特色功能介绍,iPhone、iPad、MacBook整合使用的图片,这些元素让你进入Flow的推广站点之后,可以在非常短的时间内了解到这款多平台产品的用途。</p> <p><img alt="03-flow-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/03-flow-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h3> Infomatic</h3> <p>如果你没有太多时间甚至是内容来组织创建App的推广站点,那么Infomatic的设计方案也许可以为你提供一些参考。页面风格简洁而现代,产品介绍仅由两个单词及两屏的截图组成,你还可以在非常显著的位置了解到应用的价格并点击获取。值得一提的是,从视觉表达方式的角度来看,用于社会化推广的元素在整个页面中是为数不多的抢眼元素之一。</p> <p><img alt="04-Infomatic-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/04-Infomatic-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Jobs</h4> <p>这款应用可以帮助求职者基于地理位置等维度,更方便的从<a href="http://www.authenticjobs.com/">Authentic Jobs</a>的数据源中获取职位信息。他们的网站在视觉风格上与应用本身很好的保持了一致性,内容的层次和布局很合理,不过我个人感觉再有个&ldquo;故事&rdquo;就更棒了,毕竟他们的产品确实很适合通过这种形式展示功能特色。</p> <p><img alt="05-jobs-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/05-jobs-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Mosaic</h4> <p>摄影爱好者们可以通过这款应用(及其提供的服务)将iPhone中的照片印刷为精美的实体剪贴簿。他们的推广站点中,产品简介、实物图片、行为召唤等都集中在折线之上,你也可以滚动页面,查看更详细的产品特性介绍。</p> <p><img alt="06-Mosaic-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/06-Mosaic-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Nizo</h4> <p>Nizo提供的产品用来帮人们研究他们关注的目标市场。必须承认,当你打开他们的页面后,很难了解他们要表达什么东西,不过这不是问题:他们展示的文案是一系列技术与功能术语,并且只是面向于他们的目标用户的。在这种情况下,没有相关的&ldquo;故事&rdquo;是可行的,因为他们很清楚自己的用户,清楚自己的产品就是为这部分特定的人群打造的。</p> <p><img alt="07-nizo-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/07-nizo-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Ballpark</h4> <p>Ballpark的站点与前面介绍过的Flow很类似,无论是设计风格还是信息布局:清晰直白的标题,多平台展示等等,不过最大的区别在于Ballpark将行为召唤放置在了更加明显的区域。</p> <p><img alt="08-Ballpark-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/08-Ballpark-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Hipvite for TechCrunch</h4> <p>Hipvite的做法与多数竞争对手有所区别:当其他产品都在拼命向TechCrunch发邮件希望得到介绍机会的时候,Hipvite为自己制作了一个独特的推广站,在内容头部直接求关注,希望可以通过这种方式吸引到TC的注意力。</p> <p><img alt="09-Hipvite-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/09-Hipvite-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Plover</h4> <p>又一个简洁干净的页面,你需要知道的重要信息都在折线以上,包括应用的用途、如何得到它,就这么简单。之后才是实际截屏和更多的特色介绍,你可以根据自己的需要继续浏览。</p> <p><img alt="10-Plover-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/10-Plover-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Listing Scout</h4> <p>这也是一款多平台应用,用来帮助房产商更好的进行销售工作。我个人很喜欢这个站点的原因之一就是他们把行为召唤放在了非常显著的位置,而且下面的详细介绍也不是简单的通过功能列表的形式平铺直述的,而是以更加贴近房产销售人员实际工作方式的形式呈现的。</p> <p><img alt="11-Listing-Scout-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/11-Listing-Scout-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Strava</h4> <p>Strava面向的是那些具有或向往健康生活风格的群体,准确的说它的产品形态是社区网站外加一个能够跟踪生活健康状态的移动应用。在其网站头部的轮播当中,每一个图片位都提供了免费注册的入口,而图片当中的内容则是对他们产品的介绍。这种形式在空间利用率方面的表现不错,即在显著的位置提供了产品简介和行为召唤,同时又在折线以上通过图片轮播来展示了产品特色,包括他们希望带给用户的健康气质。</p> <p><img alt="12-Strava-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/12-Strava-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h3> 更多范例</h3> <ul> <li> <a href="http://webdesignledger.com/inspiration/21-beautiful-iphone-app-websites">21个漂亮的iPhone App网站</a></li> <li> <a href="http://mobileorchard.com/30-amazing-and-inspirational-app-landing-pages/">30个App着陆页创意</a></li> </ul> <h3> 总结</h3> <p>应用推广站点的设计思路还是很直白的,你要达到宣传产品、树立品牌形象的目的,同时必须确保这些对于目标用户群来说是具有明确意义的。需要不断提醒自己的是,这不是为了设计网站而设计网站,我们需要通过它来达到吸引目光、促进转化、推广产品的最终目标。</p> </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/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/134" typeof="skos:Concept" property="rdfs:label skos:prefLabel">行为召唤</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/116" typeof="skos:Concept" property="rdfs:label skos:prefLabel">情感化设计</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/109" 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> Sat, 11 May 2013 10:30:04 +0000 C7210 177 at https://www.beforweb.c7210.info https://www.beforweb.c7210.info/node/177#comments 行为召唤(call to action)之后是什么? https://www.beforweb.c7210.info/node/171 <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="https://www.beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-call-to-action-ux-user-experience-interaction-ui-design.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>起床之前半梦半醒的几乎完全区分不清真实与梦境了。在那里听着nothing else matters,于是我现在也打开在听;梦到回公司和林教授抽雪茄,梦到South Park里的人大摇大摆的走在街上,梦到以前的同事问我数学题,而且在几个间断的梦里都在追问,以至于我真的在努力回忆这事是不是真的发生过,但想来也不会有人来问我数学题这样的东西吧。</p> <p>一篇关于call to action的文章,我想会有一些同学和我一样能够从中收益的。感觉上和之前一篇关于<a href="http://beforweb.com/node/170">用户行为及反馈效应</a>的文章有些相似的性质,都是将产品中一些对整体体验有着影响作用的环节或流程抽象出来,结合实际案例进行分析,提出一些实践模式供参考,这样。我们来看看吧。</p> <p>这里进入译文。包括电商在内的很多类型的网站,其主要目标就是促进用户响应&ldquo;行为召唤(call to action)&rdquo;,完成转化。无论是对于下单购物、提交个人信息还是订阅内容,作为设计师,我们不仅要想方设法鼓励用户执行目标操作,同时也要关注行为完成之后的相关环节。</p> <!--break--><h3> 帮用户消除疑虑</h3> <p>回想一下,你是否曾经在完成线上支付或提交表单之后怀疑过自己之前的操作是否成功?有太多网站在这方面做的并不到位,它们无法有效的让用户在完成操作之后明确的感受到流程已经成功的完成,留给用户的只有疑虑。</p> <p>要确保在用户响应了&ldquo;行为召唤&rdquo;之后,通过明确的反馈信息告诉他们刚刚执行的操作已经成功启动或完成。也许你会觉得自己的产品在这方面做的还算到位,不过我(英文原文作者)仍然强烈建议你在可用性测试中对这个环节进行检验。</p> <p><img alt="01-s-download-transmit-design-call-to-action-user-experience-interaction-ui.jpg" src="/sites/default/files/images/201303-1/01-s-download-transmit-design-call-to-action-user-experience-interaction-ui.jpg" /></p> <p>在信息的反馈形式方面,不要只简单的发送一封确认邮件。毕竟,用户在完成操作之后的一段时间内仍然身处你的网站,而不是立刻切换到自己的邮箱界面,所以邮件并不能在最短的时间内为用户提供确认,而且也很有可能被误判为垃圾邮件。</p> <p>即便是展示在站内的确认信息,在设计上也需要多多留意,特别是在目标行为不会触发页面刷新的情况下,用户执行操作后的注意力仍然会暂时集中在交互对象本身上,从而留意不到确认信息的存在。在这种情况下,要尽量将反馈信息输出在用于触发&ldquo;行为召唤&rdquo;的交互元素附近,使用户在操作之后可以立刻注意到。</p> <p>推荐阅读:<a href="http://beforweb.com/node/98">为用户的成功操作提供正面反馈</a></p> <h3> 处理错误</h3> <p>行为召唤的失败在很多时候是由于出错导致的,这里说的&ldquo;出错&rdquo;既包括用户自身的操作失误,也包括可能发生的系统错误。</p> <p>处理错误,包括&ldquo;防错&rdquo;和&ldquo;出错后恢复&rdquo;这两方面。当然,严格的说,&ldquo;防错&rdquo;并不属于&ldquo;行为召唤之后&rdquo;这个话题范畴,不过它与行为后错误的处理也是具有关联性的。良好的防错机制可以有效的减少人为错误发生的几率,举个例子,如果你的行为召唤当中需要用户填写信用卡号、日期或邮编一类具有严格格式的信息,那么一定要提供格式辅助,不要让用户在填写的过程中必须自己进行组织和把控。(相关阅读:<a href="http://beforweb.com/node/134">一个文本框搞定信用卡相关信息的输入</a>)</p> <p>如果确实发生了错误,也要有简单易行的机制可以帮助用户最快的回到正轨。例如,用户在表单中输入的信息通过了前端校验,但在提交之后被后端判定为有误,那么在向用户反馈出错情况的时候,仍然要保留其之前填写的内容,不要让用户全部重新来过。与前面提到的类似,要尽量将错误信息输出在交互对象或出错字段附近,使用户不需要转移注意力焦点便可以看到。</p> <p>另外,也要考虑在出错后向用户提供备用方式来确保目标任务的完成,例如提供客服电话或邮件地址等。无论如何,在负面状况下也要想尽办法促进用户继续前行。</p> <h3> 提供协助</h3> <p>无论用户在完成行为召唤之后是否成功的达成了目标,为他们提供必要的后续协助都是很重要的。很多网站可以意识到这一点,不过最多也就是提供了一些FAQ或是邮件一类的联系方式。不幸的是,用户在这种情境中通常没有耐心去阅读一大堆文字内容或是发送邮件并等待回复。更有效的方式是提供客服电话或即时通讯系统,让用户在需要后续协助的时候能够在最短的时间内联络到网站方。用户等待的时间越长,产生疑虑的可能性就越大。</p> <p><img alt="02-help-customer-service-telephone-im-design-call-to-action-user-experience-interaction-ui.jpg" src="/sites/default/files/images/201303-1/02-help-customer-service-telephone-im-design-call-to-action-user-experience-interaction-ui.jpg" /></p> <h3> 避免&ldquo;买家懊悔(buyer&#39;s remorse)&rdquo;</h3> <p>你有没有过在网购过什么东西之后,因为觉得自己做错了决定而感到后悔?</p> <p>这就是我们所说的&ldquo;买家懊悔&rdquo;。尤其在用户做出难以撤销的决策之后,这种情况很容易发生,他们会感到焦虑,怀疑自己的决定是否正确。</p> <p>下单购物、付费订阅、提交个人敏感信息,这类行为当中都会涉及到&ldquo;买家懊悔&rdquo;。即使用户响应了行为召唤,完成转化,也很有可能因为细节中一些信息的不到位而产生懊悔,甚至导致取消订单,撤销操作。</p> <p>要在行为召唤之后进一步向用户展示他刚刚进行的操作所达成的目标,强化他们对自己得到的好处的印象,或是提供一些小礼物、虚拟点数一类,让用户觉得自己的预期得到了很好满足&mdash;&mdash;所有这些的目的就是避免用户在这个敏感环节中产生&ldquo;买家懊悔&rdquo;。</p> <h3> 超越预期</h3> <p>如果能够让用户在响应了行为召唤之后,不仅感到需求被满足,而且还得到了额外的、超出预期的服务,那便再好不过了。</p> <p>Zappos一类的公司在这方面做的比较有典范性。包括购买之后一年内免费退货等政策都超越了行业标准及用户预期。</p> <p><img alt="03-zappos-design-call-to-action-user-experience-interaction-ui.jpg" src="/sites/default/files/images/201303-1/03-zappos-design-call-to-action-user-experience-interaction-ui.jpg" /></p> <p>在有条件的情况下,你可以试着从以下这些方面入手,为用户提供超出预期的后续服务:</p> <ul> <li> 提供敏捷有效的售后服务</li> <li> 提供7天24小时的即时在线支持</li> <li> 提供免运费的退货服务</li> <li> 为订阅用户提供额外的内容或实体礼物</li> <li> 当用户在社交类网站中推荐了你的产品、帮你传播了正面口碑后,个人化的向其表示感谢。</li> </ul> <p>即使在网站或产品出了问题的情况下,你也仍然有机会做些超出用户预期、抵消负面效应的事情。以Jawbone为例,他们推出的第一批<a href="https://jawbone.com/up">Jawbone Up</a>当中出了一系列的问题,给很多买家带来了麻烦。这种情况下,Jawbone不仅为买家们提供了全额退款,而且还承诺提供无限量的替换服务,甚至不需要买家退货或是证明自己手中的产品确实破损了。</p> <p><img alt="04-jawbone-design-call-to-action-user-experience-interaction-ui.jpg" src="/sites/default/files/images/201303-1/04-jawbone-design-call-to-action-user-experience-interaction-ui.jpg" /></p> <div class="embed"><article id="node-278" class="node node-related-books" about="/node/278" 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/B00DSQZBP2/?_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/22.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/众妙之门-电子商务网站设计指南-德-Smashing-Magazine/dp/B00DSQZBP2/?_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/B00DSQZBP2/?_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>不要让行为召唤给用户带来意外的结果。&ldquo;意外的结果&rdquo;是指,用户进行订阅后认为他们会每周收到一次邮件,结果发现每天都会收到;或是人们下单后才发现需要支付额外的运费,这样的一类状况。</p> <p>要避免&ldquo;意外的结果&rdquo;,你需要在行为召唤之前的环节里下功夫。在醒目的地方明确、完整的让用户了解到相关信息,保持透明,这样才能获取用户长久的信任。</p> <p><img alt="05-asos-information-design-call-to-action-user-experience-interaction-ui.jpg" src="/sites/default/files/images/201303-1/05-asos-information-design-call-to-action-user-experience-interaction-ui.jpg" /></p> <h3> 交付</h3> <p>如果你的服务涉及到产品(实体或数字产品)的交付,那么这里也有几个要点需要特别注意。</p> <p>首先,像之前一条所讲到的,如果交付实体产品需要运费,那就要确保让用户事先了解到这点,而不要等到他们填写好所有的信息之后再告诉他们。诚然,他们在填写好信息后会更不容易选择退出,因为自己已经付出了辛苦,即使这时才看到运费条款也有可能选择接受;但想要靠这种方式换取转化率,你最终得到的将是用户的愤怒。</p> <p>第二,给用户一个时间表。人们在完成操作之后,不仅想要知道接下来会发生什么,同时也希望了解什么时候会发生。例如,一个用户填写并提交了联络表单之后,会想知道过多久可以有工作人员与他取得联系;人们购买商品之后,同样希望了解什么时候可以进入递送状态。</p> <p><img alt="06-s-basecamp-design-call-to-action-user-experience-interaction-ui.jpg" src="/sites/default/files/images/201303-1/06-s-basecamp-design-call-to-action-user-experience-interaction-ui.jpg" /></p> <p>对于数字产品来说,你同样需要让用户了解到他们是否可以立刻获取,还是需要等待人工验证一类的环节。</p> <h3> 次级行为召唤</h3> <p>试着思考一下用户在完成主要&ldquo;行为召唤&rdquo;之后还可以做些什么。</p> <p>举个例子,很多电商网站的订单确认页面中除了&ldquo;继续购物&rdquo;之外就没什么可以让用户去做的了。&ldquo;继续购物&rdquo;并不能算是真正的&ldquo;行为召唤&rdquo;功能,它只是将用户引领到首页或其他相关页面,开始新一轮的浏览与购物,而且对于很多用户来说意义不大,&ldquo;我刚刚买好我需要的东西,为什么还要继续购物?&rdquo;</p> <p>可以尝试在这样的环节里为用户提供一个新的行为召唤,例如当用户申请订阅之后,不妨建议他们关注你的微博,以获取更多相关资讯;如果他们刚刚购买了某个商品,那么也可以建议他们订阅邮件或是关注微博,等等。</p> <p>几乎可以肯定的说,一旦用户响应了行为召唤,这就代表他们对你的产品或服务是有兴趣的。这种情况下,你总是可以围绕着产品本身找到些额外的事情推荐给用户去做,而做与不做都由他们自己。</p> <h3> 避免半途而废</h3> <p>最近,我(英文原文作者...)的儿子想要把他的一些生日礼金捐献给慈善机构。我和他一起用iPad试着在一个网站上做这件事,不过很遗憾,我们发现无法通过iOS设备在该网站当中完成捐助,所以决定另找时间换台设备再搞。</p> <p>第二天,我收到一封邮件,内容大致是感谢我尝试进行捐助,并鼓励我完成之前中断的流程。虽然之前的流程没有走完,但他们还是通过我留下的邮箱联络到了我。</p> <p><img alt="07-s-charitywater-design-call-to-action-user-experience-interaction-ui.jpg" src="/sites/default/files/images/201303-1/07-s-charitywater-design-call-to-action-user-experience-interaction-ui.jpg" /></p> <p>这是个不错的例子,它展示了如何帮助用户完成他们决定进行但最终没有走完的流程。在这个例子中,我们能学到的是通过收集用户的联络方式来促进行为的继续,譬如电商网站可以试着采用这种方式来鼓励用户为他们闲置在购物车里的商品进行支付<a class="eLink" href="http://beforweb.com">。</a></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> <h3> 结论</h3> <p>行为召唤并不是终点,试着把它看作你与用户产生并维系关系的开始。一旦用户响应了行为召唤,执行了相关操作,这就意味着他们是信任你的,他们认为你的产品或服务值得他们付出时间、金钱以及个人敏感信息。不要让他们失望,在每一个环节当中都尽力提供你所能为他们带来的最好的用户体验吧!</p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><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/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/134" 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/114" typeof="skos:Concept" property="rdfs:label skos:prefLabel">反馈</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/57" 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> Sun, 03 Mar 2013 03:02:30 +0000 C7210 171 at https://www.beforweb.c7210.info https://www.beforweb.c7210.info/node/171#comments