ux设计_忘记UX。 如何专注于以转换为中心的设计

ux设计

Photo: Michael Coghlan

照片：Michael Coghlan

When you start a design project – what do you aim for? What principles do you go by? I’m quite curious to know what goes on in your head.

当您开始设计项目时，您的目标是什么？ 你遵循什么原则？ 我很想知道你脑子里发生了什么。

Over the last few weeks, I’ve seen dozens of new business owners launch their website. This was in an online business course that I was part of. Some of these sites were done by the owners themselves, and a larger number done by professionals who charged a bomb.

在过去的几周中，我已经看到许多新的企业主启动了他们的网站。 这是我参加的在线商务课程。 其中一些站点是由所有者自己完成的，而更多站点是由炸弹炸弹的专业人员完成的。

However, what stood out was the common thread running through those sites. These businesses were all focused on, or at least trying to focus on, their end user. They wanted to please, to provide value, and ultimately seduce potential customers. They put in the research and came up with visually appealing websites, which they thought would provide a great user experience.

但是，突出的是贯穿这些站点的通用线程。 这些企业都专注于或至少试图专注于其最终用户。 他们想要取悦，以提供价值，并最终吸引潜在客户。 他们进行了研究，并提出了具有视觉吸引力的网站，他们认为这将提供出色的用户体验。

Then they waited with bated breath for the subscribers, and the sales.

然后他们喘不过气来等待订户和销售。

And kept waiting.

并一直在等待。

While their marketing efforts kept the traffic coming in, viewers were just not signing up, or buying. It was heart breaking.

尽管他们的营销努力使访问量不断增加，但观众只是没有注册或购买。 真伤心。

No matter how beautiful your design, or how great your user experience, if visitors don’t sign up, or buy, you might as well not have a website at all. A site that dies with happy users but no revenue, still dies.

无论您的设计多么漂亮，或您的用户体验有多么出色，如果访问者不注册或购买，您也可能根本没有网站。 一个死于幸福用户但无收益的网站仍然死了。

Of course, if you’re lavishly funded by VCs and not required to turn a profit in the short term, you can afford to focus entirely on UX and leave revenue to work itself out later (shout out to Twitter).

当然，如果您有大量的风投资金，并且不需要在短期内获利，那么您可以完全专注于UX，而收入却可以留待以后使用(向Twitter大喊大叫)。

But the reality is that most of us don’t have that luxury.

但是现实是我们大多数人没有这种奢侈。

What if, instead of relying on a digital marketer to come in later and fix this situation, we started weaving in the elements of conversions into our designs? Along with the visual appeal and user experience, perhaps it’s time designers shifted focus – or at least became conscious of – Conversion Centric Design (CCD).

如果不是开始依靠数字营销商来解决这种情况，而是开始将转换的要素编织到设计中，该怎么办？ 除了视觉吸引力和用户体验，也许是时候设计师将重点转移到或至少意识到了以转换为中心的设计(CCD)。

With Conversion Centric Design the focus is on creating experiences that drive visitors towards a specific business goal. Persuasive design and psychology principles are used to actively drive visitors into the sales funnel – rather than just creating a pretty site and hoping people sign up.

借助“以转化为中心的设计”，我们的重点是创造可吸引访问者实现特定业务目标的体验。 富有说服力的设计和心理学原理被用来积极地吸引游客进入销售渠道，而不仅仅是创建一个漂亮的网站并希望人们注册。

Conversion Centric Design has so far, been the domain of internet marketers, looking to increase conversions on landing pages and sales pages. But there’s no reason the same principles can’t be used while designing the entire website.

到目前为止，以转化为中心的设计一直是Internet营销人员的领域，他们希望增加目标网页和销售页面上的转化。 但是没有理由在设计整个网站时不能使用相同的原理。

Let me walk you through some of the design elements of conversion centric design that you can easily incorporate in your designs. And while we’re at it, let’s take a look at some examples as well.

让我向您介绍一些以转换为中心的设计的设计元素，您可以轻松地将它们包含在设计中。 当我们讨论它时，我们也来看看一些例子。

设计元素 (Design Elements)

1.封装 (1. Encapsulation)

Encapsulation is a technique where you create a frame around a feature or focus area, to ‘hijack’ your visitors gaze. By doing this, you can subtly ensure that certain pieces of information are highlighted and get the attention they deserve. Encapsulation can be done using images, graphics, or just simple frames around the element you want to highlight.

封装是一种在要素或焦点区域周围创建框架以“劫持”访问者视线的技术。 通过这样做，您可以巧妙地确保某些信息被突出显示并获得应有的关注。 可以使用图像，图形或要突出显示的元素周围的简单框架进行封装。

