叮咚一下,送菜到家:叮咚買菜的用戶體驗(yàn)報(bào)告
編輯導(dǎo)讀:互聯(lián)網(wǎng)的發(fā)展讓人們足不出戶就能享受到很多服務(wù),比如買菜。不用再去菜市場精挑細(xì)選,而是在手機(jī)APP上直接下單為你選好的菜品,坐等配送員送上門。本文作者以叮咚買菜為例,對其用戶體驗(yàn)展開分析,希望對你有幫助。
本文以Ajax之父杰西· 詹姆斯·加勒特[美] ( Jesse James Garrett )所著的《用戶體驗(yàn)要素:以用戶為中心的產(chǎn)品設(shè)計(jì)》一書為基礎(chǔ),從用戶體驗(yàn)設(shè)計(jì)的角度對當(dāng)前生鮮電商黑馬APP——“叮咚買菜”淺析(重點(diǎn)分析界面和交互行為)。對生鮮電商行業(yè)的設(shè)計(jì)工作進(jìn)行梳理,以加強(qiáng)設(shè)計(jì)師對用戶體驗(yàn)設(shè)計(jì)的理解和應(yīng)用。
(本文僅代表筆者個(gè)人觀點(diǎn)及理解,歡迎指正)
一、用戶體驗(yàn)的定義
- “用戶體驗(yàn)并不是指一件產(chǎn)品本身如何工作,而是產(chǎn)品如何與外界發(fā)生聯(lián)系并發(fā)揮作用,也就是人們?nèi)绾谓佑|和使用他?!?/li>
- “真正的產(chǎn)品形態(tài)絕對不是由功能所決定的,而是應(yīng)該由用戶自身的心理感受和行為來決定的?!?/li>
- “用戶體驗(yàn)設(shè)計(jì)通常要解決的是應(yīng)用環(huán)境的綜合問題?!?/li>
以上是Jesse對用戶體驗(yàn)的定義。用戶體驗(yàn)可以通俗理解為:用戶在某特定環(huán)境中使用某產(chǎn)品更高效地解決實(shí)際問題。該過程涉及人(用戶)、工具(產(chǎn)品)、問題(應(yīng)用環(huán)境),其中人是主導(dǎo),工具服務(wù)于人,在特定環(huán)境中解決特定問題。
二、用戶體驗(yàn)要素的五個(gè)層面
自下而上分別是(從抽象到具體):
- 戰(zhàn)略層:企業(yè)外部的用戶需求+企業(yè)內(nèi)部的產(chǎn)品目標(biāo);
- 范圍層:功能型產(chǎn)品的功能規(guī)格/信息型產(chǎn)品的內(nèi)容需求;
- 結(jié)構(gòu)層:功能型產(chǎn)品的交互設(shè)計(jì)/信息型產(chǎn)品的信息架構(gòu);
- 框架層;信息設(shè)計(jì)+功能型產(chǎn)品的界面設(shè)計(jì);
- 表現(xiàn)層:為產(chǎn)品創(chuàng)建感知體驗(yàn):(通常為)視覺設(shè)計(jì)
2.1 戰(zhàn)略層
2.1.1 概念分析
戰(zhàn)略層需要首先回答的兩個(gè)基本問題:
- 我們要通過這個(gè)產(chǎn)品得到什么?
- 我們的用戶通過產(chǎn)品得到什么?
上述兩個(gè)問題中,第一個(gè)問題來自企業(yè)內(nèi)部對產(chǎn)品的定位——即產(chǎn)品目標(biāo),也可以理解為企業(yè)的商業(yè)目標(biāo)或商業(yè)驅(qū)動(dòng)因素。第二個(gè)問題來自企業(yè)外部——即用戶需求。
對于商業(yè)公司來說,任何行為的根本目的和最終目的是為公司帶來利潤。但是不同公司的商業(yè)行為不同,即公司戰(zhàn)略定位各不相同,根據(jù)公司戰(zhàn)略定位的不同,與之相對應(yīng)的產(chǎn)品定位以及產(chǎn)品所面向的用戶群體也不同。所以產(chǎn)品目標(biāo)(或商業(yè)目標(biāo))可以理解為公司的戰(zhàn)略定位。
注:公司的戰(zhàn)略定位要明確“邊界”,即明確“什么時(shí)候到達(dá)終點(diǎn)”,避免盲目決策。
與公司自身戰(zhàn)略定位的相對應(yīng)的,是來自市場的廣大用戶。戰(zhàn)略定位的制定要與用戶需求相對應(yīng)。這里的用戶需求不等同于需求文檔中的用戶需求,而是對整個(gè)用戶群體的把控,即產(chǎn)品服務(wù)于哪一類人群,這類人群有什么樣的共性。戰(zhàn)略層的用戶需求可以通過創(chuàng)建用戶畫像來實(shí)現(xiàn)。
綜上所述,戰(zhàn)略層需要解決的兩個(gè)問題可以概括為一個(gè)問題:“我們?yōu)槭裁匆_發(fā)這個(gè)產(chǎn)品?”
2.1.2 實(shí)例分析
產(chǎn)品名稱:叮咚買菜
產(chǎn)品介紹:自營生鮮平臺(tái)及提供配送服務(wù)的生活服務(wù)類app,主要提供的產(chǎn)品包括蔬菜,豆制品,水果,肉禽蛋,水產(chǎn)海鮮,米面糧油,休閑食品等。叮咚買菜作為電商行業(yè)中垂直領(lǐng)域——生鮮電商的一匹黑馬,在整個(gè)生鮮電商行業(yè)尚未成熟的今天得以存活并保持高速發(fā)展,其中部分地區(qū)已扭轉(zhuǎn)盈虧。
產(chǎn)品定位:叮咚買菜屬于新零售模式下的電商代表,區(qū)別于傳統(tǒng)零售(線下零售服務(wù)),新零售模式連接線上和線下(O2O)以獲取更大流量從而創(chuàng)造營收。通過線上入口獲客并提供線下服務(wù)。擴(kuò)大其服務(wù)范圍,不再限制于線下有限的范圍,從而獲得更高的價(jià)值。叮咚買菜通過“前置倉配貨—配送到家”的服務(wù)模式提高服務(wù)質(zhì)量和服務(wù)效率。其中,前置倉配貨直接為配送到家縮短了配送時(shí)間,在對菜品質(zhì)量有嚴(yán)格要求的生鮮電商領(lǐng)域中,有效的保證了菜品的“鮮”的同時(shí)涵蓋了3000+的SKU生鮮菜品,,滿足用戶的多樣化需求。同時(shí),因?yàn)樯r產(chǎn)品屬于生活剛需,前置倉的出現(xiàn)使得叮咚買菜可以喊出“最快29分鐘送達(dá)”的口號以提高市場競爭力,建立市場壁壘。
叮咚買菜進(jìn)一步細(xì)化定位:新零售模式下的生鮮電商服務(wù)以區(qū)別于其他綜合電商平臺(tái)。當(dāng)前叮咚買菜多布局于國內(nèi)一線二線城市。其商業(yè)布局一方面來自于自身的戰(zhàn)略定位,另一方面來自于市場環(huán)境(用戶群體)限制。一、二線城市經(jīng)濟(jì)發(fā)達(dá)、擁有互聯(lián)網(wǎng)思維的年輕人所占比重較大,更容易接受新鮮事物(新零售模式)同時(shí)該人群收入較高,對生活品質(zhì)有一定要求,且消費(fèi)觀念較為新潮,容易接受新鮮事物。同時(shí),由于一、二線城市生活節(jié)奏快,工作壓力大,該類人群可自由支配時(shí)間有限等眾多因素影響,該類人群的共性特點(diǎn)與新零售電商的定位相契合。叮咚買菜解決了該類人群沒有時(shí)間買菜這一實(shí)際問題,同時(shí)迎合了該類人群高品質(zhì)生活質(zhì)量的需求——為用戶提供高質(zhì)量高品質(zhì)的生鮮食材。
除去公司內(nèi)部對自身產(chǎn)品的戰(zhàn)略定位之外,還需要用戶研究員對照戰(zhàn)略定位(產(chǎn)品定位)對市場中的用戶群體進(jìn)行用戶研究。用戶研究的方法包括但不限于問卷調(diào)查、小組調(diào)查等。最終根據(jù)研究結(jié)果整理輸出具有高度概括性的用戶畫像(人物角色),用戶畫像是從用戶研究中提取出的可以稱為可用樣例的虛擬人物。定義需求=人物角色+場景描述。
總結(jié)概括:戰(zhàn)略層需要完成的工作分為兩部分
- 公司決策層對產(chǎn)品的整體定位;
- 用戶研究員根據(jù)產(chǎn)品定位對用戶群體進(jìn)行調(diào)研,整理輸出用戶需求文檔,為后續(xù)工作及決策提供參考價(jià)值。
2.2 范圍層
2.2.1 概念分析
當(dāng)把用戶需求和產(chǎn)品目標(biāo)轉(zhuǎn)變成產(chǎn)品應(yīng)該提供給用戶什么樣的內(nèi)容和功能時(shí),戰(zhàn)略就變成了范圍。
范圍層面對的問題轉(zhuǎn)變?yōu)椋骸拔覀円_發(fā)的是什么?”
范圍層分為“功能型產(chǎn)品”和“信息型產(chǎn)品”兩部分。其中,信息型產(chǎn)品可以理解為門戶網(wǎng)站(搜狐、百度、新浪等)之類的以信息傳遞為主要目標(biāo)的產(chǎn)品,功能型產(chǎn)品為幫助解決用戶某個(gè)實(shí)際問題的產(chǎn)品,例如“滴滴打車”幫助用戶解決打車難的問題、“叮咚買菜”幫助用戶解決買菜難的問題。在當(dāng)前的手機(jī)應(yīng)用App中,功能型產(chǎn)品和信息型產(chǎn)品的界限已經(jīng)不再那么清晰,取而代之的是在一款產(chǎn)品中你中有我,我中有你的一種共存模式。例如,新浪微博既可以理解為信息型產(chǎn)品:一種信息傳播介質(zhì),用戶可以使用微博瀏覽各種新聞軼事;同時(shí)也可以理解為功能型產(chǎn)品:一種社交工具,在微博上自由發(fā)表言論,與好友進(jìn)行互動(dòng)等社交行為。
2.2.2 實(shí)例分析
叮咚買菜作為功能型產(chǎn)品,在范圍層中確定的是產(chǎn)品向用戶提供什么樣的功能,或者可以理解為明確產(chǎn)品的功能規(guī)格。在這一過程中需要用戶研究員或產(chǎn)品經(jīng)理將戰(zhàn)略層中將用戶需求轉(zhuǎn)換為產(chǎn)品功能需求文檔。在功能需求文檔中需要對比需求實(shí)現(xiàn)的可行性以及確定需求優(yōu)先級。因?yàn)轫?xiàng)目開發(fā)的時(shí)間成本、技術(shù)成本以及經(jīng)濟(jì)成本是有限的,所以要評估哪些需求最能滿足戰(zhàn)略目標(biāo)。哪些需求可以在后期迭代中進(jìn)行以不影響核心業(yè)務(wù)的實(shí)現(xiàn)。
在確定產(chǎn)品功能規(guī)格的同時(shí)要特別注意,避免陷入“范圍蠕變”—滾雪球效應(yīng)。以保證在每一階段過程中明確產(chǎn)品需要怎樣的功能,不需要怎樣的功能,以提高項(xiàng)目開發(fā)效率,節(jié)約預(yù)算。
叮咚買菜作為生鮮電商垂直領(lǐng)域的代表之一,其核心功能是支持用戶線上選購+線下配送。隨著市場變化以及用戶需求變化,為提升下單量以及復(fù)購率,產(chǎn)品功能也在也在不斷優(yōu)化,下圖顯示了叮咚買菜自上線以來至2020年2月的版本迭代總結(jié)。(圖片來源于網(wǎng)絡(luò))
從上表中可以看出,產(chǎn)品的每一次迭代更新都是圍繞產(chǎn)品核心功能進(jìn)行,留存老客戶,吸引新客戶以提高平臺(tái)下單量和復(fù)購率。例如上表中所示:V8.7.0版本更新中,增加了商品推薦這一功能根據(jù)客戶購買歷史進(jìn)行智能推薦以吸引用戶復(fù)購;V8.19.0版本更新中菜譜支持分享至微信這一功能,通過微信這一社交軟件在社交平臺(tái)上吸引新客戶,完成引流拉新。
當(dāng)前叮咚買菜版本已更新至V9.23.2,應(yīng)用內(nèi)已加入叮咚直播功能,在短視頻/直播行業(yè)大火的市場背景下,“叮咚買菜”通過加入直播功能以吸引用戶,并不代表該產(chǎn)品轉(zhuǎn)型為短視頻領(lǐng)域,而是順應(yīng)實(shí)時(shí)發(fā)展趨勢,利用平臺(tái)直播這一媒介,進(jìn)一步拓寬獲客渠道,其核心業(yè)務(wù)依然是為用戶提供O2O的生鮮電商服務(wù)。產(chǎn)品迭代的過程說明了產(chǎn)品功能需求優(yōu)先級的意義并且有限避免項(xiàng)目盲目擴(kuò)張?jiān)斐傻馁Y源浪費(fèi)。
總結(jié)概括:范圍層中需要完成工作為輸出明確的產(chǎn)品功能需求文檔。功能需求文檔內(nèi)需要注明需求優(yōu)先級。功能需求文檔的書寫規(guī)范在此文中不再贅述,更多詳細(xì)介紹請查閱《用戶體驗(yàn)要素》一書或其他同類文章。
2.3 結(jié)構(gòu)層
2.3.1 概念分析
結(jié)構(gòu)層屬于五個(gè)階段中的中間層,也是產(chǎn)品開發(fā)過程中從抽象到具體的轉(zhuǎn)變。在這一層級中,產(chǎn)品開發(fā)的主要任務(wù)是交互設(shè)計(jì)和信息架構(gòu)建設(shè)。
交互設(shè)計(jì)的目的就是明確人與機(jī)器的溝通方式,交互設(shè)計(jì)的工作內(nèi)容可以簡單理解為將復(fù)雜的軟件變得簡單易用,將軟件的某些功能/特性處理為用戶熟悉的某個(gè)概念,使得用戶可以零成本地,根據(jù)自身對周圍環(huán)境的理解自然地掌握/學(xué)會(huì)使用某項(xiàng)產(chǎn)品。
在《用戶體驗(yàn)要素》一書中,作者Jesse以電子商務(wù)網(wǎng)站中的“購物車”為例來解釋交互設(shè)計(jì):“購物車”是一個(gè)容器,作為一個(gè)容器,用戶將選購的商品放進(jìn)“購物車”中,以及最后下單時(shí)使用“結(jié)賬”來比喻完成一筆購物訂單。
在上述例子中,將用戶在電子商務(wù)網(wǎng)站中的一次購物操作類比做線下商場中人們的實(shí)際行為:推著購物車進(jìn)入超市,把將要選購的商品放進(jìn)購物車中,最后在柜臺(tái)前為車中選購的商品進(jìn)行結(jié)賬。交互設(shè)計(jì)就是將購物這一實(shí)際行為運(yùn)用到電子商務(wù)網(wǎng)站中,讓用戶以傳統(tǒng)的、熟悉的行為方式完成線上購物這一行為。
在交互設(shè)計(jì)過程中,不可避免的一個(gè)問題是“用戶錯(cuò)誤行為”的解決方案。仍然以購物車為例,在現(xiàn)實(shí)生活中,如果在超市購物結(jié)賬時(shí),忽然有某項(xiàng)商品不想要了,可以向收銀員說明,以確保其不會(huì)將我們不想要的商品算入總金額中,避免經(jīng)濟(jì)損失。同樣的問題也存在于電子商務(wù)網(wǎng)站的用戶行為中,用戶將多個(gè)商品添加到購物車中,最后結(jié)賬時(shí)有某個(gè)商品不想要,我們可以將這一情形理解為“用戶錯(cuò)誤”行為,這時(shí)就需要網(wǎng)站提供撤銷或退單功能,確保用戶可以在結(jié)賬時(shí)將不想要商品退還給商場(網(wǎng)站)。
與交互設(shè)計(jì)相輔相成的是產(chǎn)品的信息架構(gòu)建設(shè)。任何一款產(chǎn)品,無論是信息型產(chǎn)品、功能型產(chǎn)品(如今已不再嚴(yán)格區(qū)分二者),都需要對產(chǎn)品內(nèi)容進(jìn)行架構(gòu)建設(shè)。使其信息內(nèi)容結(jié)構(gòu)化而不是雜亂無章的排列的頁面中。
信息架構(gòu)的基本單位是節(jié)點(diǎn)。節(jié)點(diǎn)可以是任意信息片段或組合。他可以小到是一個(gè)數(shù)字,也可以大到是整個(gè)圖書館。不同產(chǎn)品對節(jié)點(diǎn)的定義不盡相同。
結(jié)構(gòu)包括多種類型,例如層級結(jié)構(gòu)、矩陣結(jié)構(gòu)、自然結(jié)構(gòu)和線性結(jié)構(gòu)。
層級結(jié)構(gòu)(也稱為樹狀結(jié)構(gòu)或中心輻射結(jié)構(gòu)):節(jié)點(diǎn)與節(jié)點(diǎn)之間存在父子級關(guān)系。子節(jié)點(diǎn)代表更狹義的概念。從屬于代表廣義類別的父節(jié)點(diǎn)。(不是每個(gè)節(jié)點(diǎn)都有子節(jié)點(diǎn),但是每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn),最上層節(jié)點(diǎn)稱為根節(jié)點(diǎn))
線性結(jié)構(gòu):呈線性排列,典型的線性結(jié)構(gòu)有文章內(nèi)容、閱讀時(shí)的閱讀順序等。
矩陣結(jié)構(gòu):允許用戶在節(jié)點(diǎn)與節(jié)點(diǎn)之間進(jìn)行多維度移動(dòng)。矩陣結(jié)構(gòu)通常幫助那些擁有不同需求的用戶。例如,用戶在電子商務(wù)網(wǎng)站中的商品時(shí),某些用戶以價(jià)格為主要影響因素選購商品,某些用戶以配送時(shí)間為主要影響因素選購商品。
自然結(jié)構(gòu):節(jié)點(diǎn)被逐一連接,不遵循任何一致的模式。該類結(jié)構(gòu)通常見于探索類游戲產(chǎn)品。
值得注意的是,一款產(chǎn)品并非只有一種結(jié)構(gòu),而是多種結(jié)構(gòu)共同作用,才能使產(chǎn)品信息架構(gòu)完善,具體案例在下文中給出。
在產(chǎn)品信息架構(gòu)建設(shè)時(shí),要遵循一定的命名原則,因?yàn)椴皇撬杏脩舳际菍I(yè)的產(chǎn)品研究人員。在對信息內(nèi)容進(jìn)行命名時(shí)要牢記,我們的產(chǎn)品是面向大眾的產(chǎn)品,而并非服務(wù)于某一類專業(yè)人群(專業(yè)類軟件例如編程、設(shè)計(jì)軟件除外)。設(shè)計(jì)師應(yīng)當(dāng)避免使用晦澀難懂的專業(yè)術(shù)語給用戶的帶來困擾,而是應(yīng)該用通俗易懂的語言降低用戶的學(xué)習(xí)成本。例如,在智能導(dǎo)航系統(tǒng)內(nèi),設(shè)計(jì)師不應(yīng)該用專業(yè)理論給用戶普及智能導(dǎo)航的概念,而是應(yīng)該用通俗易懂的話語告訴用戶:“您只需說出或輸入目的地,系統(tǒng)將為您自動(dòng)選擇最優(yōu)路線?!睂τ脩魜碇v,簡單的一句話將比復(fù)雜的理論更具有說服力。
2.3.2 實(shí)例分析
仍然以叮咚買菜分析在范圍層所確定的產(chǎn)品的交互設(shè)計(jì)方式以及信息架構(gòu)
首先分析“叮咚買菜”的交互設(shè)計(jì)方式。叮咚買菜作為垂直電商領(lǐng)域——生鮮電商的代表,其核心業(yè)務(wù)的交互邏輯與傳統(tǒng)電商平臺(tái)(天貓、京東等)沒有根本差別:用戶登錄——選購商品——確認(rèn)訂單——結(jié)賬付款——等待收貨。與傳統(tǒng)電商所不同的是,叮咚買菜僅支持手機(jī)移動(dòng)端使用而不支持PC端。所以其交互方式符合移動(dòng)設(shè)備的交互原則。
筆者以新用戶的身份登錄應(yīng)用,產(chǎn)品版本為V.9.23.2。
當(dāng)前,移動(dòng)端設(shè)備的交互方式以手勢交互和與語音交互為主,叮咚買菜暫不支持人機(jī)語音交互。所以重點(diǎn)分析產(chǎn)品的手勢交互方式。
基本的手勢交互方式分為單指交互、雙指交互、多指交互。其中單指交互和雙指交互較為常見。如下圖所示:(滑動(dòng)包括左右滑動(dòng)和上下滑動(dòng)。)
不同交互手勢的應(yīng)用頻率是不同的,高頻使用的是單擊手勢和滑動(dòng)手勢,之所以高頻使用單擊手勢和滑動(dòng)手勢是因?yàn)橐苿?dòng)設(shè)備端的屏幕大小有限,單頁所承載的信息內(nèi)容有限,需要利用單擊或滑動(dòng)手勢進(jìn)行翻頁或信息層級更替。例如,閱讀類應(yīng)用支持用戶單擊或滑動(dòng)操作模仿現(xiàn)實(shí)中讀書翻頁的動(dòng)作進(jìn)行信息更新和層級交替。
其次是雙指捏合和擴(kuò)張手勢,同樣受限于移動(dòng)設(shè)備的屏幕大小,需要展示內(nèi)容細(xì)節(jié)的產(chǎn)品或產(chǎn)品的某個(gè)功能需要支持雙指捏合和擴(kuò)張手勢。例如手機(jī)內(nèi)的相冊,用戶進(jìn)入相冊,單擊某張縮略圖以顯示選中的照片,若用戶想查看照片細(xì)節(jié),則需要雙指擴(kuò)張以放大圖片,再通過雙指捏合縮小或還原圖片默認(rèn)大小。這里的雙指捏合和擴(kuò)張手勢模擬了人眼到被觀察物體的距離變化,由于移動(dòng)設(shè)備是信息載體,人無法實(shí)際靠近被觀察物體,通過雙指擴(kuò)張表示將物體靠近人眼以查看細(xì)節(jié),雙指捏合表示將物體遠(yuǎn)離人眼表示查看體整體形態(tài)。
(單指)拖拽和單指長按手勢一般應(yīng)用于元素的移動(dòng)或元素隱藏信息的展示。例如,在購物車內(nèi)長按某個(gè)商品條目顯示是否刪除該該商品,網(wǎng)頁內(nèi)拖拽滾動(dòng)條進(jìn)行頁面上翻下翻操作。
“叮咚買菜”的交互手勢將在下一節(jié)中結(jié)合界面、導(dǎo)航設(shè)計(jì)進(jìn)行進(jìn)一步分析說明。
叮咚買菜的信息架構(gòu)如下圖所示:
該信息架構(gòu)僅展示界面內(nèi)一級分類,未將所有子級分類一一說明。在下一節(jié)中結(jié)合產(chǎn)品的界面設(shè)計(jì)分析信息架構(gòu)的分類
2.4 框架層
2.4.1 概念分析
框架層內(nèi)最后的輸出產(chǎn)物是設(shè)計(jì)師們熟知的線框圖,也稱為低保真模型。線框圖包括界面設(shè)計(jì),交互方式說明以及界面之間的相互關(guān)系。線框圖的對一個(gè)頁面中所有的組成部分以及他們?nèi)绾谓Y(jié)合到一起的最直觀的描述。也是用戶所能看到的產(chǎn)品最“原始”的樣子。
在結(jié)構(gòu)層對產(chǎn)品交互方式和信息架構(gòu)定義的基礎(chǔ)上,在這一階段要確定用什么樣的功能和形式來實(shí)現(xiàn)他。根據(jù)《用戶體驗(yàn)要素》一書的定義,將框架層的工作內(nèi)容分為界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì)。同樣的,在設(shè)計(jì)移動(dòng)應(yīng)用時(shí),該定義也具有重要的參考價(jià)值。下面將結(jié)合“叮咚買菜”的信息架構(gòu)具體分析其交互方式和界面布局。
2.4.2 實(shí)例分析
筆者以新用戶身份進(jìn)入應(yīng)用,其首頁如下圖所示:
默認(rèn)顯示首頁內(nèi)容, 最上方是用戶定位以及消息中心,單擊可以修改定位以及查看消息內(nèi)容。向下是搜索欄,單擊搜索框進(jìn)入搜索頁面,搜索頁由三部分組成,分別是:搜索欄,用戶自行搜索,搜索功能支持關(guān)鍵字自動(dòng)補(bǔ)全;搜索歷史(如果有的話),按照時(shí)間線顯示搜索過的內(nèi)容,方便用戶快速查看;搜索推薦,應(yīng)用自動(dòng)顯示部分關(guān)鍵搜索字,方便用戶快速查看,并且支持刷新“推薦內(nèi)容”。搜索頁面如下圖所示:
首頁內(nèi)新人嘗鮮價(jià)占據(jù)頁面一半以上空間,包括新人價(jià)格優(yōu)惠推薦商品以及優(yōu)惠券包。這樣的頁面布局在吸引用戶視線的同時(shí),也為了吸引新人下單,增強(qiáng)用戶粘性。
新人活動(dòng)下方是首頁金剛區(qū),也是底部導(dǎo)航中分類頁的所有分類入口。由于分類較多,頁面承載有限,所以支持左右滑動(dòng)查看所有分類項(xiàng)。金剛區(qū)內(nèi)綠色滑塊很好的提示用戶該區(qū)域支持左右滑動(dòng)以查看剩余內(nèi)容,否則未顯示內(nèi)容只能等待用戶自行探索,從而降低隱藏內(nèi)容曝光,造成資源浪費(fèi)。
基本任意一款手機(jī)應(yīng)用默認(rèn)支持上下滑動(dòng)操作,該應(yīng)用首屏上劃后,搜索欄置頂顯示,頁面內(nèi)其他信息被更替,頁面如下。
金剛區(qū)之下是輪播banner。默認(rèn)5s自動(dòng)更新。點(diǎn)擊banner進(jìn)入活動(dòng)頁面。banner區(qū)下方是一組產(chǎn)品周邊相關(guān)功能入口。分別是“綠卡會(huì)員”、“叮咚農(nóng)場”和“邀請鄰友”。雖然不是產(chǎn)品核心業(yè)務(wù),該類功能對留存拉新仍然發(fā)揮重要作用。
長期活動(dòng)分別是:限時(shí)搶購、綠卡特惠、新品嘗鮮和平價(jià)菜場。單擊任一區(qū)域進(jìn)入對應(yīng)的活動(dòng)詳情頁。
之后是分類推薦區(qū)域,分別是:猜你喜歡、特價(jià)促銷、豐盛午餐、火鍋到家和時(shí)令新品。區(qū)域內(nèi)支持左右滑動(dòng)、或者單擊推薦條目的方式顯示不用區(qū)域推薦商品。并采用無限流的方式展示商品,給用戶帶來沉浸式的購物體驗(yàn)。同時(shí),在上劃時(shí),推薦條目作為首頁內(nèi)二級導(dǎo)航置頂顯示在搜索欄之下,幫助用戶快速定位所處的頁面層級。
首頁內(nèi)容支持雙擊圖標(biāo)返回頁面頂層。
全局導(dǎo)航僅支持單擊切換,不支持左右滑動(dòng)切換。
分類頁如圖所示:
分類頁內(nèi)容根據(jù)菜品屬性不同進(jìn)行分類。商品一級類目與首頁中金剛區(qū)分類相同。一級類目包括:蔬菜豆制品、肉禽蛋、水產(chǎn)海鮮、水果鮮花、乳品烘焙、冷凍食品、糧油調(diào)味、方便速食、快手菜、火鍋到家、網(wǎng)紅打卡地、零食酒飲、營養(yǎng)早餐、鮮花寵物、熟食鹵味、日日鮮、個(gè)護(hù)清潔、綠卡專享。一級類目固定顯示在搜索框下方,可點(diǎn)擊“全部”展開所有一級類目。當(dāng)選擇一級類目時(shí),被選中條目高亮顯示,并且被選中條目相對位置保持不變,其余條目產(chǎn)生相對位移。
左側(cè)為二級類目,右側(cè)為二級類目對應(yīng)的商品展示區(qū)域。商品列表區(qū)域頂部為商品三級類目(部分二級類目下沒有三級類目),當(dāng)前類目下的商品顯示到最后時(shí),向上滑動(dòng)屏幕自動(dòng)切換至后一個(gè)類目商品,所對應(yīng)的類目變?yōu)檫x中狀態(tài)高亮顯示。單擊不同類目標(biāo)簽也可以切換至對應(yīng)的類目商品頁。
商品展示區(qū)由以下元素組成:購買按鈕,商品圖片,商品名稱及價(jià)格,商品關(guān)鍵信息(商品特色,烹飪方式,特惠標(biāo)簽,銷量冠軍等信息)。其中部分商品對存儲(chǔ)條件的特殊要求在商品說明中也有明顯標(biāo)注。
不同客戶對該頁面的條目列表的需求不同,對于有明確需求/購買意向的用戶,再搜索框中輸入關(guān)鍵字點(diǎn)擊搜索,根據(jù)搜索結(jié)果直接查看并下單;對于需求模糊/購買意向不強(qiáng)的用戶可以通過分級類目瀏覽商品,心儀商品可以點(diǎn)擊購買按鈕添加至購物車中。
在該頁面內(nèi),對于依賴分類條目瀏覽商品的用戶來講,其操作路徑/視線路徑如下圖所示:
并非所有二級類目之下都含有三級類目,所以當(dāng)用戶參照分類條目瀏覽商品時(shí),至少需要三次操作:選擇一級類目,選擇二級類目,選擇相應(yīng)的商品縮略圖。
點(diǎn)擊商品介紹區(qū)域,進(jìn)入產(chǎn)品詳情頁:全局導(dǎo)航消失。
產(chǎn)品圖片自動(dòng)輪播(5s更新),也可左右滑動(dòng)查看上/下一張圖片。單擊圖片區(qū)域全屏顯示圖片后,支持雙擊放大圖片(三次雙擊縮放至默認(rèn)大小)或雙指捏合縮放,默認(rèn)大小時(shí),單擊圖片退出全屏顯示狀態(tài)?;氐疆a(chǎn)品詳情頁。
頁面頂部分布有返回按鈕(返回上一級)和分享按鈕(分享至第三方應(yīng)用:微信/朋友圈)。向上滑動(dòng)至商品圖片消失時(shí),該頁面內(nèi)二級導(dǎo)航出現(xiàn)在頁面頂部,分別是商品、評價(jià)、詳情、推薦。單擊導(dǎo)航名稱,相應(yīng)內(nèi)容在屏幕內(nèi)聯(lián)動(dòng)顯示,或滑動(dòng)屏幕顯示不同內(nèi)容時(shí),相對應(yīng)的導(dǎo)航為高亮選中狀態(tài)。
在商品評價(jià)區(qū)與詳情介紹介紹區(qū)之間有單獨(dú)的關(guān)聯(lián)推薦商品區(qū)域。(該區(qū)域并未在二級導(dǎo)航中體現(xiàn))該區(qū)域所展示的商品為當(dāng)前商品詳情頁的相關(guān)商品。(或依據(jù)烹飪方式推薦、或根據(jù)飲食搭配推薦)。關(guān)聯(lián)推薦為三頁內(nèi)容,用戶在該區(qū)域內(nèi)可左右滑動(dòng)查看所有推薦商品,同理,單擊縮略圖進(jìn)入商品詳情頁或單擊購物車按鈕加入“購物車”。
頁面底部為我的購物車與加入購物車按鈕,若購物車內(nèi)有商品,則購物車按鈕根據(jù)商品數(shù)量高亮顯示以提示用戶當(dāng)前所選購商品數(shù)量。
點(diǎn)擊購物車按鈕則進(jìn)入全局導(dǎo)航下的購物車界面。
購物車內(nèi)商品默認(rèn)為選中狀態(tài)——已選購。用戶可點(diǎn)擊選中按鈕取消選擇(商品條目仍然保存在購物車內(nèi))。若用戶想刪除購物車內(nèi)商品,有以下幾種方式:
- 可長按商品條目刪除該商品;
- 點(diǎn)擊屏幕右上角刪除按鈕刪除已選中商品;
- 向左滑動(dòng)商品條目出現(xiàn)刪除按鈕,點(diǎn)擊刪除。
該頁面內(nèi),已選購商品上方有換購?fù)ǖ馈8鶕?jù)單次消費(fèi)金額進(jìn)行換購。該區(qū)域內(nèi)左右滑動(dòng)查看可換購商品。同理,單擊換購商品區(qū)域進(jìn)入對應(yīng)的商品詳情頁。已選購商品下方是商品推薦區(qū)。系統(tǒng)根據(jù)用戶購買歷史或?yàn)g覽歷史進(jìn)行智能推薦。
無論是商品推薦還是換購功能,都是為了吸引客戶下單,提高客單價(jià)。
瀏覽至推薦商品底部時(shí),出現(xiàn)一鍵回到頂部按鈕。方便用戶快速定位。當(dāng)用戶對購物車內(nèi)商品確認(rèn)無誤后,點(diǎn)擊結(jié)算按鈕進(jìn)入結(jié)算界面。界面如下:
該界面內(nèi)用戶必需進(jìn)行的操作包括:填寫收貨地址,選擇收貨時(shí)間,選擇支付方式,確認(rèn)消費(fèi)金額??蛇x操作包括:在此確認(rèn)選購商品,是否使用優(yōu)惠券,訂單備注。所有信息確認(rèn)無誤后,點(diǎn)擊提交訂單轉(zhuǎn)入第三方支付平臺(tái)進(jìn)行支付。
全局導(dǎo)航中,點(diǎn)擊“我的”按鈕進(jìn)入個(gè)人信息頁面。頁面如下:
頁面內(nèi)分為消息中心、用戶信息、用戶賬戶、用戶訂單、活動(dòng)入口、其他相關(guān)功能、智能推薦模塊。
點(diǎn)擊右上方按鈕進(jìn)入消息中心,點(diǎn)擊用戶名稱進(jìn)入個(gè)人資料界面更改個(gè)人資料。
該頁面功能較為簡潔,因此不再贅述。
全局導(dǎo)航中,直播頁如下:
該頁面分為一下幾個(gè)模塊:輪播banner、直播間入口、直播預(yù)告、做飯教程。
頁面頂部為自動(dòng)輪播banner,也可左右滑動(dòng)翻頁查看。屏幕中心區(qū)域是直播間入口和直播預(yù)告,點(diǎn)擊直播間入口進(jìn)入直播間觀看直播。
屏幕上劃至輪播圖超出屏幕區(qū)域后,顯示屏幕標(biāo)題——“叮咚直播”(下劃反之)。繼續(xù)上劃,做飯靈感下的類目標(biāo)簽欄至標(biāo)題下方后,類目標(biāo)簽欄固定顯示在標(biāo)題下方,同時(shí)出現(xiàn)一鍵返回頂部按鈕,方便用戶快速定位。
用戶可左右滑動(dòng)查看不同類型教程。左右滑動(dòng)時(shí),相應(yīng)的類目標(biāo)簽聯(lián)動(dòng)顯示為被選中狀態(tài)。也可單擊類目標(biāo)簽直接顯示對應(yīng)內(nèi)容。點(diǎn)擊教程縮略圖進(jìn)入教程詳情頁。類目標(biāo)簽內(nèi)點(diǎn)擊“全部”查看所有分類。
在進(jìn)行界面更新、界面加載時(shí),采用微交互的設(shè)計(jì)方式填補(bǔ)用戶等待時(shí)間。由于動(dòng)畫效果不便展示,故文中沒有圖示說明。
由于時(shí)間有限,未能將應(yīng)用內(nèi)所有界面一一說明,僅分析至二級界面。
2.5 表現(xiàn)層
2.5.1 概念分析
框架層中主要解決可交互元素的布局、信息元素的排布以及界面之間的邏輯關(guān)系問題。在表現(xiàn)層中要結(jié)局產(chǎn)品邏輯排布的呈現(xiàn)問題。將信息呈現(xiàn)給用戶的過程,用戶接收信息的過程,被定義為感知設(shè)計(jì)。
人的感官系統(tǒng)由五方面組成,分別是視覺、聽覺、觸覺、嗅覺和味覺。其中,嗅覺和味覺是用戶體驗(yàn)設(shè)計(jì)師很好考慮的范疇。實(shí)物產(chǎn)品的觸覺體驗(yàn)屬于工業(yè)設(shè)計(jì)領(lǐng)域的概念,例如產(chǎn)品的外形、材質(zhì)等?;谄聊唤换サ漠a(chǎn)品目前沒有過多的將觸覺體驗(yàn)納入研究范圍。聽覺現(xiàn)在已經(jīng)開始應(yīng)用于各種產(chǎn)品當(dāng)中,例如智能音箱、智能語音系統(tǒng)、智能車載系統(tǒng)等。產(chǎn)品通過捕捉用戶發(fā)出的語音指令做出一系列反饋為用戶提供有效信息。
視覺設(shè)計(jì)是被應(yīng)用最多的領(lǐng)域。幾乎所有的產(chǎn)品都會(huì)涉及視覺設(shè)計(jì)。視覺設(shè)計(jì)過程中,要注意以下方面:
- 視覺設(shè)計(jì)應(yīng)該使得產(chǎn)品更加易用,而不是分散用戶“完成目標(biāo)”的注意力。不應(yīng)該讓視覺設(shè)計(jì)成為阻礙用戶達(dá)成目的的因素,而是更好的引導(dǎo)用戶完成目標(biāo)。
- 視覺設(shè)計(jì)要注意對比和一致性。既要突出顯示重要內(nèi)容,又要強(qiáng)調(diào)整體一致,例如圖標(biāo)風(fēng)格的一致性,控件大小一致性以及元素間距的一致性等。通常運(yùn)用柵格系統(tǒng)保證頁面的一致性,用不同的配色方案表現(xiàn)元素之間的對比關(guān)系。
2.5.2 實(shí)例分析
叮咚買菜的主要色彩是白色作為背景色,綠色作為輔助色,突出顯示為被選中狀態(tài)。例如分類條目、全局導(dǎo)航中的被選中狀態(tài)為綠色,以及商品內(nèi)容區(qū)內(nèi)的購物車按鈕同樣突出顯示為綠色。紅色作為點(diǎn)綴色突出顯示商品價(jià)格、結(jié)算按鈕以及商品屬性標(biāo)簽的文字。
商品一級類目使用實(shí)物圖標(biāo)直觀表現(xiàn)不同類別的商品。
除此以外,應(yīng)用內(nèi)其他圖標(biāo)一律采用線性圖標(biāo),保證界面風(fēng)格一致性。
界面一致性還體現(xiàn)在不同模塊之間保持一致的間距,商品信息展示使用卡片式設(shè)計(jì)等。
三、總結(jié)概括
產(chǎn)品的用戶體驗(yàn)設(shè)計(jì)并不是一勞永逸的過程,而是隨著市場規(guī)律和用戶需求的變化周而復(fù)始的進(jìn)行更替。在工作過程中,既要考慮現(xiàn)有的成本:技術(shù)、時(shí)間、經(jīng)濟(jì)等。也要考慮用戶的真實(shí)需求,避免依據(jù)“偽需求”進(jìn)行產(chǎn)品開發(fā)的錯(cuò)誤方向。正如《用戶體驗(yàn)要素》一書中所言,用戶體驗(yàn)的開發(fā)過程是一場“馬拉松”,而不是“短跑”。成功的馬拉松取決于運(yùn)動(dòng)員如何有效地控制自己的步伐。
產(chǎn)品的開發(fā)是一個(gè)漫長的過程,只有遵循客觀規(guī)律,確保在每一層級都做出正確的決策才能保證最終的產(chǎn)品滿足最初的戰(zhàn)略目標(biāo)和用戶需求。
本文由 @第一生瓜蛋子 發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議。
個(gè)人感覺這個(gè)更像產(chǎn)品體驗(yàn)報(bào)告;
嗯嗯,構(gòu)想的是結(jié)合相關(guān)理論對生鮮app的一個(gè)分析。歡迎交流~
1、沒看懂,典型的不說人話系列,各種理論的純堆疊,不系統(tǒng),屬于看了個(gè)寂寞。
2、這么分析完有啥用,根本不落地
3、我覺得正確的分析思路:每個(gè)產(chǎn)品都有最核心的交互動(dòng)線、管理系統(tǒng)、運(yùn)營系統(tǒng),比如叮咚買菜的核心交互動(dòng)線是篩選(挑菜)-購物車-結(jié)算-配送-確認(rèn)收貨,管理系統(tǒng)是“我的”中的訂單、配送、服務(wù)系統(tǒng),運(yùn)營系統(tǒng)是優(yōu)惠券、秒殺活動(dòng)、補(bǔ)貼、會(huì)員等,從這三點(diǎn)出發(fā)去梳理叮咚的架構(gòu)和功能,會(huì)明確和清晰很多。
多謝指正。虛心接受您的意見和建議!歡迎交流)