Peggy Olson 将如何进行交互设计

在《广告狂人》时代，营销人员确切地知道他们的作品将如何被消费。 目标受众会在电视上看到广告，在广播中听到它，在杂志或广告牌上看到它，也许它会进入（蜗牛）邮箱。 如果您计划制作平面广告或邮寄邮件，您知道您设计的房地产的确切尺寸，并且您优化了您的广告以适应该空间。 消费者看到的内容将与您在设计时想象的完全一样。

如果佩吉·奥尔森 (Peggy Olson) 今天要设计一则广告，她就必须考虑人们会如何看待该广告的背景，以及她的目标受众将如何与之互动。 无法保证她的作品会以她想象的方式被观看，因此她需要优化她的布局和设计，以便无论以何种方式观看它都会产生影响。 她必须确保号召性用语 (CTA) 清晰、简洁且易于理解——即使在三英寸的屏幕上也是如此。

今天设计网页、登录页面和电子邮件比《广告狂人》时代要复杂得多。 今天，您拥有交互元素的附加维度，并且不知道将在哪个设备上查看内容。 在全尺寸计算机屏幕上看起来完美的布局在平板电脑或智能手机上查看时可能会一团糟。 不清楚或放置在错误位置的 CTA 会降低您的参与率。

三个关键的交互设计最佳实践

今天大多数消费者的注意力都集中在小昆虫身上。 在他们决定是否点击更有趣的内容之前，当他们点击您的内容时，您有大约两秒钟的时间来吸引他们。 在设计电子邮件、登陆页面或网页时，您必须了解这三个概念：

1. 布局如何影响参与度：了解如何在页面上布局元素以获得最大参与度
2. 内容如何影响参与度：知道什么会迫使我与您的内容互动
3. 时间有多重要：你有两秒钟的时间引起我的注意

听起来很简单，对吧？ 如果真的那么简单，我就不会写这个了！ 我无法告诉您我每天遇到多少内容让我沮丧到只点击“后退”按钮的地步。 我说的是财力雄厚但没有设计感的大公司。

所以让我们实际一点。 继续阅读一些非常简单的技巧，它们将帮助您优化页面布局以在任何平台上参与。

眼睛如何扫描页面

您需要了解的第一件事是人眼如何跟踪一段内容。 当我在大学学习广告时，我们被告知眼睛以大写 Z 的形式从左上角开始在页面上进行跟踪。 我确信这个理论是由一项研究设计出来的，该研究让一些测试对象查看内容片段，而一个穿着白大衣的人试图在一张纸上画出眼球运动的模式。 这远早于现在广泛使用的热图技术，该技术用于查看人们如何跟踪在线浏览的页面。 请注意，人们扫描打印内容与在线内容略有不同。

现在的共识是，当在线查看一段内容时，眼睛的轨迹仍然是左上角。 你的眼睛通常首先水平地穿过 F 的顶部栏，然后是 F 的第二栏，最后从上到下沿着 F 的垂直杆向下。

那么这是什么意思？ 这意味着您的 CTA 需要处于大写 F 模式的某个位置，或者您需要给婴儿留胡子。 做出有意识的设计决定，将您的主要 CTA 放在可以在前两秒吸引观众眼球的位置。

真正的设计灾难

那么让我们来看看我在 Act-On 的一位同事帮助我创造的真正的设计灾难。 很抱歉，下面的例子是从我在网上看到的真实内容中提取出来的。 我使用了一家名为 Actomatic 的虚构公司来演示人们最常犯的错误，以及如何改正这些错误。

示例 1：不要让我滚动查看 CTA

我看到的最常见的错失机会是一段内容，要么无法共享，要么共享按钮隐藏在页面底部的首屏下方。 折叠是屏幕底部的那条假想线。 （这个词来自报纸被对折的时代；“折叠上方”是更好的位置，有更好的读者。）在普通尺寸的笔记本电脑屏幕上，折叠可能距离屏幕顶部 480 像素，但在对于 iPhone，它可能距离顶部 100 像素。 在布局页面内容时请注意这一点。

如果我们谈论的是博客或多页文章，我敢猜测大多数人在阅读标题（如果它不错）和内容的前两句话后就准备好分享了，因为他们想要第一个走出大门。 人们喜欢分享新鲜的内容，而不是他们已经看到他们的同龄人分享了五次的内容。

我建议在内容的顶部和底部设置共享按钮，或者在您滚动时共享按钮浮动在内容旁边。

我曾与一家非常知名的公司合作，发现当他们在文章的顶部和底部添加分享按钮时，分享率上升了 400% 以上。

示例 2：哦，我的眼睛！

