文章关键字 ‘译文’

[译文]前车之鉴 — 那些好看不好用的网站案例

2011年09月21日,星期三

尽管”外观服从于功能“这一观点备受争议却被广泛的认可。在设计网站方面,通常是指网站功能的易用性和是否可以方便访客完成自己的目标。

在接下来的案例中,我们将展示那些设计得漂亮但可用性差的网站。可用性差的原因包括:布局混乱不堪,载入速度过慢,导航识别性差。尽管这些网站在视觉设计上很有特色,但很不幸他们可用性的确很差。让我们研究下这些失败的案例避免出现在自己的设计中出现易用性差的情况。

杂乱无序的设计

我看到的是什么网站?我要在那里点击?接下来我该怎么做?设计的杂乱无序是给访客最糟糕的印象。访客不知道设计师所要表达的意图(因为都被隐藏在了杂乱无序的设计中),从而导致访客在未做任何动作之前就要关闭该网页。

 

Creative With aK

导航信息超载!不仅我们不知道要看什么,甚至都不知道应该点击那里。通过鼠标扫描方式查找可点击区域无助于提升网站的易用性。并且,整个网站的载入过程连个进度条都没有。而且更令哥震惊的是,还要花时间搞清楚必须关闭欢迎的窗口才可以点击页面其他地方。栏目里缺少滚动条的内容让哥对藏在里面的内容顿时失去了兴趣。

 

Marc Ecko

Marc Ecko是一个拥有数不清楚生意的成功商人,貌似他也希望许多人了解这些生意。问题是,他展示了太多我们甚至不知道从那里开始阅读页面的内容,该网站还使用了飘忽不定的横向滚动条。坑爹啊!找到所需的内容的确需要相当长的时间。

 

Content Of

即便是已经阅读”关于我们”页面并文字里有许多的随机链接,哥还是很疑惑这个页面到底是不是打酱油用的。最合适的猜测可能这是个人介绍页面,而乱七八糟的链接和找不到导航栏,哥只能带着困惑和不解离开这个网站。

 

There Studio

有一半的圈圈看上去是可以点的,实际上却不能。如果拖拽一个圈圈,它会跳到其他圆圈中去。当然,这些坑爹的圈圈动画效果充分的体现出公司比较xxx的理念,这明显有些过度了嘛!用58秒等待一个动画的确太漫长了。并且,如果你想需要更多的圈圈,点击或拖拉空白区域就会出来,同时也带给访问者更多迷惑。

加载问题

随着跳出率上升,页面停留时间变得越来越短。能立即抓住访问者眼球就变得尤为重要。网站加载时间越长,访问者返回google或facebook寻找下一个合适网站可能性也就越大。加载时间、跳过按钮、无固定导航栏与其他部分都是我们需要思考的点。

 

Coke Light

这是另一个很糟糕的情况,flash设计师强迫用户看介绍动画。没有跳过按钮的介绍动画会让访问者在进入网站前就放弃访问。点击又没立即响应的按钮或是视觉上不像是导航栏的设计将导致访问者失去兴致继续访问即便是足够漂亮的网站。该网站花费许多周折浪费访客的时间才能回到首页将给人感觉进行次”世界之旅”。在网站地图里需要查找隐藏在里面的许多泡泡。

 

Desing Sul

哥从未见到过加载问题如此之杯具的网站。多重加载元素,即使你看到了网页内容实际上还有东西要再次加载。也没有迹象可以表示加载结束了,这样做也让哥非常的困惑不解并且该网站还不易使用。事实上,找到阅读的内容也需要花些功夫,而网站在牛奶卡通包装盒所做的效果与内容根本没有毛关系嘛。

 

Nicola Waibeck

进入网站要花很长时间痛苦的等待,如果接下来打开的网站足够漂亮,易用性再好些也算是能接受的。可惜,打开页面后哥彻底傻眼了,里面每张图片还要继续下载,我去!并且还要强迫看模糊图片。更好的改进是,加载图片时有加载进度条示意正在加载中。如果访客的带宽足够也许问题还不算严重。但如果不是,那么访客很快就会变得抓狂起来。还有那个返回按钮不够明显,这也让哥觉得这个网站很杯具。

导航栏

对于那些信息量大或是栏目结构复杂的网站来说,良好的导航显得尤为重要。你可以想象没有地图的情况下开车或在没有标签的杂货铺里购物有多么困难。导航栏会告诉我们应该去那里,而在下面的案例中的网站导航几乎没有提供任何有用的信息。你甚至可以考虑带个指南针了,因为这些案例实在是太容易让人迷失方向了。

 

EContent

经过漫长的加载后,网站需要访客点击”进入”按钮。好吧,我们点它下。尽管网站上有坨快捷菜单,但很不幸的是这坨菜单并没有引起访客的注意。并且,访客需要将鼠标挪到图片上才能查看子类目。而这些导航按钮需要访客非常仔细的查找才行。

 

Prism Girl

易用性差的网站通常都有同样的通病。当哥在这么漂亮的网站上看不到导航时,就不得不用鼠标乱戳的方式查找链接。这个网站很漂亮但也非常复杂,复杂到我们需要花费一个小时来找链接,但你可能都猜不到点击跟随鼠标的图标方式进入网站。并且,这个网站除了令人印象深刻的设计之外就没提供个毛内容出来!

 

On Toyota’s Mind

缓慢的加载导致访客不明白接下来要做点啥:导航栏的视觉不清晰与难以发现的返回按钮问题一样严重。哥很疑惑:当访问该丰田网站时到底要传递给访客什么样的概念呢?

 

Theologos

无跳过介绍的按钮。无视觉清晰的导航栏。加载很慢。而牛x的是页面与播放的背景音乐竟然是分开的。当网速快的访客访问网站时,网站的动画都可能引起访客的反感。

构架与目录问题

你的网站加载情况良好,你知道访客来你网站想做什么,你的网站有固定的导航。但访客一旦进入你的网站却无法知道你的目录结构。就好比,要吃肉就应该去肉食店,而不是牛奶店。很不幸的是,有些网站就是这么干的。

 

Self Titled

隐藏的菜单与类目不清楚导致网站导航难以使用。当访客想找到他想了解的类目将会是非常困难的。

 

Vanalen

该网站的类目由竖条折叠而成。当哥点击时却提供了非常少的信息。如果是第一次访问该网站,可能需要花点时间才能找出你需要的东西。

 

GripLimited

该网站的确告诉我们要”点击与拖拽”,但这个区域看上去更像是份海报,我很怀疑到底会有多少人知道那里是可以点击的。该网站也的确的意识到了上面说的这一点,于是在页面顶部创建了菜单。但有多大的几率会被人看到呢?

 

Kyle Tezak

这是另一个视觉效果很好但由于糟糕的用户体验会引起访客不爽的案例。网站上没有固定的导航栏,而只是个悬浮着的固定导航条(感谢江列农同学的纠正)。如果要找到联系方式,需要到左下角点击”Information”(信息)。使用更传统的方式将有助于提升访客体验:例如,放一个电子邮箱或是将文案改为”contact information”(联系信息),亦或是在页面底部添加联系方式。这是典型的通过细节提升用户体验的方式。

可视化与滚动条

即便是网站布局并不混乱,导航也十分清晰。但如果关闭了鼠标交互效果或页面不能滚动了,那也就意味着无人可以看到这些内容了。原本可见的元素因为变为不可见会导致访客直接离开你的网站。

 

Real Casual

除非你用鼠标点击不同的区域,否则可点击元素是根本看不见的。点击某个区域后又是长时间的等待,点击后额外增加的效果也在考验访客跳出网站的几率。

 

Lego Click

网页的滚动通常是从左至右,从上到下。而这个坑爹的网站却是从网页底部开始。加上不能关闭的关闭按钮和其他些小问题,你会觉得乐高这个网站很莫名其妙(虽然设计很漂亮)。

 

Journey to Zero

该网站非常巨大,但事实上你打开后根本就不可能知道这个情况。拖动滚动条后也没有提示信息,就离开内容区域。如果你拖拉滚动条太快甚至都可以跑出网站设计部分。而且,回到内容部分也很麻烦。该网站的设计好但也太难用了吧。

 

Faub(现已离线)

这是另一个设计漂亮,但却导航无鼠标交互效果或提示信息。

 

Uniqlo

优衣库网站看上去很美观也很易用。但直到访客添加10件商品到购物车才发觉无法结账。而事实上这根本就不是购物车而是愿望清单。该体验完完全全的把每个使用过的用户都给坑了。

 

Bio Bak

这是另一个拖动方式进行导航的网站,很显然它对于这种导航方式自我感觉非常良好。从视觉/乐趣角度来说是个好网站,但设计公司设计了用户体验很糟糕的导航方式:必须要使用鼠标滚轮才能看到比首屏更多的内容。

小结

设计要服务于网站功能以及访客沟通。如果你的网站同时也能够达到美观,那就一举两得了。设计得美观漂亮仅当网站首要任务是视觉美观才适用。

注意那些无序的排版,尤其是在导航栏与访客首次访问的页面。设计的排版过于杂乱无序会导致访客不知道如何使用你的网站。最糟糕的可能是访客在首个页面没有打开就走掉了。网站访客不喜欢等待。确保网站的加载速度快,并且能让访客知道可以加载完毕所花费的时间。减少访客流失的最小风险是一打开网页就能够吸引他们的注意。

