Be For Web - 电子商务 http://www.beforweb.com/taxonomy/term/57 en 行为召唤(call to action)之后是什么? http://www.beforweb.com/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="http://www.beforweb.com/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 http://www.beforweb.com http://www.beforweb.com/node/171#comments 为用户的成功操作提供正面反馈 http://www.beforweb.com/node/98 <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-positive-feedback-user-experience-tick-right-s.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>炎热的天气,宅在家中拉上窗帘一边看着喵们耍宝一边做博客,这情景让我想起阿拉蕾一家。Take me down to the paradise city where the grass is green and girls are pretty.</p> <p>下午茶一般的小文一篇,关于操作响应、正面反馈、用户满意、皆大欢喜一类。进入正文吧,毫无压力。</p> <p>我们喜欢告诉用户他们做错了什么,我们准备了各种出错提示,从电话号码输入格式有误,到登录失败。但是对于用户的那些成功操作,我们又做了什么呢?有没帮助他们庆祝,告诉他们&ldquo;嘿你做的非常正确&rdquo;?</p> <p>正面反馈是提升用户体验愉悦度的关键因素,我们要让用户了解到他们正在执行的操作是正确的,这一点非常重要。在本文中,我们将一同了解一下为什么正面反馈绝非可有可无,作为设计师,我们应该在什么时候、以怎样的方式将其运用在网站当中<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3> 为什么正面反馈如此重要</h3> <p>有没想过为什么多数人不喜欢触屏设备上的虚拟键盘?最主要的原因恐怕就是它所提供的反馈感受很难与实体键盘相媲美。不能否认,触屏操作平台的设计师们确实尽力了,例如实体质感的视觉效果、触摸按键时的敲击音效以及放大的弹出提示,这些解决方案都给用户的操作行为带来了一定的正面强化作用,但它们确实无法达到实体按键所能带来的正面反馈效果,因为无论怎样,虚拟键盘都无法模拟实体键盘的触摸感。</p> <p>这是一个让人即烦恼又无奈的现实,它也从一个侧面说明了正面反馈对于产品的重要性。对于虚拟键盘来说,缺乏足够真实和强力正面反馈,结果就是用户难以在这方面产生足够的体验满意度。</p> <p>其实多数用户总是难以产生真正的满足感,无论出于他们自身技能所限,还是你的产品本身确实有问题。他们会担心自己是否做错了什么,他们想知道网站是否真正了解他们的操作目标。很多时候这是由于他们并不能真正的理解网站的运作机制所造成的,结果就是一旦出现问题,他们会首先埋怨自己 。</p> <p>通过正面反馈机制,我们可以逐渐帮助用户打消这些顾虑,帮助他们建立信心,让他们感到一切都在顺利的进行着。这一点,对于那些对自己在计算设备操作能力方面缺乏信心的用户来说尤为重要。这类用户,其实未必真正缺乏操作技能,只是在很多时候,由于系统没有作出足够的正面反馈,致使他们对自己的判断产生了疑虑。</p> <p>正面反馈机制不仅可以提升用户在作出正确的操作行为之后的体验满意度,它还可以打消掉那些没有必要的顾虑,防止用户在做了正确的事情之后由于担心自己操作有误而撤消之前的行为。以网购当中的交易流程为例,在用户提交了订单之后,如果系统的处理时间较长,导致后续页面加载迟缓,而这当中没有任何反馈提示,那么用户很有可能会认为自己的订单并没有提交成功。这种情况下,可以在页面加载的过程中向用户提供一些正面反馈信息,例如告诉他们&ldquo;系统正在处理订单,请稍候&rdquo;一类,这样可以防止用户由于不明真相而点击后退按钮。</p> <p><a href="/sites/default/files/images/201207/positive-feedback-ecommerce-transition-delay-message.jpg" rel="lightbox"><img alt="positive-feedback-ecommerce-transition-delay-message" src="/sites/default/files/images/201207/positive-feedback-ecommerce-transition-delay-message.jpg" style="width: 500px; height: 202px;" /></a></p> <p>想想看,如果用户因为&ldquo;迷惑&rdquo;和&ldquo;疑虑&rdquo;而重新执行一遍购物流程,包括选择商品、填写各种表单...有够蛋痛。无论之前步骤当中的设计方案有多出色,单凭这一点,整个购物流程的体验满意度就会极度下降,而且用户很有可能自此离开。转化率呢亲?</p> <h3> 何时需要正面反馈</h3> <p>用户输入内容的地方是一个关键点,包括注册、登录、购买、发表评论、更新状态等等与数据内容产生互动的交互环节都是需要重点关注的。特别是对于用户名、邮箱、密码、邮编这类字段,来自系统的正面反馈可以帮助用户打消数据操作技能方面的疑虑。</p> <p><a href="/sites/default/files/images/201207/positive-feedback-form-data-positive-feedback.jpg" rel="lightbox"><img alt="positive-feedback-form-data-positive-feedback" src="/sites/default/files/images/201207/positive-feedback-form-data-positive-feedback.jpg" style="width: 500px; height: 264px;" /></a></p> <p>除了输入数据内容,点击链接也是一个重要的交互点。如果留意的话,你会发现如今的多数网站并没有对用户成功点击链接的行为作出正面反馈。用户点击链接后,浏览器自身确实会带来一定的反馈提示,包括地址栏及标签栏当中的相关变化,但用户执行点击操作的时候,注意力在短时间内依然是集中在链接位置上的,因此为链接本身设置一定的响应规则是更加有效的做法。在这方面,<a href="http://www.smashingmagazine.com">Smashing Magazine</a>是一个不错的范例,当用户点击了某个文字链接之后,CSS当中的a:active规则会为链接文本设置红色的背景色,用户可以很直观的感受到自己成功的点击了链接。</p> <p><a href="/sites/default/files/images/201207/positive-feedback-link-click-active-feedback-background.jpg" rel="lightbox"><img alt="positive-feedback-link-click-active-feedback-background" src="/sites/default/files/images/201207/positive-feedback-link-click-active-feedback-background.jpg" style="width: 500px; height: 274px;" /></a></p> <p>反馈与注意力焦点位置不一致的问题不仅存在于链接方面,很多时候,用户的操作会导致另外一个地方的内容或交互元素发生变化,这很容易使操作结果被用户忽略掉。一个常见的例子就是将商品添加到购物车的过程,用户在这里的注意力会主要集中在&ldquo;添加到购物车&rdquo;按钮以及附近的商品信息上,所以对于添加成功的最直接有效的反馈也应该出现在这个位置,例如在按钮附近,或是直接呈现在商品图片上。</p> <p><a href="/sites/default/files/images/201207/positive-feedback-add-to-cart-success-feedback-update.jpg" rel="lightbox"><img alt="positive-feedback-add-to-cart-success-feedback-update" src="/sites/default/files/images/201207/positive-feedback-add-to-cart-success-feedback-update.jpg" style="width: 500px; height: 276px;" /></a></p> <p>距离只是问题的一个方面;如果用户的交互行为会触发界面当中很小的细节之处发生变化,那么即使反馈的距离很近,也仍不能说是保险的。对于这种情况,最好可以提供在视觉效果上更加清晰醒目的反馈,以确保用户可以在第一时间注意到。</p> <div class="embed"><article id="node-298" class="node node-related-books" about="/node/298" 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/B007IQN00G/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="一目了然:Web和移动应用设计通识方法(第2版)" src="http://beforweb.com/sites/default/files/images/products/44.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/一目了然-Web和移动应用设计通识方法-赫克曼/dp/B007IQN00G/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">一目了然:Web和移动应用设计通识方法(第2版)</a></h4> <p><a href="http://www.amazon.cn/一目了然-Web和移动应用设计通识方法-赫克曼/dp/B007IQN00G/?_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>当用户犯错的时候,我们通常会扔一段错误信息上去作为提示。类似的,对于正面反馈,这也是一种可行的方法。不过我觉得使用文字信息提供正面反馈的时候还是需要小心些,因为文字会迫使用户将注意力转移过来,阅读并思考,这个过程会在很大程度上降低任务流程的流畅度。正面反馈的作用是应该鼓励用户大胆前进,而不是造成羁绊。</p> <p>在某些情况下,使用文字信息提供正面反馈也确实是非常有效的。例如,在用户点击了&ldquo;添加到购物车&rdquo;按钮之后,我们可以将按钮的标题变为&ldquo;继续添加&rdquo;。这个改变一方面可以让用户不用转移视线焦点就可以立刻知道他之前的添加动作确实成功了,另外也可以鼓励用户继续进行相关操作。</p> <p><img alt="positive-feedback-add-to-cart-button" src="/sites/default/files/images/201207/positive-feedback-add-to-cart-button.jpg" style="width: 368px; height: 75px;" /></p> <h4> 视觉反馈</h4> <p>我们可以在更多的时候使用视觉元素的属性变化来代替文本作为正面反馈的表现形式,包括图形图片、风格样式、配色、大小等方面。譬如前面提到的链接被点击之后呈现高对比度的背景色,或是表单字段被正确填写之后在旁边输出对勾图标,再比如当页面当中某个位置的内容被更新后,使用背景色等方式对这部分进行高亮显示等。</p> <p>另外一个很典型的例子就是鼠标指针的状态变化。当用户将鼠标指向一个可交互的界面元素(例如链接或按钮),他们会期望指针变为手形。如果系统在这里没有作出符合用户预期的反馈,那么用户很有可能产生迷惑。很多时候,界面当中可点击的元素并非链接或按钮,它们是通过JS的配合来实现交互性的,这种情况下要记得在样式表中将cursior属性手动设置为pointer,使它们能够模拟链接或按钮元素在鼠标悬停时所产生的指针状态。</p> <p><a href="/sites/default/files/images/201207/positive-feedback-cursior-pointer.jpg" rel="lightbox"><img alt="positive-feedback-cursior-pointer" src="/sites/default/files/images/201207/positive-feedback-cursior-pointer.jpg" style="width: 500px; height: 297px; " /></a></p> <h4> 通过动画效果提供反馈</h4> <p>当然,动画本身也是一种视觉表现形式。如今,很多网站都会使用一些精巧的动画效果将用户的注意力吸引到出错的地方,例如登录WordPress管理后台时,如果用户名或密码输入有误,整个表单会表现出&ldquo;抖动&rdquo;的效果,提示用户输入错误。同样的道理,我们也可以将动画效果运用在正面反馈上。</p> <p>一个比较常见的例子就是页面内的锚点链接跳转,包括向下滚屏浏览内容或是返回页面顶部。默认情况下,锚点跳转没有任何动画过渡效果,页面只是很突兀的移动到指定的位置。而现如今,我们可以在越来越多的网站中看到具有平滑滚动效果的跳转,有些还会在页面到达目标位置后将特定的内容进行高亮显示。这种改变使得整个交互方式更加符合用户直觉,并且可以很清晰的将交互结果呈现给用户。</p> <p>我们也可以在购物网站中将动画过渡效果运用在添加商品到购物车的交互环节中,例如在用户点击了&ldquo;添加到购物车&rdquo;按钮之后,将代表购物车的界面元素展开,以展示刚刚添加进去的新商品,或是让商品以动画的方式&ldquo;飞入&rdquo;购物车。这些方式都可以抓住用户的目光,将操作成功的信息准确稳妥的传达给用户。</p> <p>我相信动画过渡效果仍是一种没有被充分利用的信息反馈形式,这还有待我们在更多产品中继续挖掘和实践。</p> <h4> 通过音效提供反馈</h4> <p>使用iPhone或iPad的同学们,你们在发送短消息或是邮件之后,是否特别期待&ldquo;嗖&rdquo;的那一声?这就是通过音效提供正面反馈的好例子。无论是使用桌面设备还是移动设备,其实我们都非常依赖于音效反馈,例如点击按钮或是敲击虚拟键盘时,系统发出的拟真音效可以让我们很放心的持续进行输入操作。</p> <p><a href="/sites/default/files/images/201207/positive-feedback-audio-sound-email-confirm.jpg" rel="lightbox"><img alt="positive-feedback-audio-sound-email-confirm" src="/sites/default/files/images/201207/positive-feedback-audio-sound-email-confirm.jpg" style="width: 500px; height: 371px; " /></a></p> <p>那么为什么音效反馈在网站中的使用率非常低呢?除了文件尺寸方面的因素,是否还有其他方面的原因?</p> <p>也许是因为在网站中使用音效过于烦人?曾几何时,大大小小的网站当中都会使用无聊的音频循环或背景音乐,有些甚至无法取消播放;我们是否因此而有所顾及?话说回来,从前的网站到处都是糟糕的视觉设计与动画效果,但这并没有妨碍我们逐渐对这些方式进行改良并将它们运用到正确的地方。</p> <p>也许有些人会觉得浏览网站的行为通常会发生在桌面设备上,这也是我们通常在工作中所使用的平台,所以使用音效反馈会造成一定程度的干扰。但我们所说的音效实际上与操作系统本身那些细小的提示音无异,它们都是为了在交互过程中向用户反馈信息。</p> <p>一个可以触发音效反馈的点击操作可以非常有效的让用户知道他们正确有效的完成了行为;在购物网站中,打开收银机的音效完全可以运用在用户添加商品到购物车的操作当中。音效反馈是一种强大的沟通工具,只是我们还没有在合适的地方对其进行充分的运用<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-290" class="node node-related-books" about="/node/290" 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/B00EV562SY/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="界面设计模式(第2版)" src="http://beforweb.com/sites/default/files/images/products/35.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/界面设计模式-泰德维尔/dp/B00EV562SY/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">界面设计模式(第2版)</a></h4> <p><a href="http://www.amazon.cn/界面设计模式-泰德维尔/dp/B00EV562SY/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书按照设计进程的大致顺序,细致地梳理了交互设计中的模式,每个模式都至少含有一个范例,以方便读者学习。第1版中文版在推出后大获好评,一路畅销;在第2版中,新增了社交媒体,移动设计的内容,切实地符合了当下的技术发展潮流...</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="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/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/114" typeof="skos:Concept" property="rdfs:label skos:prefLabel">反馈</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/57" typeof="skos:Concept" property="rdfs:label skos:prefLabel">电子商务</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 29 Jul 2012 03:19:47 +0000 C7210 98 at http://www.beforweb.com http://www.beforweb.com/node/98#comments iOS Wow体验 - 第四章 - 为应用的上下文环境而设计 http://www.beforweb.com/node/80 <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-ios-iphone-ipad-wow-factor-app-ux-design-techniques-4.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"><div class="entry-intro"> <p>本文是《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》第四章译文精选,其余章节将陆续放出。上一篇:<a href="http://beforweb.com/node/71">Wow体验 - 第三章 - 用户体验的差异化策略</a></p> <p>关于本套译文分享的详情及目录结构,请参考<a href="http://beforweb.com/node/58">iOS Wow体验 - 译文分享说明</a>。</p> <p>全文由<a href="http://weibo.com/c7210">C7210</a>自发翻译(编译),并首发于<a class="eLink" href="http://beforweb.com">Beforweb.com</a>,如需转载,请注明译者及出处信息。英文原书版权由Apress所有,中文引进版的版权由相关出版社所有。</p> </div> <p>对于要打造怎样的iOS应用,也许你在心里已经相当有谱了。不过在读过<a href="http://beforweb.com/node/71">上一章</a>之后,你就会发现自己还可以站在更高的层面上,通过具有差异化的用户体验策略来重新定义产品概念。</p> <p>正如我们在前文中了解到的,用户研究方面的工作是用户体验策略当中的一个重要环节。当你在创造用户角色、构思需求用例、设计任务脚本的时候,必须对用户及移动应用所处的上下文环境加以考虑。这可以帮助你更加准确和有效的验证产品的概念模型,为打造杀手级的iOS应用奠定良好的基础。</p> <p>在本章当中,我们首先会阐述一下移动设备的核心价值,并为你提供一个用于比较iPad与iPhone之间行为模式差异的思路框架,从而让你可以根据不同的需求情况来更合理地塑造相应的用户体验模式。随后,我们还将一同来了解一下有哪些指导原则可以帮助你制定更具针对性的需求用例,使你的用户研究工作更有成效,确保产品能够准确地命中用户的需求点<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3 id="a1"> 移动计算的核心价值</h3> <p>当前,整个移动领域仍在持续迅猛地发展着。你会阅读本书,多半就证明了你已经看到移动设备在功能与用户体验等方面的巨大潜能。不过,究竟是什么原因使得人们对于移动设备及应用市场的热情如此高涨呢?</p> <p>移动计算的核心价值就是用户可以随时随处地使用功能、获取数据。说到底就是这么简单。在很短的时间内,手机就从一种只具备电话功能的奢侈品,发展成为具有极高普及率的个人计算设备,其中,电话功能已经不再是人们所关注的主要方面了。如今,iPhone这类移动设备所拥有的计算能力及体验模式都确保了随时随处的可访问性,这也是它们得以成功与流行的关键所在。</p> <p>过去,无论是使用应用软件还是上网,我们通常需要通过家中或是办公室里的电脑来进行操作;&ldquo;时间&rdquo;和&ldquo;地点&rdquo;这两个方面因素会在很大程度上限制我们的行为和需求。即使这两方面的条件都可以满足,我们也不得不接受一种完全形式化了的人机交互模式,例如坐在某个特定的屋子或是角落中,通过键盘鼠标操作着电脑。一般而言,我们在家或是办公室使用传统的桌面设备,大多是为了完成某些特定的任务;其中,以休闲为目的行为所占的比例很小。当然,我们这里描述的只是一种最普遍的状况。重点在于,在这种高度形式化了的情景模式下,无论是我们自身,还是我们与计算设备进行交互的方式,都受到了极大的约束。</p> <p><img alt="ios-wow-factor-killer-apps-experience-design-mobile-device-home" src="/sites/default/files/images/201205/ios-wow-factor-killer-apps-experience-design-mobile-device-home.jpg" style="width: 420px; height: 315px;" /></p> <p>如果可以打破时间与地点的局限,我们就能张开双臂拥抱全新的可能,这里包括我们能够想得到或是想不到的各种新需求,以及形形色色有待探索和体验的应用程序。这也正是iPhone这类移动计算设备的核心价值:将人们从传统的桌面设备中解放出来,使他们在各种需求情景中都能够享受到高效能的计算体验。这种演变带来了巨大的机遇,让我们可以对人机交互模式进行重新思考,使这些新设备、新应用能够全方位的融入到我们的生活当中。苹果准确地把握住了这个机遇,使iPhone及各种功能强大的应用程序得以广泛普及并保持高速增长;这些软硬件产品的功能与用户体验无不体现出厂商及设计开发人员对于科技与文化变迁的深刻领悟。</p> <div class="embed"><article id="node-261" class="node node-related-books" about="/node/261" 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/B00DINCMYI/?_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/05.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动设计-傅小贞/dp/B00DINCMYI/?_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/B00DINCMYI/?_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 id="a2"> &ldquo;移动&rdquo;与&ldquo;便携&rdquo;的体验模式比较</h3> <p>在本书中,每当提起移动设备,我们通常是在指iPhone及其同类产品。但是对于本章的话题来说,我们必须同时考虑到另外一类设备。从定义上来说,这类设备并不能算是严格意义上的移动设备,虽然这与我们通常的认知不大相符。</p> <p>苹果于2010年发布了第一代iPad。对于这款产品,苹果的意图很明确,他们就是希望打造一种介于智能手机与笔记本之间的设备。就在苹果一如既往的对新产品进行大肆宣传,并在消费者当中制造起巨大狂热的时候,一些批评与质疑的声音也此起彼伏。在批评者们看来,iPad只是大号的iPhone而已。不过,他们并不了解&ldquo;大尺寸&rdquo;所蕴藏的重要意义;正是这种特质,使得iPad可以从容应对很多新奇有趣的需求,而这些是iPhone或任何尺寸的笔记本(包括MacBook在内)所无法实现的。</p> <p><img alt="ios-wow-factor-killer-apps-experience-design-mobile-device-ipad" src="/sites/default/files/images/201205/ios-wow-factor-killer-apps-experience-design-mobile-device-ipad.jpg" style="width: 500px; height: 318px;" /></p> <p>相比于传统的笔记本电脑,iPhone与iPad都更加的移动化。不过,这两款iOS设备之间的尺寸差异也相应的造成了它们各自行为方式的不同。我们首先需要明白,手机是纯粹的个人设备,你的手机是和你&ldquo;绑定&rdquo;在一起的,一个来电的呼叫目标就是你本人。在人们的意识当中,手机就是你本人的一个化身或代理。大家在打电话的时候一般会说&ldquo;我打给你是要怎样怎样...&rdquo;,而不是&ldquo;我打给你的手机是要怎样怎样...&rdquo;。从这一点上,我们可以看出此类设备与使用者身份特征之间的紧密关系。</p> <p>无论去任何地方,我们几乎都会随身带着自己的手机;它就像是我们的亲密伙伴,从不会离开。使得这种情况成为可能的主要原因,就是包括iPhone在内的绝大多数手机在尺寸方面都相对较小。而iPad则不具备这方面的优势,虽然它同样非常轻便,易于携带,但从尺寸规格上来说,它的移动化特征还是无法与iPhone相比。</p> <p>不过,iPad在这方面的弱点却也是它的优势所在。虽然它无法像手机那样可以被我们一直揣在身上,但在很多时候,它可以带来iPhone所难以实现的炫酷体验。我们固然可以使用iPhone来阅读文章、浏览网页或是观看视频,但iPad的大屏幕显然可以带来更棒的视觉效果,并能使用户在交互过程中感受到更多的乐趣。如今的市场正在越发明确地将iPad定性成为 &ldquo;休闲计算设备&rdquo;,这种说法并不是一个新的概念,但iPad的出现使它在休闲娱乐及数码体验等方面的含义更加地与时俱进了。</p> <p><img alt="ios-wow-factor-killer-apps-experience-design-mobile-device-ipad-iphone" src="/sites/default/files/images/201205/ios-wow-factor-killer-apps-experience-design-mobile-device-ipad-iphone.jpg" style="width: 500px; height: 460px;" /></p> <p>我们可以从这些方面逐渐开始看到iPhone与iPad之间最主要的差异所在。在iPad上进行交互操作的流程所需要占用的时间会相对较长,例如,对于看片子、读书、看报等方面的目标任务,我们必需拥有相对宽裕的时间以及不受打扰的环境才能完成。而与此相反,iPhone中的常见需求用例通常只涉及到一些快速简短的交互行为,譬如查看股票行情、天气预报、社交网站中的好友更新等等。在实际生活中,由于我们会一直将手机带在身边,所以在任何时候几乎都可以拿出来进行使用,甚至在做其他事情的时候也不例外。一有机会就掏出手机摆弄摆弄应用,这已然成为绝大多数iPhone用户的习惯了。从这个角度来看,iPad与iPhone的用途及行为特征是截然相反的。我将这一点归纳如下:</p> <ul> <li> <strong>iPhone</strong>:使用频率高,每次交互行为所持续的时间都很短。</li> <li> <strong>iPad</strong>:使用频率低,但每次交互行为所持续的时间都相对较长。</li> </ul> <p>当然,这只是一种普遍规律,不能反映出全部的实际状况;但也正是这种最具代表性的观察结论可以体现出这两种设备在行为方式上的典型差异。</p> <p>可以说,iPhone所切实体现出的&ldquo;移动性&rdquo;的概念是被多数人所理解并认同的,而iPad则不然。 它并不算是一个完全意义上的移动设备,而且它身上所体现出的&ldquo;便携&rdquo;特征与以往的任何设备都有所不同。我之所以更倾向于用&ldquo;便携&rdquo;这个词来描述iPad,是因为在现实生活中,我们确实会时常将它带在身边,但同时,它又不像iPhone那样与我们的关系如此密切,可以随时随地的被拿出来使用。</p> <p>作为移动计算的一个分支概念,&ldquo;便携&rdquo;的特质可以很明显地体现在我们日常使用iPad的过程当中。正如我们在前文中了解到的,用户对于iPad的使用频率相对较低,但每次交互行为所持续的时间都比较长。所以用户在使用iPad的时候通常都处于一种相对稳定的环境当中,并且拥有较为充裕的时间。能够满足这些条件的一个最典型的场景就是在家中。例如,人们会在一种非常放松的状态下窝在沙发里,端着iPad或是将它放在膝上进行操作。虽然从整体上看,用户对于iPad的使用频率相对较低,但是在以家庭为代表的环境场景中,iPad被用到的频率却会超出iPhone;而当用户开始真正动起来的时候,他们对iPad的使用率就会开始下降。可以说,离开了家庭这样舒适稳定的环境之后,人们就很少有机会能够真正安心的享受iPad所带来的休闲体验了。</p> <p><img alt="ios-wow-factor-killer-apps-experience-design-mobile-device-ipad-user" src="/sites/default/files/images/201205/ios-wow-factor-killer-apps-experience-design-mobile-device-ipad-user.jpg" style="width: 500px; height: 254px;" /></p> <p>除此之外,这两款iOS设备之间还存在着其他方面的差异。iPhone之所以能够与用户个人保持更为密切的关系,从某种程度上讲,与它的电话功能有很大关系,因为这方面的因素会极大的影响用户对于设备的感知与定位。由于iPad并不具备这种隐私性质的功能,所以它的个人化色彩就相对较弱。在很多时候,用户会与他人分享使用自己的iPad。特别是当他们同时拥有iPhone和笔记本电脑的时候,这方面的行为特征就更加明显。因为在人们的意识当中,手机和笔记本是用于联系他人或进行办公的主要工具,在这些需求面前,iPad只是一种次要设备。这方面最具代表性的例子仍然是以家庭为环境背景的:通常,家庭成员都拥有各自的手机或是笔记本电脑,但他们往往会共同使用一部iPad来完成自己的相关需求。</p> <div class="embed"><article id="node-296" class="node node-related-books" about="/node/296" 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/为iPad而设计-打造畅销App-克里斯•史蒂文森/dp/B00EKPJFS4/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="为iPad而设计:打造畅销App" src="http://beforweb.com/sites/default/files/images/products/42.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/为iPad而设计-打造畅销App-克里斯•史蒂文森/dp/B00EKPJFS4/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">为iPad而设计:打造畅销App</a></h4> <p><a href="http://www.amazon.cn/为iPad而设计-打造畅销App-克里斯•史蒂文森/dp/B00EKPJFS4/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书强调实际可行的操作步骤,而非模棱两可的建议,包括如何产生创意、手绘App、做出原型设计、组织协作项目,以及App营销方面独家并且内行的建议。作者还向读者展示了用来做出超棒App的最新代码库、讨论了界面设计方面的抉择...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3 id="a3"> 移动应用的五类需求用例</h3> <p>移动应用的需求用例大致可以分为五种类型,它们都可以在各自的上下文环境中为用户带来重要的使用价值。这些需求用例固然不能代表全部的情况,但是我确信,你可以在很多自己所钟爱的应用当中找到它们的身影。实际上,你完全可以将它们理解成几种典型的应用类别,甚至是具有代表性的功能集合。只是&ldquo;需求用例&rdquo;的概念更加具有&ldquo;以用户为中心&rdquo;的色彩,另外,从用户体验策略的角度来看,这种说法也更加合适。</p> <p>这五类典型的需求用例包括:</p> <ul> <li> 人际交往</li> <li> 娱乐消遣</li> <li> 基于地理位置的服务(LBS)</li> <li> 电子商务</li> <li> 实用效率</li> </ul> <p>从某种程度上说,这些类别确实可以涵盖到市面上绝大多数的应用产品。接下来,就让我们逐一对这些用例进行具体的分析。</p> <h3 id="a4"> 人际交往</h3> <p>可以说,这是最没有悬念的一类需求用例。在用户对于iPhone这类设备的定义与感知当中,&ldquo;交际&rdquo;是最基础的功能与用途,因为手机本身正是作为&ldquo;电话&rdquo;这种点对点的交际工具被创造出来的。不过,对于我们现在要说到的&ldquo;人际交往&rdquo;,电话功能或手机固有的其他相关功能只是其中的一小部分,我们需要站在更高的层面来进行分析和理解。这类需求用例可以进一步被拆分为 &ldquo;一对一&rdquo;和&ldquo;一对多&rdquo;这两个方面。</p> <h4> 一对一的交际功能</h4> <p>下面的四种功能模式虽然都可以在实际当中用作多人之间的信息交流,但它们的核心概念都属于&ldquo;一对一&rdquo;的模式:</p> <ul> <li> 基本的电话及语音功能</li> <li> 电子邮件</li> <li> 短消息</li> <li> 即时通讯</li> </ul> <h4> 一对多的社交功能</h4> <p>以下这些功能与产品形式真正地从深度和广度上定义了&ldquo;一对多&rdquo;的人际交往模式:</p> <ul> <li> 社交网络(Facebook、Google+、Twitter等)</li> <li> 媒体分享平台(YouTube、Flickr、Vimeo等)</li> <li> 音频及视频播客</li> <li> 个人博客</li> <li> 社会化评论</li> <li> 论坛</li> </ul> <p>当我们通过这种方式把&ldquo;人际交往&rdquo;分解成不同类型的功能模式之后,这个概念在实际产品中的价值也就显现出来了。有很多成功的应用是直接围绕着其中的某种功能模式进行打造的,而另外一些则会将社交方面的模式作为产品的辅助功能。</p> <p><img alt="ios-wow-factor-killer-apps-experience-design-mobile-device-iphone-social-apps-s" src="/sites/default/files/images/201205/ios-wow-factor-killer-apps-experience-design-mobile-device-iphone-social-apps-s.jpg" style="width: 300px; height: 451px;" /></p> <h3 id="a5"> 娱乐消遣</h3> <p>这是一种覆盖面极大的需求用例,它可以通过很多方式被整合到各种产品形式当中。作为一种应用产品的类别,&ldquo;娱乐&rdquo;的概念显得过于宽泛了,但在抽象的层面,它又是一个具有绝对代表意义的需求用例。一个功能模式是否具有娱乐性,在很大程度上取决于用户在使用过程中的态度与感知。例如,在某些特定的情况下,对于某些用户来说,查看金融信息与股市行情真的是一种娱乐消遣行为。</p> <p>我们可以将娱乐性质的应用进一步分为两类:</p> <ul> <li> 游戏</li> <li> 内容消费</li> </ul> <p>游戏类应用产品所具有的娱乐性是显而易见的。人们对于游戏产品在移动领域中的市场定位问题还存在一些争议,对于怎样的游戏模式可以通吃各类移动平台的讨论也是各有各的看法。鉴于本书的主旨,我们不会去探究涉及游戏本身的复杂交互理论,虽然我们在前面几章里学到的那些思路和概念其实有很多是同样可以被运用到游戏应用的设计与开发当中的。</p> <p>而作为娱乐性需求用例的另外一个组成部分,内容消费本身就是一个形式多样的庞大概念;看片子、听音乐、读书、浏览网页等一系列行为无一例外地被囊括在这个范畴当中。市面上很多非常流行的iPhone或iPad应用都是聚焦在这个方向上的,这些产品大多拥有特色鲜明的用户体验方式,使得内容消费行为具有很强的娱乐性,对于用户具有极高的吸引力。当然,这也说明很多产品设计人员和开发者都看到了这类需求在市场中的巨大潜力,并且已经开始在自己的产品中付诸实践了。不过即便如此,你也不必过于担心竞争方面的问题;这方面的需求空间依然是巨大的,用户们始终会对那些能够给他们的内容消费行为带来新奇体验的应用产品保持强烈的关注与期待。</p> <p><img alt="ios-wow-factor-killer-apps-experience-design-mobile-device-iphone-entertainment-game-apps" src="/sites/default/files/images/201205/ios-wow-factor-killer-apps-experience-design-mobile-device-iphone-entertainment-game-apps.jpg" style="width: 470px; height: 400px;" /></p> <h3 id="a6"> 基于地理位置的服务(LBS)</h3> <p>这是一种在当前的移动领域中比较新兴的应用服务类型,而且在我们提到的这些典型需求用例当中,它是唯一一个只能通过移动设备进行操作的。这种产品服务类型的出现,得益于当前移动领域中一系列新技术的整合运用,包括GPS、数码罗盘技术、能够在地理位置和定向等方面提供高精准细节信息的移动网络等。</p> <p>在苹果的应用商店中,有很多应用会以非常有意思的方式整合着LBS方面的功能,其中有一部分产品获得了成功,而多数则表现平平。这其中的主要原因还在于LBS仍然属于一种比较新兴的用例模式,对于这方面功能所蕴藏的潜能,多数产品设计人员只是触及到了一些皮毛。这类应用当中,有很大一部分会帮助用户以&ldquo;一对一&rdquo;或是&ldquo;一对多&rdquo;的方式分享他们当前所处的地理位置,而另外一部分会为用户提供由A点出发前往B点的出行方案。这里最大的问题在于,LBS最核心的价值究竟是什么,你应该以怎样的方式在自己的产品概念当中将这个价值整合进来。其实答案很简单,LBS最本质的作用,就是将产品自身的核心功能与移动设备所处的上下文环境建立合理的关联,使产品的价值得到提升。</p> <p><img alt="ios-wow-factor-killer-apps-experience-design-mobile-device-lbs-foursquare" src="/sites/default/files/images/201205/ios-wow-factor-killer-apps-experience-design-mobile-device-lbs-foursquare.jpg" style="width: 450px; height: 332px;" /></p> <h3 id="a7"> 电子商务</h3> <p>这是一类对于多数平台设备都具有普遍代表性的需求用例。我们在传统互联网领域中所熟悉的那些电子商务基础功能及行为模式,例如浏览商品、阅读介绍、将商品放入购物车等几乎已经成为了我们的第二天性。在移动应用所处的上下文环境中,怎样针对设备的交互特性,打造最简单直接的购物流程,这是一个不小的挑战。此外,对于关键环节中的交互体验进行优化也是很重要的,例如提升用户在商品浏览过程中对于速度、效率以及屏幕空间利用率等方面的感知与体验。</p> <p>这些只是比较简化和常规的产品设计思路。如果你希望将目光放的更远,力图打造一款在各个方面都表现优异的电子商务应用,那么你将逐渐看到这类功能模式所蕴藏的更多潜力。当前,有一些&ldquo;强化型&rdquo;解决方案开始引起人们的关注,这类产品旨在为现有的电子商务平台及相关的购物行为提供支持与强化,而它本身并不需要具备交易方面的功能。这种模式可以被分为两大类:</p> <ul> <li> <strong>策展</strong>:利用第三方资源帮助用户在复杂的商品结构中进行浏览,在此期间有针对性地向用户提供商品推荐,以达到引导消费行为的目的。</li> <li> <strong>聚合</strong>:整合外部资源,按照用户指定的方式对商品内容进行呈现与管理。</li> </ul> <p>你完全可以根据自己产品的实际情况,基于一套有效的用户体验策略,针对你的目标用户群探索出更多有意思的电子商务强化模式。</p> <p><img alt="ios-wow-factor-killer-apps-experience-design-mobile-device-iphone-ecommerce-ebay-apps" src="/sites/default/files/images/201205/ios-wow-factor-killer-apps-experience-design-mobile-device-iphone-ecommerce-ebay-apps.jpg" style="width: 500px; height: 357px;" /></p> <h3 id="a8"> 实用效率</h3> <p>在第二章里,我们对于iOS所体现出的更加倾向于&ldquo;效用&rdquo;的设计思想做了一定程度的了解,而这方面的价值观同样可以体现在应用当中。从概念上说,&ldquo;实用效率&rdquo;与我们前面提到&ldquo;娱乐消遣&rdquo;是截然相反的两类需求用例。后者所需的上下文环境更加适合具有便携色彩的iPad,而实用型和效率型应用产品则与iPhone这类具有真正移动性的设备有着更为密切的关联,而这种情况也符合用户头脑中对于这两款设备在定义与感知方面的差异。对于效率类的应用来说,即使缺乏出众的视觉设计与令人眩目的交互方式,只要它能够帮助用户迅速高效的完成特定的任务,就有可能获得巨大的成功。</p> <p>实用效率的概念同样是非常广泛的,不过你仍然可以根据移动应用所处的上下文环境来考虑以怎样的方式将这个概念整合到自己的产品当中。如果你的目标就是要打造一款纯粹的效率类应用,那么你的产品必须对以下两个方面进行良好的落实:</p> <ul> <li> <strong>准确的功能</strong>:提供用于完成目标任务的最准确的功能方法。</li> <li> <strong>简化的操作</strong>:提供用于完成目标任务的最简化的操作方式。</li> </ul> <p><img alt="ios-wow-factor-killer-apps-experience-design-mobile-device-iphone-utility-apps" src="/sites/default/files/images/201205/ios-wow-factor-killer-apps-experience-design-mobile-device-iphone-utility-apps.jpg" style="width: 500px; height: 313px;" /></p> <h3 id="a9"> 多种功能模式的整合</h3> <p>对于这五种最具代表性的需求用例,我们已经逐一进行了分析。对于某些项目来说,确实有必要像这样有针对性的从某个特定的需求用例出发,对产品进行设计和规划,但在很多情况下,你还需要将更多的用例模式作为不同方面的功能属性整合到同一款产品当中。特别是当你的产品概念已经具备了一定的核心框架,而你希望在此基础上增强产品与移动应用上下文环境之间的相关性的时候,这种更具综合性的产品设计思路就显得尤为重要了。当然,你并不需要将所有这些典型的用例模式都非常明显的体现到产品当中,重点在于能否通过这些核心框架之外的功能模式,为产品与其所处的上下文环境建立更加精准的关联。在这个过程中,你也许还可以为产品创造出更多额外的价值,并有可能开拓出一些全新的需求用例模式,使产品能够更好地满足用户对于独特的功能与体验方式的渴望。</p> <p>&ldquo;实用效率&rdquo;本身就是个具有普遍性的概念。其实,无论对于哪一类应用,我们都应该在 &ldquo;准确的功能&rdquo;与&ldquo;简化的操作&rdquo;这两方面加以落实,以提升产品的用户体验。不同类型的应用,其功能侧重点有所不同,效率方面的优先级可以根据实际情况进行调整。</p> <p>无论你的产品是否以基于地理位置的服务作为核心功能,这种模式都是值得考虑的。不妨在规划产品概念的时候设想一下,如果为应用增加这方面的辅助功能,它会不会为正在外出的用户带来更多的使用价值。</p> <p>社交功能也是我们需要重点考虑的一个产品模式。你可以在应用的核心框架中以非常简单的方式将社交功能整合进来,例如在用户个人资料当中添加一个&ldquo;点击进行通话&rdquo;的按钮。将应用产品与社交媒体方面的功能进行整合的重要性正在日益凸显,无论从用户的角度还是从商业的角度来看都是这样。你还可以将更具深度和广度的&ldquo;一对多&rdquo;的社交模式以很多不同的方式整合到自己的产品中。具体应该将哪种社交模式与当前产品概念中的哪些功能点以怎样的方式相结合,这些问题都要由你来根据用户在上下文环境中的实际需求加以判断。</p> <p>目标设备的类型也会影响一款产品对于这些典型需求用例的整合程度。基于我们在前文中所了解到的iPhone与iPad这两类设备在行为与体验等方面的差异,你可以更有针对性的为自己的产品制定功能模式整合策略<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-286" class="node node-related-books" about="/node/286" 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/放飞App-移动产品经理实战指南-雅莫斯/dp/B00DUPP6K6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23"><img alt="放飞App:移动产品经理实战指南" src="http://beforweb.com/sites/default/files/images/products/31.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/放飞App-移动产品经理实战指南-雅莫斯/dp/B00DUPP6K6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23">放飞App:移动产品经理实战指南</a></h4> <p><a href="http://www.amazon.cn/放飞App-移动产品经理实战指南-雅莫斯/dp/B00DUPP6K6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23">本书讲述如何构建出能在Apple Store中引人注目的iPhone和iPad应用。从全局介绍这一构建过程中的每一步,包括预算成本、挑选开发人员并组织最佳团队、搭建工作流程、推销和改进自己的应用产品...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3 id="a10"> 总结</h3> <p>移动计算的核心价值就是用户可以随时随处地使用功能、获取数据。它打破了时间与地点的限制,将人们从传统的桌面设备中解放出来,使他们在各种需求情景中都能够享受到高效能的计算体验。各种新的需求形式与功能模式都在不断地涌现,它们之间保持着互相推动与促进,这也加速了iPhone这类移动设备的发展与普及。</p> <p>不同类型的设备在行为与体验方面的差异会对你的产品设计决策造成重要的影响。iPhone是一种真正意义上的移动设备,而iPad则更加具有&ldquo;便携&rdquo;的特质,它虽然时常被我们带在身边,却不像iPhone那样真正与我们的生活绑定在一起。由于目标任务通常更侧重于休闲娱乐等方面,所以在iPad上进行交互操作的流程所需要占用的时间相对较长,我们必需拥有充裕的时间以及不受打扰的环境,才能完成目标。而我们对于iPhone的使用频率则要高很多,但每次交互行为所持续的时间都相对较短。另外,iPhone的隐私性更强,它与用户的个人关系十分密切,而iPad在很多时候更像是一种共享型的设备。</p> <p>在本章里,我们还对五种最具代表性的需求用例进行了了解:</p> <ul> <li> 人际交往</li> <li> 娱乐消遣</li> <li> 基于地理位置的服务(LBS)</li> <li> 电子商务</li> <li> 实用效率</li> </ul> <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/78" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS Wow Factor</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/12" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPad</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/52" typeof="skos:Concept" property="rdfs:label skos:prefLabel">社交媒体</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/97" typeof="skos:Concept" property="rdfs:label skos:prefLabel">LBS</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/57" typeof="skos:Concept" property="rdfs:label skos:prefLabel">电子商务</a></li><li class=" taxonomy-term-reference-11" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 06 May 2012 03:25:50 +0000 C7210 80 at http://www.beforweb.com http://www.beforweb.com/node/80#comments 比较与选择 - 怎样通过设计帮助用户制定决策 http://www.beforweb.com/node/40 <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-user-experience-design-desicion-architecture-comparison-guessing-h.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>话说时间也真不是怎么挤怎么有的,除了上班和翻书以外,每天再来这边码码字就已然把最后一点可用资源占用干净了。不过有一点自己还是比较清楚的,能够把大部分时间精力都放在这些事上面,其实完全能够说明现在日子的状态在好转,让人揪心耗神的事情在逐渐变少。OK,双鱼男的唠叨就此打住,我们来看今次的译文。主题关键词:比较、选择、决策、设计的引导。</p> <p>设想一个潜在用户正在浏览你的网站,比较着你们所提供的产品与服务,琢磨着是否要进行购买。也许你可以自信的说,当前的&ldquo;购买&rdquo;功能对于用户来说是非常醒目和易用的,但是你能保证在&ldquo;对比&rdquo;和&ldquo;选择&rdquo;等方面的体验也是同样靠谱的吗?</p> <p>如今,很多用户体验设计师对于面向用户行为的设计思路已经非常熟悉了。但是在很多情况下,大家的设计都是基于&ldquo;用户必然会执行操作&rdquo;的假设。要知道,所有的操作行为都是跟随在某种&ldquo;决策&rdquo;之后的;例如,要产生购买行为,用户首先需要在目标商品的选择上做决策。</p> <p>曾经有研究指出,决策的制定过程是具有很强的弹性的,可供人们参考的因素也不像我们一直以来认为的那样明确和稳固;该过程所处的上下文环境对于决策结果本身具有很大的影响。从网站产品设计的角度讲,这个研究结果是非常重要的;它相当于在告诉我们,作为用户制定决策的上下文环境,网站本身的设计方式不仅会作用于&ldquo;可用性&rdquo;等常规的用户体验要素,更可以影响到用户对行为的选择和决策<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3> 决策制定的目标</h3> <p>面向决策制定过程的设计应该怎样进行呢?首先我们要清楚这个过程的目标是什么&mdash;&mdash;简单的说,就是以最低的资源消耗量,换取最合理、最有价值的决策结果。也许大家会注意到,这个说法里存在一种矛盾或折中的感觉,因为通常,好的决策离不开努力的付出。</p> <p>对决策制定的目标及其固有的内在矛盾的认知是很重要的,因为从本质上说,我们的设计要么可以化解这层矛盾,有效的帮助用户制定最合适的决策,要么反而会加剧它的存在,影响用户的选择和判断;当人们无法做决定时,他们就不会去做决定,对于网站来说,即使后续流程的体验再优秀,也是没有意义的。</p> <h3> 面向决策制定的用户体验设计</h3> <p>设计方案的很多方面都会对用户制定决策的过程产生影响作用,包括视觉布局、选项的数量、信息的类型及措辞方式等等。这些因素对于决策制定的作用是很微妙的,但同时也是强有力的。</p> <p>面向决策制定过程的用户体验设计中,最有效的一个思路,就是促进用户的自然行为方式,挖掘人们在制定决策时所惯用的策略。</p> <h4> 通过比较来评估价值</h4> <p>首先我们需要了解的一个关键问题是,用户是怎样判定和评估一款商品的价值的?</p> <p>人们并非生来就拥有判断事物绝对价值的能力,他们需要一个比较的过程。人们一直在对各种事物进行比较:产品、服务、主意、他人等等;这是人们的一种自然行为,同样也是设计师们需要通过正确的方式来促进和激发的行为。</p> <p>为了演示&ldquo;比较&rdquo;在人们制定决策时所起到的重要作用,我们来看一项有意思的<a href="http://faculty.chicagobooth.edu/christopher.hsee/vita/Papers/AttributeEvaluability.pdf">研究</a>(PDF格式)。其中,研究员将一群人划分为三组,并要求他们每个人都对词典的价格进行评估。</p> <p>其中一组的人们被展示了一本拥有20000条词汇的词典,但它的封面有破损,而另外一组看到的则是一本拥有10000个词条的崭新词典。最后的平均结果是,人们愿意为那本封面破损但内容更多的词典支付20美金,而对于那本崭新的但内容较少的词典,却乐于付出24美金。</p> <p>然后,研究员将两本词典一起交给第三组,让他们进行仔细的观察对比。结果是,他们更愿意为那本内容更多的词典付出更高的价格,无论其封面是否存在破损;具体的开价分别是27美金与19美金。这与前面不进行比较而直接估价的测试结果正相反。</p> <p>这个研究看上去很简单,但对于用户体验及相关的Web设计领域来说,有不少重要的看点在里面。首先,我们可以看到,单独的审视一本词典,或是将两本放在一起进行比较&mdash;&mdash;这两种评判方式会对价值评估的结果造成最直接的影响。这也就是我们在前面提到的,人们并非生来就拥有判断事物绝对价值的能力;比较的过程决定了人们对价值的判定结果。</p> <p>要想正确的判断一本词典的价值,人们需要一些衡量的标准。一本优秀的词典应该收录多少词条?绝大多数的人并不了解。所以在做价值评估的时候,由于无法通过比较来看到利弊,人们只能参考自己内心的主观标准。例如,第一组的人们并不知道他们拿到的词典的内容量是更多的,他们所能了解到的,只是这本词典的封面有破损,所以他们自然更加容易做出负面的判定。</p> <p>当人们有机会对两本词典进行直接比较的时候,他们才可以就那些他们所关心的方面进行判断,比如收录的词条数量;此时,那些外观上的瑕疵就不再是最重要的了。只有在他们无法对真正重要的方面进行评估时,那些更容易看到的次要因素才会直接决定最终的判断结果。这就是我们所说的决策过程所处的上下文环境对于决策结果本身的影响作用。</p> <p>所以,如果我们能够针对&ldquo;比较&rdquo;这个环节进行合理的设计,就可以帮助用户将注意力放在评估对象真正重要的属性上面,进而做出正确的价值判断。在词典的例子中,另外一个会影响人们的判断结果的因素是&ldquo;信息&rdquo;。试想在人们对词典的价格做评估的时候,如果告诉他们一本典型的好词典所需要拥有的词条数量,那么最终的估价结果是否会发生变化。</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> <h4> 为&ldquo;比较&rdquo;的环境空间进行设计</h4> <p>如前文所述,&ldquo;比较&rdquo;的过程有助于人们对目标对象的价值进行更加合理和全面评估;而能否对该过程所处的上下文空间进行合理的规划与设计,就是我们所面对的挑战了。优秀的设计方案可以全面而有效的展示目标对象的重要属性,帮助人们充分的了解关键信息,做出合理的决策。</p> <p>要更好的了解怎样针对&ldquo;比较&rdquo;进行更加有效的用户体验设计,也许最好的方法正是&ldquo;比较&rdquo;。让我们通过正反两个方面的一些实例来具体看看吧。</p> <p><strong class="eLessStrong">实例1:设定上下文环境</strong></p> <p>下图中的两种方案,哪个更具有对比效果?显然是第一种。在这里,正是&ldquo;原价(Regular Price)&rdquo;为比较行为设定了上下文环境,让人们在判断当前价格是否划算的时候有了参照的依据。虽然第二个设计方案中的现价比第一个里面的要低2美金,但价格的对比效果让第一种方案更具吸引力。</p> <p><a href="/sites/default/files/images/201201/user-experience-design-for-decision-architecture-example-1.jpg" rel="lightbox"><img alt="user-experience-design-for-decision-architecture-example-1" src="/sites/default/files/images/201201/user-experience-design-for-decision-architecture-example-1.jpg" style="width: 500px; height: 558px; " /></a></p> <p><strong class="eLessStrong">实例2:突显用于比较的关键信息</strong></p> <p>下图演示了一个负面的例子。这个设计方案希望通过配色的变化来体现出三款服务的差异性,但并没能有效的突出重要信息。他们假设用户会仔细阅读每款服务的细节信息,然后进行比较;而实际上,用户更希望在最短的时间内对每款服务进行充分比较,了解它们之间的差异在哪里。这个方案显然没能以一种容易辨识的方式来展现那些用于&ldquo;比较&rdquo;的关键性信息。</p> <p><img alt="user-experience-design-for-decision-architecture-example-2" src="/sites/default/files/images/201201/user-experience-design-for-decision-architecture-example-2.jpg" style="width: 489px; height: 355px; " /></p> <p><strong class="eLessStrong">实例3:提供参照物</strong></p> <p>下图中的实例体现出了人们对于&ldquo;比较&rdquo;的自然需求。多数人会关心他们是否有足够多的存款;类似这样的需求中,仅仅使用一个数字来呈现用户的存款信息是不够的,谁知道5万美金的退休金是高是低呢。这个实例网站的产品策划人员及设计师很清楚人们在这时需要一个参照物来进行比较&mdash;&mdash;他们在用户个人帐目的下方增加了一个&ldquo;和你相似的人&rdquo;作为参考指标,显示了用户所在行业的平均水平,并用柱形图的方式清晰的体现出了对比的效果,使用户能够一目了然。</p> <p><a href="/sites/default/files/images/201201/user-experience-design-for-decision-architecture-example-chart.jpg" rel="lightbox"><img alt="user-experience-design-for-decision-architecture-example-chart" src="/sites/default/files/images/201201/user-experience-design-for-decision-architecture-example-chart.jpg" style="width: 500px; height: 279px; " /></a></p> <p><strong class="eLessStrong">实例4:对比度</strong></p> <p>我们可以在下面的实例中看到,通过柱形图的形式表现出来的用户打分情况,在视觉上具有很强烈的对比效果;类似这样的方式可以有效的加深信息在用户头脑中的印象,促进选择决策的制定。</p> <p><a href="/sites/default/files/images/201201/user-experience-design-for-decision-architecture-example-contrast.jpg" rel="lightbox"><img alt="user-experience-design-for-decision-architecture-example-contrast" src="/sites/default/files/images/201201/user-experience-design-for-decision-architecture-example-contrast.jpg" style="width: 500px; height: 247px; " /></a></p> <p><strong class="eLessStrong">实例5:增强视觉表现形式的可扫描性</strong></p> <p>这也是一个负面的例子。下图所示的页面中,其设计方案的本意,是希望用户可以逐条对比PC与Mac的性能参数,并且最终发现两者在性能几乎完全相同的情况下,价格差异是如此的巨大。 然而,居中的内容对齐方式却使这种效果打了折扣,用户必须以一种不适合视线扫描的方式逐条阅读内容信息。另外,内容配图的尺寸也显得过大了。</p> <p><a href="/sites/default/files/images/201201/user-experience-design-for-decision-architecture-example-pc-mac.jpg" rel="lightbox"><img alt="user-experience-design-for-decision-architecture-example-pc-mac" src="/sites/default/files/images/201201/user-experience-design-for-decision-architecture-example-pc-mac.jpg" style="width: 500px; height: 575px; " /></a></p> <p><strong class="eLessStrong">实例6:突出特色</strong></p> <p>下面实例中的数据表格就是一种有效的内容形式,它很便于视线扫描,用户可以在很短的时间内清楚的看出TD Bank在各方面的表现都胜于对手(至少是在他们自己所选择的这些服务项目中)。我们来简单看一下视觉设计是怎样对页面信息的呈现进行有效支持的。首先,在标题栏中,TD是唯一带logo的银行名称,并且放在了最左边;无论从样式还是呈现顺序的角度,都可以保证让用户首先看到TD这一栏。另外,与其他列不同的是,TD所在的列中使用了背景色。当然,为了突出他们自己的服务优势,对于所有这些项目指标,TD一列中都是绿色图标;而即使竞争对手会提供同样的服务,也只是使用灰色的对勾作为弱化处理<a class="eLink" href="http://beforweb.com">。</a></p> <p><a href="/sites/default/files/images/201201/user-experience-design-for-decision-architecture-example-table-checklist.jpg" rel="lightbox"><img alt="user-experience-design-for-decision-architecture-example-table-checklist" src="/sites/default/files/images/201201/user-experience-design-for-decision-architecture-example-table-checklist.jpg" style="width: 500px; height: 398px; " /></a></p> <h4> 总结</h4> <p>我们来回顾一下前文中的内容要点。面向决策制定的用户体验设计中,最有效的一个思路,就是促进用户的自然行为方式,挖掘人们在制定决策时所惯用的策略。要时刻注意两个方面:</p> <ol> <li> 决策制定的目标,及其固有的矛盾因素。</li> <li> 人们并非生来就拥有判断事物绝对价值的能力;比较的过程决定了人们对价值的判定结果。</li> </ol> <p>要帮助和引导用户进行选择判断,关键在于我们能否对决策制定过程所处的上下文环境进行合理的规划与设计;以下这些方式原则可供我们参考:</p> <ul> <li> 提供参照物,让人们更容易通过比较来判断目标对象的价值。</li> <li> 让关键信息更醒目,便于用户在最短的时间内将注意力集中在最有用的信息上。</li> <li> 通过合理的页面布局及视觉样式,让内容更便于视线的扫描。</li> <li> 在正确的地方提供正确的信息,去除那些不仅无法帮助用户进行比较,甚至可能阻碍决策制定过程的信息与页面元素。</li> </ul> <p>在这个过程中不存在所谓的中性设计,任何细节中的设计都会作用于用户决策的制定。这与可用性设计的道理是类似的,无论设计师是否刻意为之,方案中的每个地方都会从正面或负面影响着产品的可用性。</p> <p>从历史的角度讲,&ldquo;决策制定&rdquo;方面的相关话题,并没有在用户体验设计领域中受到应得的关注,这种情况需要一点点的被改变。我们应该逐渐了解到,对于网站产品的目标期望来说,用户决策的制定过程其实一直在扮演着重要的角色。</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="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/72" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户决策</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/73" typeof="skos:Concept" property="rdfs:label skos:prefLabel">引导</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/57" 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, 15 Jan 2012 03:25:22 +0000 C7210 40 at http://www.beforweb.com http://www.beforweb.com/node/40#comments 怎样通过更好的用户体验促进网站转化率的提升 http://www.beforweb.com/node/18 <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-user-experience-usabil.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>废话不多说了。本次的译文回归到传统Web方面,涉及可用性、用户体验及转化率的话题。走着。</p> <p>对电子商务网站来说,可用性和用户体验的改善,对转化率的提高是有显著效果的。所谓的改善,不仅包括更好的视觉效果与内容架构,更重要的是,怎样以更专业化的、让人信赖的方式在正确的时间传达正确的信息,与潜在客户进行有效的沟通<a class="eLink" href="http://beforweb.com">。</a></p> <p>通过本文,你将了解到,为产品创建着陆页面时需要注意哪些涉及用户体验和可用性方面的因素,包括怎样使用户的注意力集中在最重要的信息上,以及怎样通过视频、用户打分等方式,有效提升转化率<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3> 专业化、可信赖的视觉风格及体验</h3> <p>&ldquo;保持简单&rdquo;确实是良好可用性的重要体现。有些方法原则是我们已经熟悉的,比如通过合理的设计与正确的文案,使链接能在最短的时间内向用户展示最准确的含义;保持网站结构的可预见性;针对用户的操作,提供清晰明确的状态回馈信息等。简单且有效的体验,可以使用户感到愉悦,并减少误操作。</p> <p>这些方法固然可以帮助用户更好的浏览和使用网站,但对提升转化率、扩大销量等方面来说,并没有很直接的推动作用。而且在很多时候,&ldquo;简化&rdquo;的设计思路会与销售和市场等方面的因素产生冲突。所以,对于电子商务方面的网站,还有一些更&ldquo;专业&rdquo;化的指导原则需要我们去理解和遵循。</p> <h4> 树立信任,注重信誉的打造</h4> <p>专业化的、让人信赖的视觉设计风格,对网站信誉的打造起着至关重要的作用。通常情况下,人们会对&ldquo;在线购物&rdquo;持有谨慎态度,尤其是在他们所不熟悉的购物网站中。所以首先要保证的就是让我们的网站看上去足够可信。以<a href="http://inkd.com/" rel="nofollow">inkd.com</a>为例,在视觉方面,通过对网格布局及其他一些设计原则的正确使用,即保持了内容的简洁可读,又塑造了专业可信的形象。</p> <p><a href="/sites/default/files/images/201110/inkd-design-conversion-user-experience-usability.jpg" rel="lightbox"><img alt="inkd-design-conversion-user-experience-usability" src="/sites/default/files/images/201110/inkd-design-conversion-user-experience-usability.jpg" style="width: 500px; height: 478px; " /></a></p> <p>符合用户心智模型的功能及信息架构,也是提升可信度的重要因素。一定要确保用户在使用网站的过程中有充分的控制权。对于有经验的用户来说,他们可能会更多的使用搜索功能来快速寻找想要的产品,并且,通常还会对搜索结果做进一步的筛选和排序。而相对新手一些的用户可能更喜欢直接在首页就能看到产品的简介,或是更倾向于使用网站提供的导航菜单来寻找商品。</p> <p>要保证流程的连贯性,并符合用户预期。当用户在商品索引页面点击某商品时,接下要来进入的必须是商品详情页;除非用户主动从详情页面中跳出,否则接下来的流程将是购物车或结算相关页面。顺便说一句,最好同时向用户提供&ldquo;放入购物车&rdquo;和&ldquo;购买并结算&rdquo;这两种功能,因为当用户只买一种商品的时候,&ldquo;放入购物车&rdquo;的功能只会增加一步没有必要的操作,而且会增大用户取消购买的几率。</p> <h4> 在正确的地方传递正确的信息</h4> <p>在网购流程中,有大量的相关信息需要向用户呈现,通常包括商品本身、物流、支付方式及风险提示、隐私声明等方面。必须按照优先级对这些信息进行合理的排序,并在合理的步骤中显示。</p> <p>例如,在用户进行购买行为之前,要向他们提供支付方式、隐私声明等相关的信息,确保用户不会因为信息的缺失而产生顾虑,甚至取消购买。在网购流程中的每个环节里面,用户都有可能产生各种疑虑和问题。要做好用户研究,在有可能产生问题的地方,以尽量突出的方式提供准确的答案或辅助信息<a class="eLink" href="http://beforweb.com">。</a></p> <p><a href="/sites/default/files/images/201110/pruchase-scribbles-conversion-user-experience-usability.jpg" rel="lightbox"><img alt="pruchase-scribbles-conversion-user-experience-usability" src="/sites/default/files/images/201110/pruchase-scribbles-conversion-user-experience-usability.jpg" style="width: 500px; height: 375px; " /></a></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> <h4> 正确的使用图形元素来引导用户</h4> <p>在需要使用图形元素来呈现内容信息的时候,最好谨慎些,不要让它们看上去像广告,因为多数用户已经习惯了让目光忽视那些看上去像广告的图片。</p> <p>对于产品特色展示一类的内容性质的图片,可以试着将它做的很大,甚至大到全屏的程度。也可以在介绍中放一张在宽度上与内容等宽的缩略图,用户点击之后可以看到大图。通常情况下,用户点击被文字内容环绕的图片,主要的初衷就是希望可以查看大图;这种动机下,即使加载大图需要较长时间,这种延迟也是符合他们预期的。</p> <p>下图中的页面,在布局和图片风格等方面做的都不错,但却忽视了怎样通过图片将用户的注意力集中在重要的地方,比如注册。注册按钮的位置虽然在大图中,布局也还算便于用户点击,但配色和尺寸规格都使它在页面中太过含糊,不够显眼。</p> <p><a href="/sites/default/files/images/201110/wrong-sign-up-design-conversion-user-experience-usability.jpg" rel="lightbox"><img alt="wrong-sign-up-design-conversion-user-experience-usability" src="/sites/default/files/images/201110/wrong-sign-up-design-conversion-user-experience-usability.jpg" style="width: 500px; height: 291px; " /></a></p> <p>下面的页面截图来自<a href="http://www.fivesimplesteps.co.uk/">Five Simple Steps</a>,他们做的不错,重要操作的功能按钮很显眼,封面介绍的图片也更像是组成内容的一部分,而非广告。</p> <p><a href="/sites/default/files/images/201110/design-for-web-conversion-user-experience-usability.jpg" rel="lightbox"><img alt="design-for-web-conversion-user-experience-usability" src="/sites/default/files/images/201110/design-for-web-conversion-user-experience-usability.jpg" style="width: 500px; height: 436px; " /></a></p> <h4> 使用突出的、合适的文案引导用户执行操作</h4> <p>现在,多数购物网站中,用来提供购买功能的按钮文案,通常都是&ldquo;立刻购买&rdquo;一类&mdash;&mdash;简单,准确,有鼓动性。而多年以前,这样的文案会被Web设计行业认为不够艺术化,不够隐喻化,不够酷,不够个性。显然,我们现在做的是对的。</p> <p>要清楚的告诉用户他们接下来应该做些什么,并在页面中以最精确的语言、最突出的方式让用户看到,比如用很大的按钮形式呈现的&ldquo;放入购物车&rdquo;、&ldquo;立刻结算&rdquo;等。同时,另外一些必要的但重要性略低的内容链接,如&ldquo;更多信息&rdquo;、&ldquo;查看详情&rdquo;、&ldquo;技术规格&rdquo;等,则应该使用相对较小的字号或较弱的字色来呈现。</p> <p><a href="http://www.marketingexperiments.com/" rel="nofollow">MarketingExperiments</a>曾经研究过文案用词会对转化率产生怎样的影响。他们通过电子邮件的方式来检验有多少读者可以被转化为付费订阅用户。邮件中的每个UI元素都是测试对象。最初,用来提示读者进行订阅以便阅读全文的按钮的文案是&ldquo;从这里继续(Continue here)&rdquo;。看上还去不坏。不过第二版的文案&ldquo;继续全文(Continue to article)&rdquo;使转化率提高了3.3%,而第三版的&ldquo;点击这里继续(Click to continue)&rdquo;的效果,高出了第二版将近10%.</p> <p>coolest-gadgets.com在为<a href="http://www.coolest-gadgets.com/20070606/dreamate-sleep-inducer/" rel="nofollow">商品详情页面</a>增加了亚马逊风格的&ldquo;立刻购买&rdquo;按钮后,销量翻了一倍。</p> <p><img alt="amazon-button-conversion-user-experience-usability" src="/sites/default/files/images/201110/amazon-button-conversion-user-experience-usability.jpg" style="width: 423px; height: 223px; " /></p> <h3> 视频 - 绝妙的武器</h3> <p>越来越多的购物网站开始在商品详情页面中添加视频,比起精致的照片图片,视频可以从更加实际的角度向用户展示商品,让用户感受商品的使用情景,或是了解其使用方法。</p> <p>德国的自行车零售商<a href="http://www.fahrrad.de/" rel="nofollow">Fahrrad.de</a>在他们那个专门用来拍摄商品视频的工作室中邀请了各个品牌的销售代理,并请他们在视频中讲述各自品牌的优势。有些公司甚至派来了代言他们品牌的世界冠军。最后,他们将录制好的视频放在对应的产品详情页面中供用户观看参考,效果很棒。</p> <p>视频未必需要达到工作室制作的专业级别。完全可以使用个人摄像设备进行拍摄,而且在效果上会比制作精良的广告片一样的视频让人觉得更加亲切真实,值得信赖。</p> <p>可以尝试些新奇的概念和主意。<a href="http://www.ebags.com" rel="nofollow">eBags.com</a>甚至为他们的商品视频建立了一个社区,用户可以为自己喜欢的视频投票。</p> <h3> 用户评分与点评</h3> <p>在旅游方面,60%的用户会基于他们在线上了解的信息做出决策。他们会访问点评类型的网站,查找最合适的目的地及酒店。类似的站点还可以在电子消费及美食等方面看到。</p> <p>这向我们提出了两个问题:</p> <ol> <li> 普通零售商的购物网站需要建立自己的评分系统吗?</li> <li> 怎样处理负面评价?</li> </ol> <p>第一个问题的答案很简单。通常情况下的答案是&ldquo;不&rdquo;。原因有很多,首先,如果这样做,那么没有哪家零售商是可信的,消费者会认为那些评价和推荐都是商业手段。只有很大的能吸引足够多用户的购物网站才能建立起真正有价值的评分系统。足够多的用户可以保证评分与点评的客观性,同时评分也可以成为商品排序的方式之一。</p> <p>第二个问题所能产生的后果是难以评估的。当负面评价出现时,比较明智的做法是将它保留在系统中,只要它不涉及违法的内容,就不要做删除一类的处理。这是个比较敏感的问题,涉及从零售商到供给商等一条商业链条上的共同利益。你可以将负面评价转达给客户或相关合作伙伴,在协商后共同处理或由相关环节的代表进行回应<a class="eLink" href="http://beforweb.com">。</a></p> <p><a href="/sites/default/files/images/201110/pricegrabber-conversion-user-experience-usability.jpg" rel="lightbox"><img alt="pricegrabber-conversion-user-experience-usability" src="/sites/default/files/images/201110/pricegrabber-conversion-user-experience-usability.jpg" style="width: 500px; height: 427px; " /></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> </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/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/55" 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/47" 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></ul> Sat, 22 Oct 2011 12:11:56 +0000 C7210 18 at http://www.beforweb.com http://www.beforweb.com/node/18#comments