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顯示的內容完全不同。

您無需擁有廣告佈局和設計學位即可實現這一目標。 但是您必須願意以批判的眼光審視您當前的內容。

這是值得的。