一旦访客访问,你希望他们访问你网站上的某个页面。确保访客可以轻松找到你的导航栏,以及每个导航元素的动作。不要让访客猜测或胡乱点击寻找链接。在有许多内容的的大网站,信息构架与组织尤为重要。要确保访客可以浏览你的内容。确保菜单易识别,节省访客的时间,让访客知道导航可用。

内容的可见性很重要,但许多人都无视它。确保访客可以在最小的分辨率下也可以看到所有你希望他们看的内容。如果你正在为销售产品做设计,确保你的设计是为销售服务的。必须明确你的设计是为推销产品服务的。你的网站越是没为销售产品服务,你赚得钱就越少。

[原版英文]http://uxdesign.smashingmagazine.com/2010/11/25/showcase-of-beautiful-but-unusable-websites/

[译文]http://davidw.me/translate/showcase-of-beautiful-but-unusable-websites/

A/B测试终极指南[转载]

2011年08月30日,星期二

smashingmagazine.com上面的一篇好文章。感谢标点符同学的翻译。我就不重复劳动了。

A / B测试不是一个时髦名词。现在很多有经验的营销和设计工作者用它来获得访客行为信息,来提高转换率。然而, A / B测试与SEO不同的是,人们都不太知道如何进行网站分析和可用性分析。他们并不完全明白它是什么或如何更有效的使用它。本文将为你提供有史以来最好的A / B测试教程。

什么是A/B测试?

A / B测试的核心就是:确定两个元素或版本(A和B)哪个版本更好,你需要同时实验两个版本。最后,选择最好的版本使用。

网络上的A / B测试,即你设计的页面有两个版本(A和B),A为现行的设计(称为控制) , B是新的设计。比较这两个版本之间你所关心的数据(转化率,业绩,跳出率等) 。最后,选择效果较好的那个版本。

测试哪些东西?

选择测试什么取决于你的目标。例如,如果你的目标是增加顾客数量,那么可能测试下列内容:注册表单数量,字段类型要求,隐私政策等。在这种情况下A / B测试的目标是要弄清楚什么阻止了游客注册。需要填写的表单的数量?用户的隐私?还是该网站做了让游客不信任的事情?所有这些问题都可以通过一个个A/B测试获得答案。

每一个A / B测试内容都是独一无二的,单通常测试一下这些内容:

  • 行动按钮的措辞,大小,颜色和位置;
  • 标题或产品说明;
  • 表单的数量和字段类型;
  • 网站的布局和风格;
  • 产品定价和促销活动;
  • 着陆和产品页面上的图片;
  • 页面上文字的长度(少Vs多);

一旦你决定要测试什么,下一步当然是要选择一个合适的测试工具。如果你想要一个基础的免费工具,可以使用Google Website Optimizer。如果你想要功能更加强大的工具,可以使用Visual Website Optimizer  。其他的一些选择都是可以的,建立试验在所有工具中都很相似,所以我们只需讨论一种即可。

你可以通过两种方法建立A / B测试:

  • 在页面测试加载前替换元素如果你测试的是页面上的单个元素,如注册按钮,然后需要在测试工具中设置按钮。当测试时,在A / B工具将在页面给用户前随机替换按钮。
  • 重定向到另一页面如果你想通过A / B测试整个页面,比如说,一个绿色的主题和一个红色主题,那么你就需要创建和上传新的页面。例如,如果您的主页是 http://www.example.com/index.html,那么你需要创建另外一个页面 http://www.example.com/index1.html。当测试运行时,您的测试工具将一部分访问者重定向到第二个网址。

一旦您使用了上面的两种变换方法,下一步是建立转换目标。通常,你会得到一个JavaScript代码,复制并粘贴到游客到达的目标网页。例如,如果您有一个电子商务网站,你正在测试的“立即购买“按钮的颜色,然后您的转换目标将是购买成功后的“谢谢您“页面。

在转换事件发生的同时,在A / B测试工具,记录了哪种页面显示给了访问者。经过足够数量的游客,您可以确定哪个页面带来了最多的转化!建立和运行的A / B测试,其实很简单。

该做什么和不该做什么

虽然A / B测试是超级简单的概念,但是请记住,以下这些都只是我自己的经验。

注意事项

  • 不要分开你的测试情况。始终两个版本同时进行测试。如果您第一星期测试第一版本,第二星期测试第二个版本,你就错了。有可能B版本带来的流量更糟糕,但是带来了更好的业绩,因为两个版本之间的流量始终存在不一样。
  • 不要结束得太早。有一个概念叫做“统计信心“ ,无论你的测试结果明显的。如果你只有少数转换或游客,它都无法确定最终的结果。大多数A / B测试工具都有报告统计,但如果你是手动测试,你可以使用 在线计算器
  • 不要让常客惊讶。如果你正在测试网站的一部分。包括新访客和常客,不要使他们觉得震惊。尤其不要因为哪些可能不会最终实施变化。
  • 不要让你的直觉推翻了测试结果。在A / B测试的结果往往是令人惊讶的或直观的。在一个绿色为主题的网站,一个明显的红色按钮有可能成为赢家。即使红色按钮不容易吸引注意。您要测试的目标是一个更好的转换率,而不是美学,所以在得到测试借过钱不要拒绝任何尝试。

需要做的

  • 知道运行测试多久。结束太早,可能会使你花了时间但是没有得到有意义的结果。结束太晚也不好,因为效果不佳的页面可能影响你的转化和业绩。使用一个计算器,来确定测试多久以后来结束它。
  • 将相同的页面呈献给同一个访客。您的工具应该有一个记忆访问者已经看到的页面的功能。这样可以防止向同一用户显示一不同的价格或不同的促销优惠。
  • 让您的A / B测试在整个网站保持一致。如果你正在测试的登录按钮在多个地点出现,然后一个访问者应在所有的地方看到同样的变化。在页面1显示一个样子,在页面2显示两外一个样子,会使试验结果被干扰。
  • 做很多的A / B测试。让我们面对现实吧:你的第一个A / B测试可能会无效。但是不要绝望。一个A / B测试只能有三个结果:没有结果,不好的结果和好的结果。优化转换率的关键是要做大量的A / B测试,把所有的好的结果拼接起来,最终推动业绩。

经典A/B测试案例研究

这里有一些如何进行A/B测试的案例研究。

Writing Decisions: Headline Tests on the Highrise Sign-Up Page 37Signals测试他们的价格页面的标题。最终发现, “30-Day Free Trial on All Accounts “比原来的“Start a Highrise Account. “多产生30 %以上的订单。

“You Should Follow Me on Twitter Here” (Dustin Curtis) 这是一个用来测试召唤用户在Twitter上关注自己的试验。. Dustin 发现提示文字是“You should follow me on Twitter here” 的效果是“I’m on Twitter.” 173%

Human Photos Double Conversion Rates 从两个不同的A / B测试将在网站上增加转换率的人的照片:一个令人令人惊讶的结论,A/B测试两张图片,将真人照片放在网站上会获得一倍的转化。研究说明,我们潜意识被照片吸引了。

Google Website Optimizer Case Study: Daily Burn, 20%+ Improvement (Tim Ferriss) 一个将用户选择减少的变化使转化提高了20%,最终的版本在细节和文字上更易吸引目光。

Two Magical Words Increased Conversion Rate by 28% “It’s free” 这个单词增加了注册按钮点击次数的28%, 测试结果表明,在行动召唤上一些很小的变化会带来令人惊讶的结果。

Changing the Sign-Up Button from Green to Red 依靠A / B测试, CareLogger把注册按钮从绿色修改为红色增加了34%转换率!

Single page vs. multi-step checkout 如果你有一个在线商店,很常见的就是支付流程。这个A / B测试发现,多个支付流程比单个支付流程完成的销售更好。

“Mad Libs” style form increases conversion 25-40% 打败传统的智慧,此A / B测试发现一段风格形式输入字段比传统形式的布局更好。

Complete redesign of product page increased sales by 20% 一个软件产品的公司重新设计他们的产品页给它一个现代的外观和增加信任模块。最终结果:他们成功地增加20 %的总销售额。本案例研究证明了设计对销售的影响。

Marketing Experiments response capture case study – triple digit increase in conversions 通过优化邮件地址获取提高了258 %。重点是消除所有的干扰,并要求游客只需提供电子邮件地址。使用亚马逊礼品卡让他/她的完成个人资料。

A/B测试工具

有许多侧重点,价位和功能不同的A / B测试工具,这里是一些:

一些深入研究的A/B测试资料

如果你已经读到这里,那么A / B测试大概已经激起你的兴趣。在这里,有一些非常好的A/B测试资源。

寻找你下一个A/B测试的灵感

一些介绍性文章

A/B测试中的数学

摘自:http://www.biaodianfu.com/a-b-testing.html
原英文版地址:http://www.smashingmagazine.com/2010/06/24/the-ultimate-guide-to-a-b-testing/

[译文]关于A/B测试批评的反驳

2010年12月12日,星期日

最近,A/B测试在互联网各界都受到了甚至是不公正的批评。这些批评包含了A/B测试的一些相关要点,但基本论点是站不住脚的。这些批评混淆了(例如,测试红色与路色按钮的区别或是其他)与A/B测试方法之间的关系。现在让我们看下最近在网络上的些争论,为什么他们的批评是没有根据的。

