必勝宅急送Web app設計背後的思考

2022-04-22 18:10:19 字數 2343 閱讀 5073

1相關廠商內容

相關贊助商

qcon全球軟體開發大會(北京站)2014,4月25-27日,誠邀蒞臨。

除了實現產品功能概念外(有效性),另外的動機就是減少消費者從登入**到預覽下單的時間(效率)和讓消費者接受並喜歡使用宅急送(滿意度)。有效性、效率和滿意度是評判產品可用性的標準,在以使用者為中心的產品設計中作為衡量產品質量的指標。產品設計師基於對市場、使用者、產品的理解和積累建立符合可用性訴求的價值傾向,並貫穿在產品之中。

固然好的設計師擅長如何讓產品、功能與使用者需求有機結合,但在有些問題上,難以避免與其他專案成員、與客戶之間的分歧,這時候採用可用性測試對使用者動機研究就成為判斷的依據。

想要立即得到設計師、客戶都滿意又符合可用性要求的完美方案是不可能的,所以結合專案進度要求,設計團隊引入了低保真原型的可用性測試進行循序漸進的設計迭代,力圖通過探明使用者的動機解決設計上的關鍵問題。

對於可用性測試的乙個誤解是,可用性測試需要花太多時間和金錢。誤解的前提是乙個成熟完整的測試可能需要若干天數進行準備和測試,再經過一定時間才能整理資料並得出分析結論,由此帶來的時間成本和招募成本不利於專案進行。

2 低保真測試原型

與招募同時進行的是測試指令碼的設計,為被測使用者賦予場景化的環境並梳理任務順序以符合真實習慣。一種任務型別是觀察,讓使用者熟悉介面並對介面進行反饋。另一種任務是操作,設定產品的典型任務如點三份芝香滿溢比薩由使用者完成。

因為線框原型在功能、視覺方面的侷限性,使用者的困惑點相比於上線後的測試可能更多,所以執行過程中的發聲思考是非常有效的工具。比如首頁某一版方案測試時,可以聽到如下使用者聲音:

3 首頁線框原型

「要不是看必勝宅急送的logo,我還以為是個類網頁」

「我不清楚這個優惠活動跟優惠列表具體有什麼分別」

「點選『預覽選單』後以為會進入選單,沒想到還要再選一次菜品種類」

「我會首先看優惠列表中有沒有自己喜歡的東西,如果有就直接訂購」

其中部分困惑(1和2)是線框原型帶來的測試「噪音」,難以對當前版本提供實際的啟發和引導,但3和4則反應了首頁在布局和任務流程上存在的問題。被測使用者進行發聲思考使得行為背後的內容,如理解、計畫等轉化成明確、能被觀察或分析到的資料,沉默的內部心理行為可以幫助測試者從使用者角度發現問題本質。

綜合其他使用者和後續迭代反饋,最終的首頁方案如下:

4 首頁效果圖

設計師對原首頁方案上的方向是:簡潔明瞭,突出訂餐點單的核心功能,並在首頁呈現使用者所需要使用的功能入口。但在測試中發現,使用者進入首頁後受三種不同方向的動機驅動:

(1)已有明確的訂餐目的和菜品,首頁需要解決的是快速完成下單流程;

(2)瀏覽型使用者會期望還原線下餐廳一樣隨心所欲翻看選單的體驗,再確定菜品和下單與否;

(3)而對於利益型使用者,優惠活動和優惠力度最容易勾起他們的購買慾望。

所以最終方案在保持訂餐的核心功能外,對於不同的入口動機,利用web不侷限一屏瀏覽的特點將菜品類目和優惠列表同時鋪展,形成乙個資訊豐富的展示空間。

從測試中獲得的另一項有價值的發現幫助解決了專案團隊內部的分歧。點餐介面存在設計師出於不同考慮的方案:方案1(左邊)從使用者認知出發,點選「訂購」後展現當前菜品數量並要求使用者進行確認動作;方案2(右邊)站在效率的思路,簡化點餐的操作步驟,點選即增加乙份菜品,並利用角標的方式幫助使用者了解當前數量。

5 訂餐頁面線框原型

統計測試資料後,看起來更複雜的方案1的相關任務完成率較高,對比採用方案2的任務完成率較低,被測使用者的發聲思考也驗證了這個結果:被測使用者在使用方案1時更明確銜接動作,而對方案2會產生疑惑。

方案1中下單的操作比方案2多了至少2步,但整體流程上清晰明確,就像線下點餐那樣,對每個菜品的數量予以確認,使用者自由度較小,很難從當前菜品選擇中跳出去。購物車的存在允許使用者前往結算介面並支付,彌補了解總體訂單情況的便利性。

方案2最大的優勢是在單品數量較少(乙份披薩的量較大)的情況下有較高的操作效率,在熟悉操作的情況下即使多份也不遜於方案1。但是隨意點選就增加菜品帶來的自由度讓使用者感覺會偏離任務,可以通過購物車減少菜品數量對使用者來說也是個隱藏操作,所以使用者很容易在方案2中產生困惑。

最終上線的點單介面如下:

6 訂餐頁面效果圖

終版利用上方的懸浮通知優化了方案1不方便檢視訂單總量的缺點。使用者的動機是獲得需要的菜品,所以不經確認的下單動作會讓使用者失去安全感。對於符合使用者思維模式的流程,即使步驟略多,在執行時因為習慣或直覺的引導也不會帶來太多注意力的分散或負擔。使用者未必能感受到方案2帶來的效率提高,但一旦出現不完善就會招致不滿。

同樣在使用者不需要為單一目標集中注意力的時候,特意突出的元素也是畫蛇添足。這是被否決的乙個結算介面原型:

7 結算頁面線框原型

對動機的挖掘並不是非黑即白的單選項。在低保真原型測試的支援下,通過動機把握,確定產品哪些元素是有益的,哪些元素是無益的,最終形成效果顯著的產品方案,獲得品質和效率上的雙贏。

感謝李永倫對本文的審校。

宅急送 專案

宅急送 專案第一天 環境搭建 宅急送 專案第二天 完整流程 宅急送 專案第三天 貨物收派標準 宅急送 專案第四天 取派員和區域管理 宅急送 專案第五天 區域 分割槽 定區 宅急送 專案第六天 定區管理 宅急送 專案第七天 取派業務模組 宅急送 專案第八天 jbpm工作流框架 宅急送 專案第九天 jb...

仿肯德基宅急送App Vue實戰

首頁 商品頁 外賣頁 技術棧vue webpack vuex axios 定義的元件 better scroll 因為每個頁面都需要滑動,所以一開始就把scroll元件封裝好,之後使用的話引入一下就行了 複製 slot 插槽是一塊模板,顯示不顯示,以及怎樣顯示由父元件來決定,也就是把你想要滑動的區域...

宅急送,送來了變了形的伺服器

我們拒收了伺服器,聯絡宅急送處理這件事。零刻資料聯絡了河北的宅急送,讓他們賠償,宅急送啟動了賠償程式,卻需要很多手續 伺服器發票 伺服器廠商的供貨清單 發貨與收貨方的一些證明 第三方提供的伺服器損壞情況評估等等,然後根據伺服器損壞情況考慮怎麼賠償,這樣不知要折騰到什麼時候!下午五點左右,我們又打了宅...