DMA01
Google UX Playbook — 金融財經手機版規劃指南

Google UX Playbook — 金融財經手機版規劃指南

Iris Chen

金融財經UX Playbook 共有106頁英文內容,因為我約有10年工作經驗在金融財經數位平台產品經理 Product Manager領域 、也負責過亞洲多國股市網站(台港韓印東南亞等),就來幫大家中文化說明一下~

前陣子 Google 提供各產業手機的網頁設計指南 UX Playbook,涵蓋電商、新聞媒體、旅遊、金融財經、不動產以及顧客經營等領域。

金融財經UX Playbook 共有106頁英文內容,因為我約有10年工作經驗在金融財經數位平台產品經理 Product Manager領域 、也負責過亞洲多國股市網站(台港韓印東南亞等),就來幫大家中文化說明一下~

首先,來定義一下金融財經的範圍。

在我曾負責的各式各樣的數位平台中 — 媒體、電商網站、線上課程、會員經營、保險、股市、理財金融等,我覺得金融財經領域的數位產品經理工作是非常有難度的。它需具備有二個面向的專業:金融財經背景+數位產品規劃能力,要找到這樣跨領域人才很不容易。

金融財經平台又依照金融產品的差異性,有非常多具Domain Knowledge的功能機制設計,純粹財經新聞網站我們就不多說了。股市平台會有報價串接、線圖公式邏輯、投資組合、投資商品推薦篩選、線上下單等,期貨/選擇權/外匯等也有不同的報價邏輯。保險商品的建議書平台具有非常複雜的精算與條款邏輯規範、以及個人的保單試算,更不用講整個數位銀行機制都相當的複雜。產品經理對於不同的金融商品結構以及使用情境就必須有很深入的涉獵,才能駕馭相關數位產品平台設計。

拉回來看Google 這份UX playbook for Finance,內容比較偏向銀行存貸上的設計建議, 針對以下六個領域,提供了25個 UX設計原則,以協助手機版網站規劃:

  1. 首頁/著陸頁
  2. 選單
  3. 產品頁
  4. 商品比較/訂價
  5. 轉換流程
  6. 表單優化

另外,也針對登入與註冊、付款、驅動APP下載等UX設計做詳細的說明。

在進入主文之前,這段提示非常非常重要!

我們在參考外部的UX設計建議時,要隨時記得「別人做得有效的設計,不代表自家相同的設計也有效,因為目標群眾TA和使用情境都可能不同,所以請別原封不動照抄。」最理想的狀況是做A/B testing加以驗證,不過這份playbook的建議,還是具有相當的參考價值。

 

§ 首頁/著陸頁設計

■ 原則一:請在第一屏提供清楚、價值導向的行動召喚(CTA;Call-to-action)設計

第一屏的CTA設計這件事我大概跟同事講了100多次了,若要提升轉換率,就要非常重視CTA設計,這也是值得投入資源做A/B testing的地方。可測試的 A/B testing 變數項目,包含CTA button按鍵的顏色、文案、底圖、位置等。

BettingExpert.com 註冊頁面A/B testing

例如上圖 BettingExpert.com的註冊頁面A/B testing結果顯示,改變註冊區塊上的文案內容,竟然提升33%的會員註冊率。

■ 原則二:請在第一屏展示清楚的價值主張

如果這是一個新的平台、或者網站目的在於吸引新手加入,第一屏也應該提供清楚的「價值主張」,告訴用戶為何要使用我們的服務。價值主張包含以下三點:

  1. 說明我們的產品如何解決用戶的痛點
  2. 提供特別優惠
  3. 告訴潛在顧客為何應使用我們的服務、而非競爭對手的產品

(但我覺得第三點要很謹慎使用,以免弄巧成拙,反而幫競爭對手做宣傳)

■ 原則三:為CTA排出優先次序

在UX設計上,產品經理必須能判斷CTA的權重!也就是PM要想清楚,在這頁面中,我希望使用者第一件事情做什麼、第二件做什麼,並且清楚地跟UX/UI人員說明。

上圖提供了非常好的CTA權重差異化UI設計示範。在Lemonade網站,觸發用戶去「Check our prices」是最重要的,所以用桃紅色底Button呈現、次要為「Watch the video」,這樣可以很清楚地看出設計層次感。

我曾看過有些網站/APP很重視CTA,但每個CTA的權重都給的一樣,結果使用者完全不知該點哪裡,頁面上花花綠綠的非常可怕,造成反效果。

■ 原則四:設計清楚的多種產品服務展示(icons)

有時候為了追求精簡美觀,有些人會把產品服務分類收到漢堡選單內,但切記一個原則 ” I see and I remember.” 有看到才會用,別讓使用者還要到處去找,影響使用者體驗。

