首頁?>?知識?資訊?>?購物網(wǎng)站結(jié)帳流程頁面設(shè)計的6 大基本原則?>?正文

購物網(wǎng)站結(jié)帳流程頁面設(shè)計的6 大基本原則

2019/6/14 0:00:00 · 稿源:傳誠信

為了改善網(wǎng)站轉(zhuǎn)換率,網(wǎng)站設(shè)計師或經(jīng)營者常常花了很多心思在調(diào)整商品溝通頁面,卻忽略了購物車及結(jié)帳流程的重要性。若從漏斗模型的角度來看(圖1),購物車和結(jié)帳流程更靠近最終銷售,若能提高該等頁面的易用性,對提高轉(zhuǎn)換率的影響越直接。前篇文章已說明了如何設(shè)計出高轉(zhuǎn)換率購物車頁面,本文將分享結(jié)帳流程頁面的設(shè)計重點,協(xié)助讀者設(shè)計出高轉(zhuǎn)換率網(wǎng)站。

網(wǎng)站設(shè)計

1. 結(jié)帳流程頁面中,盡量拿掉會讓使用者脫離的連結(jié)

當(dāng)使用者好不容易在購物車頁面按下「結(jié)帳」按鍵進入結(jié)帳流程時,大多是已經(jīng)下定決心購買。此時網(wǎng)站經(jīng)營者要把握一個原則:「讓使用者不用思考、心無旁騖地完成結(jié)帳程序」。為了達成這個原則,結(jié)帳流程中盡可能地拿掉會讓使用者分心或跳離結(jié)帳頁面的連結(jié),只保留少數(shù)能讓反悔的人回到首頁或想查看購物金時能進入會員專區(qū)的入口。


2. 提示結(jié)帳步驟,降低結(jié)帳流程可能繁雜的錯誤想像

回想一下,當(dāng)你在找路的時候,總覺得時間過了好久、走得好累,但走回頭時發(fā)現(xiàn)原來當(dāng)初的目的地根本不遠(yuǎn),只是因為不知道盡頭,所以心理狀態(tài)覺得疲憊。在結(jié)帳流程也是同樣的情況,少在網(wǎng)站購買的人往往不知道結(jié)帳流程會有幾步?每一步會不會填很久?過程會不會很麻煩?為了消弭這種不確定性帶來的負(fù)面情緒,結(jié)帳流程中一定要提示使用者總程序以及目前已經(jīng)完成的步驟。許多網(wǎng)站喜歡用流程圖的方式呈現(xiàn),甚至加上完成度百分比,這都是不錯的選擇。

3. 切分步驟的邏輯盡量符合「MECE」的原則(不是步驟少=好)

「結(jié)帳步驟越少越好」是評價結(jié)帳流程易用性的常用方式,較少的結(jié)帳步驟固然好,但這不完全代表高易用性。運用前述邏輯,一個步驟便可完成結(jié)帳便是易用性最高。為此網(wǎng)站需把物流(選擇寄送方式及填寫地址…等)、金流(選擇支付方式、使用購物金/點數(shù)、及填寫信用卡等資訊)及確認(rèn)訂單資料全部放在同一頁上,導(dǎo)致網(wǎng)頁變得非常的長。這種設(shè)計只會使網(wǎng)站使用者產(chǎn)生負(fù)面觀感而放棄購買。

究竟什么叫做高易用性的結(jié)帳流程呢?這因銷售商品類型而異(試想賣民生用品及賣金融商品的網(wǎng)站一定有不一樣的需求流程),但規(guī)劃時beBit常采用MECE的原則,搭配檢視總步驟的數(shù)量,以取得最佳平衡。

「MECE」的原文是Mutually Exclusive, Collectively Exhaustive,意思是相互獨立,完全窮盡,更白話文一點就是包含了所有選項,但每個選項相互不重疊(例如:全球總?cè)丝?男性+女性)。若以一般網(wǎng)購網(wǎng)站舉例,結(jié)帳流程大概可以分為物流、金流、確認(rèn)訂單等三個程序,若要填寫的資訊不多,一個程序相關(guān)的資訊可以在同一個頁面中完成,完成一個程序后再到下一個程序(試想,填寫送貨地址的頁面中如果出現(xiàn)填信用卡資訊,不是讓人覺得疑惑嗎)。

為什么要采用MECE邏輯來規(guī)劃結(jié)帳流程呢?因為我們希望減少讓使用者「疑惑」的機會。MECE的架構(gòu)讓使用者在一個頁面只思考一件事情,可以讓網(wǎng)頁更簡單易懂。當(dāng)然有時候網(wǎng)站因營運的復(fù)雜性(例如:臺灣常見的數(shù)臺購物車情況、法令規(guī)定要填寫的資訊過多…等),無法設(shè)計出完美的流程,但少步驟+MECE架構(gòu)的平衡還是我們要把握的重要指標(biāo)。

4. 頁面長度的控制,盡量在第一視覺區(qū)就可以看到Action Button