争论一:A/B测试与局部极小化

Jason Cohen在他的文章《Out of the cesspool and into the sewer: A/B testing trap》中文翻译版本:《[译文]小心A/B测试的陷阱:从水沟流入下水道的水》中认为:A/B测试往往得到的结果是局部最小值,而非真正想得到的全局最小值。对于那些把页面上每个区块作为提升转化率的部分,而又不清楚局部最小值与全局最小值区别的人来说。这就好比说,在网页里每个区块都是都是个变量:这些的数值自然越低越好。通过下面来自jason Cohen的图 ,就可以知道出局部最小值与全局最小值的区别。

即便是在jason文章里,争论的焦点也不在于A/B测试,因为激进的调整页面并使用相同的测试方法也可得到全局最小值。因此声称局部最小值是A/B测试陷阱是不公平的,因为这与A/B测试方法根本就没关系。相反,在争论中却揭示出微调并做测试的方法是徒劳无功的。

那么,如果A/B测试没有问题,那么是局部最小值的问题吗?即便打了折扣的局部最小值的理论是错误的,答案依旧是否定的。上面的图片展示了非常浅显易懂的一维度曲线。你可以把x轴当作背景色y轴当作跳出率。Jason的文章可以归纳为:如果测试了一组不同的蓝色,你可能减少跳出率。但如果你尝试着将颜色改掉(例如,黄色),你可能会得到可能是最低的跳出率。

下面是本争论的两个问题:

1、你永远都不知道是否已经得到了全局最低值

全局最低值仅存在于理论中。让我们继续之前的改为黄色背景得到跳出率全局最小值的范例。在进一步的测试中,如果我们发觉没有背景色得到更低的跳出率该怎么办?或者放置张可爱小猫的背景得到更低的跳出率呢?问题的关键点在于,除非可以把跳出率降低到0%(或转化率达到100%),否则你将永远怀疑自己是否达到真正意义上的全局最小值。

另一个检测是否找到全局最小值的方法是穷举所有可能性。理论上,你页面仅修改背景色(你不能使用背景图片,因为你老板讨厌用背景图)。那么你可以将所有可能的颜色尝试一遍并取其中最小值的方案。在穷举所有可能色彩中,那个得到最小值的背景色就有可能是全局最小值。这就带出了下一个问题…

2、这不仅仅是背景色的问题

当优化页面时,你需要面对成百上千的变量(背景色只是其中的一个)。标题、文案、布局、页面长度、视频、文字颜色、图片这些仅是其中的一小部分变量。优化页面取决于页面所有的一切。这意味着之前看到的曲线不只是我们所见到的一维的。在现实中,它是被上千个变量影响着的多维结构。

再强调一下,把图中的山峰想像成你的转化率(或是跳出率),变量在不同的维度上(尽管貌似就只有两个变量,但事实上有上百个)。与一维的例子不同的是,在真实页面上穷举所有可能性是不可能的。因此,你不必刻意去追求全局最大(最小)值。吸取教训:接受局部最小值。

争论二:A/B测试的细微改版

SEOMoz的Rand Fishkin写了篇《Don’t Fall Into the Trap of A/B Testing Minutiae》中文翻译版本:《[译文]不要落入A/B测试的局部最小值陷阱中》的文章,在文中他重申了Jason关于不要浪费时间在测试页面细小元素上(如,标题,文字等)。他的主要论点是:使用细微改版得到局部最大值的方法花费了太多精力和时间,这样做并不值得。下面的图片来自他的博客,稍有调整。

首要指出的是机会成本不是需要足够的时间来测试(这可能需要以几周时间),而应该是设置测试的时间(这需要几分钟)。一旦设置好测试,就几乎是自动的,其风险仅是设置测试时花费的时间。如果,投资15分钟的时间可以进行次按钮颜色测试最终的结果可以提升1.5%的转化率,这还有什么错误吗?

许多A/B测试工具(包括我启动的visual website optimizer)可以很容易的进行小的测试。这些测试工具可以在后台监测测试,如果结果不理想就会自动停止。那么做这样的测试会有什么样的风险呢?我只看到好的一面:增加了销售额与转化率。
Rand为了证实自己的观点,他给出一份最近的Basecamp 首页重新设计稿,该设计将Basecamp转化率提升了14%。你能想像得到进行这样的一次重新设计(相比于改变按钮颜色测试)所带来的影响吗?事实上,由于曲线是在于多维度上的,一个完全的重新设计有很高的失败概率。复杂的重新设计导致失败的可能性要比改动一个按钮的颜色大得多。因为我们从来没有听说过重新设计导致失败的案例眼睛,我们也不能就此认为版面大幅度的改动要比版面微调的效果好(尤其是,版面大幅度改动所需要的投入与时间要比版面微调多得多)。

通过局部最小值,你至少知道转化率正在增长,这是往增长利润前进的方向。但这并不代表说将放弃追求全局最小化的目标。全局最佳就像是世界和平:很难达到目标,但我们一直朝着正确的方向努力。要吸取的教训是:理想的策略包含了小测试(红色与蓝色对比)与版面大幅度改动这两者。跳过转化率曲线山脉,可以确保你不断的找到更好的转化率。

争论3:

Jeff Atwood 写到电影《偷天情缘》( 译者注:电影中的男主角是个气象预报员,在去一小镇报导当地的土拨鼠日庆典后。第二天醒来发觉时间依旧停留在前一天的土拨鼠日。昨日的一切又重复上演。无论他如何选择渡过这一天,他都无法前进一步。 )与A/B测试相比,得出结论由于男主角失败了所以A/B测试也会失败。在jeff的所有比较中,他认为A/B测试缺乏激情并且扼杀创造力。他继续引用Natha Bowers的一tweet:

A/B测试就像是张砂纸。你可以用它优化细节,却不能用它创造新东西。

谁能声称A/B测试可以创造新东西呢?创意来自思维而非工具。这论点可以应用于画笔:

画笔好像一根棍子上粘了些毛发。你可以用它来戳你的猫,但你不能用它来创作东西。

A/B测试好比是个画笔,它只是一个工具如别的工具一样。它有自己的特性与局限性。它没规定你可以用来测试的东西;因此诶它也就不能约束你的创意。不管使用A/B测试与否,你可以使用自己全部的创意与想法为你的网站进行全新的设计。通过它可以使得你所用于网站的设计与技术更加合理,并评估新的设计是否比原有的更好。记住:A/B测试仅仅是一种方法,而不是设计指导。

总结:

重申上述三个点所得到的教训:

接受局部最小值,因为你永远不可能得到全局最小值。细节测试仅需要花费几分钟时间,但获得的潜在收入将远远超出花费这几分钟的价值。

  1. 通过细节调整与重新改版的方式这两种方式不断的探索更好的方法提升转化率。
  2. A/B测试仅仅是个工具,它不会扼杀你的想法(事实上,当在设计时你需要更多的想象力)。
  3. 最后,不要觉得做A/B测试会产生任何罪恶感。

原文地址:《In Defense Of A/B Testing》
译文地址:《关于A/B测试批评的反驳》

[译文]不要落入A/B测试的局部最小值陷阱中

2010年12月9日,星期四

在Jason Cohen最近的一篇文章英文版:《Out of the cesspool and into the sewer: A/B testing trap》 | 中文翻译版本:《[译文]小心A/B测试的陷阱:从水沟流入下水道的水》引起业界广泛注意与深刻反省。许多在网上营销的人都知道A/B测试所带来的能量:可以提高点击量、用户注册数量与转化率。可使访客在页面上进行动作可能性的百分比更高。
然而这些举动是充满着危险的,因为这些过程都是通过我们人为的揣测、设计、制作和测试得出来的。最不易引起注意的是许多内在的危险源自于测试内容是我们自己选择的。
“局部最小值”示意图

这个现象非常的确有趣,并且有时值得去测试landing page上的每个独立元素。但这种做法通常下不适合于在产品或landing page的刚开始阶段。正如转化率专家指出的:“我们需要把它们先挂到墙上观察其表现”的方法可得到小改进。但研究访客的问题与解决访客的这些问题是完全两回事。

问题太简单了以至于很多人认为很容易解答。

具有简单问题回答的测试页面

因此,提升转化率所需要做的就是改变按钮的颜色。

你之前所读过的案例或许类似于下面的样子:

  • 将按钮的颜色从红色改为绿色获得72%的提升
  • 使用“承诺复选框”后将转化率提升了11%
  • 如何添加“免费的”提升28%
  • 人头像照片将转化率翻倍
  • 不知名的Twiitter follwing 命令测试

在上面所述的案例中,由于某些简单的改动使得转化率或点计量大大的增长,从而得到广泛的赞赏并且越来越流行。问题是,这是个例而非规律。事实上,这就是这些案例变得有新闻价值并得到如此多关注的原因。这不是说,你就不应该了解这些案例或是不接受这些案例中有价值的部分 (事实上你应该吸取有价值的部分)。但案例中的做法可以让市场人员的心理产生错误想法。

鲜有网站具有通过改变按钮的颜色或更改标题摆弄下文案就可以将转化率大大提升的经验。如果你有充分的理由觉得自己是个外行,那么就下决心去学习吧。只是要注意:通过小变化就可以产生积极的影响不是个事实。因为,你根本付不起之后花费的时间与精力。

