2019年初Google發布了包括零售、旅遊、金融…等不同領域的UX Playbook，不論是負責數位行銷、網站分析、UI/UX，或是正在經營電商的朋友來說，這好幾大本厚厚的UX Playbook都是相當重要的學習資源啊！
因為Playbook是以英文發布同時又真的很厚（不誇張，電商/零售就108頁…），這篇會先針對 Google UX Playbook for Retail 點出的第一個項目——「首頁/到達頁」進行中文摘要，並加入一些自己的補充，歡迎大家揪錯與討論。
1. 首頁上半部需有清楚的CTA（call-to-action）
CTA，呈現形式可能是一段文字、一張圖片，或一個按鈕。它的目的很簡單，就是刺激受眾採取實際行動。在電商/零售領域，最重要的實際行動通常是這兩個—加入會員，以及下單購物。
以Amazon和ASOS這兩家超巨大的跨國電商為例，一進到手機版的首頁，完全不用進行任何的滑動，視線就會自然落到CTA button上面了，轉換率的表現通常也會更好。
※不過，除了電商/零售之外，「首頁上半部需有清楚的CTA」這件事，聽起來雖然很直覺，但並不是絕對。如果你的產品內容相對複雜（例如專門銷售給企業客戶的軟體解決方案），首頁/到達頁先進行產品介紹與說明，讓你的潛在客戶先對產品擁有初步認識，然後再放置CTA，會是比較推薦的作法。（延伸閱讀：Call to Action: Above or Below Fold?）
2. 描述性的CTA
通常當我們在討論應該如何設計好的CTA時，強調的都是短而有力，清楚明確，而不建議使用描述性的句子。
欸等等，Google不是說要「描述性的CTA」嗎？
是的，所以在短的同時，又需要有描述性，就是大家的難題！（敲黑板）
Google在Playbook中特別提醒，不要單純使用「next」、「continue」、「shop」等詞彙，因為對於使用者來說，「繼續」會繼續到哪裡去？「購買」到底代表可以購買到什麼東西？全部都是很模糊的，自然會減少使用者點擊CTA的動力。
3. 首頁上半部需有清楚的利益導向價值主張（ benefit-oriented value prop）
價值主張通常會以這兩種形式呈現：「公司/產品能夠提供給使用者什麼價值」，以及「公司/產品對使用者而言代表著什麼價值」（如果想知道價值主張應該怎麼設計，推薦閱讀：打動目標族群，設計高轉換的價值主張）
Google Playbook for Retail相對來說更強調前者，而且明確的點出了「利益導向」這四個字。白話一些，就是「你的公司/產品能夠帶給使用者什麼好處」。舉例來說，target.com以醒目的banner明確告訴使用者「不用再等待了」，而westelm.com則是強打「全館8折，錯過現在，更待何時！」從Google的舉的例子也可以看出競爭激烈的電商市場當中，利益導向價值主張常常會是：
品項齊全—使用者可以節省到處搜尋品項的時間，一站就能搞定
到貨迅速—使用者可以節省等待到貨的時間
價格就是低—使用者可以節省$$$$$！
4. 不要使用整頁的插頁式廣告
沒有錯，說的就是你我都最痛恨的那種廣告，打開網站之後就整頁蓋版，還讓你常常找不到右上角的X，找到了之後又常常因為X太小讓你手殘按進廣告（眼神死）
當然，這就是兩難了——做為廣告主，你絕對會希望自己的廣告能夠超醒目、讓使用者不得不看見。整頁的插頁式廣告的確在某種程度上能夠滿足廣告主的期待，但同時你也很可能因此引來使用者的負面印象。因此比較能夠取得平衡的方式是，在使用廣告吸引使用者的注意力的同時，避免惱人，並且必須留給使用者選擇的空間。
以下三個網站都採用將廣告置底的方式，整頁的插頁式廣告、置中pop up廣告，以及置底廣告，是不是置底廣告最不惱人呢？
5. 移除自動輪播
「什麼！自動輪播不是很常見嗎！」的確，現在瀏覽各家電商，首頁banner使用自動輪播的比例其實相當高。站在（不懂網站設計的）老闆的角度，想要使用自動輪播並不令人感到意外，畢竟電商在同個檔期的活動、商品那麼多，如果不使用自動輪播的話，使用者怎麼可能看到所有我們要他看的資訊？
但問題來了：使用自動輪播，使用者真的就會看見我們要他看的資訊嗎？
研究顯示，自動輪播，其實沒用。Google Playbook列出了以下圖表，很明顯的，只有擺在位置最顯眼的第一張擁有超過80%的點擊率，其餘位置的點擊率都非常悲劇。為什麼呢？
原因在於：
（1）人眼在對動作有反應的同時，會漏掉重要的訊息
（2）太多訊息，等於沒有訊息
（3）廣告視盲（Banner Blindness），使用者根本沒有看
（閱讀全文：Don’t Use Automatic Image Sliders or Carousels）
因此與其使用自動輪播，Google給我們的建議是不如思考「如何讓使用者知道他們其實還有更多資訊可以看」，至於要不要看，讓使用者自己選擇。
在UI設計上有一些常見的做法，一種是在banner下面加上頁面指示（ Page Indicator），顯示banner數量以及讓使用者得知他們目前所在的位置，例如NOVICA在banner下方設計的小圓點。另一種作法可參考macy’s與ASOS，特別將右側頁緣的橫幅圖卡以不完整的姿態呈現，隱隱透漏的訊息是：「還有東西喔，往左滑滑看吧！」
6. 在首頁顯示最受歡迎的類別
Google Playbook for Retail很不負責任的（？？）在第6點當中沒有任何文字說明，但我們還是可以試著理解看看，為什麼應該將最受歡迎的類別放在首頁呢？
當某項類別越受到使用者歡迎，就表示這項類別越與使用者的購物需求相符，而如果我們能夠將最受歡迎的類別放置在首頁，對於初次造訪網站的新使用者來說，他們就越有可能感受到「嗯，這家電商好像可以滿足我的需求耶！」當然也就更有機會延長他們停留在網站的時間，進而觸及更多商品。
7. 使用易讀的字體
Google Playbook for Retail建議使用字體為16px+。這項應該不用多說，一個連字都看不清楚的網站是沒有人會想要使用的。
8. 善用社會認同（Social Proof）
好的，終於來到〈首頁/到達頁〉的最後一個重點。不過，在討論「社會認同」（Social Proof）之前，我們先來聊聊一些社會心理學吧！
「從眾」（Conformity） 是研究社會心理學時必定討論的重要現象，學術上對於「從眾」的定義是：因他人的影響—不論是真實的或是想像的—而改變自己的行為。但為什麼人們會出現從眾效應呢？
第一個原因是資訊性的社會影響（ Informational Social Influence）。真實生活中，人們每天都必須做出抉擇，然而在做出決策之前，很多時候我們根本無法獲得充足的資訊，又必須要在極為短暫的時間內決定，這個時候他人的反應就非常容易影響我們，而在依循他人的想法做出決定的同時，我們也會不知不覺的打從心底相信，自己所做的決定是正確的。
第二個原因則是規範性社會影響（Normative Social Influence）。與資訊性的社會影響不同，我們心裡可能有自己的想法，但有時候為了被他人喜歡、被團體接納、不要被認為是怪咖，我們還是會順應他人的想法，做出與他人相同的決策。
「社會認同」其實就是基於規範性社會影響的概念而來，比起品牌以平鋪直敘的方式宣稱自家優勢，首頁/到達頁所刊載的產品推薦或Trust Icon，更能夠對網站使用者的決策行為產生直接的影響。
順便補充一下Trust Icon常見的使用方式，如果品牌有跟大型企業合作、獲得某些認證、隸屬於某些組織等等，就可以將相關LOGO置放於首頁/到達頁上提升自家的可信度。畢竟網站使用者對你可能很陌生，但他們應該都對一些知名企業或組織小有認識！
（如果想知道更多社會認同的操作方式，推薦閱讀：Social Proof: What It Is, Why It Works and How to Use It）
關於首頁和到達頁，就先整理到這邊了。如果你想閱讀Google釋出的英文原始版本，在這裡唷。
謝謝你的閱讀，如果你喜歡我的文章，請幫我拍拍手，我會更努力在腦汁榨乾的下班後書寫的。