How to Generate Leads on Your Site — Display CTA Button at the Right Place

August 24, 2020

The first step for encouraging people to sign up for email newsletters is to make people aware with a visible sign-up button.

Sometimes we want our visitors to subscribe to the newletter, sometimes we want our visitors to download the ebook, and sometimes we want our visitors to try the demo. All these means we want every visitor on our site to click that CTA button and become potential clients.

But getting people to do what we want can be tough. Here I’d like to summarise different solutions to get visitors click that CTA button. There are multiple solutions to make a CTA more noticeable such as attractive headline, animations, colour contrast, interactive form, etc. Those can really make a difference. However, in this article I want to solely focus on where and in what form we can display the “advertisements” for getting visitors.

Popup Overlays

I know there are many books and articles talking about using popup overlay is a really bad UX solution to get users’ attention. But it works. Although you may not notice the exit rates are also high and the more visitors you attract, there are more you push away.

So be very careful choosing this sulotion. If you are so desperate to get visitors, do it creatively. Instead of pop up the overlay immediately, let visitors stay on the page for 5 seconds and then pop up. So visitors may already get into your story and are willing to take actions.

Another way of using popup is instead of full screen overlay, make the popup somewhere without interrupting users’ reading experience. You can call it Unobtrusive Popups.

Unobtrusive Popups

An optimised version of popup overlays in terms of the UX. It is still eye-catching but least disturbing to the visitors. It will be less annoying than a full screen overlay that is exploded in front of your face.

The unobtrusive popups could be directly displayed somewhere or slides in from the edge once a visitor enters the page. It is normally floating on the screen so whenever visitors feel the content is valuable enough, they can make the action anywhere on the page.

Header CTA Button

Another “lazy” way to get visitors subscribe to you site is to put that CTA button on the header row. When visitors arrive at your site, they’ll browse left to right, top to bottom. Most visitors follow this behavior if they are not attracted by a big intriguing image on the screen, but it is certainly what a visitor will do if it’s not one’s first move.

The advantage of this is that the header row is most likely across the site. So it is not limited to any particular page. The drawbacks are also obvious. Due to the size of the header row, you cannot make it visually appealing. The copy will certainly be simple like Subscribe, Free Download, or Try Demo, etc. Nonetheless, for any visitor that do want to subscribe, the button is there. Make sure it is visually different from any other links.

In the Middle of the Content

This is especially useful when you have a long content. You have a lot of space to make a creative design to attract visitors to click the CTA button. It is also less disturbing and as visitors have already read part of your content, it is more likely that they’ll take what you are offering here.

Bottom of the Page

All the solutions above will more or less disturb visitors reading experience, but this solution is 100% trouble free. Give you and also your visitors a chance to subscribe once they reach the bottom of the page.

The drawback is that visitors have to scroll to the bottom to be able to see this, so make sure it is applied to those with less content and you may want to use this solution together with other options. Nonetheless, there’s no harm in putting it at the bottom since it doesn’t interrupt the experience at all.

Exit Intent Popup

Very much like the popup overlay, just it is triggered when visitors decide to leave your site. We mentioned that popups are annoying, but some may argue that the visitors are leaving anyway, it’s your last chance to get their attention before you never see them again. But still, use it as if you are desperate to raise your conversion rate.

Summary

I’ve listed some commonly used solutions to display the CTA button. Some are disturbing but effective, while some are less effective but user friendly. Balance is the key. Other than that, choose a solution or a combination of solutions that suit your site, then work on the content, be creative, make it what visitors exactly want, then you’ll get rewards from the increasing conversion rate.

Chinese Version: 如何让你的网站获得潜在客户-在正确的地点展示CTA按钮

如何让你的网站获得潜在客户-在正确的地点展示CTA按钮

August 24, 2020

想要用户订阅你网站的电子邮件第一步是让用户能够发现你的订阅按钮。

有时候我们希望用户能够订阅网站的电子邮件，有时候我们希望用户能下载网站的电子书，有时候我们又希望用户能够试用我们的产品。所有这些都意味着我们希望访问网站的每个用户都可以点击我们为其量身定制的CTA按钮并成为我们的潜在客户。

