沒(méi)看錯(cuò)，就是你們熟悉的那個(gè)服裝品牌 Zara，這篇文章作者 William Ng 運(yùn)用了「設(shè)計(jì)思維 」的模式，分析了 Zara 手機(jī)應(yīng)用的可用性，并提出了改進(jìn)建議。算是對(duì)設(shè)計(jì)思維的具體案例運(yùn)用。

Zara 是我最愛(ài)的服裝品牌之一。但每次使用他們的軟件，我都感覺(jué)有各種問(wèn)題。所以我做了一個(gè) Zara 的可用性測(cè)試與分析，來(lái)看看是不是別的用戶也和我一樣有同樣的煩惱。結(jié)果我發(fā)現(xiàn)了許多用戶痛點(diǎn)，并提出了一些提升用戶體驗(yàn)的方案。

共情

用戶畫像

第一步，我對(duì) Zara 的用戶進(jìn)行了在線調(diào)查。然后我創(chuàng)建了一組預(yù)估的用戶畫像，并包含了假設(shè)的最大一組用戶群：20 - 30 歲左右的中產(chǎn)收入工作者。

△ ?工作故事

除了用戶畫像以外，我也花了一些時(shí)間了解用戶使用應(yīng)用的場(chǎng)景，從而更深入探究他們的動(dòng)機(jī)和期待的結(jié)果。

可用性測(cè)試

對(duì)用戶有了一點(diǎn)了解之后，我去商場(chǎng)找了一個(gè)逛街的人進(jìn)行可用性突擊測(cè)試。我在給用戶做測(cè)試之前，保證了用戶至少是頻繁的在線購(gòu)物消費(fèi)者。最終，我測(cè)試了七個(gè)用戶。

每個(gè)用戶都被問(wèn)到想象自己在一個(gè)場(chǎng)景里面，進(jìn)行以下任務(wù)：

• 最近天氣很冷，你在給自己找一件冬大衣，你會(huì)怎么做？
• 你看到了一件你可能會(huì)喜歡的大衣，可以跟我重現(xiàn)一下你會(huì)怎么決定這是不是你要的那件大衣？
• 你把大衣放進(jìn)了購(gòu)物車，但發(fā)現(xiàn)尺碼錯(cuò)了，你會(huì)怎么做？

定義和分析

親和圖

我瀏覽了所有測(cè)試，并仔細(xì)地把每個(gè)用戶遇到的問(wèn)題和抱怨都列了出來(lái)。接下來(lái)，我通過(guò)分類把這些痛點(diǎn)進(jìn)行了分類和歸組。

2 * 2 分析

為了排定這些信息的優(yōu)先級(jí)，我創(chuàng)建了一個(gè) 2*2 的圖表，以對(duì)商業(yè)重要性作為 X 軸，對(duì)用戶的重要性作為 Y 軸來(lái)排列這些信息。假設(shè)最重要的商業(yè)模板是增加應(yīng)用的收入，那么在購(gòu)物車?yán)锞庉嫍l目就成為了對(duì)商業(yè)和用戶都是最重要的一點(diǎn)。所以這也成為我重新設(shè)計(jì)的著眼點(diǎn)。

定義問(wèn)題

我仔細(xì)分析了用戶與購(gòu)物車有關(guān)的行為和模式，以便找到更好的解決方案。

當(dāng)他們?cè)噲D在購(gòu)物車?yán)锞庉嬌唐返臅r(shí)候：

• 只有 1/7 的人沒(méi)有遇到問(wèn)題
• 7人中 6 人都點(diǎn)了該商品條目，但只跳出來(lái)一個(gè)圖片
• 7 人中 4 人選擇了向左滑動(dòng)商品，卻沒(méi)有出現(xiàn)預(yù)期的編輯選項(xiàng)
• 7 人中 2 人不小心刪除了他們的商品

其他問(wèn)題：

• 不能在購(gòu)物車?yán)镏苯泳庉嬌唐返念伾统叽?，也就是說(shuō)用戶必須再瀏覽一遍商品來(lái)修改商品信息
• 在購(gòu)物車?yán)镉脩糁荒芸吹缴唐返膯螐垐D片

方案和改造

低保真手繪

在研究了用戶的購(gòu)物車使用過(guò)程中遇到的問(wèn)題之后，我列出了一些針對(duì)痛點(diǎn)的潛在解決方案，并使用手繪的低保真原型來(lái)表達(dá)。

△ ?高保真原型

在把低保真手繪轉(zhuǎn)為高保真原型之前，我讓一些在線購(gòu)物用戶走了一遍我的流程來(lái)驗(yàn)證想法，并收到了一些建設(shè)性意見(jiàn)，我把這些意見(jiàn)融入了最終的設(shè)計(jì)里。

以下是我的一些建議：