It works particularly well with Call-To-Actions of all types, as well as testimonials, or data points that you want to share on your site.

它与所有类型的号召性用语，推荐信或要在网站上共享的数据点一起使用特别有效。

For example, take a look at Forgotify’s home page. The simple play of light in the background frames their CTA in an almost mesmerizing manner.

例如，查看Forgotify的主页。 在背景中简单的光线播放就以几乎令人着迷的方式构成了其CTA。

CharityWater also uses encapsulation in a more subtle way. The slightly paler background color on their CTA versus the rest of the page, helps frame the CTA clearly and draw visitors to it.

CharityWater还以更微妙的方式使用封装。 与其他页面相比，其CTA上的背景色略浅，有助于清晰地构造CTA并吸引访问者。

2.对比和色彩 (2. Contrast and Color)

Color and contrast have long been used in design aesthetics to evoke certain emotions. This is about using color contrast to subtly nudge and persuade viewers into taking a desired action.

颜色和对比度在设计美学中长期以来一直被用来唤起某些情感。 这是关于使用色彩对比来巧妙地推动和说服观看者采取所需的动作。

That action could be anything – signing up, buying, or even just clicking through to the next page. Notice how Forgotify’s simple “Start Listening” in green pops out against the dark background. You just have to click it.

该操作可以是任何操作-注册，购买甚至只是单击进入下一页。 请注意，Forgotify的绿色简单“开始收听”是如何在深色背景上弹出的。 您只需要单击它。

As another example, take a look at the IWT page – there’s no chance visitors can miss that bright yellow CTA.

再举一个例子，看看IWT页面-访客没有机会错过亮黄色的CTA。

In contrast, take Threadless. They just got the color contrast part all wrong! Multiple blue images and graphics completely drown out the small blue “Shop Now” button. Can you find it in the image? Instead, the colorful planets and the red half of the capsule jostle for the viewers attention.

相反，采用Threadless 。 他们只是把颜色对比部分弄错了！ 多个蓝色图像和图形完全淹没了蓝色的小“立即购买”按钮。 您可以在图片中找到它吗？ 取而代之的是，五彩缤纷的星球和太空舱的红色一半争夺观众的注意力。

A smart move is using buttons or contrasts that also generate the desired psychological impact.

一个明智的举动是使用按钮或对比，它们也会产生所需的心理影响 。

3.方向提示 (3. Directional Cues)

Directional Cues are visual indicators, subtle or otherwise, that you use to draw attention to your focal point. Subtle inclusions include using a scenery that has a salient pointer or picture of a person looking at the desired focal point. Using arrows, is a clear, unambiguous way to draw attention. In the screenshot below, follow Gabrielle Bernstein's line of sight – it leads directly to the optin on her homepage. It’s the perfect header image – leading directly to sign ups for her newsletter.

方向提示是视觉指示符，无论是微妙的还是其他含义，您都可以用来吸引人们注意焦点。 微妙的包含包括使用具有明显指针的风景或人在注视所需焦点的图片。 使用箭头是一种清晰，明确的吸引注意力的方法。 在下面的屏幕截图中，遵循加布里埃尔·伯恩斯坦(Gabrielle Bernstein)的视线-它直接导致她首页上的optin。 这是完美的标题图片-直接导致注册她的时事通讯。

4.空格 (4. White Spaces)

Remember the trend when everyone tried to use up every possible pixel of the page’s real estate? Google’s simple home page was considered revolutionary in those days. They wanted their home page to do just one thing – help people search the internet.

还记得趋势，当每个人都试图用完页面房地产的每个可能像素时，该趋势如何？ 谷歌的简单主页在当时被认为是革命性的。 他们希望自己的主页只做一件事–帮助人们搜索互联网。

Just one box. Nothing else on the page. No menu. No About page. Nothing else. That simple text box right in the middle of a blank page has helped Google make billions. Do I need to say any more about the power of white spaces in conversion design?

一盒 页面上没有其他内容。 没有菜单。 没有关于页面。 没有其他的。 空白页中间的简单文本框已帮助Google赚了数十亿美元。 我还需要谈谈转换设计中空白的强大功能吗？

心理学要素 (Psychology Elements)

5.紧急和稀缺 (5. Urgency and Scarcity)

Decision Theory shows people are more averse to losing something or missing out on it, as compared to acquiring something. It’s called Loss Aversion and has been widely used to prompt visitors to signing up or purchasing something from the website. Amazon uses this technique extensively creating a sense of urgency with their “Want it tomorrow? Order within X hours, Y minutes”.