但是，让用户按我们的想法去做不是一件容易的事。在本文中，我想总结一下不同位置展示CTA按钮的方式。有多种方式可以使得CTA更加引人注目，例如夸张的标题，有趣的动效，色彩对比，交互形式等。这些方法确实能够产生效果。但是在本文中，我想把重点放在网站的“广告”可以在什么地点展示从而吸引到用户点击。

全屏弹窗

我知道有很多书和文章里都有提到，通过全屏弹窗来吸引用户注意在UX的角度来看是非常危险的。但这确实有效果。尽管你可能不会注意到退出率也同样很高，并且在吸引了更多用户的同时，也让很多用户决绝地离开了你的网站。

因此，在选择这种方法时要非常小心。如果你非常急于吸引用户，最好选择更有创意的方式来使用全屏弹窗。例如，让用户在页面上至少停留5秒钟后再弹出窗口，而不是立即弹出。这样，用户可能已经阅读了部分网站的内容，更有可能为之采取行动。

另一种使用弹窗的方法是，与其使用全屏弹窗，将弹出的窗口放在不影响用户阅读体验的位置。你可以称这种弹窗为“非模态弹窗”

非模态弹窗

Precision Marketing Group的弹窗，位于右下角，没有遮挡任何内容

作为全屏弹窗的UX优化版。非模态弹窗仍然引人注目，但对用户的干扰较小。这比全屏弹窗在你面前炸开要好多了。

非模态窗口可以直接显示在页面某处或从边缘滑入。同时窗口一般会浮动在页面上，这样只要用户觉得内容有足够的价值，他们就可以在页面上的任何位置点击CTA按钮。

导航栏CTA按钮

让用户订阅的另一种“懒惰”的方法是将CTA按钮放在导航栏上。当用户来到你的网站后，大多数用户都会遵循从左到右，从上到下的浏览行为，除非页面上有刻意吸引人的巨幅图片将用户视线所引走。但是，哪怕导航栏不是用户第一时间注意到的，那也会是第二个注意到的区域。

这样做的好处是，同样的导航栏基本上会出现在网站的所有页面。因此，它不会局限于某个特定的页面。当然缺点也很明显。由于导航栏的大小及功能限制，按钮很难做到在视觉上非常突出。文案也会较为简单，例如“订阅”，“免费下载”或“试用”等。尽管如此，对于确实希望订阅的用户来说，按钮始终就在那里。同时记得确保按钮在视觉上与其他任何的链接都不相同。

在内容之间

当你网站的内容较长时，这种方式会更加有效。在这里我们有大量的空间来进行创意设计，以吸引用户点击CTA按钮。同时也减少了对用户的干扰，而且用户已经看过了网站的部分内容，因此他们很可能会接受在这里提供的“广告”内容。

页面底部

之前的方案都会或多或少地干扰到用户的阅读体验，但是这个方案完全不会打扰到用户。当用户达到页面底部时，给你的用户及自己一个让他们能够订阅的机会。

这个方案的缺点在于用户只有滚动到页面底部后才能看到我们想要宣传的内容，因此尽量将其应用于内容较少的页面，并且你可能会希望将此方案与其他方案一起使用。尽管如此，将其放到页面的底端也没有什么害处，毕竟它对阅读体验没有任何负面影响。

退出弹窗

退出弹窗本质上和全屏弹窗是一样的，交互上的唯一区别在于当页面检测到用户离开的意图时即会触发。我们提到过弹窗会让用户感到不快，但是有人会争论说用户已经决定了要离开，那么这是你获得用户的最后机会。但仍然，只在你极其迫切提高转化率的时候考虑使用它。

总结

我在本文中列出了一些CTA按钮常用的展示方案。其中一些容易打扰用户，但有效。而有的效果没那么好，但不影响用户体验。平衡在这里是关键。除此之外，选择适合你网站的方案或组合方案，然后优化内容、发挥创意、使其针对来访用户的需求，然后便有机会提高转化率并获得你想要的客户。

English Version: How to Generate Leads on Your Site — Display CTA Button at the Right Place

How to implement 2FA on your site from a designer’s view

August 27, 2018

