行動商務時代，Google 研究員說 app 應該這樣做

任職於 Google EMEA（歐洲、中東及非洲區）的行動專家（Mobile Expert） Stephen Griffiths 昨日來台發表了一份題為 〈打造友善行動商務 app 介面，讓消費者使用無礙〉 的報告，針對行動電子商務的 app 設計給予一些建議。

一開始，Stephen 先是分別引用了賈伯斯的名言：

Most people make the mistake of thinking design is what it looks like. It’s not kust what it looks like and feels like. Design is how it works.

 

▲ Stephen Griffiths

他指出，指出，一個「消費者循環」其實就是在「痛苦」和「寫意愉快」之間擺盪，代表消費者走完採納、使用、交易與回頭等流程。根據 Google 對於 Android app 設計的理解，每一個負評可以抵掉三個好評。

App UX 設計原則

Stephen 將行動電子商務 app 的使用分為四個大階段：Adopt（採納）、Use（使用）、Transact（交易）、Return（本文指的是「再度光臨」），並且分別提出需要注意的設計原則。

採用

• 品牌的 logo 需要謹慎、巧妙地使用。在 app 裡，由於使用者已經知道自己用的是哪個 app 了，所以其實沒有必要讓 app/品牌 的 logo 一直出現在畫面當中。
• app 的目的/用途，以及使用者的體驗歷程優先順序要清楚。
• 只有主要內容才需要出現在畫面上。
• 捲動畫面的時候，別給使用者 dead end，可以加上顯示更多、篩選、排列或其他功能
• 選單上的項目清單要短（最多七樣為佳），如果要做比較長，那們顯示、分區清楚很重要。
• 選單上的術語對於目標使用者來說需要清楚、明瞭。

註冊、登入/請求許可

• 註冊流程要快，同時要清楚地讓使用者知道「註冊有什麼好處」。
• 要讓使用者可以選擇跳過註冊流程，先逛一下 app。
• 一些與敏感資訊相關、需要註冊才能使用的服務，除了需要清楚說明為什麼需要註冊，註冊流程也要快速。
• 假如需要註冊才能用，最好先讓使用者看一下 demo。
• 提供多種註冊方式（Google 帳號、Facebook 和 Email 等等）。
• 輸入密碼時可以選擇「顯示」或「隱藏」，有些人會因為害怕智慧型手機觸控鍵盤的緣故而輸入錯誤，因此需要在設定密碼的過程中「看見」自己輸入的字串。
• 舊訪客應該要能保持在登入狀態。
• 如需向使用者提出某些權限的取用請求，務必將原因或用圖說明清楚。

使用

搜尋

• 搜尋很重要，一定要在找得到的地方。
• 搜尋欄要有自動完成/搜尋建議的功能。
• 前幾個結果一定要是高度相關。
• 要能讓使用者輕鬆排列/過濾搜尋結果（例如按照價格高低排列）。
• 顯示「近期搜尋紀錄」。
• 訂房表單可預先填入建議的資料。

產品和服務

• 要讓使用者可以快速掃視產品描述、找出特定資訊（價格、規格等等）。
• 產品大圖一定要在摺疊內容之上。
• 產品圖片/影片品質要好。
• 顧客對商品的評價/評語要很容易找。
• 產品價格、費用（例如運費、稅額）要透明。
• 須提供商品是否有還有庫存的資訊。
• 注意事項要寫清楚，而且很容易找到。
• 最重要的按鍵就是那個讓使用者做出決定的 CTA（call to action，有人翻譯成「行動召喚」）按鍵，其次則是 CTA 案件旁邊那個按鍵，例如「加入願望清單」。
• 顯示推薦商品。
• 使用者要能夠很容易找到「購物車」或「訂房」等等的按鍵。

交易

• 要能讓顧客安心結帳。
• 讓使用者可以在購物車內編輯一些產品的關鍵資訊（數量、款式等等）。
• 使用者可以在購物車內看見相關產品推薦資訊。
• 移除一切會使用者在結帳過程中分心的東西。
• 對於非首次使用的顧客，在結帳過程中應預先載入資訊（送貨地址、姓名、聯絡方式等等）。
• 提供多種付費方式選項。
• 信用卡資訊輸入介面要友善，最好可以用一個欄位就搞定。Stephen 便舉例，Uber 在輸入付款資訊（即信用卡資訊）時的設計，可讓使用者專心輸入數字，不必手動切換欄位，就是一個好的設計。（關於 Stephen 談到的這個設計案例，我們在 〈Square 的巧妙設計——單一文字框搞定信用卡訊息輸入〉 這篇文章也有更深入的介紹）
• 輸入信用卡資訊時提供掃瞄功能。
• 確認結帳前須再次顯示所有訂單資訊。

再度光顧

內容和設計

• 直接用內容代替主畫面，例如 Medium。
• 要能在（無盡的）捲動畫面中協助使用者去發現內容。
• 顯示最近看過、歷史搜尋結果或內容。
• 透過良好設計的音效帶給使用者驚喜。
• 良好的視覺設計有助於促進使用者參與、讓使用者感到愉快。
• 強化互動過程的動態設計。

Stephen 說，相較於 web 著重在觸及（reach），原生 app 著重的功能與體驗，但兩者也正在向對方靠攏。

原生 app 的優勢在於效能較佳、可提供使用者較佳的體驗，例如維持在登入狀態、可以預載資訊、體驗流暢等等，而且還可以善用各種智慧型手機上的感應器、GPS 或相機等等的硬體設計，提供更加豐富的體驗。

Stephen 這番話，某種程度上也呼應了 Mary Meeker 在她的年度網路趨勢報告提到的：

Re-imagination of nearly everything powered by new devices + connectivity + UI + beauty

Stephen 還提到，他認為負責 app UX 的設計師其實就等同於客戶、消費者，要設身處地的去思考使用者會遭遇的狀況，甚至就連如何吸引使用者下載 app 都要考量進去，但這部分勢必要與負責行銷的團隊共同合作。這點跟我們先前在 〈五個最常見的設計思維錯誤〉 的觀點相同。

Stepen 也寫了一份完整的報告（不只限於電子商務的行動 app），大家可以去這邊下載。

從女孩到女人都愛用——專訪「Carousell 旋轉拍賣」台灣二人迷你團隊

轉載自合作媒體 Inside 硬塞的網路趨勢觀察