新的編輯按鈕替換了舊的「之后再買 」; 但這是個(gè)有意的選擇. 最開始，當(dāng)用戶想把一個(gè)商品保存以供以后查看的時(shí)候, 他們只能先把商品放進(jìn)購(gòu)物車.所以我會(huì)在瀏覽頁(yè)面加一個(gè)「收藏 」功能，這樣用戶想收藏的時(shí)候不用先把商品放進(jìn)購(gòu)物車。

在購(gòu)物車頁(yè)面添加了垂直的圖片組，這樣用戶可以查看商品的多張圖片。在最開始的用戶測(cè)試中，用戶傾向于水平滑動(dòng)去瀏覽更多的商品圖片。所以，我增加了更多的元素來(lái)引導(dǎo)用戶進(jìn)行正確的操作。

原型

想像一下你已經(jīng)把商品選好放進(jìn)了購(gòu)物車，這時(shí)候才發(fā)現(xiàn)需要修改尺寸......

試試我做的原型吧。

驗(yàn)證

我把自己設(shè)計(jì)的原型拿給七個(gè)用戶進(jìn)行測(cè)試，目標(biāo)也是讓他們?cè)谫?gòu)物車?yán)镞M(jìn)行商品尺寸和數(shù)量的修改。所有用戶都順利地完成了任務(wù)。

作為重新設(shè)計(jì)的結(jié)果，用戶在購(gòu)物車?yán)镄薷纳唐沸畔⒌某晒β侍嵘?30%。

總結(jié)

通過(guò)用戶可用性的突擊測(cè)試，我了解到用戶對(duì)于修改已放入購(gòu)物車的商品信息存在很大困難。另外，一般的購(gòu)物應(yīng)用都會(huì)有的功能（比如查看商品更多圖片或是修改商品尺寸）在 Zara 應(yīng)用內(nèi)缺失。我的設(shè)計(jì)讓用戶可以在結(jié)賬的時(shí)候更加方便地修改信息。增強(qiáng)用戶體驗(yàn)意味著減少用戶摩擦，也就意味著帶來(lái)銷量上的提升。

感謝閱讀！

歡迎關(guān)注譯者的個(gè)人專欄：盒子以外，產(chǎn)品設(shè)計(jì)和科技的深度學(xué)習(xí)。

「用一個(gè)案例教你學(xué)東西系列」

1. 智能對(duì)象丨《用一個(gè)實(shí)戰(zhàn)教程，讓你學(xué)會(huì)智能對(duì)象》
2. 直方圖丨《用一個(gè)后期教程，幫你學(xué)會(huì)利用直方圖破解圖像的方法》
3. 圖層樣式丨《做一個(gè)實(shí)戰(zhàn)教程，讓你學(xué)會(huì)圖層樣式9大技能》
4. 設(shè)計(jì)流程丨《用一個(gè)實(shí)戰(zhàn)案例，幫你認(rèn)識(shí)完整的設(shè)計(jì)流程》
5. 總監(jiān)思考方式丨《用一個(gè)簡(jiǎn)單的體重記錄功能，揭秘UI設(shè)計(jì)總監(jiān)的思考過(guò)程》
6. 交互思考方式《用一個(gè)文本框，讓你學(xué)到交互設(shè)計(jì)師的邏輯思考方法》
7. 交互面試題丨《用一個(gè)框架，幫你學(xué)會(huì)這個(gè)最常見(jiàn)的交互面試題》
8. 數(shù)據(jù)驗(yàn)證交互丨《用一個(gè)實(shí)戰(zhàn)案例，幫你學(xué)會(huì)用數(shù)據(jù)驗(yàn)證產(chǎn)品設(shè)計(jì)》
9. 復(fù)雜界面設(shè)計(jì)丨《用一個(gè)實(shí)戰(zhàn)案例，教你學(xué)會(huì)復(fù)雜界面的布局設(shè)計(jì)》
10. 視覺(jué)改版方法丨《用一個(gè)實(shí)戰(zhàn)案例，教你學(xué)會(huì)視覺(jué)改版的方法》
11. 用戶體驗(yàn)研究丨《用一個(gè)實(shí)戰(zhàn)案例，帶你從零開始做用戶體驗(yàn)研究》
12. 設(shè)計(jì)沖刺法丨《用一個(gè)實(shí)戰(zhàn)案例，幫你快速學(xué)會(huì)現(xiàn)在最火的設(shè)計(jì)沖刺法！》
13. 交互思考方式丨《用一個(gè)實(shí)戰(zhàn)案例，帶你學(xué)習(xí)交互設(shè)計(jì)師的思考方式》
14. 重設(shè)計(jì)思路丨《用一個(gè)實(shí)戰(zhàn)案例，幫你學(xué)會(huì)講述重設(shè)計(jì)作品的思路》

原文地址：Zara

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量190萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com