原文鏈接：Zara a usability case study

原文作者：William Ng

Zara是我最喜歡的服裝品牌之一，但是當(dāng)我用app的時(shí)候總會(huì)遇到一些問(wèn)題。盡管我不在Zara工作，但是我想看看其他用戶是不是也有相似的問(wèn)題。我決定去做一做可用性測(cè)試，這可以讓我發(fā)現(xiàn)很多的痛點(diǎn)，并且對(duì)體驗(yàn)的部分進(jìn)行重設(shè)計(jì)。

同理心

用戶畫像

第一步，我圍繞Zara的消費(fèi)者進(jìn)行在線調(diào)研。我創(chuàng)建了兩個(gè)臨時(shí)的角色來(lái)應(yīng)對(duì)假設(shè)，最大的用戶群是：20～30歲的中上收入階層。

工作故事

除了了解角色之外，為了更近一步的了解用戶在使用app時(shí)的動(dòng)機(jī)和預(yù)期結(jié)果，我花費(fèi)了很多的時(shí)間去理解用戶使用的環(huán)境。

可用性測(cè)試

為了更好的理解用戶，我決定去一家Zara的店，選擇一些客人進(jìn)行追蹤可用性測(cè)試。我對(duì)人群進(jìn)行抽樣測(cè)試，確保他們?cè)跍y(cè)試之前接觸過(guò)網(wǎng)購(gòu)。最終選定了七位用戶。

每位用戶都被要求想象一下他／她在一個(gè)場(chǎng)景中，并執(zhí)行下面這些任務(wù)：

最近很冷，你想要去尋找一件冬天穿的外套，你會(huì)怎么做？

你看見(jiàn)了一件喜歡的衣服，你可以告訴我哪些因素讓它吸引你？

當(dāng)你添加外套進(jìn)購(gòu)物車后，你發(fā)現(xiàn)衣服的尺寸錯(cuò)了，你會(huì)怎么做？

定義&分析

親密圖

我仔細(xì)的分析測(cè)試錄音，然后提出每個(gè)用戶的問(wèn)題與反饋。然后通過(guò)映射來(lái)反映這些痛點(diǎn)的關(guān)系，分類處理。

2X2分析

為了幫助分析問(wèn)題，我試用了2x2地圖來(lái)幫助劃分問(wèn)題的等級(jí)，通過(guò)他們?cè)谏虡I(yè)（x軸）和用戶（y軸）的重要性來(lái)確定。假設(shè)app的主要業(yè)務(wù)目標(biāo)是推動(dòng)移動(dòng)端商業(yè)收入，我認(rèn)為購(gòu)物車編輯是商業(yè)和用戶之間最大的痛點(diǎn)。因此，這些問(wèn)題都在我的重設(shè)計(jì)范圍內(nèi)。

定義問(wèn)題

我仔細(xì)地分析了用戶與購(gòu)物車的行為和模式，想了一套解決方案。

當(dāng)試圖在購(gòu)物車中編輯一個(gè)項(xiàng)目時(shí)：

七個(gè)人當(dāng)中只有一個(gè)沒(méi)有遇到問(wèn)題

七個(gè)人當(dāng)中有六個(gè)嘗試tap購(gòu)物車中的項(xiàng)目，但是只談出來(lái)了一張圖片

七個(gè)人當(dāng)中有四個(gè)試圖刷新項(xiàng)目，但是沒(méi)有彈出編輯選項(xiàng)

七個(gè)人當(dāng)中有兩個(gè)不小心刪除了他們的物品

其他問(wèn)題

沒(méi)有辦法修改購(gòu)物車中商品的大小和顏色，這意味著用戶不得不返回再次選擇內(nèi)容

用戶無(wú)法看到購(gòu)物車中關(guān)于商品更多的圖片

想象&創(chuàng)造

低保真UI草圖

在回顧了購(gòu)物車編輯的問(wèn)題之后，我關(guān)聯(lián)了每個(gè)痛點(diǎn)和可能的解決方案來(lái)解決問(wèn)題。

高保真原型

在將我的設(shè)計(jì)應(yīng)用在原型之前，我通過(guò)在低保真UI草稿的走查和參考更多的網(wǎng)購(gòu)用戶的意見(jiàn)。收集了一些不錯(cuò)的觀點(diǎn)并融入了我的最終設(shè)計(jì)中去。

接下來(lái)是我的解決方案：

新的“edit”按鈕取代了舊的“buy later”按鈕；這是一個(gè)有意義的選擇。在這之前，用戶想要保存他們的項(xiàng)目，他們?cè)谫?gòu)物車中只能這么做。我會(huì)添加“save for later”功能在product-browsing流中，這樣用戶在收藏之前就不必去移動(dòng)它。

豎向的圖片carousel與app中的其他部分交互模式保持了一致。在最初的可用性測(cè)試中，用戶往往會(huì)水平輕掃去查看更多的圖片，因此我添加了適當(dāng)?shù)囊曈X(jué)元素引導(dǎo)互動(dòng)。

原型

準(zhǔn)備好了試試看原型嗎？

首先，想象你你剛在Zara的app中完成購(gòu)物，并準(zhǔn)備退出。然而你需要編輯一些在購(gòu)物車中的物品。然后你可以試著使用原型（點(diǎn)擊查看）看看了。

驗(yàn)證

我通過(guò)七位用戶來(lái)使用原型來(lái)驗(yàn)證我的設(shè)計(jì)。這七位用戶被要求去編輯購(gòu)物車中物品的數(shù)量和大小。所有的用戶都能夠沒(méi)有問(wèn)題的完成任務(wù)。

重新設(shè)計(jì)后，任務(wù)的成功率從33%上升到了100%。

當(dāng)用戶在購(gòu)物車中編輯一個(gè)項(xiàng)目：

通過(guò)追蹤可用性測(cè)試，我發(fā)現(xiàn)了用戶對(duì)已經(jīng)添加進(jìn)購(gòu)物車中的商品編輯困難。進(jìn)一步，有一些預(yù)期的普通功能并沒(méi)有存在于購(gòu)物車中。（例如查看更多的圖片和更換尺寸）。我的設(shè)計(jì)優(yōu)化了檢驗(yàn)過(guò)程，方便用戶在購(gòu)物車中編輯和比較。讓用戶在整個(gè)過(guò)程中更平滑意味著更低的跳出率，進(jìn)而帶來(lái)更多的商業(yè)變現(xiàn)。