决策理论表明，与获得某些东西相比，人们更不愿意失去某些东西或错过其中的任何东西。 它称为Loss Aversion ，已广泛用于提示访问者注册或从网站购买商品。 亚马逊广泛使用此技术，在他们的“明天想要吗？”中营造一种紧迫感。 在X小时Y分钟内订购”。

Back on the IWT website, Ramit Sethi doesn't use a definite timeline. Instead he creates that sense of urgency by saying "get it now before I change my mind and take this down". Great example of how simple copy writing can be used to create scarcity.

回到IWT网站，Ramit Sethi并没有使用明确的时间表。 取而代之的是，他说“在我改变主意并将其付诸行动之前立即得到”，从而产生了一种紧迫感。 如何使用简单的复制写作来创造稀缺性的一个很好的例子。

6.购买前先尝试 (6. Try before you buy)

Another widely used conversion technique is the “Try Before You Buy”. Street vendors and shops have been using this technique for centuries, but it’s only now catching up in the online world.

另一种广泛使用的转换技术是“购买前试用”。 街头小贩和商店已经使用这种技术已有数百年历史了，但是直到现在，它才在网络世界中流行起来。

As humans, we hate uncertainty – it's in our DNA. Especially the uncertainty that comes from impersonal online interactions. When buying a book, or shoes, or clothes or software online, the customer can’t pick it up, try it out, feel it, smell it. Offering visitors a free sampling of your software, preview of your book, or a free consultation session serves to give them a taste of what to expect.

作为人类，我们讨厌不确定性–它存在于我们的DNA中。 尤其是来自非人际在线互动的不确定性。 在网上购买书籍，鞋子，衣服或软件时，客户无法捡起，尝试，摸索，闻到气味。 为访问者提供免费的软件样本，书的预览或免费的咨询会议，使他们可以品尝到期望的东西。

Basecamp has one of the most generous trial offers – for a whole two months. Take a look back at the screenshot of the IWT page – Ramit Sethi offers a free download of the best content from his bestselling book. This gives visitors a safe, risk-free, way to experience the product/book with ample time to make a decision to buy the product.

Basecamp提供了最慷慨的试用优惠之一-整整两个月。 回顾一下IWT页面的屏幕快照– Ramit Sethi免费下载了他畅销书中的最佳内容。 这为访问者提供了一种安全，无风险的方式来体验产品/书籍，并有足够的时间来决定购买产品。

7.社会证明 (7. Social Proof)

People like to belong. They like to be part of a group and will often conform to group decisions and choices, even if they there is an element of doubt.

人们喜欢归属。 他们喜欢成为一个小组的一部分，即使他们存在怀疑的元素，他们也会经常遵守小组的决定和选择。

Social proof can be in many forms – endorsements, case studies, reviews, user generated content and even just numbers (of how many people like/use/shared) your content. That’s why many websites today display testimonials and shares up front. Mashable for example, goes a step further to display the ‘velocity’ of their shares – the rate at which people around the globe are sharing their content.

社交证明可以有多种形式-背书，案例研究，评论，用户生成的内容，甚至仅仅是您内容的数量(喜欢/使用/共享的人数)。 这就是为什么今天的许多网站都显示推荐和预先分享的原因。 例如， Mashable进一步显示了股票的“速度”，即全球各地人们共享其内容的速度。

Of course, make sure you’re using it right. Highlighting that you have 0 shares, or using the wrong kind of testimonials, can actually backfire.

当然，请确保您使用正确。 突出显示您有0个股票，或使用了错误的推荐 ，实际上可能适得其反。

摘要 (Summary)

I hope this short walk through the design and psychology elements of conversion centric design helped pique your interest. You can get a better understanding of conversion centric design with this free eBook from Unbounce. It all comes down to focusing your design efforts toward specific business results,instead of just putting together a visually appealing site.

我希望这段以转换为中心的设计的设计和心理学元素的短暂步行有助于激发您的兴趣。 通过Unbounce的这本免费电子书，您可以更好地理解以转换为中心的设计。 归根结底，您可以将设计工作重点放在特定的业务成果上，而不仅仅是将外观吸引人的站点组合在一起。

Would love to hear your take on this. Do you incorporate conversion principles into their design process? Or do you believe marketing is best left to the internet marketers?

很想听听您对此的看法。 您是否将转换原则纳入其设计过程？ 还是您认为营销最好留给互联网营销人员？

Share your thoughts with us in the comments below.

在下面的评论中与我们分享您的想法。

翻译自: https://www.sitepoint.com/forget-ux-focus-conversion-centered-design/

ux设计