如何優化使用體驗（UX）以提升轉換率

我在 CakeResume 的使用體驗設計準則

Published in

CakeResume

11 min readSep 5, 2017

首先請讓我簡單介紹自己。我是 CakeResume 的創辦人劉君羿。雖然我的本業是網站開發，但透過自學、與設計師合作、和親自設計，也累積了一點 UI/UX 設計能力。

CakeResume 的第一版首頁是我自己設計的；實際上，之所以開始做 CakeResume，正是因為我當時在修一門線上初級設計課程，為了練習需要，才把這個我大學時的想法拿出來重作。經過了一年半的演變，首頁來到了第三版（由 Liya 設計 — https://dribbble.com/liyali）；註冊轉換率也從約 10% 提升到約 25%。

25% 的註冊轉換率是透過不斷的優化文案、設計、產品功能、和使用者口碑而來的。在這優化過程中我累積了不少使用者體驗的設計經驗，進而有了一點自己的 UX 設計準則。因此想透過這篇文章分享給各位。

在談優化使用者體驗之前，我們得先知道目標是什麼。通常一家公司的終極目標是獲利；但是在使用者在你的網站上消費之前，他（她）還有一段路要走。以 CakeResume 為例，這條路是：

進入首頁 → 註冊帳號 → 編輯履歷 → 購買進階模板

但這只是簡化版而已，詳細版本可能是這樣：

進入首頁 → 註冊帳號 → 新增一篇空白履歷 → 不知道怎麼寫 → 所以先去看看別人提供的範本 → 回來編輯 → 出去吃飯 → 再次回來編輯 → …. → 發現有個模板必須升級才能使用 → 猶豫了半天 → 決定購買進階模板

並且這個流程可能不是在一天內完成，而是一週或者更久。所以可想而知，能夠左右使用者最終要不要購買的因素非常的多；就如同 Samuel Hulick 在 User Onboarding 這本書中所做的比喻，這樣的過程就像登山一樣；而想要讓使用者一步一步的從山腳走到山頂，首先要做的就是給他一個強烈的動機。

提供足夠的動機

為了簡化命題的複雜度，我們就先以首頁的註冊轉換率來說明。

為了要讓使用者在首頁想要花時間註冊，我們得先告訴他我們能夠提供什麼。這聽起來很簡單，但卻有一個很重要的關鍵，那就是從使用者的角度出發，說他想得到的，而不是說自己有多厲害。

以首頁的副標題而言，「最簡單、好用的履歷工具」就不會比「讓你在十分鐘內製作一份專業的履歷」來得好；因為前者是在說自己有多厲害，後者才是使用者想要的。

或許你會問「簡單、好用的履歷工具不也是使用者想要的嗎？」確實可以這麼說，但使用者之所以在尋找簡單、好用的履歷工具，就是為了想快速製作一份專業履歷不是嗎？兜售產品本身不會比行銷產品的核心價值來得直接、強烈。（從行銷術語來說，就是 Actual Product 與 Core Product — Benefit 之間的差別。¹）

這也能說明為什麼我們為何在第一版首頁上我們寫了很多功能描述（例如響應式設計、獨立頁面、可以編輯原始碼等），但在第三版首頁則把這些描述都省去了；儘管第三版的文字較少，但卻更能打動使用者。

同樣的準則適用於任何 call-to-action 按鈕上。例如我們首頁的 call-to-action 不是「立即註冊」而是「開始製作」（因為立即註冊是我們要的，但開始製作履歷才是使用者要的）；又或者當我們鼓勵使用者製作多份履歷時（這是我們的付費功能），我們會加上「針對不同職缺客製化履歷，以提升錄取機會」的說明（同理，製作多份履歷是我們要販賣的功能，但是提升錄取機會才是使用者渴望的）。這些細節能幫助我們更有效地觸及使用者內心的渴望，進而讓他有更大的動機去做我們希望他做的事。

到這裡我們已經釐清了這個首頁真正要宣傳的核心價值了。如此一來也能更快速、有效地打動初次造訪這個頁面的使用者；現在他就像一個剛要啟程的登山者，興高采烈地打算一鼓作氣走到山頂上拿到他想得到的東西——如果他沒被路上的石頭絆倒的話。

清除路障

現在使用者已經有了足夠的動機邁向下一步，但是就像上一節提到的，使用者在達到目的前還有很長的路要走；為了讓他成功達到目標，我們需要確保這一路上的阻礙愈小愈好。一個方法是能不麻煩使用者就不要麻煩；另一個則是適時的給予提示，以引導使用者自然而然地走跨出下一步，或者避免不必要的疑慮。

方法一、把困難的事留到必要的時候再做

想像一個情境：使用者現在有意願註冊了，結果發現只能用 email 註冊，無法使用 Google、Facebook、或其他社群平台帳號登入，於是他只好輸入 email 和密碼註冊帳號；也不是不行，但他已有一分不耐。接著等他註冊完，螢幕正中間出現「請先認證您的信箱」；在別無選擇的情況下，他只好去信箱點開認證信驗證；也是可以，但此時他已經有五分不悅。認證完以後，發現竟然要先填信用卡才能免費試用一個月⋯⋯這時候使用者一個不爽，就把分頁關了— — 且很可能此生就不再回來。

使用者的不爽是可以很容易被理解的，畢竟他才剛剛看了首頁的文字，還不知產品到底好不好用，但卻被逼迫一定要做這做那，更糟的是竟然劈頭就想跟他要錢。