Recently we implement a Two Factor Authentication on our site. Before starting design, I had gone through lots of other sites to see their 2FA to get some basic understanding of it. If you haven’t had any experience with 2FA before neither, here I’ll recommend Authy for your initial research. They have collected numerous sites that use 2FA with detailed step-by-step guide with screenshots.

All those Authy guides are great but they are all about how to activate 2FA on the site, which is not enough for a designer to consider all the possible flows of 2FA. After some trials I summarized the places where a designer should consider when implementing 2FA.

Where to activate and deactivate 2FA?
What is 2FA setup process?
Things about authentication code and key.
Things about backup code.
Where to implement 2FA?
Where to prompt 2FA?

1. Where to activate and deactivate 2FA?

This is a pretty simple answer. Normally in the Security section of Settings, or Profile.

Simply add a 2FA section with a toggle (or other form) to turn on 2FA. You could also add a paragraph of explanation here as Google.

2. What is 2FA setup process?

You can also find the 2FA setup process in Authy guide. Normally it includes following 3 steps:

1. Account Verification (Text/Voice call/Password/etc.)

The first step to enable 2FA is to verify your identity. If others get your 2FA key and get authentication with their phone, then you’ll never be able to go through 2FA in your account (actually, you may even not be able to log in). So it is important to verify the identity before actually starting 2FA setup.

You can either use the account password to verify or have SMS sent to your phone or voice call to get the verification code.

2. Get Authentication Code (Text/Third Party Authenticator App)

Next step is normally to provide a key for third party authenticator app to activate it on its app. A better way is to provide a QR code encrypted the key for the app to scan. The third party authenticator app (you could use Google Authenticator or Authy) will then generate the authentication code.

Some sites also provide SMS text to send authentication code.

Choose your preferable way to receive authentication code (Slack)

3. Backup Codes/Recovery Codes

After verifying your authentication code. Some sites will directly provide user backup codes or recovery codes. The backup codes are used when you cannot access to your authentication code or even when you lost your phone.

Many sites also provide multiple backup codes at once.

The codes are stored in the database. Google will detect which code is used and display “Already Used” instead of that code if you enter the backup codes view next time.

3. Things about authentication code and key

Authentication code is generated from the third party app. To get the code, the app need to have the key which is provided by your server and this requires backend support to provide the key. The database only stores one key so if user wants to change a phone or use another app, they need to get a new key. You can provide a link once the 2FA is setup that gives user a new key.

There are also some references for creating 2FA key from technical perspective:
Enabling Two-Factor Authentication For Your Web Application — Bozho’s tech blog

Simontabor/2fa

双因素认证（2FA）教程 — 阮一峰的网络日志

4. Things about backup code

Whenever it requires authentication code, user should have the option to switch to use backup code, and backup code can only be used once. Consequently you should be able to generate new backup codes for users.

I like how Google provides the code for users. They nicely put a check box in front of each code and dashed line for user to cut.

5. Where to implement 2FA?

Most sites require 2FA when user logs in to protect your money, sensitive data or other important things. So you can simply add an extra step after asking for password. However our site has done it differently.

Our platform has industry experts, practitioners, and professionals who shares their views and analysis to a global audience. A typical scenario of our user is the audience who read articles on the platform. They don’t use our Wallet feature often, therefore to go through 2FA in order to see our content would be over complicated for them.

In summary, it’s a UX question that where you would like to implement 2FA.

6. Where to prompt 2FA?

This is a UX consideration where we should notify users to implement 2FA. Especially if there’s sensitive or important data that requires high security protection, it would be great if we proactively notify users to turn on 2FA. Binance will ask you to enable 2FA as part of sign up process and also each time you make transactions if you haven’t done that.

Pop-up message to ask enabling 2FA (Binance)

So, this is what I’ve figured out when implementing 2FA on our site. If you only find the 2FA setup process somewhere else, I hope this one gives you a quick guide about other things to be considered.

Original posted at Medium

从设计师的角度看如何在网站上实现2FA（双因素认证）

August 27, 2018

