從 udn讀書吧的購物體驗談電子商務流程優化

也許是因為 Amazon 電子書的壓力,台灣的出版業者近幾年比較願意提供電子書的購買選項,前幾天想看鄭丰的《奇峰異石傳》,一查之下發現 udn讀書吧 竟然有提供電子書購買,雖然要綁定 udn 自家的 App ,檔案還不能下載(Kobo 會提供 EPUB with DRM 的格式下載),但至少可以讓我在家悠閒的把它看完,誰知道從按下購買後發現許多問題,特別趁這機會來分享一下。

首先,幫 udn讀書吧 平反一下,他們的工作人員很用心,我只是在 Facebook 抱怨一下他們家的購物流程,隔天馬上就有人敲我訊息詢問,大過年的真的辛苦了,雖然網站有些缺點,但面對消費者的抱怨可以如此快的反應,十分值得學習。

後記:在這篇文章刊登後 udn讀書吧就已經針對許多問題進行改善,包含 Paypal 台灣用戶使用、書籍內頁動線引導等等,也針對部分問題提出說明,我加註在下方希望讓大家可以看到消費者和平台方的思考差異。

許多人會覺得 UX 不重要,我們先不談 UX 這個詞,而是聊聊轉換率,轉換率是經營電商的人最關心的數據之一,訪客從進到你的網站、瀏覽商品、加入購物車、填寫付款資訊到最後完成購買,這之間每個階段的人數比例變化就是轉換率,轉換率很直接的影響到你的營收,而 UX 則更直接的影響到轉換率的起伏,如果你設計的購物流程(介面),使用者不懂如何操作,即使你花了大筆預算投廣告把客戶帶進來也沒有用,因為他們會在網站裡迷路,最後這些流量也無法轉換成現金;我們做 UX 絕對不是為了佛心來著提供更好的產品,而是很實在的,做好 UX 就等於提高收益,舉例來說如果使用者選擇 ATM 付款,當下我們會寄一封信給他,但在截止的前一天,你有再寄一封信提醒使用者繳費截止嗎? 經過實驗,光是多了這封截止提醒信,就可以讓 ATM 轉帳的達成率提高 10%,這數字十分驚人,而這不過是個小小的修改!

我不是 UX 方面的專家,接下來我會用一個消費者的角度來聊聊在我購買一本電子書到閱讀完成的路上,遇到了多少有趣的事情,其實這是一個很難得的機會, udn讀書吧遇到的問題在很多網站上都有出現。

就讓我們繼續探討 udn讀書吧 的議題吧!

一進到首頁會發現 udn 用蓋板的方式呈現資訊,這其實是很危險的手法,有可能讓使用者在第一步就因為「不知道如何關閉蓋版廣告」而離開,以下圖為例(可以點擊放大):

一般來說蓋版廣告的「關閉」按鈕會在右上角,因為使用者已經被許多的蓋版廣告訓練出習慣,看到廣告就看右上角有沒有關閉按鈕,但這裡的關閉卻是在下方,乍看之下會找不到如何關閉。不過在跟 udn讀書吧反應後,這個問題迅速得到修復了。

做網站優化最忌諱的就是口說無憑,可以試著做兩個版面,一個是「右上角有叉叉」,另一個則是現有的版本,觀察在這步驟的跳出率變化即可驗證是否如我所說。

我這次的使用途徑是從 Google 搜尋書名「奇峰異石傳」找到 udn讀書吧。

網址:http://reading.udn.com/v2/bookDesc.do?id=55834

進入之後的第一個問題,這部小說有三集,下圖是第二集,我想找其他集卻只能用搜尋的,旁邊雖然有「其他人也看了」、「延伸閱讀」,最下面也有「編輯聚焦」、「相關著作」,但卻完全沒有導引的效果,在設計這些「延伸產品」時很重要的是我們能否引導使用者真正的瀏覽更多產品,甚至進一步產生購買,試想會有讀者買書只買第二集嗎?

要做好電子商務,理論也許重要,但更重要的是你有沒有掌握問題的核心,依循著核心去思考、嘗試,最後發展出來的就是理論,至於要如何掌握問題的核心,首先,你需要把自己當消費者。

接著點擊「免費試閱」,它提供 10 頁試讀,這十頁大概是:封面、封底、廣告、目錄;別疑惑,一頁內文都沒有。