使用简单令人信服的数学模型消除干扰

假设你在转化率提升方面做得非常优秀 – 对于你来说A/B测试与多变量测试是非常简单的事,在这方面你有很好的基础。在处理landing与测试版页面方面得心应手。
在这些理想的情况之下也会聚集着成堆的问题:

花费几周的时间去获得小小的增长是非常不值得的。

要知道,每次测试都需要花费大量的时间才能得出令人满意的数据。并且,更多的小规模测试(收益不多的测试)将花费更多的时间,这是要改为使用新的想法做大改动的原因。这也不是唯一要改变的原因。假如你对一个自己满意的页面/创意开始测试里面的元素-优化局部最小值。你也许需要4-6个月的时间,然后整体转化率提高了5%你觉得很满足了。

直到…

你开始实施另一个新想法大改动,发觉在测试中改进得更好。这就是我所推荐的方式:始于新想法大改动,省略那些想当然的测试。让你的用户先使用较好的那个方案,然后对其进行优化。

你应该进行的测试

什么是我所说的“新想法”与“大改动”呢?37signals昨天做的Basecamp页面重设计提供了个很好的例子。

他们记录到新版本比旧版本改善了14%。并且,现在他们可以考虑是否需要重新设计新方案或是优化在新版本中的小元素了。当然,这个小测试所取得的数值并不像有些会得到更大幅度的提高。我认为他们在用正确的方法做事。对于旧版本来说一个小的改动可能提升了相当多。而对于新版本来说,在一开始就有更高的转化率基数,因此许多的小改动都得益于更高的基数。
另一个很好的范例是:关于转化率专家为SEOmoz自己做的案例研究。该测试中PRO landing page的转化率提升了52%。额外的,在今年的4月份,我们创建了一个简短的,更少介绍的类landing page,该测试以小时为单位。我们希望它能够击败老版本页面。经过几周的测试后,这个页面没有获胜。接下来的夏天,我们将测试一些完全不同的版本以期待打败现有的页面版本。
在Stephen Pavlovich的文章里很好的描述了如何提高转化率与测试方法。在他的pdf很简洁的列出这些问题:

遵循这些步骤,不要沉迷于细节中。你将会使用自己的方式得到期望的效果。

英文原版地址:《Don’t Fall Into the Trap of A/B Testing Minutiae》
中文翻译版:《[译文]不要落入A/B测试的局部最小值陷阱中》

顺便提下,细心的同学应该能猜到了:《[译文]不要落入A/B测试的局部最小值陷阱中》《[译文]小心A/B测试的陷阱:从水沟流入下水道的水》是为接下来的:《In Defense Of A/B Testing》做的铺垫。

敬请期待!!

[译文]小心A/B测试的陷阱:从水沟流入下水道的水

2010年12月5日,星期日

当本应该流入下水道的水,却停滞在水沟时。A/B测试就是个陷阱。

你不觉得A/B测试其实是类似于液体那样工作的吗?如果是不,那么我将给出正确的缘由。

在奥斯汀的某地的院子里经常有些深坑。依照常理说,水可以自然的流到大街的下水道里,但在重力作用下的水并不是这么工作的。

水总是在寻找院子里最低点,这个方法很狭隘。水并不考虑全局关系—即流到最低的地方。而是流向附近最低点。水并不知道越过栅栏就可以流到更低的地方,如:下水道。

在数学理论上,水达到的最低点不是“全局最小值”而是“局部最小值” 。也许水这是在一木障林了。

也许A/B测试有时也出现正如上述的情况

典型的A/B测试就像是这样:开始于某一点,然后改动其中一处。也许将标题由“酸奶酪将你挤垮?”改为“如何知道酸奶酪坏掉了?”然后进行测试,其中一个胜出。接着你又继续另外个测试“酸奶酪是好还是坏的?”将你改进的诸如此类的想法付诸行动后。一点一点的你会觉得收入也会随之增加。但事与愿违,往往不是这样的。

时常发生的情况是:做的小改动几乎起不到任何改进作用。并且,你很难意识到这一点。这时,你也许尝试放弃,但这也许是错误的。

你已经知道数学家所说的“局部最小值”也就是我说的“臭水沟”。 你要测试的是院子里流入最低点的水。彻底改变你的观点、话语、布局、价值主张、颜色,或是目标受众可能揭示的新的,断续的,不能增长的变化。真正的关注点在下水道(全局最小值—译者注),你需要越过障碍。由于全新地方寻找的利益有时要比改进有更好的提升。你需要从起点开始寻找那些不连续的点。

做好上述的事情你需要做好两方面:不仅需要将A增长到A2,也需应用于不同于A版本的B版本。这样一来,即可以得到由于小调整带来的增长,也可以通过改进某些地方来获得提升。这也许可以让你的收益增长的更快。

当你在玩弄新想法与新个性的时候,也需要有些微小的变化。

英文地址:Out of the cesspool and into the sewer: A/B testing trap
译文地址:《[译文]小心A/B测试的陷阱:从水沟流入下水道的水》

如何更好的自定义微博背景

2010年06月17日,星期四

从最早开始用twitter,到后来被伟大的河蟹之后就改用微博了,前前后后因为河蟹原因搬家好多次,也用过好几个类twitter的网站。发觉越是搬微博,越是不敢随便发言,越是不敢随便发言就越是喜欢顶发言。想起某个童鞋的一句名言:“成熟就是放在心里面不说出来”,在天朝发表言论还真是茶几上面的杯具了。

小插曲:

关于伟大的河蟹您的观点是(本投票参考某网站的一次经典民意调查投票):
a、很好;
b、很强大;
c、以上两者均是;

您的选择是:[ ]

在国内,类twitter的网站叫做微博,不过都是刚出来不久功能还不够完善。由于本人是做设计的,就想着折腾搞搞自己微博的样子,在smashing magzine上找到篇好文章,可以在里面参考到许多的范例。

修改好微博背景后,就顺便翻译《Twitter上值得借鉴的背景范例与实践》一文,里面有些设计手段值得借鉴。正所谓他山之石,可以攻玉。以便于大家更好的个性化你自己的微博。

微博出来没有多久的时间,自定义的功能还不够完善。下面介绍的一些方法在某些微博上面可能现在还不能够实现,不过相信随着微博的流行,自定义界面应该是迟早的事情。因此,如果想设计出漂亮的微博,就从这几个方面考虑起来吧。

微博的背景是我们设计重点,它其实就是css中的background属性。

看了许多的微博,他们的信息框架组合如下:

能改动的包括背景图片、部分文字颜色。其重点是背景图片的设计。

通常通过css定义背景图片由下面几个属性控制,因此从理论上说微博的背景可从下面的几个方面思考设计:

• background-color(背景颜色)
• background-image(背景图片)
• background-repeat(背景图片是否可重复)
• background-attachment(背景图片是否可以随着背景滚动)
• background-position(背景图片居网页的位置、上中下左右)

同时,也希望微博网站在改进自定义背景的过程中将这些属性增加进去。

接下来,看看twitter上设计的漂亮界面:

Adamplitt-a 之 Twitter上值得借鉴的背景范例与实践

Adamplitt-b 之 Twitter上值得借鉴的背景范例与实践

@gaksdesigns

Gaksdesigns-a 之 Twitter上值得借鉴的背景范例与实践

Gaksdesigns-b 之 Twitter上值得借鉴的背景范例与实践

@spurrachel

Spurrachel-a 之 Twitter上值得借鉴的背景范例与实践

Spurrachel-b 之 Twitter上值得借鉴的背景范例与实践

更多请查看:《Twitter上值得借鉴的背景范例与实践》

[译文]Twitter上值得借鉴的背景范例与实践

2010年06月12日,星期六

Smashing杂志(@smashingmag)在Twitter上已经快一年了。Twitter是个很好的媒介工具,通过它我们与读者们建立起了联系,讨论与设计相关的话题,并且还赠送些不错的奖品。然而,这一年内我们的twitter依然没有属于自己的背景,现在是到了改变的时候了。为了能做个出色的背景,我们想先了解下其他设计师是使用何种方式方法做出漂亮的界面。

twitter上的个人资料页是唯一可以用来展示个人视觉形象与尽可能多的额外信息地方,设计好个人资料页面要比发布单个tweet能传递给读者更多的信息。你可以通过改变背景图片、文字与超链接颜色来自定义个人资料页。这就如同更换皮肤一样简单,仅仅通过更换背景图片可以让设计师设计出非常有个性的页面。

本文主要目的是介绍使用不同的方法设计出独特、让人印象深刻的twitter页面。在这之前,解下twitter的个人资料页的结构是很有必要的。

Twitter 的个人资料页

最值得注意的是twitter 个人资料页内容宽度被固定为765像素,区块居页面中间放置。这样的布局很好,这意味着在高分辨率显示器上可以将你的背景图片展示在两边空白的区域上了。

Twitter上值得借鉴的背景范例与实践

Twitter上值得借鉴的背景范例与实践

