行動商務時代,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.

他指出,指出,一個「消費者循環」其實就是在「痛苦」和「寫意愉快」之間擺盪,代表消費者走完採納、使用、交易與回頭等流程。根據 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),大家可以去 這邊 下載。

歡迎加入「Inside」Line 官方帳號,關注最新創業、科技、網路、工作訊息

好友人數

評論