Google近期發佈一系列UX playbook，內容涵蓋電商 、旅遊 、金融 、不動產 、新聞等等領域，列舉出許多mobile端的品牌實際案例，個人認為堪稱新手教科書。但，誠如Google所說，裡面列出的功能並非適合所有網站，UX是經過縝密嚴謹的研究統計結果，並非全然是通則，最好還是做過A/B test來確立成效。
我身處旅遊產業，以下會用自己的產品分享Google在旅遊篇的重點，算是替產品健檢一下(汗，有更好的案例也會分享出來，如果你有興趣就給他看下去~
適合此文讀者
- 網站介面規畫.UX相關工作者
- 對旅遊電商產品感興趣的朋友
一. 首頁/到達頁
1. 在第一屏清楚地顯示CTA
如何設計有成效的CTA是門高端的藝術，但把握三個原則基本上不會造成消費者的困擾 : 簡單、位置明顯、切中要點。為了避免user一進到頁面不會不知所措，Google認為CTA的位置最好是不需捲動頁面即可看到。如果頁面資料很豐富，無法在第一屏塞進去，通常會採用floating的方式，把CTA pin在底部，這樣不管畫面捲到何處user都可以明顯地看到它。
2. 在第一屏清楚地顯示產品價值主張
講述產品價值主張簡單說就是告訴使用者為何非你不可，你的服務有什麼獨到之處，價格最優惠?服務最周到?資料最齊全?
我的產品沒有做到這點(羞，但我認為AsiaYo的APP做得不錯，他們在首頁底部清楚地條列出自己產品的優點，並且輔以實際的數據增加說服力，尤其對於新創品牌來說，可以加深消費者的印象及消弭不安感。
3. 使用適當大小的字元並提供足夠的觸控區域
討論這點的前提是 : 產品有沒有提供友善行動裝置的瀏覽方式? 網站有RWD嗎?或是有另外做msite?還是有開發APP? 除了因應裝置之外，了解產品使用者的年紀也是重點之一，若字元偏小，肯定會流失一些高齡用戶。
4. 告知會使用cookie做什麼事
現今網頁追蹤技術推陳出新，越來越多產品著重在"個人化"的服務，嘗試透過大量數據分析，自動推薦專屬商品給使用者，企圖達到更有效率的行銷效益。透過cookie來取得使用者操作數據是常見的做法，由於個資法問題，網站有義務告知取用cookie資料來運用在何處。我的產品並沒有在首頁主動告知而是在註冊的隱私權政策中提及，KKday則是在首頁下方即有提示。
二. 搜尋
1. 主動偵測或是預設地點欄位
旅遊產品的搜尋引擎必填的項目不外乎有 : 時間 、出發地、目的地、人數等等。以台灣來說，可能絕大多數使用者都是從桃園機場出發，所以出發機場可以預設桃機，便減少一個欄位的填寫時間。但若是中國或是美國這些地域廣大的國家，常見的做法就是主動要求存取使用者地理位置，並透過系統判斷。預設顯示距離最近的機場。
2. 提供autocomplete的搜尋方式
Autocomplete每個人一定都使用過功能，最常見的就是Google搜尋引擎，當使用者輸入關鍵字，就會根據輸入內容下拉顯示選項，點擊選項就會把那個值帶回欄位。
3. 顯示搜尋歷史記錄
這個功能大家都很熟悉就不贅述了，但我認為易遊網的搜尋記錄清楚好用，獨立一區塊來顯示，也可以清除記錄。
4. 在選單中鼓勵使用者註冊或登入
大部分行動版網頁的登入註冊都會放在漢堡選單內，這是使用者在不同網站操作一向的習慣，可以避免找不到。
5. 在選擇日期的功能中避免使用下拉選單
目前流行的做法就是點擊日期欄位時另開一個lightbox來顯示calendar view，讓使用者專注在選日期這件事上。透過點擊或捲動來切換月份，點擊第一次是選出發日期，點擊第二次就是回程日期。
6. 讓使用者可以靈活地切換日期
有上網自己買過機票的人就會知道，票價是每天、每個小時、每個航段的價格都是浮動的，大家總會把理想中的出遊日期比價一番才做決定。但切換日期就必須等待重新搜尋撈取價格的時間，讓使用者等待基本上不是件好事，因此就會發展出如下圖紅框的功能。
我們會預設顯示使用者搜尋日期的最低票價，同時也會顯示前7天及後7天的最低價格，使用者就可以很清楚知道哪個日期才是票價相對低的，直接點擊日期就會把搜尋引擎條件快速切換到該日期。
7. 在選擇日期的功能中顯示價格
接續上一點，如果使用者可以在選擇日期時就預先知道價格呢? 但價格若要保持即時性，是否每次打開日曆都要把所有價格重新搜尋一次? 那這個日曆可能要loading個幾分鐘才能完整示...。
我目前看到Skyscanner的解決方案是，當使用者在他們網站查詢某個條件時，就把那個搜尋結果的最低價keep下來，藉此來更新價格。例如:下圖還沒有價格的日期就是還沒有使用者查過那些日期。
三. 搜尋結果頁/商品頁
1. 提供詳細的商品內容，讓使用者易於比較
雖說提供越多資訊可以幫助使用者找到最符合需求的商品，但以我規劃的經驗，其實只要列出使用者最在意的資訊即可，詳盡的細節可以收合起來，若使用者真的對商品有興趣再誘導點擊查看。
以飯店商品舉例，其實有超過半數的使用者在訂購時，只看了房型/床型/可否吸菸/含不含早餐等等資訊，並沒有點擊顯示詳細資訊更深入了解，就下單訂購了。有另個可能性就是：圖片已經展示所有須知的資訊（圖片很重要！）
2. 使用視覺效果/icon讓資訊傳遞更容易
icon大多數確實是裝飾作用，但當你逛到一個不熟悉語言的網站，這時有icon輔助即可跨越語言障礙來了解內容囉。
3. 提供方便的排序及篩選功能
大家應該都有網購的經驗，這兩個是電商標配的功能。值得留意的是，排序跟篩選是很好收集使用者數據的地方，飯店大家都篩選幾星級?預算普遍是多少?有多少人喜歡列表排序是價格高到低而不是評價高到低?在這些地方下足追蹤及分析的苦功可以得到意想不到的收穫!
4. 使用tap來選擇數量，避免使用下拉選單
這裡並不是指下拉選單就是個體驗不好的元件，而是要根據選項數量來挑選適合的選擇方式。如果只有2個選項，那可以使用radio btn或是switch來取代下拉選單。
5. 顯示結果總數
目的是幫助使用者預先了解結果數量多寡。如果顯示總數是1000筆，使用者就會有預期心理，知道這個list要捲很久才能看完，反之亦然。
6. 使用地圖檢視地點
提供地圖視角檢視飯店所在位置有助於使用者了解飯店跟鄰近地標景點的實際距離。
7. 讓使用者收藏搜尋結果
對於使用者來說，收藏功能價值在於關注及暫存商品，甚至是價格降低提醒等(類似於購物車的概念)。對於網站本身來說，可以判別出使用者對哪些商品有興趣，根據收藏的內容再推薦相似的商品，達到精準行銷。
四. 訂購
1. 顯示最終價格(含稅含手續費等)
旅遊業常見的價格手法就是在商品頁時只顯示部分的費用，乍看之下很便宜，等到使用者填完旅客資料，好不容易走到付款的步驟，卻發現結帳金額突然被加上服務費、稅金之類的額外費用。業者賭的就是使用者有沒有嫌麻煩的心態：「阿好麻煩喔，都走到這步了，200塊就送他。」
我自己的產品是把總價在一開始就顯示清楚，直到付款前都是一樣的價格。
2. 告知使用者正在使用安全結帳
資安問題層出不窮， 根據美國電商相關研究機構指出，有18%的顧客因為不信任網站的安全性於是放棄結帳。我自己身邊就有朋友把信用卡資訊存在國外訂房網站，結果被盜刷。告知網站支援哪些安全憑證讓顧客感到安心，才能有效增加結帳完成率。
3. 提示使用者目前所在的訂購步驟&訂購所需時間
為了減少訂購時的不確定性及負面情緒，結帳流程通常都會做步驟提示。結帳步驟少是易用性的指標之一，但是少不代表是易用性高。流程的切分才是關鍵，以旅遊商品來說會切為三個步驟:
確認商品內容 : 因為旅遊產品單價高且內容繁雜，必須讓使用者double check後再下訂單。
填寫旅客資料 : 因為訂票及保險等等，所需填的資料相對多，必須獨立一頁。
付款 : 選擇支付方式、使用點數、及填寫信用卡。
4. 在欄位中告知驗證結果&highlight出錯誤的已填欄位
在做流程規劃時，一定會包含下列五種使用狀態 : 理想狀態（Ideal State）/空白狀態（Empty State）/錯誤狀態（Error State）/局部資料狀態（Partial State）/載入中狀態（Loading State）。
這裡指的就是Error state，當使用者操作網站發生錯誤時，要採用適當且清楚的方式告訴他哪邊錯了，並引導他該怎麼處理這個錯誤。例如資料格式填錯，理當要顯示正確的格式是什麼，請使用者遵守。關於五種狀態這篇可看更多。
5. 支援跨裝置分享的行為
也就是指分享功能，例如:pc跨mobile就會提供QR code掃描，mobile跨mobile常見的就是用社群平台(FB,LINE)分享，或是一鍵複製連結。
6. 創造緊迫性氛圍促使消費
電商創造緊迫性氛圍常見的手法有 : 這個商品只剩x件! 特惠倒數10分鐘!等等，大多數其實都不是真的限時限量，只是在促購。但旅遊業即時價格的商品卻是真的有可能買不到!例如訂購機票時，就會利用提示希望使用者盡快填寫完訂單資料，因為時間過越久，票價很有機會變動或是售完。甚至如果使用者x分鐘內沒有動作就強制使用者重新載入頁面，來確保價格是最即時的。
五. 登入/註冊
1. 使用社群平台(第三方)登入/註冊
使用第三方登入/註冊的目的就是要略過欄位填寫的步驟，降低註冊的困難度，提高成立訂單的效率。但也有部分使用者不用願意授權社群帳號，甚至是不信任社群平台(我遇過有使用者怕臉書倒閉的...)，因此還是需要保留Email或手機號碼為帳號的註冊流程。
2. 告知使用者登入/註冊的好處
人們都喜歡不勞而獲XD，例如Tripresso的註冊畫面就寫出了註冊即可領取500元折價，動動手指就可以得到優惠，利用誘因來增加使用者註冊的機會。除了折扣，有些旅遊平台也會主打，註冊之後可以更有效管理訂單等功能取向的優勢。
六. 完成訂單後
1. 在首頁即可查詢訂單
訂單查詢通常都藏在首頁漢堡選單內，方便使用者快速找到管理訂單的地方，越是常用的功能必須能容易被使用者找尋，而不是藏在網站深處，需要通過層層關卡才能找到。最常被忽略的內容就是FAQ，太多網站的問答都放在奇怪的層級，導致使用者找不到解答，只好打電話給客服，如此一來就會增加客服人力負擔。
2. 提供再次訂購的功能給商務客
Google認為商務客也許會重複訂購同樣的商品，例如很常從台灣去上海出差，就提供可以讓商務客快速訂購台北飛上海的機票。這裡我舉個旅遊業以外的案例 : Foodpanda的重新下訂功能，我自己是胖達的愛用者(請忽略我早餐吃了什麼)，點擊重新下訂就可以快速訂購之前曾點過的餐點，省去選餐的步驟，有異曲同工之妙。
2. 可以更換語系和貨幣
當產品的市場遍布海外，就必須提供多語系和多幣別的功能，且目前大部分多語系都會自動判讀使用者位置而選擇語系。
(題外話 : 我不懂為何Google把這點列在post-booking，這應該是一入站就需要的功能阿XD)
3. 允許使用者儲存電子憑證
應該有很多人曾經使用過紙本的入住憑證到飯店櫃檯check-in，近年OTA發達，業者都改採用電子憑證，只要出示電子憑證或是掃QR code即可完成。不僅飯店，機票及旅遊票券(從樂園門票到按摩體驗都有)也都採用電子憑證。
結語
以上是我的案例分享，再次申明 : 裡面列出的功能建議並非適合所有網站，必須根據使用者的反饋來決定 介面設計、文案內容等等，數據不會說謊的!寫完這篇文章也發現其實自己的產品大多都符合Google提出的建議(笑)，其中當然有很想做但還未被實做出來的功能，甚至也有已經規劃完成，還沒進入排程的(哭)，期望它們不會胎死腹中囉~
最後如果有任何指教，或是你有更好的案例想分享，歡迎提出一起討論!