我们最近在网站上完成了2FA验证的设计和部署。在开始设计之前，我研究了很多其他网站，观察他们的2FA是如何设计的。如果你之前没有任何2FA的经验，我会推荐Authy作为初步研究的开始。他们收集了许多使用2FA的网站，并提供了详细的分步指南和截图。

不过虽然这些Authy指南都很详尽，但它们都是关于如何在网站上激活并使用2FA的，对于设计师来说只有正确流程并不足以满足设计的要求。在实际试用过一些2FA流程后，我总结了一下设计师在实施2FA时应该考虑的地方。

在哪里激活和停用2FA？
2FA的设置流程是怎样的？
关于认证码和密钥。
关于备份码。
在哪里使用2FA？
在哪里提示2FA？

1. 在哪里激活和停用2FA？

这个问题的答案很简单。2FA通常位于“设置”或“个人中心”里的“安全”部分。

你可以简单地添加一个开关样式（或其他形式）的2FA设置。你也可以像Google一样在这里添加一段关于2FA的解释及其他信息。

2. 2FA的设置流程是怎样的？

你可以在Authy的指南中找到各种2FA设置过程。通常包括以下3个步骤：

1. 帐户验证（短信/语音通话/账户密码等）

启用2FA的第一步是验证身份。如果其他人获得了你的2FA密钥并通过他们的手机进行身份验证，那么你永远都不能通过自己账户的2FA验证。因此，在实际启用2FA之前验证身份非常重要。

你可以通过发送短信到手机或者使用语音电话来获取验证码或者直接使用账户的密码进行验证。

2. 获取验证码（短信/第三方验证器）

一般来说，第二步我们需要为第三方验证器提供密钥。更好的方法是提供一个包含密钥的二维码。第三方身份验证器（您可以使用Google身份验证器或者Authy验证器）生成验证码。

一些网站也会提供通过短信的方式发送验证码。

3. 备份码/恢复码
在确定了验证码之后。有些网站会直接提供备份码或者有些网站称为恢复码的一串数字给用户。当用户无法访问身份验证码，甚至手机丢了的时候，用户可以使用备份码登录。

很多网站会同时提供多个备份码。

备份码是存储在数据库中的。如果下一次进入备份码的页面，Google会检测哪些备份码已经被使用并显示“已使用”而不是继续显示该代码。

3. 关于认证码和密钥

验证码一般是通过第三方应用程序生成的。应用程序需要拥有服务器提供的密钥来产生验证码，这需要后端支持才能提供密钥。数据库只存储一个密钥，因此如果用户想要更换电话或使用其他应用程序，则需要获取新的密钥。在设置好2FA后，我们可以提供一个链接，为用户产生新的密钥。

这里为大家提供几个技术方面创建2FA密钥的参考：
Enabling Two-Factor Authentication For Your Web Application — Bozho’s tech blog

Simontabor/2fa

双因素认证（2FA）教程 — 阮一峰的网络日志

4. 关于备份码

在任何请求验证码的时候用户都可以选择使用备份码。每个备份码只能使用一次。所以我们需要有一个地方为用户生成新的备份码。

我喜欢Google为用户提供备份码的方式。他们很贴心地在每个备份码前面放了一个复选框，用户可以打印下来并勾选哪些备份码已经被使用了。还有虚线及剪刀提示用户如何剪裁。

5. 在哪里使用2FA？

大多数网站一般会把2FA放在用户登录流程来保护用户在网站的资金、敏感数据和其他重要事项。所以我们可以在输入密码后添加额外的2FA验证步骤。但是我们的网站用了不一样的方法。

我们的平台会有各个行业的从业者、专家和资深人士向其他用户分享他们的观点和分析。一个典型的用户群体是在我们平台上阅读分析文章的一般用户。他们不会经常使用我们的电子钱包功能，因此要通过2FA才能看到内容对他们而言会过于复杂。

总之，在哪里应用2FA是一个UX问题。

6. 在哪里提示2FA？

什么时候提示用户使用2FA也是一个用户体验相关的考虑。特别是在有敏感或重要数据的时候，我们更应该主动地提示用户使用2FA。 Binance会在注册过程中建议用户启用2FA，如果用户没有启用，每次进行交易的时候Binance也会提醒用户。