其他几个需要记住的是:

  • 时间表(timeline)背景一直是白色的
  • 菜单条(menu bar) 背景一直是白色的
  • 页脚栏(footer bar) 背景一直是白色的
  • logo一直是twitter的logo
  • 图片可以替换
  • 可以改变文字颜色、超链接颜色、侧边栏背景色
  • 可以改变背景图片与背景颜色
  • 也可以平铺背景图片
  • 背景图片开始位置一直是左上角

如果你仅仅是对设计个漂亮的个人资料页感兴趣,你仅仅需要一张很炫的背景图,并自定义文字、超链接颜色和侧边栏颜色。但如果你希望还可以展示品牌与额外的联系信息,就需要在背景图片上花更多的心思了。

技巧与方法

下面是些个人资料页,理解这些技巧与方法,将他们运用到属于你自己的背景之中去吧。请记住,许多的个人资料页用到不只是一种技巧,你应该根据自己的需求将这些技巧混合的运用起来。

 

将背景与时间表(timeline)/侧边栏合并

这或许是下面列举的方法中最少用到技术的方法,通过将将背景与timeline(时间表)/侧边栏合并,你可以创做出一个看上去非常独特的页面。

@adamplitt

Adamplitt-a 之 Twitter上值得借鉴的背景范例与实践

Adamplitt-b 之 Twitter上值得借鉴的背景范例与实践

@gaksdesigns

Gaksdesigns-a 之 Twitter上值得借鉴的背景范例与实践

Gaksdesigns-b 之 Twitter上值得借鉴的背景范例与实践

平铺背景与其他图片的组合

Twitter可以指定背景图片是否平铺。将这两者结合就可以让你的个人资料页显得与众不同了。

@spurrachel

Spurrachel-a 之 Twitter上值得借鉴的背景范例与实践

Spurrachel-b 之 Twitter上值得借鉴的背景范例与实践

使用头像关联内容

你的图片(它可以是一张头像,logo或照片)是你在twitter上的主要标识;每次你向你的粉丝发tweet时,它都会被展示在每个tweet的下方。比方说,你使用的背景图片的某些地方与你的profile图片有关联,在你的图片里可以包含更多关于你或你的品牌的信息。换句话说,你可以在你的logo与品牌识别之间建立起某种必然的关系来强化二者之间的关联。

@Doubleolee

Doubleolee-a 之 Twitter上值得借鉴的背景范例与实践

Doubleolee-b 之 Twitter上值得借鉴的背景范例与实践

@mailchimp

Mailchimp-a 之 Twitter上值得借鉴的背景范例与实践

Mailchimp-b 之 Twitter上值得借鉴的背景范例与实践

通过页面层叠效果展示更多内容

如果你已经建立好了视觉识别,你可以通过页面层叠的效果展示给用户在twitter之后的内容。这种方式给你想设计什么就设计什么的自由度,因为你已经不需要再考虑与twitter页面设计上、色彩上的相互整合了。

@sitepointdotcom

Sitepointdotcom-a 之 Twitter上值得借鉴的背景范例与实践

Sitepointdotcom-b 之 Twitter上值得借鉴的背景范例与实践

@benek

Benek-a 之 Twitter上值得借鉴的背景范例与实践

Benek-b 之 Twitter上值得借鉴的背景范例与实践

在个人资料页上增加自定义侧边栏

接下来的profle是使用了前面第一种方法的特殊应用:通过增加侧边栏到布局中。你可以增加这样的面板来高亮那些你希望给用户看的内容。

@aaronmillerillz

Aaronmillerillz-a 之 Twitter上值得借鉴的背景范例与实践

Aaronmillerillz-b 之 Twitter上值得借鉴的背景范例与实践

@robingood

Robingood-a 之 Twitter上值得借鉴的背景范例与实践

Robingood-b 之 Twitter上值得借鉴的背景范例与实践

@sickbrain

Sickbrain-a 之 Twitter上值得借鉴的背景范例与实践

Sickbrain-b 之 Twitter上值得借鉴的背景范例与实践

展示你自己

在社会媒体世界里,你自己就是品牌。通过twitter你可以成为社会媒体的发布者,通过非常有个性的方式展现你自己来强化你的网站相关品牌与联系。

@problogger

Problogger-a 之 Twitter上值得借鉴的背景范例与实践

Problogger-b 之 Twitter上值得借鉴的背景范例与实践

@unmarketing

Unmarketing-a 之 Twitter上值得借鉴的背景范例与实践

Unmarketing-b 之 Twitter上值得借鉴的背景范例与实践

使用图标与标识

接下来的个人资料页很简洁,然而通过展示与作品相关的图标或标识却能给给人留下深刻的印象。

@lanesa

Lanesa-a 之 Twitter上值得借鉴的背景范例与实践

Lanesa-b 之 Twitter上值得借鉴的背景范例与实践

@rjacquez

Rjacquez-a 之 Twitter上值得借鉴的背景范例与实践

Rjacquez-b 之 Twitter上值得借鉴的背景范例与实践

增加标题栏

增加标题栏可以让你的个人资料页看上去外观更独特。并且,通过可以通过标题栏将twitter的标识与顶部菜单与你的页面内容分离开。

@thegraphicmac

Thegraphicmac-a 之 Twitter上值得借鉴的背景范例与实践

Thegraphicmac-b 之 Twitter上值得借鉴的背景范例与实践

@elitistsnob

Elitistsnob-a 之 Twitter上值得借鉴的背景范例与实践

Elitistsnob-b 之 Twitter上值得借鉴的背景范例与实践

少就是多

Andre Gide (安德烈·纪德,1869-1951是法国20世纪最重要的作家之一。译者注)曾经说过“上帝与艺术家之间的合作就是艺术,设计的越简洁就越好”。这里列举了些用简洁的思路设计出的图形。

@line25blog

Line25blog-a 之 Twitter上值得借鉴的背景范例与实践

Line25blog-b 之 Twitter上值得借鉴的背景范例与实践

@idesignstudios

Idesignstudios-a 之 Twitter上值得借鉴的背景范例与实践

Idesignstudios-b 之 Twitter上值得借鉴的背景范例与实践

兼容1024px的宽度

如果你在意个人资料页展示在1024px宽的屏幕,你需要基于左上角设计背景图。下面些范例就很好的解决了在不同分辨率下的问题。

@SohTanaka

SohTanaka-a 之 Twitter上值得借鉴的背景范例与实践

SohTanaka-b 之 Twitter上值得借鉴的背景范例与实践

这是另一个很好的方法确保你的个人资料页在1024px与1280px下看起来很相似。

@adamplitt

Adamplitt-a 之 Twitter上值得借鉴的背景范例与实践

Adamplitt-b 之 Twitter上值得借鉴的背景范例与实践

使用字体排版

在twitter背景上使用字体排版会显得与众不同;使用这种方式你可以设计出传递附加信息的又与众不同的个人资料页。

@dickieadams

Dickieadams-a 之 Twitter上值得借鉴的背景范例与实践

Dickieadams-b 之 Twitter上值得借鉴的背景范例与实践

@iamFinch

Finch2 之 Twitter上值得借鉴的背景范例与实践

Gallery-iamFinch 之 Twitter上值得借鉴的背景范例与实践

让显示的内容值得回味

计划性的摆放的元素与位置,你可以在背景上排列出令人回味的感觉,并将案例信息展示给你的读者。你可以创建一种氛围来展示你个人个性与额外的信息。

@sharebrain

Sharebrain-a 之 Twitter上值得借鉴的背景范例与实践

Sharebrain-b 之 Twitter上值得借鉴的背景范例与实践

@iamkhayyam

Iamkhayyam-a 之 Twitter上值得借鉴的背景范例与实践

Iamkhayyam-b 之 Twitter上值得借鉴的背景范例与实践

尽管做你想做的

将你的背景图做成有原创的、创意的、独特的来加强你的网上印象。尝试使用漂亮的个人插画,背景图片与字体排版。确保你的背景图有独立的个性,而不是看起来很普通。你的访问者会在首次访问时就感受到这点。

@ramesstudios

Gallery-ramesstudios 之 Twitter上值得借鉴的背景范例与实践

@NIK0_BELLIC

Gallery-NIK0 BELLIC 之 Twitter上值得借鉴的背景范例与实践

一些好的作品

我们已经讨论了一些关于twitter背景图的表现方式。下面是一些设计的比较好的网站,仅供大家参考。

@MdFilmFestival

Gallery-MdFilmFestival 之 Twitter上值得借鉴的背景范例与实践

@fragments77

Gallery-fragments77 之 Twitter上值得借鉴的背景范例与实践

@happytreefriend

Gallery-happytreefriend 之 Twitter上值得借鉴的背景范例与实践

@LoungeKat

Gallery-LoungeKat 之 Twitter上值得借鉴的背景范例与实践

@ellingson

Gallery-ellingson 之 Twitter上值得借鉴的背景范例与实践

@hootsuite

Gallery-hootsuite 之 Twitter上值得借鉴的背景范例与实践

@G_Obieta

Gallery-G Obieta 之 Twitter上值得借鉴的背景范例与实践

@willbryantplz

Gallery-willbryantplz 之 Twitter上值得借鉴的背景范例与实践

@grant_clark

Gallery-grant Clark 之 Twitter上值得借鉴的背景范例与实践

@hugeinc

Gallery-hugeinc 之 Twitter上值得借鉴的背景范例与实践

@JJunkins

Gallery-JJunkins 之 Twitter上值得借鉴的背景范例与实践