您是否曾经登陆过一段内容，内容太忙以至于您不知道去哪里看？ 也许它有一个要分享的视频，一个要填写的表格，一些副本，一些链接。 如果我登陆下面的页面，我不知道从哪里开始，所以我可能根本不会参与。 这个例子没有告诉我这个页面上最重要的是什么。 你只有两秒钟或更短的时间来引起我的注意并吸引我，而你却迷失了我。

如果您有多个 CTA，请非常清楚这些元素的逻辑顺序。 如果必须的话，用带编号的标注把它拼出来。 如果我来到这个页面，我会问这些问题：

布局看起来没有计划和草率，带有随机的空白和奇怪的字体。 CTA 绝对低于首屏。

如果我向 Actomatic 提供建议，我会首先询问他们希望通过此页面实现什么。 这里的目标是什么？ 我假设这里的主要目标是让人们注册博客，观看和分享短片。 如果是这样的话，那么我们需要做一些改变。

1. 确保主要 CTA 位于首屏之上。 分享按钮和订阅按钮都在首屏下方。
2. 明确表示您希望访问者注册博客并分享视频
3. 添加一些关于公司的信息

好，我们现在看一下：

新的和改进的版本布局略有不同，字体更少，公司和视频简短介绍，订阅博客的门槛更低。 我还在底部添加了链接和一个联系按钮。 请注意我是如何优化布局以按照眼睛自然扫描页面的方式最大化读者在前两秒内看到的信息量的。 F 模式理论说这是查看者在页面上接受元素的顺序：

1. 公司标志
2. 头条新闻
3. 分享和订阅按钮
4. 底部的探索部分

给我一个互动的理由

现在您已经对布局进行了所有排序，您需要给我一个与您的内容进行交互的理由。 如果您希望我填写表格或分享您的内容，我需要有令人信服的理由才能这样做。 那么让我问你，这对我有什么好处？

如果您不知道该问题的答案，那么您还没有完成作业。

人们与内容互动的主要原因是他们从中获得某种情感上或物质上的满足。 如果您的内容不错，我会分享它，因为它让我在同行面前看起来见多识广。 如果我是第一个发现您刚刚发布的新小部件的人，我会得到自我提升，所以我当然会分享我首先看到它的事实。

也许你是一个非营利组织，你的内容是关于某人做了一些非凡的事情的感觉良好的故事，我会分享这些内容，因为它让我感觉良好和慈善。 如果我填写表格，给我一个赢得 iPad 的机会，我将更有可能向您提供我的个人信息。

诀窍在于了解是什么促使您的听众参与。 是情感奖励，物质奖励，还是两者兼而有之？ 设身处地为他们着想，制定适合您受众的参与策略。

把事情简单化

我最近在一次会议上发表了演讲，会上我介绍了一个成功的社会营销活动的案例研究。 我穿了一件 T 恤，正面印有：#KeepItSimple。 我努力实践我所宣扬的。

我曾与创建了极其复杂的交互式内容的客户合作，也曾与其他将内容保持得极其简单的客户合作过，而且几乎每次都是以简单取胜。 以下是保持简单的方法：

• 选择易于在线阅读的字体，例如 Trebuchet。
• 不要在页面上混合太多字体和大小。 一种尺寸用于标题，一种尺寸用于正文。
• 如果可能，请将其保留为一个明确的 CTA。
• 把重要的东西放在首位。
• 尽可能降低进入门槛（如果您真正需要的只是他们的电子邮件地址，请不要索要他们的第一个孩子）

你的家庭作业

等一下，你没说文末会有作业！ 如果我告诉你会有家庭作业，你会读到这里吗？ 嗯。 我希望您以挑剔的眼光审视您的某个着陆页，并问问自己是否还有改进的余地。

• 在笔记本电脑和移动设备上查看您的登陆页面之一。 你必须滚动才能到达 CTA 吗？ 它在移动设备上显示效果好吗？
• 请一位对您的公司一无所知的朋友查看您的某个登录页面，并请他们在查看时提供坦率的反馈。 让他们告诉你他们首先注意到的是什么，你的公司是做什么的，以及页面上的主要 CTA 是什么。
• 查看是否所有重要元素都在 F 模式中。
• 在尽可能多的平台上，在尽可能多的浏览器中测试您的页面。 Safari 不像 Chrome 那样渲染元素。 Firefox 不像 Internet Explorer (IE) 那样呈现元素。 而且不同版本的IE显示的内容完全不同。

您无需拥有广告布局和设计学位即可实现这一目标。 但是您必须愿意以批判的眼光审视您当前的内容。

这是值得的。