用好的交互設(shè)計(jì)來管理復(fù)雜-“訂單列表”

4 評(píng)論 27826 瀏覽 160 收藏 8 分鐘

訂單系統(tǒng)作為電商產(chǎn)品的基礎(chǔ),在設(shè)計(jì)時(shí)需要注意哪些點(diǎn)?不同產(chǎn)品模式下的訂單列表設(shè)計(jì)技巧又有什么區(qū)別?文章為你解析。

訂單系統(tǒng)作為電商系統(tǒng)(O2O產(chǎn)品模式)的“生命線”,貫穿了整個(gè)電商系統(tǒng)的全部流程。電商產(chǎn)品系統(tǒng)應(yīng)該以交易為核心,從用戶點(diǎn)擊確認(rèn)訂單,形成訂單開始,后續(xù)的整個(gè)流程都是跟著訂單走的。其中,會(huì)有正常訂單和異常訂單,異常訂單其實(shí)就是退換貨的流程。我們在設(shè)計(jì)產(chǎn)品訂單列表界面時(shí),應(yīng)該根據(jù)不同的場景側(cè)重,選擇不同的交互結(jié)構(gòu)。

在總結(jié)訂單模塊如何設(shè)計(jì)之前,我們先來熟悉幾個(gè)概念及定義:

訂單信息:用戶的訂單記錄列表,顯示訂單主要信息(下單時(shí)間、狀態(tài)、金額、收貨信息等)。

訂單狀態(tài):交易過程中,訂單可能產(chǎn)生的過程及狀態(tài),如下6類常見訂單狀態(tài):

  1. 待付款:下單后的用戶,訂單生成,在此狀態(tài)未收到付款請求時(shí),狀態(tài)不變。
  2. 已付款:訂單收到第三方傳來的付款成功token數(shù)據(jù)時(shí);
  3. 待發(fā)貨:在經(jīng)過風(fēng)控規(guī)則線上和線下的審核后,綜合給出等待發(fā)貨的狀態(tài);
  4. 已發(fā)貨:物流反饋的已發(fā)貨數(shù)據(jù)后,訂單狀態(tài)為已發(fā)貨;
  5. 待收貨(查詢物流狀態(tài)):接入第三方物流平臺(tái)的實(shí)時(shí)數(shù)據(jù);
  6. 已完成:訂單完成,用戶可評(píng)價(jià),或者獲得積分。

對(duì)于產(chǎn)品交易異常,出現(xiàn)退款的場景,流程如圖所示:

訂單對(duì)用戶的作用主要有兩方面,分別是:交易憑證、狀態(tài)跟蹤

1.交易憑證:售后、維權(quán)、發(fā)票都有據(jù)可循;針對(duì)買賣雙方的爭議,提供一條依據(jù)。

2.狀態(tài)跟蹤:交易鏈條較長的訂單有跟蹤訂單狀態(tài)的需求,譬如通過淘寶購買一件產(chǎn)品,長時(shí)間未收到貨物,用戶希望能看到訂單及物流狀態(tài)。如,待下單、待支付、運(yùn)輸中(相關(guān)物流信息查詢)待收貨、待評(píng)價(jià)……

訂單列表主要包括:訂單信息(商品信息、下單時(shí)間及金額、優(yōu)惠信息等)、訂單狀態(tài)、下一步操作

接下來,我們以各類App的訂單頁為例,分別總結(jié)不同產(chǎn)品模式下的訂單列表設(shè)計(jì)技巧:

較高頻、低復(fù)購型產(chǎn)品

用戶最關(guān)心的是“待處理”(待支付、待發(fā)貨等中間態(tài)環(huán)節(jié))的訂單情況 ,查詢已購買產(chǎn)品的物流信息。

“待處理”的訂單一般有:

  • 待付款:下單后的用戶,訂單生成,在此狀態(tài)未收到付款請求時(shí),狀態(tài)不變。
  • 等待發(fā)貨:在經(jīng)過風(fēng)控規(guī)則線上和線下的審核后,綜合給出等待發(fā)貨的狀態(tài)。

那么,以淘寶App為例。淘寶的訂單分類,第一層是訂單流轉(zhuǎn)過程中用戶可認(rèn)知的狀態(tài),如待付款、待發(fā)貨、待收貨…;第二層,即每一種流轉(zhuǎn)狀態(tài)下訂單的子狀態(tài),如,待發(fā)貨_買家已付款:買家已付款等待賣家發(fā)貨,待收貨_賣家已發(fā)貨:賣家已發(fā)貨等待買家確認(rèn)。從買家最本能的認(rèn)知來劃分訂單的狀態(tài),給用戶最貼心的訂單進(jìn)度展示,便于用戶隨時(shí)查看每一單產(chǎn)品的情況。