@Baldy67

Gallery-Baldy67 之 Twitter上值得借鉴的背景范例与实践

@thelaughbutton

Gallery-thelaughbutton 之 Twitter上值得借鉴的背景范例与实践

@bickov

Gallery-bickov 之 Twitter上值得借鉴的背景范例与实践

@jayjdk

Gallery-jayjdk 之 Twitter上值得借鉴的背景范例与实践

@nathanhoad

Gallery-nathanhoad 之 Twitter上值得借鉴的背景范例与实践

@robertomas

Gallery-robertomas 之 Twitter上值得借鉴的背景范例与实践

@mayhemstudios

Gallery-mayhemstudios 之 Twitter上值得借鉴的背景范例与实践

@ThirstEase

Gallery-ThirstEase 之 Twitter上值得借鉴的背景范例与实践

@cameronolivier

Cameronolivier-b 之 Twitter上值得借鉴的背景范例与实践

@studio3k

Studio3k-b 之 Twitter上值得借鉴的背景范例与实践

@sixreffie

Gallery-sixreffie 之 Twitter上值得借鉴的背景范例与实践

@TheTwiddict

Gallery-TheTwiddict 之 Twitter上值得借鉴的背景范例与实践

@mountainash

Gallery-mountainash 之 Twitter上值得借鉴的背景范例与实践

@Hallisar

Gallery-Hallisar 之 Twitter上值得借鉴的背景范例与实践

@mywayhome

Gallery-mywayhome 之 Twitter上值得借鉴的背景范例与实践

@TheArtificer

Gallery-TheArtificer 之 Twitter上值得借鉴的背景范例与实践

@webdude75

Gallery-webdude75 之 Twitter上值得借鉴的背景范例与实践

@colourofair

Gallery-colourofair 之 Twitter上值得借鉴的背景范例与实践

@jodyphillips

Gallery-jodyphillips 之 Twitter上值得借鉴的背景范例与实践

@emilychang

Gallery-emilychang 之 Twitter上值得借鉴的背景范例与实践

@ijustine

Gallery-ijustine 之 Twitter上值得借鉴的背景范例与实践

@boagworld

Gallery-boagworld 之 Twitter上值得借鉴的背景范例与实践

@collis

Gallery-collis 之 Twitter上值得借鉴的背景范例与实践

@chrisspooner

Gallery-chrisspooner 之 Twitter上值得借鉴的背景范例与实践

@webb_art

Gallery-webb Art 之 Twitter上值得借鉴的背景范例与实践

@Hicksdesign

Gallery-Hicksdesign 之 Twitter上值得借鉴的背景范例与实践

@rww

Gallery-rww 之 Twitter上值得借鉴的背景范例与实践

@ThemeForest

Gallery-ThemeForest 之 Twitter上值得借鉴的背景范例与实践

@technikwuerze

Gallery-technikwuerze 之 Twitter上值得借鉴的背景范例与实践

@Designfeedr

Gallery-Designfeedr 之 Twitter上值得借鉴的背景范例与实践

@Malarkey

Gallery-Malarkey 之 Twitter上值得借鉴的背景范例与实践

@Trenti

Gallery-Trenti 之 Twitter上值得借鉴的背景范例与实践

@zomigi

Gallery-zomigi 之 Twitter上值得借鉴的背景范例与实践

@carsonified

Gallery-carsonified 之 Twitter上值得借鉴的背景范例与实践

@WiliamAu

Gallery-WiliamAu 之 Twitter上值得借鉴的背景范例与实践

@wpbeginner

Gallery-wpbeginner 之 Twitter上值得借鉴的背景范例与实践

@brandonacox

Gallery-brandonacox 之 Twitter上值得借鉴的背景范例与实践

@inspiredmag

Gallery-inspiredmag 之 Twitter上值得借鉴的背景范例与实践

@guardiantech

Gallery-guardiantech 之 Twitter上值得借鉴的背景范例与实践

@DesignerDepot

Gallery-DesignerDepot 之 Twitter上值得借鉴的背景范例与实践

@carywood

Gallery-carywood 之 Twitter上值得借鉴的背景范例与实践

@designia

Gallery-designia 之 Twitter上值得借鉴的背景范例与实践

@_finderskeepers

Gallery-finders 之 Twitter上值得借鉴的背景范例与实践

英文出处:http://www.smashingmagazine.com/2009/09/18/effective-twitter-backgrounds-examples-and-best-practices/

翻译版:http://davidw.me/translate/effective-twitter-backgrounds-examples-and-best-practices/

译文:如何说服你的用户、老板或客户

2010年03月10日,星期三

无论是在争取与客户签约网站设计或是说服用户从与你联络到合作,我们都需要知道如何令人信服。像在网站设计行业里的许多人一样,我的职业很奇怪。我是兼职销售、兼职咨询顾问和兼职用户体验设计师。某天,我需要先将一个新点子推销给董事会,然后再设计一个电子商务购物流程。然而,在我所做的所有事中的重要环节是:我花费了大多数时间用来说服客户。

作为网页设计师,我们经常需要把客户引导到我们所希望的样子中去。这是一个非常重要的技能。这不是在探讨如何操纵客户的诈骗术,毕竟撒谎让你失去一切。但可通过个人展示让人们更易接受你的观点。也许第一个最关键的方法就是引起共鸣。

1、引起共鸣

最糟糕的做法莫过于在开会或做设计时我行我素。这样会妨碍别人同意你的观点。但如果你了解客户的需求并给予答复,那么对方会更乐意与你合作。

始于倾听

要做到与客户引起共鸣,需要用心的倾听。而阳奉阴违的听显然是不够的。你必须听懂客户所说的和看到客户的痛处,这样你才可能真正的解决问题。

适当的展示

适当展现你的想法,而不是强迫客户接受。让客户知道到自己的收益。如果你真正了解客户的需求,使用些有创意性的表达方法。

让客户了解收益

记住,仅仅将观点解释给别人听是不够的。应该证明如何能真正的帮助客户。例如,与其说“用户将喜欢上这个新功能”不如说,“这个新功能能让用户回来,从而这将大大的提高你收到的回馈的数量”。如果你已经了解对方的需求,接下来就是与他们建立关系了。

2、保持绅士风度

如果你与用户、老板、客户有良好的关系,他们将更乐于接受你的建议。当然,不同的对象建立关系的方法是不同的。与网站用户的关系显然不同于与老板的关系。然而,某些方法也有是共同点。

让对方点头

当我想得到赞同时,我会试着让对方点头,这样做看上去有点傻。点头可以赋予对方积极的情绪。我通常通过用不同的表达方式重复对方的观点。对方显然就赞同你的观点,并且也表明你在认真听,且和对方观点一致。

可以将同样的方法用于网络中。例如,如果我的这篇文章目标人群是网站设计师,那么责怪IE6将得到共鸣。这样就成功的与设计师们建立起了联系。

有热情

有热情是十分重要的。客户想知道你关心他们的项目。老板想知道你乐意去工作,用户想知道你关心交付给他们的服务。然而,许多人在与客户交流过程中缺少热情。他们的态度好像要被击溃一样咄咄逼人。相反,试着充满热情,对方是会被感染的。更重要的是,拒绝那些浑身散发着热情的人是十分不容易的一件事。

效仿对方

你也许听说过效仿对方的肢体语言有助于得到对方得积极的态度。但无论如何都不要刻意的效仿。效仿对方应该是非常自然发生的。也就是说,面对面的沟通是非常有效的方式。如果别人正在效仿你的肢体语言,他们就会变得像你一样。你能有意识做的是应效仿他们的语言或使用相同的术语。

如果你的老板或客户谈论起性价比或成功标准,那就按照你自己的标准来设定。如果你不确定对方懂得某些术语,尽量确保避免使用这些术语。使用彼此都熟悉的约定术语。如果你们使用相同的约定术语,就更有可能建立起一致的观点了。

让对方微笑

另一个的建立良好关系的方法是有幽默感。如果你能够让对方微笑,那么就等于远离了争吵。当然,幽默也要有分寸。过度的幽默会让你看起来很傻。但即便看上去再沮丧的人也喜欢微笑。

所有的这些方法都能建立良好的客户关系,而其核心就是:要坦率

3、保持坦率

你也许会有这样的想法“这家伙疯了。如果客户意识到这一点,他们会不会觉得被控制了?”我的答案是否定的。我对自己所做的保持开放与诚实的态度。我会让我的每个客户了解到所有的一切因为这里没有什么秘密可言。人们讨厌被欺骗。因此,做任何事情,本文中的诚实将建立起我的关系网,而不是欺骗。有两个关键工具可以帮助建立关系网与我的受众。

消除诚信疑虑

许多时候,诚信是消除日渐积累矛盾的最好方法。例如,当我作为销售到客户那里,他们会对我说的任何东西产生怀疑。客户显然已经知道它了。但通过语言表达态度可以向他们展示我的诚信。

愿意示弱

有时候我们想得到所有,从而使我们不在合同条款里的做任何细微让步。以至于最后使得我们变得非常的顽固。

