今天的話題，來自Goodui.org，關(guān)于提升頁面易用性及轉(zhuǎn)化率。本文帶來的建議和觀點(diǎn)，較適用于Web服務(wù)和移動(dòng)應(yīng)用的Landing頁面。我們可以看到越來越多這樣的頁面，有些相當(dāng)出彩，市面上也有不少相關(guān)的設(shè)計(jì)展示匯總文章。而本文則從設(shè)計(jì)原則和實(shí)踐的角度帶來一些思想武器供我們學(xué)習(xí)參考。
全文共32個(gè)要點(diǎn)，較長，今天先上一半，下周補(bǔ)完。接下來進(jìn)入譯文。
1.嘗試單欄布局
單欄布局可以讓你對內(nèi)容敘事進(jìn)行更好的控制。 從上到下的方式能夠以更符合讀者預(yù)期的方式對他們進(jìn)行引導(dǎo)，而多欄布局很有可能對頁面的主要目標(biāo)產(chǎn)生干擾作用。試著通過故事來引導(dǎo)用戶，并在底部放置最重要的Call to Action。
2.贈送禮物，而不是急于成交
向用戶贈送禮物，這不僅是友好的表現(xiàn)，而且是一種基于互惠原則的說服策略。所謂互惠，顧名思義，如果你通過贈予象征性的好處來表示友好，那么將來對方也會對你進(jìn)行回饋。
3.整合相似的功能，以簡化UI
我們會在無意當(dāng)中創(chuàng)造出多個(gè)功能類似或相同的元素，不奇怪，這是基本的熵原理——事物總是在向混亂的方向發(fā)展。留意那些名稱不同但功能重復(fù)的元素，這會增加用戶的認(rèn)知負(fù)荷，使他們產(chǎn)生疲勞感。通常，UI的復(fù)雜度越高，用戶的學(xué)習(xí)曲線就越陡峭?？紤]不定期的對產(chǎn)品UI進(jìn)行評估，對那些功能類似的元素進(jìn)行整合。
4.展示社會認(rèn)同，而非自吹自擂
社會認(rèn)同是另一種可以直接提升轉(zhuǎn)化率的說服策略。他人對你產(chǎn)品的談?wù)摵唾澰S，將會使Call to Action在用戶看來更具吸引力。試著使用一些知名機(jī)構(gòu)或媒體頒發(fā)的鑒定證書，或展示相關(guān)數(shù)據(jù)，這些都是很好的社會認(rèn)同證明。
5.多次展示Call to Action
這種方式特別適合于單欄布局的長頁面，或者也可以讓Call to Action在多個(gè)頁面中多次出現(xiàn)。你自然不想在一個(gè)頁面中一口氣展示10個(gè)同樣的Call to Action，然而如今長頁面越來越普遍，讓所有內(nèi)容都保持在“折線以上”的原則越來越不受用。你可以試著在第一屏當(dāng)中放置一個(gè)不那么強(qiáng)的Call to Action，然后將作用相同但視覺形式更突出的Call to Action放置在內(nèi)容底部。當(dāng)人們看過所有內(nèi)容后，他們會停下來，思考一下接下來做些什么——就在這里，完成轉(zhuǎn)化或關(guān)閉交易。
6.為交互元素使用更顯著、更具對比度的視覺樣式
例如配色、層次、對比等視覺風(fēng)格要素可以幫助人們更好的理解和使用你的產(chǎn)品界面，讓他們知道自己現(xiàn)在在哪，接下來可以去哪。為了清晰的呈現(xiàn)這些信息，可點(diǎn)擊元素(鏈接、按鈕)以及可選擇項(xiàng)目(選項(xiàng))、普通文字內(nèi)容的視覺風(fēng)格必須彼此形成顯著的差異，并且在全局范圍內(nèi)保持風(fēng)格的一致性。在下面的草圖范例中，我使用藍(lán)色來表示可點(diǎn)擊元素，黑色文字表示已選擇或當(dāng)前所在位置標(biāo)題。如果你能正確的使用視覺風(fēng)格，用戶將能更好的通過這些視覺線索瀏覽界面。絕不要讓這幾類視覺元素的呈現(xiàn)方式含糊不清，否則你就是在給用戶找麻煩。
7.推薦，而不是羅列選項(xiàng)
在展示多個(gè)產(chǎn)品選項(xiàng)時(shí)，可以嘗試重點(diǎn)推薦其中的一種，因?yàn)楹芏嘤脩艟褪切枰稽c(diǎn)推動(dòng)。我相信有相關(guān)的心理學(xué)研究可以證明，選項(xiàng)越多，人們做選擇的難度就越高，某個(gè)選項(xiàng)被選中的概率就越低。推薦多個(gè)產(chǎn)品中的一種，突出展示其相關(guān)信息，使其權(quán)重高于其他幾個(gè)選項(xiàng)，有用。
8.提供撤銷功能，而不是彈出確認(rèn)
設(shè)想一下，你剛剛點(diǎn)擊了一個(gè)按鈕或鏈接。撤銷功能尊重人類的基本意圖，允許首先平滑的產(chǎn)生相應(yīng)的行為。而另一方面，彈出確認(rèn)的形式會質(zhì)疑用戶的意圖，致使用戶對自己要做的事情產(chǎn)生疑慮。我愿意假設(shè)，多數(shù)時(shí)候，用戶的行為都符合自己的意圖，誤操作只是少數(shù)情況。當(dāng)用戶需要反復(fù)執(zhí)行某個(gè)行為的時(shí)候，低效、丑陋的彈出確認(rèn)就會一遍一遍的呈現(xiàn)，非常不人性化。嘗試通過撤銷功能讓用戶感覺自己正在充分控制局面，盡量不要通過確認(rèn)來提出質(zhì)疑。
9.聲明目標(biāo)用戶類型
你的產(chǎn)品是面向所有人的還是精確的鎖定某類人群？直言產(chǎn)品和服務(wù)的目標(biāo)用戶類型，這也是提升轉(zhuǎn)化率的有效方式之一。通過對用戶資質(zhì)的描述，你可以更精確的與你的目標(biāo)用戶建立關(guān)聯(lián)，而且會帶來一種“排他”的情感暗示。當(dāng)然，這種策略也有一定的風(fēng)險(xiǎn)，你可能會將潛在用戶的范圍限定的過小。但是我們必須相信，透明可以帶來信任。
10.直截了當(dāng)，不要拐彎抹角
你可以用顫抖的聲音沒有把握的傳遞信息，也可以自信滿滿的把話講出來。如果你喜歡以問號結(jié)束信息的內(nèi)容，并且用到“也許”、“可能”、“有興趣嗎？”、“想要xxxx嗎？”這樣的辭藻，那么你可以考慮一下增強(qiáng)自己的信心和權(quán)威性了。要提升轉(zhuǎn)化率，你有不少空間可以直截了當(dāng)?shù)年U述內(nèi)容，告訴人們應(yīng)該做些什么。
11.對比鮮明，不要似是而非
讓你的Call to Action相比于周圍的元素來說更加突出，容易辨識。你可以使用一系列的方法很輕松的提升其對比度：通過色調(diào)，你能在元素之間建立明暗對比；通過深度，你能在特定的元素與其余內(nèi)容之間建立層次(例如使用陰影和漸變效果)。此外，你還可以從色盤中挑選互補(bǔ)色，用在不同的元素當(dāng)中。綜合使用這些方法，鮮明的對比就可以在Call to Action與其他內(nèi)容之間建立起來了。
12.展示源產(chǎn)地
展示出你、你的產(chǎn)品或服務(wù)來自哪里，這可以讓你與用戶之間的溝通向個(gè)人化的層面邁進(jìn)一步。國家、州、城市的信息，這些都像是人在做自我介紹一樣，使產(chǎn)品給人的感覺更加友好。通常，表明產(chǎn)品的源產(chǎn)地也可以讓人或多或少的覺得質(zhì)量方面比較上檔次。
13.少些表單，讓用戶輕松些
人類生來就會對勞動(dòng)密集型任務(wù)產(chǎn)生抵觸心理，而填寫表單就是這樣一種任務(wù)。你每向用戶提供一個(gè)表單字段，用戶放棄填寫轉(zhuǎn)身離開的風(fēng)險(xiǎn)就會高一點(diǎn)點(diǎn)。每個(gè)人打字的速度是不同的，而目前來說在移動(dòng)設(shè)備上打字仍然是讓人相當(dāng)厭惡的事情。問問自己每個(gè)表單字段都是真正必要的嗎？如果你確實(shí)有很多非必填的字段需要提供給用戶來獲取相關(guān)信息，也可以考慮將它們移至單獨(dú)的頁面或任務(wù)狀態(tài)當(dāng)中。要把表單搞大是很容易的，但無益于提升轉(zhuǎn)化率。
14.讓選項(xiàng)一覽無余
你每使用一個(gè)下拉菜單，就會隱藏掉一些行為選項(xiàng)，用戶就會需要多付出些力氣來找到它們。如果那些隱藏掉的選項(xiàng)是要被放置在用戶瀏覽內(nèi)容、完成決策的主要路徑上的，那么你也許應(yīng)該考慮一下將它們一覽無余的呈現(xiàn)出來。而對于那些可以預(yù)計(jì)的、無需學(xué)習(xí)成本的操作，例如選擇日期和時(shí)間，或地理位置設(shè)置等，仍可以保持下拉菜單的形式。有時(shí)，下拉菜單也可以適用于那些需要用戶反復(fù)執(zhí)行相同動(dòng)作的界面；但如果某些操作是保證轉(zhuǎn)化率提升的主要Call to Action，在考慮下拉菜單的時(shí)候還是小心為妙。
15.保持內(nèi)容的連貫有序，避免“結(jié)束”的假象
“內(nèi)容結(jié)束”的假象是轉(zhuǎn)化率的殺手。特別是在長頁面中那些段落分隔的地方，當(dāng)心不要讓用戶覺得內(nèi)容已經(jīng)結(jié)束掉了。試著確定一種視覺模式與節(jié)奏，讓用戶可以得到明確的指引，持續(xù)閱讀內(nèi)容。對于有可能出現(xiàn)在“折現(xiàn)”位置的留白或內(nèi)容間距，要確保它們的尺寸不會過大。
16.保持聚焦，別讓用戶被鏈接淹沒
我們時(shí)常會創(chuàng)建出那種從左到右從上到下到處都是鏈接的頁面，并希望這樣可以滿足多數(shù)用戶的需求。不過如果你要打造的是敘事類的頁面，并會在內(nèi)容底部放置重要的Call to Action，那么建議你考慮更簡潔的頁面形式。要記住，任何位于主Call to Action之上的鏈接都會帶來一定的風(fēng)險(xiǎn)，有可能將用戶從你最希望他們做的事情當(dāng)中帶離。留意頁面上鏈接的數(shù)量；在發(fā)現(xiàn)型頁面(鏈接較多，相關(guān)內(nèi)容入口較多)與管道型頁面(鏈接較少，目標(biāo)集中，轉(zhuǎn)化率高)這兩類風(fēng)格之間找到微妙的平衡，增大用戶順利抵達(dá)主Call to Action的幾率。
17.呈現(xiàn)狀態(tài)信息
嘗試在內(nèi)容條目中呈現(xiàn)狀態(tài)信息。例如，郵件列表中可以展示已讀或未讀，發(fā)票列表中可以展示已支付或未支付等等。讓用戶了解內(nèi)容條目所處的特定狀態(tài)，這也是一種信息反饋方式，使用戶知道他們的行為是否產(chǎn)生了正確的結(jié)果，或是讓他們了解接下來需要執(zhí)行怎樣的操作。
18.在Call to Action中讓用戶了解可以得到的好處
想象一個(gè)頁面中的兩個(gè)按鈕。一個(gè)寫著“幫你省錢”，一個(gè)要你“注冊”。我打賭點(diǎn)擊第一個(gè)按鈕的人會更多，因?yàn)橐粋€(gè)孤零零的“注冊”難以展示產(chǎn)品的內(nèi)在價(jià)值?；蛘撸故竞锰幍膬?nèi)容也可以放在距離Call to Action很近的地方，以便讓用戶知道為什么要去點(diǎn)擊按鈕。當(dāng)然，不是所有的按鈕都需要展示這樣的文案；那些任務(wù)驅(qū)動(dòng)的“普通”按鈕更適于對轉(zhuǎn)化率沒有什么要求的環(huán)節(jié)當(dāng)中，或是需要用戶反復(fù)執(zhí)行的操作上。
19.使用直接操作代替情境菜單
有時(shí)，可以讓某些特定的界面元素具有交互性，來觸發(fā)顯示相關(guān)的任務(wù)選項(xiàng)，而不是直接提供一系列關(guān)聯(lián)性不強(qiáng)的動(dòng)作列表。例如，當(dāng)呈現(xiàn)一個(gè)數(shù)據(jù)列表時(shí)，我們通常需要允許用戶對每條數(shù)據(jù)進(jìn)行操作。你可以讓用戶通過鼠標(biāo)懸停使每個(gè)列表單元中的相關(guān)操作呈現(xiàn)出來(刪除、重命名等等)。另外一個(gè)關(guān)于直接操作的常見案例就是點(diǎn)擊數(shù)據(jù)條目本身(譬如一段地址信息)，使其進(jìn)入編輯狀態(tài)。相比于無視上下文情境而直接展示各種操作選項(xiàng)，這種交互模式可以讓用戶更加聚焦于當(dāng)前的目標(biāo)，減少界面復(fù)雜性和操作步驟。但要記住，對于一些較為常規(guī)的、情境化確實(shí)不強(qiáng)的普通操作來說，情境菜單仍有它的用處。
20.直接呈現(xiàn)表單
直接將注冊表單呈現(xiàn)在landing頁面當(dāng)中可以帶來諸多好處。首先，我們可以從流程當(dāng)中節(jié)省出一步，減少一個(gè)多余的頁面，讓用戶更省時(shí)。第二，直接將各表單字段呈現(xiàn)在這里，用戶就能對注冊流程的長度有一個(gè)明確的認(rèn)知。這種做法的前提是你的表單確實(shí)足夠短；當(dāng)然，你的表單也應(yīng)該足夠短，這應(yīng)該是你的設(shè)計(jì)目標(biāo)之一。
21.使用動(dòng)效，而不是突兀的切換
有些界面元素會隨著用戶的行為而隱藏、呈現(xiàn)、移動(dòng)、縮放。如果能讓這些反饋動(dòng)作隨著時(shí)間的推移而逐漸呈現(xiàn)出來，那么它們將更加容易被理解。動(dòng)效，讓反饋行為得到刻意的延緩，這可以使用戶的認(rèn)知過程得到尊重，給他們更多時(shí)間來理解界面元素在位置和尺寸上的變化所代表的意義。不過要記得，如果動(dòng)效過程超過0.5秒，用戶通常就會產(chǎn)生“緩慢”的感知。所以對那些需要快速完成的交互任務(wù)來說，動(dòng)效的持續(xù)時(shí)長一定要控制好。
22.嘗試漸進(jìn)式吸引，而不是急匆匆的要用戶注冊
與其不明不白的讓用戶立刻注冊，為什么不讓用戶試著執(zhí)行一些任務(wù)，在這個(gè)過程中充分展示產(chǎn)品的價(jià)值與個(gè)性呢？一旦用戶了解了產(chǎn)品的價(jià)值，并知道怎樣去獲得它，他們就會更愿意完成轉(zhuǎn)化。漸進(jìn)式吸引可以盡量推遲注冊流程，給用戶更多的時(shí)間和自由去體驗(yàn)?zāi)愕漠a(chǎn)品。
23.少些邊框，少些干擾
邊框會對頁面中的主要內(nèi)容產(chǎn)生干擾作用。用戶的注意力，對我們來說是非常珍貴的資源，因?yàn)槲覀冊谝欢螘r(shí)間內(nèi)只能抓住那么一點(diǎn)點(diǎn)。誠然，從設(shè)計(jì)的角度說，邊框可以用來清晰而準(zhǔn)確的界定空間范圍，但同時(shí)，它們也會消耗用戶的認(rèn)知能量。想要清晰的定義界面元素之間的邏輯關(guān)聯(lián)，同時(shí)又不會過多吸引用戶的注意力，你可以試著通過優(yōu)先級、對齊、背景色、字體等方式對元素進(jìn)行分組。在使用一些比較抽象化的UI設(shè)計(jì)(原型)工具時(shí)，我們很容易把線框矩形放的到處都是。在實(shí)際界面中，這些線框矩形會帶來一種隔離感，使其中的內(nèi)容脫離頁面整體的邏輯控制。因此，包含過多條條框框的頁面總會給人一種嘈雜凌亂的感覺。當(dāng)然有些時(shí)候，在這里或那里放一些分隔線還是有用的，但盡量首先思考一下是否有更清爽清晰的方式，既確保邏輯關(guān)系的體現(xiàn)，又能減少對主要內(nèi)容的干擾。
24.體現(xiàn)好處，而不是陳述功能
以目標(biāo)為導(dǎo)向，人們更關(guān)注產(chǎn)品能給他們帶來怎樣的好處，而不是產(chǎn)品具有哪些功能。“好處”可以更加清晰的定義產(chǎn)品的價(jià)值。Chris Guillebeau在"The $100 Startup”當(dāng)中寫道，人們非常關(guān)注于擁有更多的愛、金錢、認(rèn)同、能自由分配的時(shí)間；同時(shí)希望有更少的壓力、矛盾、麻煩與不確定性。當(dāng)你向用戶介紹產(chǎn)品時(shí)，我相信總會有一定的空間來向他們展示產(chǎn)品所帶來的好處，能幫他們解決的問題，等等。
25.做好空數(shù)據(jù)狀態(tài)的設(shè)計(jì)
不同的情況下，你可能需要向用戶展示0條、1條、10條或成千上萬條數(shù)據(jù)，它們可能需要以不同的方式進(jìn)行展示。而其中最常見的，就是從空數(shù)據(jù)狀態(tài)到多條數(shù)據(jù)的過渡。很多時(shí)候，我們會非常在意數(shù)據(jù)的展示形式，卻忽略了初始狀態(tài)下沒有數(shù)據(jù)時(shí)的形式，這會讓用戶覺得產(chǎn)品并沒有經(jīng)過認(rèn)真的設(shè)計(jì)。在很多應(yīng)用里，空數(shù)據(jù)狀態(tài)就是個(gè)冰冷的世界，用戶第一次使用時(shí)只能看到一個(gè)空白的界面，沒有任何引導(dǎo)。其實(shí)，我們完全可以讓空數(shù)據(jù)狀態(tài)成為引導(dǎo)用戶學(xué)習(xí)，甚至是建立情感關(guān)聯(lián)的良好契機(jī)。
26.默認(rèn)參與
“默認(rèn)參與”的意思就是讓用戶在默認(rèn)情況下不需要執(zhí)行任何操作便可以觸發(fā)某種行為(默認(rèn)選中)。與之相對的是“默認(rèn)不參與”，也就是用戶必須首先執(zhí)行一個(gè)選擇動(dòng)作，才可以觸發(fā)參與。“默認(rèn)參與”的策略有兩點(diǎn)好處， 首先，它可以減小行為流程中的阻力，因?yàn)橛脩舨恍枰鋈魏问?；第二，它是一種有效的推薦機(jī)制，用戶會覺得，“既然他們推薦這樣做，說明多數(shù)人會這樣做，那么我可能也該這樣做”。當(dāng)然，這種策略時(shí)常會引發(fā)爭議，它會被看做某種低劣的營銷策略，因?yàn)楹芏喈a(chǎn)品會故意降低“默認(rèn)參與”文案的可讀性，有些則會在里面玩文字游戲，例如使用雙重否定等等。要正確而有效的使用這種方法，你需要讓文案清晰易讀，容易被正確的理解，使用戶明白其默認(rèn)的含義究竟是什么。
27.保持一致，不要讓用戶重新學(xué)習(xí)
保持界面設(shè)計(jì)的一致性，這可能是我們最熟知的一條設(shè)計(jì)原則了。在界面元素的視覺表現(xiàn)形式及交互模式上保持良好的一致性，這可以有效降低用戶在使用產(chǎn)品時(shí)的學(xué)習(xí)成本。當(dāng)我們點(diǎn)擊按鈕或是移動(dòng)滑塊時(shí)，我們會希望這些元素的樣式、行為及結(jié)果與我們的期望保持一致。一旦失去一致性，人們就需要學(xué)習(xí)新的模式。你可以通過很多方式來保持設(shè)計(jì)的一致性：配色、行為、位置、大小、形狀、文字標(biāo)題、語言等等。但是，你也要知道，“不一致性”也有它的用武之處。“不一致”的界面元素或行為模式會從較深的層次上引起人們的關(guān)注，所以你可以試著在特別需要用戶關(guān)注某些東西的時(shí)候使用這種方式。
28.使用合理的默認(rèn)值來代替手動(dòng)填寫
在表單字段中預(yù)先填寫合理的默認(rèn)值，這是一種幫助用戶盡快完成表單填寫的常見方式。最差勁的體驗(yàn)之一，就是用戶曾經(jīng)填寫過某些數(shù)據(jù)，而你還要他們重復(fù)這些動(dòng)作。使用經(jīng)過調(diào)研驗(yàn)證的恰當(dāng)數(shù)據(jù)，或是曾經(jīng)保存過的用戶輸入內(nèi)容作為表單字段的默認(rèn)值，讓用戶少做些事情，多些輕松。
29.使用約定的設(shè)計(jì)模式，不要重新發(fā)明輪子
“約定”是“一致性”的老大哥——如果我們能在一個(gè)界面當(dāng)中保持設(shè)計(jì)的一致性，用戶就不需要學(xué)習(xí)太多新東西；如果能在產(chǎn)品全局使用約定一致的設(shè)計(jì)規(guī)則，學(xué)習(xí)曲線就會進(jìn)一步下降。在UI設(shè)計(jì)約定的幫助下，我們知道要關(guān)閉一個(gè)界面，通常需要在右上角(或左上角)點(diǎn)擊相關(guān)的按鈕；我們知道“設(shè)置”按鈕通常會長成什么樣子。當(dāng)然，總會有設(shè)計(jì)約定無法滿足需求、必須使用新模式的時(shí)候。
30.“避免損失”還是“獲得更多”？
人們都是想贏怕輸?shù)摹８鶕?jù)說服力心理學(xué)中的規(guī)則，相比于得到新的好處，我們更傾向于避免損失已有的東西。這條規(guī)則也適用于怎樣向用戶展示產(chǎn)品的價(jià)值。闡明你的產(chǎn)品可以幫助用戶避免怎樣的損失，包括健康、財(cái)富或社會地位，這種策略可能會比單純向他們展示產(chǎn)品所帶來的額外收益要更加有效。想想看，保險(xiǎn)公司賣的究竟是什么？是那些在意外發(fā)生之后可以得到的“收益”，還是一種對既有事物的保障感？
31.視覺的層次與節(jié)奏
好的視覺層次與節(jié)奏可以幫你有效的區(qū)分內(nèi)容的優(yōu)先級。視覺層次是通過對齊方式、距離、配色、縮進(jìn)、字號、元素大小、邊距等要素體現(xiàn)出來的。當(dāng)你正確使用這些視覺設(shè)計(jì)要素時(shí)，它們能有效的提升內(nèi)容的可讀性，為人們的注意力提供方向，讓他們知道應(yīng)該在哪里停下并認(rèn)真閱讀。良好的視覺層次可以為頁面帶來必要的阻力，讓人們從上到下更有節(jié)奏、更有關(guān)注要點(diǎn)的瀏覽頁面，而不是漫無目的的迅速掃視。你希望用戶通過高速公路盡快到達(dá)終點(diǎn)(瀏覽到頁面底部)，還是走一條景觀路線，看到并記住沿途的有趣事物？
32.為相關(guān)的元素分組
這是提升可用性的基本方法之一。我們都知道，刀和叉，打開和保存，這些東西應(yīng)該被放的更近一些。具有關(guān)聯(lián)性的要素在位置上應(yīng)該更緊密，以體現(xiàn)邏輯上的相關(guān)性，降低界面整體的認(rèn)知負(fù)荷。在極其有限的會話時(shí)間內(nèi)再浪費(fèi)時(shí)間來尋找內(nèi)容和功能，這對于用戶來說可不是有意思的事。