許多人填表單之前有一個慣性向下滑頁面的動作,這個動作是想知道要填的東西有多少,此時頁面如果呈現(xiàn)一個很長的表單,大多數(shù)人會表現(xiàn)得不耐煩,不愿意填寫,因此,頁面長度也是一個重要的學(xué)問。究竟多長的頁面較佳呢?從beBit的經(jīng)驗來看,頁面的長度盡量控制在第一視覺區(qū)能夠露出「下一步」的行動按鍵為主,至多至滑鼠滾一下(約1.5屏)的頁面長度,讓一進到該頁面的使用者一眼就可以感覺要填的東西不多,不至于想放棄。另外行動按鍵除了提供下一步之外,也要保留上一步的連結(jié)(但可弱化,使用文字連結(jié)即可),讓想要修改填寫資料的使用者能夠自在地在頁面間移動。

5. 表單設(shè)計的易用性原則

不要輕忽表格的設(shè)計,不好的表格讓使用者跳過該填的資訊,覺得頁面過長過復(fù)雜!設(shè)計表格時,有以下四個基本的原則:
(1)欄位的高度須加以掌控,切勿使用過高的欄位讓表格變得太長
(2)表頭及填寫區(qū)需要有明確的區(qū)分,讓視覺產(chǎn)生秩序感
(3)必填項目的提示要明確,除了快速判斷要填資訊的數(shù)量之外,也避免送出表單后產(chǎn)生錯誤
(4)錯誤項目的提示要明確,讓使用者容易找到修正處


6. 手機網(wǎng)站或APP一定要有快速結(jié)帳,以及與電腦網(wǎng)站整合購物車的功能

根據(jù)我們的專案經(jīng)驗,多數(shù)使用者仍是偏好透過電腦購買商品,很大原因是安全性考量以及螢?zāi)贿^小不易填寫表單。但隨著手機螢?zāi)辉龃筇岣吡隧撁嬉子眯缘目臻g;生物特征辨識技術(shù)的成熟(如:指紋辨識)增加了安全性保障,未來手機購物一定是一大趨勢!根據(jù)beBit對當(dāng)前手機使用者的行為觀察,手機網(wǎng)站/APP的購物流程中一定要包含快速結(jié)帳以及整合購物車兩項功能:

(1)快速結(jié)帳功能
相較于電腦網(wǎng)站使用者,我們觀察到的手機使用者的行為是,較少在手機上做跨網(wǎng)站的比較、零碎的使用時間與空間(如通勤、上班的片刻、睡前)、沖動型消費、殺時間的瀏覽動機,因此使用者很容易被限時促銷或大幅折扣等趣味資訊誘發(fā)沖動購物。由于是沖動型購物,網(wǎng)站架構(gòu)要能引導(dǎo)使用者快速且一氣呵成的完成結(jié)帳程序。網(wǎng)站儲存信用卡號或送貨地點等資訊(先不論通過認(rèn)證的難易度),是滿足快速結(jié)帳,減少在手機上操作繁瑣程序的重要機制。最近推出的Apple Pay便是透過儲存信用卡資訊加指紋辨識功能完成安全認(rèn)證付款,雖短期內(nèi)使用者仍對此功能有疑慮,但因方便性及互動設(shè)計相當(dāng)符合手機使用情境,未來將是推升手機購物的一大重要環(huán)節(jié)。

(2)整合手機及電腦網(wǎng)站的購物車
如前段所述,手機使用者常在零碎的時間及空間瀏覽網(wǎng)站打發(fā)時間,當(dāng)看到心儀的物品時常常先加入購物車,回去后再仔細(xì)瀏覽。第二次的瀏覽有時透過手機有時透過電腦,因此手機及電腦網(wǎng)站的購物車與結(jié)帳流程需要整合,才能符合使用者先在手機記錄商品,回電腦再購買的情境,以免錯失轉(zhuǎn)換使用者的機會。

購物車以及結(jié)帳流程頁面是影響轉(zhuǎn)換率的重要頁面,網(wǎng)站經(jīng)營者絕對不可輕忽!尤其是網(wǎng)購有許多復(fù)雜的商業(yè)模式,導(dǎo)致復(fù)雜的購物流程(如:數(shù)臺購物車、分批配送、不同的運費…等),這些都是可能造成使用者放棄購買的問題。網(wǎng)站經(jīng)營者一定要以設(shè)計出高易用性結(jié)帳流程作為重要目標(biāo),抱持著替使用者解決問題的心態(tài),無論透過網(wǎng)站界面設(shè)計、系統(tǒng)甚至經(jīng)營模式的調(diào)整來解決問題,千萬不可想著讓使用者自己去解決就好,因為把問題留給使用者的后果就是大家再也不來你的網(wǎng)站了!


  • 相關(guān)推薦
  • 大家在看
熱文
  • 熱門
  • 最新
客戶服務(wù)
咨詢熱線

010-62199213

24小時咨詢熱線

139-1050-5354