当你承认你错了或是不确定某个答案时客户的反应都无不良反应的。如果有必要,需要说“我不了解”或“我弄乱了”。人们将尊重你的答复。最好的例子是Flickr博客发布的文章那篇文章“某些时候我们搞砸了”,在这篇文章里Flickr对设计上的一些问题道歉。通过此方法,可证明了你的诚信并且缓和了那些抱怨。当然,愿意展示弱点需要些信心,并且少量的批评使得你易于说服对方。

4.有信心

人们都喜欢有信心的领导。我们跟随那些有明确的目标与有信心的那些人。有信心的交流是非常重要的。把自己视作专家,带有权威的说话。

自信但不傲慢

自信也意味着你敢于承认错误。一个真正自信的领导不会每次都给出全部解决方法。允许其他人表达自己的观点,这才是自信的关键表现。只有那些缺乏自信的人才害怕不同有的观点。

不必每次都获胜

收起你的好斗意识。做出些让步而达到目标也是可取的。让步不会让你丢失立场。某些时候你不得不做些小让步才使得合作继续下去。别让你的自尊心妨碍它。如果某人感觉即将赢得争论,他们将变得乐于接受你的条件。有些时候妥协是可行的。这要比被拒绝或产生对立的意见更好。

5.积极主动

无论是与要求过多的老板、难处的客户还是吹毛求疵的客户,你应加深他们对你态度与服务的认可。持续保持有帮助热情的形象。在客户服务中,有时会引发与其合作的新里程碑。与你的老板在一起时,这有益于帮助他们了解最新的计划。无论什么时候,使用一个无用的好名声与负面的名声是最糟糕的事情。

总结

没有什么绝对的方法能让你绝对说服客户又确保你是正确的。在未来的日子里,说服别人的诀窍包括:尊重、乐意聆听他们的意见、用对方了解的术语展示你的想法。

原文地址:http://www.smashingmagazine.com/2009/10/11/how-to-persuade-your-users-boss-or-clients/

译文地址:http://blog.uxredesign.com/how-to/how-to-persuade-your-users-boss-or-clients/

译文:如何精简用户界面

2010年01月2日,星期六

简洁、易用、友好、直观。这些词语经常被提及,但在执行过程中经常被遗忘。这是因为软件功能的复杂性所导致的。如何处理好软件的复杂功能往就可以决定它的命运。一个复杂的界面会让用户不知如何操作。如果,减少复杂的操作过程并精简操作界面,那该软件的用户体验就大大的提升了。

去除无用的功能

研究发现:80%的用户仅仅使用软件20%的功能。而那些没用的功能不仅浪费开发时间,也使得软件更加难以使用(这些功能对用户的阻碍作用大于有用价值)。软件试图尽力可以把任何事都做好。而一个成功的软件应是简练精干的,可单独智能化的解决单个问题。

精简的软件可通过削减功能得到。通过默认去除的方法判断一个功能是否有必要保留。将软件所有的功能进行真正的筛选。如果该功能不能帮助大多数用户完成日常的任务,那么可以将其排除在外。删除功能是艰难的,当整理完毕后看到用户顺畅的使用软件。你就会知道多么值得去做这件事情了。

隐藏复杂部分

如果实在无法去除某个复杂功能,那么就将其隐藏。通常情况下,不常使用的功能要比经常使用的功能占据更多的屏幕空间。而优秀的界面应该确保最常用的功能在最显著的位置,将不常用的功能隐藏。

当我们重新设计CMS系统时,我们无法去除一个复杂的功能:批量编辑功能。在之前的版本里,在主屏幕上有一整排的批量编辑按钮。约占据了屏幕30%的区域,但我们发觉很少有人会用到此功能。我们的解决方法是,放置一个小图标并在旁边显示数值以示下拉列表里有几个选项。点击图标或数字则显示下拉列表。通过这种方式节省了大量的空间,也不会干扰用户使用那些最基本的功能。

最小化视觉干扰

我们已经讨论了通过去除与隐藏的方式降低界面复杂性的方法。但减少“视觉感知”的复杂性也是很重要的。最小化视觉干扰将使得界面看上去易于使用。减少视觉干扰的两个方法是:空白与对比。

空白,是指介于各个元素之间的间隙。它应是你默认的布局工具。经典法则之一:如果可以使用空白就不要放置其他设计元素。如果用这种方式布局,你会很惊讶调整界面的空白就可以完成布局了。

虽然使用空白多多益善,但也要尽可能的保证有对比感。设计理论家“ddd”说:设计师应使用最小的视觉变化来表达想法。事实上这就是意味着元素之间要有主次感。

你可以看到修改过的版本有很重的黑线,与之前的边框不同。那个版本视觉干扰更小呢?(当然是原来的更好)大量的空白区域减少视觉干扰并让人觉得更舒适。

做减法、重复使用,循环利用

当软件成形后,问题经常发生在程序的各个结合部分。存在的问题往往可以通过相同方法加以解决。界面中应使用相同的组件。使用相同组件的两个好处:减少开发所需时间;给人一致的使用体验,如果用户学会使用一个操作,他们就可以把相同的操作行为运用到进行其他操作中去。

在设计CMS过程中,我们在表单验证上花费了大量的时间。我们用红色框出无效的区域,甚至增加红色的提示框来说明每个填写表单的环节有多少错误。

在之后的开发过程中,我们在需求列表中增加了版本比较的功能。与其创建全新的框架,不如使用在已有的框架上进行改进。我们用蓝框标出已修改的表单,并使用蓝色提示框标注该区域。通过这种方法我们快速部署到用户已经熟悉的界面上。

重复使用元素是另一种可以减少界面复杂的方法,因为用户可以迅速的熟悉软件。

空白状态不应空白

空白状态是指界面无数据时的样子,如用户初次使用软件。作为设计师,我们花费大部分精力用来设计如何最好的展示内容,但时常忘记如何展示无数据的样子。

如何建立合理的默认值是很重要的。软件的空白状态通常是给用户的第一印象,用户通过第一印象来考虑是否来使用软件。好的空白状态可有助于用户学习使用软件的途径,帮助用户学会初次使用软件的基础操作。

Versions的mac版本显然在程序的空白状态投入了很多心思。在首次运行的时候,程序突出了两大人们可能会用得到的功能。

再次重复:不要忘记空白状态!

相关展示

我们已经见过大量界面混乱,复杂的软件。然而,有效的减少程序的复杂性有点难度。

Invoice Machine 的界面十分的简约。示例显示它非常节约扩展部分并注重细节。
Freckle只是确保你可以跟踪自己的时间。简洁的界面闪现活力,将例行任务变得有趣。
Image Spark黑白色的渐变。界面几乎没视觉干扰,易于使用。
Ballpark有简洁的界面,用色不跳。

Krop,其核心就两个表单:地址与关键词。

Fever网站的整个目的就是减少你与感兴趣博客之间的距离。它通过非常简单独特的方式来实现。
Screenr 是个惊人的简单截屏并发布到Twitter的软件。值得注意的是没有的功能它有,但其他类似软件有的功能它都没有。

Squarespace 在隐藏复杂功能方面做得很好。虽然它是网络的发布平台,它把功能隐藏在一个简洁的界面中。

总结

  • 减掉不必要的功能;
  • 然后隐藏那些不能减掉的功能;
  • 减少视觉噪音并重复利用元素;
  • 使用空白帮助用户;

(翻译略有删减)

原文地址:http://www.smashingmagazine.com/2009/10/07/minimizing-complexity-in-user-interfaces/

译文:15个电子商务设计中最常犯的错误

2009年10月22日,星期四

15个电子商务设计中常犯的错误并如何避免它们 – 在线销售能为许多生意开拓巨大的市场。你的商铺可以全天候营业并且服务于全球市场,而无需在直邮与呼叫中心投资金,它可以引爆你的生意。设计电子商务网站时有许多东西值得注意。电子商务不像将某些购物软件那样将产品放进数据库那么简单。

每天有许多在线零售商会犯许多错误,通过详尽的规划可以避免其中的大多数错误。甚至你已经犯了其中的一些错误,而大多数的都可简单的加以纠正。避免这些错误将极大的提高你顾客的购物体验。

下面是15个电子商务设计中最常犯的错误,并给出如何避免或修正这些错误的建议。开始新电子商务项目或思考如何改进当前的商务网站之前了解这些建议,并遵循这些建议。

  1. 缺少产品详细信息
  2. 隐藏联系信息
  3. 很长或令人迷惑的付款流程
  4. 需要注册帐号来下订单
  5. 不合格的网站搜索功能
  6. 缺少客服选项
  7. 产品图过小
  8. 仅有一张图
  9. 糟糕的购物车设计
  10. 付款方式不多
  11. 没有相关产品
  12. 令人疑惑的导航
  13. 不包含运费信息
  14. 无商品条款
  15. 不把焦点移在产品上

1、缺少产品详细描述

当你在实体店铺购物时,你可以拿起商品感觉它,从各个角度观看它,从产品包装上阅读相关信息。而在线商铺却没有与实物商品的交互。电子商务网站尽量使客户拥有在实体商铺的所有体验。我经常在网上商铺发现产品缺少详细描述。如果客户是因为想希望了解产品详情而离开的,他们想从其他地方了解到更多信息。除非你的网站价格低于你的竞争对手,否则他们将从其他网站购买。

纠正方法:

