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

為了改善網(wǎng)站轉(zhuǎn)換率，網(wǎng)站設(shè)計(jì)師或經(jīng)營(yíng)者常?；撕芏嘈乃荚谡{(diào)整商品溝通頁(yè)面，卻忽略了購(gòu)物車(chē)及結(jié)帳流程的重要性。若從漏斗模型的角度來(lái)看（圖1），購(gòu)物車(chē)和結(jié)帳流程更靠近最終銷(xiāo)售，若能提高該等頁(yè)面的易用性，對(duì)提高轉(zhuǎn)換率的影響越直接。前篇文章已說(shuō)明了如何設(shè)計(jì)出高轉(zhuǎn)換率購(gòu)物車(chē)頁(yè)面，本文將分享結(jié)帳流程頁(yè)面的設(shè)計(jì)重點(diǎn)，協(xié)助讀者設(shè)計(jì)出高轉(zhuǎn)換率網(wǎng)站。

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

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

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

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

3. 切分步驟的邏輯盡量符合「MECE」的原則（不是步驟少＝好）

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

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

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

為什么要采用MECE邏輯來(lái)規(guī)劃結(jié)帳流程呢？因?yàn)槲覀兿Ｍ麥p少讓使用者「疑惑」的機(jī)會(huì)。MECE的架構(gòu)讓使用者在一個(gè)頁(yè)面只思考一件事情，可以讓網(wǎng)頁(yè)更簡(jiǎn)單易懂。當(dāng)然有時(shí)候網(wǎng)站因營(yíng)運(yùn)的復(fù)雜性（例如：臺(tái)灣常見(jiàn)的數(shù)臺(tái)購(gòu)物車(chē)情況、法令規(guī)定要填寫(xiě)的資訊過(guò)多…等），無(wú)法設(shè)計(jì)出好的流程，但少步驟+MECE架構(gòu)的平衡還是我們要把握的重要指標(biāo)。

4. 頁(yè)面長(zhǎng)度的控制，盡量在第一視覺(jué)區(qū)就可以看到Action Button

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

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

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

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

根據(jù)我們的專(zhuān)案經(jīng)驗(yàn)，多數(shù)使用者仍是偏好透過(guò)電腦購(gòu)買(mǎi)商品，很大原因是安全性考量以及螢?zāi)贿^(guò)小不易填寫(xiě)表單。但隨著手機(jī)螢?zāi)辉龃筇岣吡隧?yè)面易用性的空間；生物特征辨識(shí)技術(shù)的成熟（如：指紋辨識(shí)）增加了安全性保障，未來(lái)手機(jī)購(gòu)物一定是一大趨勢(shì)！根據(jù)beBit對(duì)當(dāng)前手機(jī)使用者的行為觀察，手機(jī)網(wǎng)站/APP的購(gòu)物流程中一定要包含快速結(jié)帳以及整合購(gòu)物車(chē)兩項(xiàng)功能：

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

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

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

網(wǎng)頁(yè)名稱(chēng)：購(gòu)物網(wǎng)站結(jié)帳流程頁(yè)面設(shè)計(jì)的6 大基本原則
網(wǎng)頁(yè)地址：http://www.bm7419.com/news12/80762.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、搜索引擎優(yōu)化、網(wǎng)頁(yè)設(shè)計(jì)公司、標(biāo)簽優(yōu)化、網(wǎng)站收錄、軟件開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)