現在這種設計相當常見(特別是在電商網站)。

■ 原則五:使用網友證言/評價以贏得信賴

這點我持保留!網友證言要謹慎使用。

如果是商品眾多的大型平台式服務(例如淘寶),網友證言或經驗分享對於平台營運是有效益的,無論網友是正面或反面的意見,皆能幫助使用者在眾多商品中作為選擇判斷參考。但如果商品不多的網站(例如品牌電商),就要很小心使用。網友的負評很可能會直接影響到網站(商家)本身的評價。

另外,網友證言的設計上,要不要顯示「證言人的照片」這件事情也很有趣。我曾看過一份國外的A/B testing報告,由於使用者對於照片上的人可能會有些刻板印象或過度解讀,所以反而不放照片效果比較好。當然每家的使用情境不同,所以以上結論僅作為規劃時的參考。

再延伸說明一點,有些主管或者新手PM可能一時看了報告後,覺得「網友評價」似乎能幫助銷售,就貿然決定開發這個功能。但並未想到一個關鍵點:

我們要如何吸引用戶願意回來評價?

這個incentive以及觸發的流程機制設計非常重要,其中有非常多的學問細節!最怕的是事前沒想清楚、工程師投入資源完成上線後,結果沒什麼人來回饋意見,那等於是白做工了。

另外有一個「網友見證」的作法,是邀請特定使用者作見證,例如瘦身廣告中的「使用產品之後,我瘦了XX公斤」。根據先前做過的使用者訪談,有些人覺得這個純粹就是廣告、有的人仍然會大致參考,端看行銷上如何操作!

■ 原則六:不要使用自動輪播機制!請讓使用者自己滑動

如果有常在看國外的A/B testing報告的人,應該都有注意到許多研究都建議不要使用自動輪播機制,特別是在手機的第一頻更不應使用。但在台灣中國大家都很愛用!而且還讓它一直自動轉動得非常開心。

「自動轉動」對於使用者的確是一種干擾,但它同樣有吸睛的效果。這點我建議大家直接下點閱追蹤,看看自家的數據分析如何。

 

以上是 【首頁/著陸頁設計】建議。大家可以發現這件建議其實適合各種不同類型的手機網站,並非僅侷限於金融類。

但這份對於金融財經產業的產品經理/UX人員而言,最值得參考的是它提供了數百個國外的財經網站範例,這些網站服務都很值得去瀏覽(當然有些要國外開戶比較麻煩),進一步思考為何要如此設計、並對應到各種使用情境。

由於這份文件有106頁,後面的內容會再擇期放上。如果讀了之後覺得很想嘗試財經專案,可以依照下文【給新手的練習題】,從使用者描述一直做到Wireframe練習看看!

Google UX Playbook — 【給新手的練習題】金融財經手機版

 

歡迎加入Facebook【數位產品經理不想公開的秘密 】私密社團,一起參與我們在數位產品經理領域的工作交流與專業討論!

 

§ Google UX Playbook

 

§ 產品經理系列文章

產品經理PM第0講:誰是產品經理?

產品經理PM第1講:專業能力

產品經理PM第2講:從頁面拆解練習IA資訊架構(Information Architecture)

產品經理PM第3講:如何開始一個改版專案

Google UX Playbook — 【給新手的練習題】金融財經手機版

※ 數位產品經理的一天 — 在雲端管理跨國產品開發團隊

※ 數位產品經理的一天 — 以美國大型證券商交易網站為例 ( 奶爸老喬的矽谷觀察 Silicon Valley Old Joe)

 

 

原文出處:Google UX Playbook — 金融財經手機版規劃指南

Iris Chen
Iris Chen

自由工作者

Facebook私密社團【數位產品經理不想公開的秘密 Secrets Digital Product Managers Don’t Want to Disclose】https://www.facebook.com/groups/SecretsOfDigitalPMs/

Iris Chen的Medium:https://medium.com/@irischenblog

Wireframe 的重要性
了解什麼是Wireframe,學會繪製Wireframe。
團隊的 GIT 分支管理策略 (3) : 持續整合以及相關比較
沒有一定說哪種方式比較好,不同的團隊組成適合的模式不同,但如果想要讓整個開發更為順暢、效能更加提高,提升成員們的技術並且往持續整合的方向移動是比較符合邏輯的選擇。
為什麼你應該把原型設計(Prototyping)放進你的 UI/UX 設計流程中?
無論在我們的設計過程中裡做什麼,其實都與同個目標綁在一起,那就是:「打造最好的產品和體驗。」而這需要花費大量的設計迭代和數不清的溝通,而原型製作只是其中一種方法幫助設計師更好地闡述設計,以及通過思考細節讓自己的想法更精煉。