後記:在這篇文章刊出後,udn讀書吧有說明試讀內容是依合約授權範圍只能提供這樣的內容,又有消保法的考慮必須提供試閱,其他書就不會有此問題。

接著我點下「放入購物車」按鈕,馬上被要求登入,這邊有三件事情值得思考:

  1. 只是放入購物車,就跳轉頁面要求登入,如果使用者想購買不只一本書,這樣的流程設計會不會破壞了購物的興致,最後導致收益降低?
  2. 不能使用 Facebook、Google 之類的第三方登入,但使用者是否願意為了你的網站多記一組帳密?多花時間去註冊?
  3. 跳轉的流程花了太多時間,等待三秒是蠻久的時間

針對「放入購物車」就立刻要求登入,比較好的做法是,放入購物車是單獨的事情無須登入,而在結帳時會要求註冊(或登入),此外整個登入流程會設計的很簡單,並整合到結帳流程內。

針對要求使用者註冊的部分,現在 Facebook、Google 都有提供第三方登入的功能,可以讓訪客直接用第三方服務的帳密登入你的網站,這可以省去註冊的時間,以及註冊流程可能帶來的轉換率,畢竟多一個流程就多一分讓使用者離開的機會。

最後,跳轉等三秒的問題,可能是為了讓使用者知道「購物需要登入」這件事情,但事實上這可以整合到一頁內去處理呀! 看看下圖就可以明白了:

點開「加入 udn 會員」,讓我們來看看註冊頁面出了什麼問題:

首先,為何我還要手動去點擊「查詢電子信箱是否已被使用」?都什麼年代了,讓程式自動在我輸入完成後自動查詢很難嗎?

其次,為什麼購買電子書我需要填寫電話號碼? 其實這在很多網站都會遇到,明明就不需要身份證字號,你跟客戶要身分證字號幹嘛? 如果把一個可能帶來收益的客戶嚇跑了反而得不償失。

最後很有趣的,我們填寫了「使用者帳號」,但其實登入時你需要的是 Email… 而這裏的使用者帳號,其實只是作為 udn blog 的網址使用。

好的,註冊流程要填的資訊還算簡單,接著到信箱收取驗證信

這封信有些什麼問題呢? 在網站操作流程設計上最忌諱的就是用詞不統一,以這封信為例,在註冊、購物時都是 udn 這個關鍵字,但信裡面卻是「聯合報系會員」,這會讓使用者產生不確定的感覺,這問題在很多網站都會遇到,雖然是個小細節,但細節往往會有關鍵的影響。

其次,點下「立刻開通帳號後」我們會看到像下圖的空白頁,等等… 我不是來買東西的嗎? 你為何不能讓我點完開通信就直接回到購物頁面? 或最起碼,幫我自動登入吧! 這邊你只給一個空白頁面,使用者怎麼知道要做什麼? 沒有任何的引導、連結,甚至我手動進入 udn讀書吧以後,竟然沒有順便幫我登入! 其實這問題在許多平台也會遇到,我將這類問題統稱為「動線設計不佳」。

通常註冊完成後會自動登入,並依據「使用者為何註冊」回到最開始的頁面,以此為例,登入後回到購物流程或產品頁面。

解決許多問題後我終於進到結帳頁了,順道提一下,進入這頁不知為何網頁載入蠻久的,我測試了三次,那速度都讓我有網站當掉的錯覺,其實網頁載入速度也是可能讓使用者跳出網頁的原因之一。

這頁有什麼問題呢?

  • 商品名稱前面的勾選是做什麼用的? 其實到現在我還是沒搞明白。
  • 付款方式的部分,你都說 Paypal 是海外用戶推薦了,那為何要顯示給我這個台灣使用者呢? 況且,Paypal 的手續費不便宜,光是這個顯示出來,就不知道會讓公司損失多少無謂的手續費。
  • 最下方有個「繼續購物」按鈕,點擊後卻是回到首頁,這裡比較好的做法是回到產品頁,讓使用者延續方才的購物體驗。
  • 選擇付款方式、優惠方案後,為什麼要整頁重新整理啦!!! 頁面的載入十分花費時間,每次做選擇都要重新載入頁面十分麻煩,建議可以用 Ajax 處理。

此外,udn讀書吧 Paypal 某幾頁 SSL 有問題。看起來是因為 udn Logo 沒有用 HTTPS 載入的關係。