以上这些这就是我在自己实现2FA的时候考虑到的内容。如果你在其他地方只找到2FA的设置过程，我希望这篇文章可以作为一份快速指南了解到应用2FA需要考虑到的其他事项。

Original posted at Medium

A Case of Design Psychology, the Tricks that We Use in the Design

August 11, 2015

Not long ago, I just finished my first E-commerce project. The project was quite interesting from many challenging aspects. One of them was about user’s psychological activity and I think it would be interesting to summarise and to share how analysing user’s psychological activity could help a UX designer to design a better thing.

Background, requirements and problems

The e-commerce website that we were designing has one very special aspect that most of the users were those who bought products from our client company. Our client would like to send vouchers/redeem code as promotion to their customer and attract them to the e-commerce website. Therefore, we put our design focus on the gift redeem.

From the client’s perspective, they have three requirements for gift redeem:

Clear and intuitive entrance
Users have to sign up/sign in to redeem
Users need to input redeem code or their phone numbers

Looks very simple, right? Let’s make an obvious button, tell users that they can redeem after sign up/sign in.

But, wait! Why should I sign up?

Client’s Requirements V.S Users’ Expectation

Business Flow ≠ User Flow

We all know that client thinks business objectives first. So the client described their thought on gift redeem to me like this:

“We could have a menu called Gift Centre, so the use can see it once entered the website and then click in (really?). And in the next page, you put a sign in box and tell users that they can redeem after sign in or sign up.”

And the client had drawn a interface like this:

hmmmm, really?

Sure for client it is very logical. They have provided the entrance for gift redeem, and told the user to sign up/sign in first, the user should follow the instruction and do what the client expected.

However, to the user, sign up is not a necessary step for them. When asking users to sign up, they think they are doing something not related to gift redeem, therefore dissatisfy and even give up.

As sign up is required, let’s look at all the steps in gift redeem and potential problems in each step:

User has different concerns in every step

The first step, insert the redeem code and enter the redeem process

First I want to say, in many designer’s view, the user is like this:

Things that are obvious to designers are not to the users

I really like this GIF. I don’t blame users. There are things that are obvious to designers but not to the users. This is because of the background knowledge and many other aspects.

So here if we analyse users’ psychological activity, we may find out what they are really thinking is:

“I got code, I got code, now where do I input it?”

So, we thought we had an obvious entrance, but it’s still not clear to the user. Especially when users click “Gift Centre” and find out there’s nothing to do with gift redeem (at least no direct relationship), users would think they went to the wrong place.

Therefore we hope to provide a clear and also participating entrance to the user.

Our design after analysing user’s psychological activity

While keeping the Gift Centre on the menu (of course we redesigned the Gift Centre page), we provided a large and obvious area for users to know they can redeem here.

As we analysed before, users are seeking for a place to insert their code, and here we provide it (Phone number is bound with the redeem code).

The important thing is, in client’s design, users will experience a long redeem process. Users would have seen two useless pages and you expect them to finish sign up and then redeem?

The redesigned page allows users to participate in redeem process from first page. Once users enter the phone number, they are already in the process and no matter what happened there, users will think it’s part of redeem process. This is how we play tricks next.

The Tricks

So you heard the story. A local coffee shop gives you a loyalty card that allows you to earn one sticker for each coffee you purchase. When the loyalty card is full of stickers, you get a free coffee. Here are two scenarios: Scenario A: There are 10 slots on the loyalty card and it was empty when you received it; Scenario B: There are 12 slots on the loyalty card and there are two stickers on it already when you received it. It is normally faster to collect stickers in scenario B. This is called “goal-gradient effect” that is described in the book “The Psychology of Design”.

So as it says, if the user find out that they have already made progress as in scenario B (although they still need to buy 10 coffee), they have more motivation to complete the task.

We also used goal-gradient effect in our design to motivate users to complete the sign up without complaints.

Let’s see what we have done in the design:

