如何設計出高效合理的下單流程?
編輯導語:隨著網(wǎng)購成為了人們購買東西的第一選擇,各大平臺的競爭也逐漸轉移到了提升用戶體驗感的身上。不管購買什么東西,最終都要經(jīng)歷下單這一流程。一個高效合理的下單流程,往往可以讓消費者體驗流暢,從而提升對平臺的好感度,進而愿意長期的使用。
這是個非常值得研究的內容,最近我在優(yōu)化商城下單流程的過程中,遇到了許多問題,通過不斷地探究,也對整個模塊有了更深刻的理解,希望通過總結能給大家?guī)硪恍﹩l(fā)。
下面將從目標的提出,結合案例的解說,并最終推到出結論的方式講解。
作為漏斗模型的最終收口的購買步驟,是購買轉化的關鍵。
但往往有些產品由于對流程沒有系統(tǒng)深刻的理解,會有很多迷惑的操作,使得下單的流程相當混亂。我也曾經(jīng)經(jīng)歷過類似的購物情景,經(jīng)過一輪謎之操作后,我終于下完單了,但過后會擔心剛才買的東西有沒出錯。
關于流程的優(yōu)化我們遵循的原則是:先讓流程合理了,再提高用戶每步操作的效率。
怎么理解合理,必須解決以下兩個問題,整個下單流程涉及到哪些步驟?步驟之間有什么邏輯關系?
我們需要洞悉到流程之間是如何串連,信息是如何層層遞進并最終達成目的。因為只有每環(huán)節(jié)解決了對應的問題,流轉到下一環(huán)節(jié)才能更省心。才能避免信息的反復確認,影響操作的效率甚至引發(fā)出錯。
高效可以拆分成三個維度考量,第一是頁面布局的重點突出的提效,第二是信息展示直觀的提效;第三是交互操作簡化的提效。清晰的頁面信息傳達能讓用戶清楚并了解自己的操作結果,并快速做出決策。
一、下單流程的拆分和排序
下單流程按需要提交的信息進行拆分,一般下單需要先確定商品(一切影響商品價格的因素的確定,如規(guī)格);其次是訂單信息的確認(不影響商品價格,是訂單層面信息的確認,如收貨人,備注等),而后是訂單支付,支付方式的確認。
最后是訂單進度的跟蹤。這里列出的每一步前提都是上一步內容的確定。只有這樣才能做到環(huán)環(huán)相扣,并且信息高效流轉。
二、第一步:確定商品信息
你是否遇到過在逛商城時看到某個服務,想購買時,進入的詳情頁卻沒有價格,然后需要你點擊咨詢客服,打開了一個咨詢窗口
賣東西不標價,你賣個寂寞嗎?
作為用戶的我難免會有浪費老子時間的負面情緒出來,撇開一些特殊情況說,一個詳情最重要的兩個要素是商品信息和商品價格。因為了解商品的目的是購買,購買的決策需要價格的支撐。
這是一對不可分離的組合,沒有價格的商品陳列和沒有目標指向的價格都是沒有意義的。
那么總結一下:商品詳情必備的兩個信息:
1. 元素展示的順序
滿足了必備元素展示后,我們還要考慮元素的放置位置,首先是突出重要的元素,其次是瀏覽順序符合用戶場景。這樣才能真正做到提高下單效率,我們來看看下面這個例子:
京東的商品詳情作為購物電商商品詳情的代表來說一下,可以看到視覺瀏覽路徑是非常流暢的,明確的實覺引導和操作指引,先看價格,再選規(guī)格,而后點擊購買。
權大師的商品詳情雖然頁面中這重要元素都非常醒目,但它卻沒有讓用戶的決策提效,我猜測費用總計為什么放在這個位置,是希望用戶直觀看到選擇不同的服務項目對應的收費的變化。
可是也忽略了金額作為重要的元素,當用戶進入詳情需要第一樣看到,導致瀏覽路徑有點繞圈圈。
攜程的詳情可以說是權大師的一個優(yōu)化,同樣的考慮,頭部不僅展示了重要的價格和商品信息,給到用戶購買的預期。在規(guī)格選擇后,預定按鈕旁邊還展示商品的總價。減少用戶來回查看金額的不便。
2. 規(guī)格的展示
在購物中,選擇商品或者服務的規(guī)格是一個常見的操作流程,選擇規(guī)格的目的有:
- 確定商品的規(guī)格是否在你的要求范圍內(比如你想買的是紅色的 iphone 12,要看一下有沒有紅色這個規(guī)格的選擇);
- 確定對應規(guī)格是否有庫存;
- 確定是否還有其他增值選項,比如購買保險,分期支付等;
- 確認購買數(shù)量等。
以上幾個選項,根據(jù)不同的業(yè)務會有不一樣的描述,不過可以概括兩個內容,一是影響能不能買,二是能買的話不同規(guī)格的選擇怎么影響商品價格。
圖像化選項,比如顏色外形等規(guī)格有圖像的描述就更加直觀。如果換成文字的話,用戶的生活經(jīng)驗會影響對文字解讀的結果。
數(shù)值化選項,這樣不需要選中再查看總價來判斷金額的變動情況。很方便地不同選項的價格,方便對比然后選擇。
通常門票或者酒店的規(guī)格選擇會用上面這種方式展示,同樣的道理,把不同項目的價格列出來,讓項目之間的對比更直觀。
3. 變化可見
下圖的例子中參考身高這一項規(guī)格說一下,身高的規(guī)格本來就是有規(guī)律的,比如從矮到高,或者從高到矮。
如果我選擇紅色規(guī)格衣服,身高規(guī)格最后兩項灰掉了,這時就算我不看具體身高規(guī)格是多少,也大概知道紅色衣服身高最高的規(guī)格沒貨了。
這時,我想找一個有170cm身高的衣服,我就會不斷切換顏色規(guī)格,用視線的余光去看什么時候170cm的規(guī)格亮起來。規(guī)格的展示通過位置和內容的支撐,能讓用戶更快速找到變化的差異。
三、第二步:確認訂單信息
不影響商品價格,是訂單層面信息的確認,如收貨人、備注等。
第一步說的是商品信息的確認,這一步是訂單信息的確認,這兩個維度怎么理解呢?
舉個例子:比如你到商場買東西,你首選是挑選好要買的商品放到購物籃里,再到結算臺支付。
這時候你是有個比較清晰購物列表在腦海中的,因為在挑選時候已經(jīng)經(jīng)過判斷,我拿了一個薄荷味的牙膏,還拿了一個潘婷的洗發(fā)水?,F(xiàn)在只需要把這些給到收銀員,她再確認一次就可以了。
但試想如果在你的結算的時候,有個小孩把你購物籃的東西攪亂了,放了一些別的商品或者拿走了其中的一些商品,你在收銀臺這里就會變得十分混亂。我又得重新確認一下自己要買的東西是什么。
訂單的確認是建立在商品的確認上的,而且步驟之間本來就存在了遞進的關系。先確認能不能買,再考慮能買的話收貨人等訂單的信息。在這一步,確認的信息盡量不影響商品的單價。
淘寶這個例子的話,訂單確認的頁面需要確認收貨人信息、數(shù)量、配送方式、運費險等,這幾個元素都不影響商品單價的,都是訂單層面的信息確認。這就符合前面所說的,頁面信息層層遞進,減少相同信息反復確認的原則。
飛豬買門票這個流程中,從詳情頁到規(guī)格選擇到訂單確認,門票類型始終可以選擇,到最后填寫訂單了,還是可以選擇不同的票種。
這操作有點迷惑,前面都告訴我了當前選擇了成人票,到最后還告訴我,你還可以選擇要一張學生票噢。最后確認下單信息要把商品信息再確認一次,這就是影響下單效率的表現(xiàn)。
四、第三步:確認支付
支付的確認也有兩個重要的元素,金額和支付方式的選擇。
但也有的商城也會做成下面右圖,在訂單確認頁面把支付方式也一并選擇了。
表面上簡化了步驟,但由于不同步驟確認的突出的信息是不一樣的,如果我選擇支付,那在支付前我必定會關注金額。所以右圖這樣就沒法讓突出重要信息,需要費勁地找一下金額是多少。
五、第四步:跟蹤訂單進度
訂單的詳情頁里包含的信息有:商品的信息、訂單的信息、支付的信息、訂單進度的信息。這個環(huán)節(jié),訂單的進度信息無疑是重點。
對信息展示優(yōu)先級排序為:訂單進度信息 > 商品信息 > 支付信息 > 訂單信息,淘寶的訂單詳情按重要程度自上而下排列:
有的商城甚至會把一些權重低的信息收起來,如訂單信息、支付信息。想查看時候可以點擊查看更多信息,這樣做的好處是能讓界面整體更清爽,降低頁面的復雜程度,那么對重點信息的抓取就更快速了。
對訂單辦理的進度展示優(yōu)化,我認為淘寶可以說是個經(jīng)典的案例:
- v1.0 物流只是通過文字去描述物流的信息,這時候我只知道包裹到了哪;
- v2.0 出現(xiàn)了地圖的展示方式,我能通過地圖上的貨車位置判斷包裹離我多近;
- v3.0 在地圖的基礎上加了預計到達日期的顯示,讓整個訂單的時間進度更精確;
- v4.0 在我的頁面提供最新物流信息快速查看入口,方便用戶查看訂單進度;
- v5.0 在外置的快速查看物流入口,提供了更豐富的查詢維度,比如“派送中”、“待取件”等用戶在物流派送結尾更加關心的節(jié)點篩選。
以上改動都是讓訂單進度掌控的體感更加豐滿的過程:
以上進度展示的關鍵點可以概括為:當前進度、整體流程、完成的預期。有了以上三點,用戶對于整個進度的才能有一個清晰的把握。
六、總結
在訂單流程設計各環(huán)節(jié)中,如果我們明白每一步的操作的目的,提煉出關鍵點。那在優(yōu)化中就能更加得心應手。如果發(fā)現(xiàn)本文有什么邏輯的錯誤,歡迎大家指正,一起進步。
下面附上本文的知識目錄:
本文由 @小圈筆記 原創(chuàng)發(fā)布于人人都是產品經(jīng)理,未經(jīng)許可,禁止轉載
題圖來自 Unsplash,基于 CC0 協(xié)議
支持
學習
細節(jié)不錯,多維度和深度的展開很贊
非常感謝你的認可
文章排版提個小建議哈。
正如“元素展示的順序”所述:正常人的閱讀習慣都是從上至下,建議文章排版先文字再配圖。
現(xiàn)文章排版所致,看了圖再去找文字說明或文字描述已是上部預覽過的圖,就很怪,不順暢,望接納,謝謝。
非常感謝你的提議,排版的時候確實沒有考慮到這點。