高頻、高復(fù)購型產(chǎn)品

用戶最關(guān)心的是如何快速找到曾購買的產(chǎn)品,產(chǎn)品最關(guān)心的是如何通過評(píng)價(jià)主動(dòng)觸達(dá)用戶,創(chuàng)造動(dòng)機(jī)促使其再次購買。若此類產(chǎn)品已為平臺(tái)型產(chǎn)品,那么需要通過篩選的功能,提供多類型訂單的切換,如京東App。京東App提供4類不同使用場景的入口形態(tài),結(jié)合不同的需求完成不同的操作:

  1. 第一層:常用訂單狀態(tài)的快捷入口;
  2. 第二層:全部訂單固定入口;
  3. 第三層:多種訂單類型切換入口;
  4. 第四層:運(yùn)入口(個(gè)人成長體系相結(jié)合,促活)、人工接入的功能入口;

還有一類產(chǎn)品,會(huì)在固定的訂單狀態(tài)的分類基礎(chǔ)之上,直接提供“分類訂單”的二級(jí)頁面,以浮層、列表等形式,提供不同的類型給用戶,自行選擇,如大眾點(diǎn)評(píng)App。

高頻、強(qiáng)跟蹤型產(chǎn)品

對(duì)于外賣型產(chǎn)品,由于存在配送員取貨/送貨的跟進(jìn),買家需要在一定時(shí)間范圍內(nèi)拿到外賣。因此,對(duì)于配送員的行為,需要在訂單中實(shí)時(shí)體現(xiàn),并結(jié)合適當(dāng)?shù)腜ush機(jī)制,讓用戶獲得必要的監(jiān)控感。

以餓了么為例,其訂單按狀態(tài)可分為:未支付訂單,已支付待確認(rèn),商家已確認(rèn),訂單取消,待配送員搶單,配送員已搶單,已取餐,訂單完成幾種狀態(tài)。對(duì)于這類型產(chǎn)品,其訂單/支付/物流三系統(tǒng)主流程應(yīng)有獨(dú)立的狀態(tài)(包括過程態(tài)、節(jié)點(diǎn)態(tài)),避免耦合在一起,否則隨著業(yè)務(wù)發(fā)展,狀態(tài)越來越復(fù)雜,降低效率和擴(kuò)展性。

小Q來總結(jié)

對(duì)于產(chǎn)品經(jīng)理而言,在設(shè)計(jì)訂單系統(tǒng)時(shí),應(yīng)該充分且完整的梳理清楚交易業(yè)務(wù)流程以及全部分支流程,并將此作為訂單系統(tǒng)的設(shè)計(jì)基礎(chǔ)。在做訂單這類系統(tǒng)中,要把訂單流轉(zhuǎn)的場景行為給梳理出來。摸清事實(shí),構(gòu)造行為場景,根據(jù)用戶不同的行為梳理產(chǎn)品流程。

相關(guān)文章參考

《用好的交互設(shè)計(jì)來管理復(fù)雜-“Tab”》

《用好的交互設(shè)計(jì)來管理復(fù)雜-“查看更多”》

《用好的交互設(shè)計(jì)來管理復(fù)雜-“個(gè)人中心”》

《用好的交互設(shè)計(jì)來管理復(fù)雜-“篩選器”》

#專欄作家#

Mandy權(quán),微信公眾號(hào):小Q聊產(chǎn)品,人人都是產(chǎn)品經(jīng)理專欄作家,善于資訊、母嬰、教育類產(chǎn)品設(shè)計(jì)與分析。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請登錄
  1. 商城后臺(tái)mvp

    回復(fù)
  2. 文中羅列的以餓了么為例的訂單狀態(tài),應(yīng)該不是正真意義上的訂單狀態(tài)。你把騎手的接單狀態(tài)與訂單的狀態(tài)合在一起了。你所說的訂單狀態(tài)確切的來講是面向用戶的訂單狀態(tài),但實(shí)際的訂單狀態(tài)不應(yīng)該是這樣的。

    來自浙江 回復(fù)
  3. 文章最開始,那六種訂單狀態(tài),已付款和待發(fā)貨是重復(fù)交叉的,已發(fā)貨和待收貨也是重復(fù)交叉的

    來自北京 回復(fù)
    1. 正解

      來自河南 回復(fù)