要避免類似的問題，原則就是「把困難的事留到必要的時後再做」。例如，為何我們一定要使用者認證他的信箱？你的回答是因為「因為我想確保使用者如果忘記密碼了話之後找得回來。」但實際上的情形可能是 80% 的註冊使用者一個月後就不會回到網站上了，這也表示，認證信只對 20% 註冊使用者中忘記密碼的人才有用；假設每二十人只有一人會忘記密碼，那就表示認證信只對 1% 的訪客有用；竟然如此，難道有必要為了 1% 的人麻煩 100% 的人嗎？但你不願妥協，繼續說「但我們是個求職平台，當企業對使用者的履歷有興趣時，我們要確保可以透過 email 聯絡到使用者。」好的，那這時認證信是必要的，但是難道不能等到使用者發布履歷或者應徵職缺前再要求他認證 email 嗎？

同樣的道理，在要求使用者填信用卡這麼敏感的資訊之前，最好先讓他可以先免費試用一段時間或者部分功能；等到用到一定的量、已經無法離開你們的服務時，再要求付費。

方法二、適時給予提示，讓問題就地解決，不要把問題留到 FAQs

能不用到 FAQs 就不要用到；FAQs 是亡羊補牢。使用者是懶惰的，當他們遇到困難時可能選擇直接放棄；會願意花時間寄信到客服信箱或者去查看 FAQs 的是少數。而且儘管不得已非得去查看 FAQs，也絕對是抱著一種非常挫折、不被理解、委屈的心情查看的。所以，下次在寫某個 FAQ 條目之前，請先想想有沒有辦法透過 UI 設計，讓問題就地解決。

舉例而言，CakeResume 過去常收到使用者問說我們提供的瀏覽量統計包不包含他們自己瀏覽所造成的流量。收到前三封時，我們都是直接回覆；但收到三封以上後，我們便知道這是一個需要被解決的問題。於是就在流量統計頁面加了一個小小的說明 “The pageview numbers below do not include those from your own account.” 從此就沒人在問過這問題了。

此外，在填寫信用卡資訊的頁面，我們會主動告知我們不會儲存使用者的信用卡資訊，並說明我們的交易是在安全的加密機制下進行的。由於這不是必要資訊，所以只在使用者游標移到 “!” 符號上時才會顯示。儘管在意的人可能不多，但我們盡可能排除任何能左右使用者做決定的疑慮。

除了排解疑難外，類似的提示也很適合用來輔助 call-to-action。例如當使用者新增一篇履歷後，我們會在編輯按鈕上出現紅色閃爍提示（下圖一），指引他點擊編輯按鈕；點擊編輯按鈕進到編輯器後，我們會出現另一個提示，請他拖拉第一個模板（下圖二）。

就如同 Steve Krug 的名作 Don’t Make Me Think 的書名一樣（讀完這本書我只記得書名，其他都忘了——但這就夠了 lol），這種小提示可以讓使用者更無腦的去執行你希望他做的事。或許有些小提示都只是 good to have，但累積起來，就能讓使用者感受到這個網站很替他著想，進而獲得使用者的信任。

提供小任務並適時給予反饋

以發布履歷為例；發布履歷是我們希望使用者達到的重要目標之一，但是發布履歷不是一項簡單的任務；使用者得花幾十分鐘甚至數小時編輯履歷才能發布。雖然我們一開始在首頁就給了他充分的動機去完成這件事，但如果在這過程中我們能夠適時地（例如完成某個階段任務後）予以鼓勵，那麼走完全程的機會就會提升。

這就像玩遊戲一樣，如果一開始就打大魔王，那使用者一定很容易就感到挫折。因此再打大魔王前，得先闖好幾關。每闖完一關，玩家的信心會更充足，且會讓他更想完成下一關，不然就前功盡棄了。

使用體驗也是一樣，我們需要把一件大任務拆成好幾件小任務，讓使用者一一完成，同時累積成就感與參與感。

回到發布履歷的例子。過去 CakeResume 在註冊後會自動幫使用者產生第一份履歷，但現在我們則是讓使用者點擊一個按鈕建立第一份履歷。雖然讓使用者多做了一件事，但卻能增加他的成就感。

點擊建立新履歷按鈕後，就會看到上一節提到過的編輯按鈕的提示；點擊編輯按鈕後，就會看到拖拉模板的提示。如此一來，就形成一個連貫步驟，且每個步驟結束後出現的新提示都是對使用者的反饋；讓他覺得這個網站在與他互動，一步一步的幫助他達成目標。

追蹤成效

現在我們已經知道怎麼樣給使用者動機、排除路障、並且適當的引導使用者達到最終轉換目標。但是這中間充滿了許多假設，最後還是必須以數據證明我們所做的優化是有效的。

雖然最好的測試方式是 A/B testing，不過老實說，實作 A/B testing 不是件容易的事——如果只是要測試按鈕的顏色或標題文字那確實很簡單，但如果要讓兩項不同的程式邏輯同時在一個網站上運行（例如要讓使用者手動建立第一份履歷或者系統自動產生）並加以追蹤，就會複雜。以 CakeResume 而言，為了效率我不常做 A/B testing，很多時候只能憑直覺判斷。但就算無法用 A/B testing 精準的知道修改前後的效果，但還是可以從修改前後的數據（如事件發生次數或者轉換率）得到約略的結論。

目前我主要使用的追蹤工具是 Google Analytics 以及 Mixpanel。回到我們最初舉的例子而言，我們可以將「進入首頁 → 註冊帳號 → 編輯履歷 → 購買進階模板」這個使用流程製作成一個 funnel，以追蹤在每個步驟的轉換率，並能針對某一個步驟的轉換率優化。