因為 Paypal 不能使用,只好選擇信用卡繼續進攻了。 下面是第二頁「確認購物清單」,其實這也是很沒意義的流程,在做網站的流程設計時很重要的,使用者的操作步驟越少越好,即使是一個按鈕,都可能讓使用者多幾秒猶豫思考的時間,多幾分離開的機會。

後記:這部分是由於過去的歷史因素,電子書和實體書是在同個網站上共同銷售,為避免購買電子書卻以為是實體書,才特別加上這一頁。

此外這邊的按鈕設計不好,確認結帳意味著「下一步」,而修改購物清單意味「上一步」,在這類按鈕的設計上我們會儘量讓「下一步」更明顯並做出區別,引導使用者點擊下一步。

很好,按下「確認結帳」後出現了這個授權條款,跟上面提到的問題一樣,能少一個流程就儘量少一個。

你以為一切結束,終於可以開始看書了嗎? 錯! 重頭戲才剛來呢! 這邊要求你填寫地址、發票寄送地址等一串資訊,等等,我買的不是電子書嗎? 為什麼需要填寫地址而且還是必填? 對於一些重視隱私的客戶來說,這頁就會讓他們跳離,即使現代人大多不重視個資,但是填寫地址也是十分容易降低轉換率的環節,能避免則避免,因為輸入地址需要打字,我曾看過案例,因為輸入地址導致 20% 的人放棄購買。

後記:地址填寫是因為電子發票的要求,如果發票中獎的話會需要寄送購物憑證。

在填寫信用卡資訊時我會檢查網站是否有 SSL 加密,一看差點嚇出冷汗,SSL 可以保護我們所填寫的資料經加密安全的送到伺服器,如果沒設定好,駭客會有機可趁,可以攔截你所填寫的信用卡資訊,這是很多電子商務網站都沒有處理好的。

完成購買後你會收到以下信件:
  • udn 讀書吧「商品發送通知」
  • 【udn讀書吧.udn讀小說】訂購完成通知
  • 【聯合線上】付款成功通知
  • [聯合線上]電子發票開立通知信

猜猜我要說什麼? 幾個常見的問題:

  • 名詞使用不統一,有的是聯合線上,有的是 udn讀書吧。
  • 到底是「udn 讀書吧」還是「udn讀書吧」呢? 究竟官方拼法中間有沒有空白?
  • 究竟要用【】符號還是 [] 符號呢?
  • 買一本書竟然要發四封信,難道沒有縮減的空間嗎?就我來看這四封信其實根本可以整合成一封信。
  • 信件排版都沒有針對行動裝置進行優化。

後記:在文章刊登後,該問題已獲得處理。

此外,兩天前購買時「商品發送通知」這封信很有趣的竟然沒有內文,但今天購買完成後,這封信卻又有內文了(驚

最後讓我們來看看 udn讀書吧的 App 閱讀器,第一次使用 udn讀書吧 的 App,系統卻說我已經有註冊在其他載具上,需要移除其他載具才可以使用,我點開想說看看有什麼載具,結果一片空白,把 App 強制重開後卻可以順利使用了。

直接條列這個 App 的幾個問題:

  • 記憶功能疑似有 Bug,明明前一天晚上我讀到 40% 左右,隔天醒來打開卻回到 0% 了,但剛剛測試又是正常的。
  • 明明我按的是下一頁,有時候卻直接翻到下個章節,測試許久發現是手勢功能,但該手勢和換頁手勢十分相像,導致使用者很容易誤觸
  • App 裡面不能直接購買書籍,好奇這是哪條神奇的法規規定不行直接在 App 購買電子書嗎…
    • 後記:udn讀書吧表示,不提供 App 內購物是因為 Apple 會針對在 App 內發生的交易抽成 30%,對一本書來說抽成 30% 實在是不可承受之重…
  • 電子書內的目錄只是單純的文字,沒有連結…
  • 頁面切換只能用拉桿滑,雖然有目錄切換功能,但… 看下圖

此外,先不批評這個入口頁面到底有沒有存在必要、設計好不好看,單就按鈕來說,使用者哪知道這按鈕是可以按呢呀? 對使用者的直覺來說,這只是三個方塊,在設計上沒有考量到「這是按鈕」所需要傳達的意象。

蠻希望 udn讀書吧能夠將這些問題改善,因為上面的書真的很豐富呀!! 過去幾年都是處在一個想支持正版卻支持不了的狀態,因為根本沒有電子書可以購買,近年終於開始有些選項可以考慮了。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料