尽量你所能提供产品信息。这取决于你的产品,可提供包括尺寸、材质、宽高度等在内的相关信息。例如:一家在线服装店,你可能要提供布料种类、尺寸、可供选择的颜色、尺寸列表(通常链接到多个产品的尺寸列表)、重量或厚度、适于穿着的体型、保养事项、关于该品牌与设计师的注释。并且,使用通俗点的话要比简单专业术语更能给客户留下深刻的印象。

例:

raphajacket20x200midwifepatagoniafishingjacket

 

 

2、隐藏联系信息

当客户提供信用卡信息时,他们希望自己正与一个真实的公司打交道。并希望在出现问题时可以与真人咨询并得到所需的帮助。如果你的网站不提供任何联系方式或是隐藏起来不便于客户查找。客户将对你网站缺少信任,然后就是不想和你做生意了。

纠正方法:

把的联系信息放在网站每个页面容易找到的位置上。最明显的地方有:网页头部、侧面导航的上方、网页底部。如果可能提供多种联系方式,如:联系表单、电话号码、电子信箱等客户信任的联系方式。同时要记得,销售的商品越贵或越有科技含量,客户越希望有更多的联系信息。

例:

zapposcontact

wshomecontact

3、很长或令人迷惑的付款流程

这是最能毁坏电子商务的错误之一。尽量简化客户从提交信用卡信息到完成订单的流程。从提交信用卡信息到完成订单之间的步骤越多,客户未完成订购就离开网站的可能性也就越大。

理想的付款流程包括:一个用来给客户确认订单和进入帐单与货运信息的简单页面、一个在提交订单之前简单的确认页面。任何超过这些的页面都将是完成订单的障碍。

纠正方法:

如果你不得不包含其他页面,尝试让页面变得简洁并易于填写。尽量合并页面,对于某些步骤可使用两栏的布局(如,填写帐单和货运信息在同个页面里)以确保页面显得更短。

例:

teefurycart

 

 

4、需要注册帐号来下订单

本条与上面条有关联。如果客户需要在下订单前登录网站,这就是另外个放在他们面前的障碍了。得到订单与收集客户信息那个更重要呢?请记住,先得到后者往往意味着要失去些客户。

纠正方法:

有个简单的解决方法。与其需要客户在下订单前登录,不如在他们下订单结束后提供注册的选项。提供保存帐户信息的选项,便于以后单方便下订单或用来帮助他们跟踪当前订单的状态。许多客户将会选择保存信息。这样,就可确保在顾客不会在没下完订单前就离开了。

例:

ikeacheckoutpotterybarncheckout

 

 

5、不合格的网站搜索功能

如果一个客户确切的知道他想找的商品,多数情况下会使用搜索替代筛选类目与属性选择来找到产品。确保网站的搜索功能良好,并带有属性筛选功能,用来筛选搜索结果。

在一个大型的电子商务网站上搜索一个产品经常会得到上百条结果。没有比超过半数以上的搜索结果不是客户想要的更糟糕的了,这时有一组筛选条件就非常的好了。让顾客通过类目或属性来筛选搜索结果的方法来解决这个问题。

纠正方法:

确保你使用的电子商务程序的搜索功能被良好的构建或是可以通过插件来扩展功能。完美的情况是,一个电子商务程序搜索功能应能让使用者通过关键词查找并能通过网站的类目筛选搜索出来的结果。能让用户按照某个标准排序结果(如:按最流行的、价格从高到底、最新的,等等),并也可筛选掉不符合条件的类目。

例:

designbyhumanssearchuniqlosearch

 

 

6、缺少客服选项

本条类似于前面所述的联系方式问题。当客户有疑问或问题时应保证他们可方便的与网站工作人员取得联系。例如:客户有技术问题、销售问题或想退货保证有明确的方法可与你取得联系。提供可填写的帮助申请表单要比仅提供一个电子信箱地址更带给顾客购物的信心。

解决方法:

 

如果你没有可用的电话号码,可使用通知单系统(一种可自动回答简单问题的系统)来解决顾客的服务需求。确保提交的FAQ内容包含了客户常见的问题。如:退货规则、如何订产品的一部分、如何处置替代品?

例:

ikeacustomerservicewshomecustomerservice

 

 

7、产品图过小

由于在下订单前,顾客无法直观的感受到实物。需要尽可能的创造与提升这方面的体验,而过小的产品图不能有效的做到这点。

纠正方法:

既要提供在产品页面提供大图也要让客户能够点击图片放大。让客户能够在常用的显示器上能够尽可能大的查看此图。这意味着产品图的尺寸应以1024×768像素大小为标准。

例:

behanceimages

bridge55imagesjcrewzoom

8、仅有一张图

提供多张从不同角度拍摄的图片,除非你的产品是数字产品(甚至连这个也需要展示多个图片)。产品的不同种颜色、前、后、左、右、特殊细节的展示都将有益于让客户决定在你这里购买产品,

纠正方法:

该方法比较简单:提供多个图。每个产品以4-5张图片比较好,提供足够的视角使得客户确切感受到是什么样的产品。

例:

designbyhumansimage

freepeopleimagesmoopostcards

 

 

9、糟糕的购物车设计

购物车在电子商务网站中的重要性是难以想像的。它可允许用户添加多种商品、修改商品数量或是商品的其他属性。同时,购物车内的商品信息要确保足够的清晰。

纠正方法:

确保购物车能让客户添加商品,且完成后回到之前的页面。更好的做法是:添加产品到购物车时无需离开当前所在的页面(通过使用迷你购物车)。让你的顾客可修改购物车内商品的数量或删除商品。并且让他们在开始付款前可预览到送货费。

例:

behanceimagescrateandbarrelcartthreadlesscart

 

 

10、付款方式不多

有许多的网站的付款方式仅支持Visa 、万事达卡或仅限于PayPal帐号。没有更多的原因。如果顾客只有AmEx而没有或不想有PayPal帐号怎么办?有顾客没有信用卡想直接通过他们自己帐号的银行付款怎么办?你需要提供多种实际的付款途径来增加你订单的数量。

纠正方法:

使用可让顾客通过主卡来支付的服务,也许也要带有电子付款功能。添加PayPal为可选的以增加你顾客的付款方式,争取他们倾向于从你这里购买的可能性。考虑到不同的顾客偏爱不同的在线付款方式,准备得越是充分就意味着你扩展了你用户的基数。

例:

blueflycheckoutmadebysampayments

11、没有相关产品

当你在实体店购物时会发现相似的商品被摆放在一起,或是可以很方便的找到相似的产品。店家会把电池摆放在电器区,或是将手机套放在手机附近。这种方法同样可以用在网站上,通过追加的方式来增加销售额。

纠正方法:

在电子商务平台的产品详细页面上展示相关的产品。虽然软件不会自动关联产品,但通过平台你可以手动选择与之相关的产品。

例:

saksrelatedproductswethefreerelatedproductsjcrewrelatedproducts

 

 

12、令人疑惑的导航

没有比试图在有令人迷惑导航的网站找东西更糟糕的了。而更糟糕的是不使用类目或区分商品属性来方便找到商品。同样的情况是,网站有类目而无产品或仅仅有一两个类目。

纠正方法:

在把产品归入类目前,要仔细的思考类目与导航元素。确保每个类目都至少有几个产品,或合并小的类目(或是归入相似的大类目中)。确保顾客可以轻松的浏览类目,并加入购物车,否则就应从网站上删除。

例:

instaboxnavwshomenav

ikeanav

13、不包含运费信息

在网站上不包含运费信息是不好的。我曾经取消许多次购买,仅仅是因为对方说“当你购买的商品被批准后,我们会用email通知你确切的运费价格”之类的话。当在线购物的时候,我希望一次性的完成我的订单,而不是等待一封邮件再让我根据运费的高低决定是否下订单。无论什么时候,要在你的网站上包含运费信息。

纠正方法:

许多的快递物流公司在他们的网站上提供货运费计算器,且主流的货运网站提供了计算运费的插件。如果由于某些原因不能使用该服务,应使用足够高的统一运费价格涵盖所有运费价。对于通常比较重或比较大的物件,可在价格列表内包含水运价(这仅是告诉客户标明商品多出来的费用用于何处了)。

例:

blueflyshippingzapposshipping

14、无商品条款

在顾客购买决定购买产品前,他们希望了解你的运输、退货以及其他各种商品条款。没有理由不将这些信息放入FAQ或网站的其他地方。确保商品条款简洁,这样可确保不开心的顾客阅读时不会头痛。

纠正方法:

在网站上使用FAQ或商铺条款明确的展示你网站的条款与每个顾客之间的互动。这些东西可以在今后帮你节省许多的问题。

例:

pureandlittlepoliciesblueflyfaqattiladesignpolicies

 

 

15、关注焦点不在产品上

电子商务网的目的是销售产品(或应至少是这个目的)。如果你的网站过多的关注于钟响呜笛或设计本身,这就偏离了原本的目的。确保网站首要展示的是产品,其他的均为次要。

纠正方法:

设想下产品在实体店的展示方式。当展台内的展示度超过当前要销售的产品时,顾客会更关注展示的产品了。在你的网站上也是如此。确保任何网页的设计元素都是为了更好的展示你的产品。

例如:studiobonsaipatagoniacategorypotterybarn

原英文地址:http://www.smashingmagazine.com/2009/10/08/15-common-mistakes-in-e-commerce-design-and-how-to-avoid-them/