After input the phone number in previous page, the system detects the number automatically. If it is a registered number it directs to login page. If it is an unregistered number, it enters the above page. Here we play a trick of red herring. If we ask users to sign up before redeem, users would think the gift redeem is a means of making them sign up (yes they are right). But if we put sign up process inside redeem process, users would think it is part of gift redeem process and therefore they would like to complete it.
Using goal-gradient effect. With progress bar we notify users that they are already in the second step so making them feel like they have made progress and therefore would like to complete the entire process. The last step “Select Gift” is indicated as one step but it includes selecting product, creating address, check out and other steps. We put them as one step so the entire process (as what users see) is only three steps. When the user see there is only one more step, who cares about to sign up? You see, that’s how we play the thicks here.
At last, we optimised sign up page. The mobile phone number (i.e. account number, the most common way to sign up in China) is automatically filled in. The verification code is sent once user enters the page. Therefore users only need to fill in two input box. As result, users won’t be trapped by the sign up process.

By analysing users’ expectations, psychological activities and using goal-gradient effect, we successfully increased sign up rate and users’ satisfaction. How do we know? Usability Testing!

Last Few Words…

It’s interesting to analyse users’ psychological activities. Especially when you find users are stepping into your “traps” and havn’t realized it. It is a big accomplishment for you.

It could be just a very small point to utilise users’ psychological activities, just like the gift redeem process (although we only mentioned half of it). There are only two pages but helped us sovle a big problem.

If you can not get help by business or technology (such as you can’t shorten or delete sign up process), designers could use users’ psychological activities by any tricks that you can think of. We use those tricks for good, to satisfy our users, and this is what makes user experience valuable and interesting.

It is always fun to play with users ;)

Original posted at Medium

洞悉用户心理，设计中的“诱导”和“欺骗”把戏

July 31, 2015

不久前，我在公司完成了自己的第一个E-commerce的项目。项目本身是很有趣的，涉及到了好几个有挑战性的设计点，其中和用户心理活动相关的一个设计点我觉得可以总结出来，分享一下一个用户体验设计师在设计的时候是如何通过分析用户的心理活动帮助设计的。

背景、需求和问题

在目前国内的环境下，当一个客户说我想要一个电商网站（类似优衣库、GAP这种品牌商除外）时，他们的意思是：“给我一个天猫或者京东”。这对于设计师来说发挥的余地并不大。不过我们客户想要的电商网站有一个特点，那就是用户都来自于购买了客户产品的顾客。用户在购买特定的产品后会获得兑换码然后从客户的电商网站兑换礼品。因此我们也把设计的重点放在了礼品兑换的设计上面。

从客户角度来讲，客户对礼品兑换功能有以下三个要求：

入口要明显
用户必须在注册/登录后才能兑换礼品
用户需要输入提前获取的兑换码兑换礼品

看起来很简单是不是？弄个明显的入口，告诉用户注册登录后可以兑换礼品然后就好了不是吗？等等，为什么我要注册登录？

业务流程≠用户流程

首先我们知道，客户在进行设计思考的时候，一般考虑的是怎样去达到自己的业务目标，所以当客户是这样给我们描述他们想到的设计的：

“我们把礼品兑换中心放到菜单上，这样用户一进来看菜单的时候就能看到，然后点进去（真的吗？）。然后你在下一个页面放一个登录框，告诉用户登录/注册后就可以兑换礼品了”

然后客户自己画了一张图，大概是下面这个样子

这样真的好吗？

当然从客户的角度来说，他们提供了礼品兑换的入口，又让用户知道礼品兑换需要先注册登录，用户应该乖乖按照这个流程完成兑换礼品了吧。

但是对于用户来说，注册并不是兑换礼品的必要步骤。因此在让用户注册的时候，用户会认为在完成一个和礼品兑换不相干的操作，从而导致用户产生不满，甚至放弃注册及礼品兑换。

既然注册是必须的，那我们先来看看用户在完成整个礼品兑换流程必须经历的步骤及可能的问题。

首先是第一步，输入兑换码进入兑换流程

在很多设计师的眼中，用户是这样的

事实上很多对于设计师显而易见的东西对于用户来说真的很难注意到，如果分析我们网站用户的心理活动，会发现他们其实想的是：

“我有了礼品兑换码，现在我要在网站上找到输入兑换码的地方”

