As designers and developers, we all make design decisions every day. We scribble thumbnail layouts, we research heatmaps, we crunch designs onscreen, we try to think like the user, and we ask colleagues and friends for their opinions and insights on a complex range of issues:
作为设计师和开发人员,我们每天都会做出设计决策。 我们草绘缩略图布局,研究热图,在屏幕上处理设计,尝试像用户一样思考,并向同事和朋友征询他们对一系列复杂问题的看法和见解:
Which keywords should I use for my main navigation? 我应该在主要导航中使用哪些关键字?How should I arrange the layout to keep people from dropping
我应该如何安排布局以防止人们掉落
off?
掉?
Where are my ads most effective? 我的广告在哪里最有效? Can people find my search box easily enough? 人们可以轻松地找到我的搜索框吗?In short, we all do our best to weigh up all the variables, choose the best combination, build it and get it online.
简而言之,我们都尽力权衡所有变量,选择最佳组合,构建并在线发布。
But can you prove it’s the best option?
但是你能证明这是最好的选择吗?
With the official release of Google’s "I Told You So" Tool (otherwise known as the Website Optimizer Tool), perhaps now you can.
随着Google的“我告诉你”工具 (也称为“ 网站优化工具” )正式发布,也许现在可以了。
We were able to run a tidy little test last night that gave us some great results. I’ll run you through our trial.
昨晚我们进行了一个整洁的小测试,使我们获得了一些不错的结果。 我会陪您进行审判。
If you’ve visited sitepoint.com in the last few days, you would have found it difficult to avoid seeing our founders (Mark and Matt) in a chicken suit and Moose hat respectively (perhaps courtesy of some "Photoshop persuasion" from yours truly).
如果您最近几天访问过sitepoint.com,您将很难避免看到我们的创始人(马克和马特)分别身穿鸡服和Moose帽子(也许是由您的“ Photoshop说服力”提供的) )。
As we have never really discounted any of our kits before, my design brief was to make sure everyone who visits the site knew about it. I’m generally loathe to fiddle with our site header banner area but made this a temporary exception.
由于我们以前从未真正打折过我们的任何套件,因此我的设计简介是要确保访问该网站的每个人都知道这一点。 我通常不喜欢摆弄网站标题横幅区域,但是这是一个临时的例外。
The sticking point was the "Our founders have gone crazy!" text. Luke, our Managing Director, was understandably concerned that users may well notice the image, but not understand that it was clickable. He was keen to have the text underlined to reinforce the idea that it was a link.
关键是“我们的创始人疯了!” 文本。 可以理解,我们的常务董事卢克(Luke)担心用户可能会注意到该图像,但不知道该图像是可单击的。 他渴望在文字上加上下划线,以加强它是链接的想法。
My personal view was that the image and its positioning was radical enough to motivate users to interact with it, and that the underlining would visually detract from the site without getting many more clicks.
我个人的观点是,图像及其位置足够激进,足以激发用户与之交互,并且下划线会在视觉上从站点上转移注意力,而不会获得更多点击。
My task was to use Google Website Optimizer to prove it either way via a simple A/B split test. (Note: The service is free but you will need a Google AdWords or Google Analytics account to run your own tests. However your testing doesn’t need to involve AdWords.)
我的任务是使用Google网站优化工具通过简单的A / B拆分测试来证明这一点。 (注意:该服务是免费的,但您需要使用Google AdWords或Google Analytics(分析)帐户来运行自己的测试。但是,您的测试不需要涉及AdWords。)
First up, create a new experiment: Once you’ve activated the Website Optimizer on your account, you will be asked if you want to create a new experiment.
首先,创建一个新实验:在您的帐户上激活了网站优化程序后,系统会询问您是否要创建一个新实验。
Multivariate experiments require more set up time, more traffic data to be effective, so I’d recommend sticking to the simpler A/B Experiment option.
多变量实验需要更多的设置时间,更多的流量数据才能有效,因此我建议您坚持使用更简单的A / B实验选项。
Next, set up your test pages: Once you’ve created your experiment, you need two standalone versions of the page you want to test — perhaps index.html and index2.html. This can create other issues, but we’ll talk about them later.
接下来,设置您的测试页:创建实验后,您需要要测试的页面的两个独立版本-也许是index.html和index2.html 。 这可能会导致其他问题,但我们稍后会讨论。
You also need to identify a conversion page — the destination page inside your site to which you’re trying to move users. This could be anything from a blog post or product page, to a checkout page or navigation tab. You’ll need to put code on this page, so it will probably need to be a page on your site, rather than an external destination.
您还需要标识一个转换页面,即您要将用户移动到的网站内的目标页面。 从博客文章或产品页面到结帐页面或导航选项卡,都可以是任何内容。 您需要在此页面上放置代码,因此它可能需要是您网站上的页面,而不是外部目标。
Next, you’ll be asked to name your experiment and tell the Website Optimizer where your three test pages live. You’ll then be asked if it’s you who will be adding the JavaScript tags to your test pages, or if a separate developer team will be doing the deed.
接下来,系统将要求您命名实验,并告诉Google网站优化工具这三个测试页位于何处。 然后,系统将询问您是将JavaScript标记添加到测试页的是您,还是由另一个开发人员团队进行的工作。
I’m assuming that if you’re reading this article, you’re probably a D.I.Y type.
我假设如果您正在阅读本文,则可能是DIY类型。
Either way, the person adding these scripts doesn’t really need any JavaScript know-how, they just have to know their HTML well enough to be able to accurately copy and paste code snippets into their pages.
无论哪种方式,添加这些脚本的人实际上并不需要任何JavaScript专门知识,他们只需要足够了解HTML即可准确地将代码段复制并粘贴到其页面中。
Add the "JavaScript tags" to your pages. Although this is the most technical part of the procedure, Google does a nice job of making it easy.
将“ JavaScript代码”添加到您的页面。 尽管这是该过程中最技术性的部分,但Google在简化过程中做得很好。
You’ll have 4 JavaScript snippets to add to your pages (add one more for each new page variation).
您将有4个JavaScript代码段添加到您的页面中(每个新页面变体再添加一个)。
one at the top of your original page 原始页面顶部的一个 one at the bottom of your original page 原始页面底部的一个 one at the bottom of your alternate page 备用页面底部的一个 one at the bottom of your conversion page 转换页底部的一个Now, to validate your JavaScript. This is one of the nicer aspects of the service. The biggest problem with most services like this is it’s easy to make small cut-n-pasting error at this stage, and I’m sure many people get lost and give up when they can’t figure out where the problem is.
现在,验证您JavaScript。 这是服务的更好方面之一。 像这样的大多数服务的最大问题是,在此阶段很容易产生很小的剪切错误,而且我敢肯定,许多人迷失了方向,并在无法确定问题出在哪里时就放弃了。
Thankfully Google have implemented a nifty inline checker, which allows you add your code, upload your pages and test them without leaving the Website Optimizer tool. And if it does find problems, it points the issues out and offers reasonably helpful advice.
值得庆幸的是,Google已经实现了一个漂亮的内联检查器,它使您无需离开网站优化工具即可添加代码,上传页面并对其进行测试。 如果确实发现问题,它会指出问题并提供合理有用的建议。
When Google gives your green ticks for all your scripts, the only thing left to do is wait for the users to roll in. The tool will automatically divvy up your incoming traffic between your test pages and track the behaviour of users as they exit the page.
当Google为所有脚本提供绿色标记时,剩下要做的就是等待用户加入。该工具将自动划分测试页面之间的传入流量,并跟踪用户退出页面时的行为。
SitePoint gets sufficient traffic to give us usable data in around twelve hours. After setting up the test pages on Thursday night, we had a clear cut result by Friday morning.
SitePoint获得足够的流量,可以在十二个小时左右为我们提供可用数据。 在周四晚上设置测试页之后,到周五早上我们得到了明确的结果。
My main motivation in setting up the test was simply to prove that the underlined text version wouldn’t perform significantly better than the clean version — if they were performed roughly the same, picking the prettier version was a no-brainer.
我进行测试的主要动机只是为了证明带下划线的文本版本不会比纯文本版本明显好-如果它们的表现大致相同,那么选择更漂亮的版本是理所当然的。
In the end, even I was surprised with the actual results. After 4,000 tests, the pretty version was proving almost twice as effective as the uglier underlined version (85.7%). That is a remarkable difference for a seemingly small change!
最后,我什至对实际结果感到惊讶。 经过4,000次测试,该漂亮版本的有效性几乎是下划线版本(85.7%)的两倍。 对于看似很小的更改,这是一个显着的差异!
It also makes you wonder what other things you could be testing…
这也使您想知道您还可以测试其他什么东西……
There are a couple of downsides to this technique.
这种技术有两个缺点。
Firstly, the scripts snippets break HTML validation. Even more infuriating, when I tried to rewrite them so they would validate — i.e. I changed <script> to <script type="text/javascript"> — Google couldn’t use them anymore.
首先,脚本片段破坏了HTML验证。 更令人气愤的是,当我尝试重写它们以便进行验证时(即我将<script>更改为<script type="text/javascript"> ,Google再也无法使用它们了。
It may be possible to work around this issue, but it’s a sloppy piece of coding from Google.
可能可以解决此问题,但这是Google的草率代码。
Secondly, creating two versions of a page does mean that the traffic to the original page will be split. This means your web stats will show a dramatic drop off for that original page for the period of the experiment.
其次,创建页面的两个版本确实意味着将拆分到原始页面的访问量。 这意味着在实验期间,您的网络统计信息将显示该原始页面的大幅下降。
It’s hard to prove either way, but there may be some effect on the PageRank of your original page if you left the experiment running for a long time.
这两种方法都很难证明,但是如果您长时间运行实验,可能会对原始页面的PageRank产生影响。
For me, the slightly disappointing thing is that currently neither Google Analytics or PageRank appear to compensate or adjust their behaviour for their own tool. Hopefully this will be rectified in the future.
对我来说,有点令人失望的是,目前Google Analytics(分析)或PageRank似乎都没有针对自己的工具来补偿或调整其行为。 希望以后会纠正。
Of course, the idea is to determine which page works best as quickly as possible, and make that one the only page. How long this takes is obviously heavily dependent on your traffic levels. We were able to get more than enough data to make a decision in 12 hours, but it would be no good making important decision based on the behaviour of 10 or 20 users.
当然,我们的想法是确定哪个页面尽可能快地运行最好,并使该页面成为唯一页面。 很显然,这需要多长时间取决于您的流量水平。 我们能够在12小时内获得足够多的数据来做出决策,但是基于10或20个用户的行为来做出重要决策并不是一件好事。
Despite a few niggling issues, I’d have to say this is a remarkable service that should be a huge benefit to almost anyone coding pages.
尽管有一些小问题,但我不得不说这是一项了不起的服务,应该对几乎所有的编码页面都带来巨大的好处。
No matter how much you think you know, this tool will very likely teach you something new.
不管您认为多少,该工具都将很可能教会您一些新知识。
翻译自: https://www.sitepoint.com/web-site-optimizer-tool/