所以，我们以为给用户了一个明显的入口，但是对用户来说还不够直接。特别是当用户点击“礼品兑换”后发现页面跟礼品兑换没什么关系，用户会认为自己走错了地方。

于是我们希望在首页提供给用户一个明显的，具有参与感的入口

在保留礼品兑换中心的同时（当然我们对内页做了新的设计），我们在首页第一屏提供了一个明显的区域，直接告诉用户来这里输入就能兑换礼品。

用户会像发现了新大陆一样输入他们的手机号（手机号和兑换码绑定），开始他们的兑换旅程。

这里对用户心理解读的关键在于，用户在之前的设计中会经历漫长的非兑换流程，在注册前已经经历了两个对用户毫无帮助的页面，你还会期待用户有耐心的完成注册再去兑换礼品吗？

而重新设计后的页面让用户在第一个页面就参与进礼品兑换的流程，从用户输入手机号的时候开始，用户就已经在流程当中，在这个流程里发生的任何事都会被用户认为是兑换流程的一部分。这也是我们接下来进行“诱导”和“欺骗”的基础。

“诱导”和“欺骗”

附近的咖啡店送了你一张积分卡,以后每买一杯咖啡就会在卡上贴一张贴纸,等积分卡贴满的时候,就能免费换一杯咖啡。下面是两种不同的情境: 情境 A :积分卡有 10 个贴槽，给你卡时所有的贴槽都是空着的。情境 B :积分卡有 12 个贴槽，给你卡时已经贴上了 2 张贴纸。使用B情景中的积分卡，收集满贴纸会更快一些。这是很多人都读过《设计师要懂心理学》里面讲的目标趋近效应。

简单来说就是如果用户发现他们已经有进展了，例如情景B（哪怕他们还是要买10杯咖啡），他们会更有动力去完成目标。

我们在设计中也利用了目标趋近效应，希望能够激励用户心甘情愿地完成注册。

来看看我们在设计中做了哪些考虑吧：

当用户在上一个页面输入手机号后，系统会自动检测用户号码，如果是已注册用户则会跳转到登录页面，如果是未注册用户，则会进入上图所示的页面。在这里我们采用了一种偷换概念的方法。如果我们要求用户在兑换前就注册，用户会认为礼品兑换是附属操作，客户的目的是要他们注册（虽然事实如此）。但是通过将注册步骤放入礼品兑换流程之中，用户会觉得注册是兑换礼品的附加操作，因此会更愿意去完成注册。
利用目标趋势效应，通过进度条提示已经进入了第二步，从而“诱导“用户感受到我已经有所进展了，更愿意完成整个流程。至于最后一个步骤其实包括了选择商品、下单在内的一系列步骤，但是我们将这些步骤都算为选择礼品步骤，从而把整个流程压缩到了三步，用户一看，还有一步就可以选择礼品了，谁还会在意需要注册呢？看，用户是怎样被我们“诱导”及“欺骗”到的。
最后，我们最优化了注册界面。手机号，也就是账号是通过“上一步”可以带入进来的，免去用户填写。进入页面后校验码自动发送意味着整个页面用户仅有两个输入框需要填写。配合进度条的刺激，我们可以进一步“诱导”用户完成当前操作。

通过分析用户的期望，在每个步骤的心理活动，以及利用目标趋近效应，我们成功的增加了用户注册率并提升了用户满意度。至于怎么验证我们的设计是否成功？可用性测试啊！可用性测试！可用性测试！重要的事情要说三遍！

写在最后

研究用户的心理活动是一件很有意思的事情。特别是当你发现用户一步步掉入你设定好的“陷阱”的时候还浑然不知有一种莫大的成就感。

对用户心理的利用可以在很小的一点上，就像这个礼品兑换流程（其实这里只说了一半），也就两个界面，但是很好的帮我们解决了用户注册过程中跳出率高以及用户满意度的问题。

在一些业务或技术无法解决的问题上（例如注册的需要或步骤无法缩短），设计师可以从用户的心理角度善加利用，无论是“诱导”还是“欺骗”，我们的目的都是为了让用户更满意，这也是用户体验设计的价值和趣味所在。

毕竟，和用户“斗”，其乐无穷啊！

Original posted at Medium