設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

宜家買過東西的人,大都會有這樣的體驗:將訂購的家具零件從包裝里面拿出來,花上一下午組裝起來,然后大汗淋漓地坐在沙發(fā)上高興地盯著這個看起來平淡無奇的新玩意,然后發(fā)上一條朋友圈。

這是「勞動的果實」。

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

作為一家成立于1943年的企業(yè),宜家從瑞典走出到家喻戶曉花費了幾十年的時間。從2008年開始,宜家就已經(jīng)是全球最大的家居零售商了。

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

在宜家,家具大都需要用戶買回去之后自己組裝起來,這種組裝之后產(chǎn)生的一系列的心理學(xué)效應(yīng)雖然并不只由宜家的產(chǎn)品帶來,但是最終還是因為宜家的名氣,而最終使用它來定名。

人們對于自己所構(gòu)建起來的東西,會更加看重和著迷,哪怕別人所做的完全一樣的東西,也很難在自己這里產(chǎn)生情感羈絆。這種完成感和成就感,源自于「向別人發(fā)出你有能力」的信號。嚴(yán)格意義上來說,這種心理學(xué)現(xiàn)象是一種認知偏差,而宜家的創(chuàng)始人 Ingvar Kamprad 正是在這個基礎(chǔ)上構(gòu)建起宜家的整個家居帝國。

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

即使死侍本人也沉迷于這種成就感。

一、宜家的用戶歷程

在宜家的用戶歷程當(dāng)中,毫無疑問是存在「摩擦」和「障礙」的,但是這種設(shè)計是故意為之的。

在宜家的實體店當(dāng)中,用戶在各種「障礙」的包圍下,按照規(guī)劃者的路徑來行動。而購買了產(chǎn)品之后,又可以回家在「摩擦」中享受「自己組裝的樂趣」。

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

「每個人在宜家,都經(jīng)歷著屬于自己的恐怖故事。」

用戶進入宜家之后,會發(fā)現(xiàn)自己幾乎只能按照規(guī)劃的路徑將所有的地方都逛到。在我看來,宜家這種精心設(shè)計的用戶瀏覽路徑是天才的設(shè)計,但是對于一部分用戶而言可能會帶來混亂和挫折感。

「瑞典的一家報紙認為,宜家是一種介于土木工程和潛水艇之間的東西,我覺得這種描述很準(zhǔn)確。」

二、讓人又愛又恨的說明書

另一方面,雖然宜家的產(chǎn)品組裝起來要費點勁,但是說明書本身的設(shè)計并不差。

根據(jù)宜家設(shè)計師 Jan Fredlund 的說法,說明書每一頁都是在兩個原則之下設(shè)計完成的:清晰和連貫。

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

1. 清晰

宜家的用戶手冊的設(shè)計,從來都是從「用戶測試」這個環(huán)節(jié)開始的。在此基礎(chǔ)上,他們足以設(shè)計出清晰的裝配手冊。

讓用戶來測試安裝,會幫助我們發(fā)現(xiàn)潛在出錯的地方。這些錯誤在前期不明顯,但是在安裝后期可能是致命的。——Jan Fredlund

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

2. 連貫

宜家的說明書中的插畫,是完全從用戶的視覺角度來繪制的,完全3D建模,從頭到尾完全按照順序來制作的。這樣避免了用戶在裝配過程中出錯。

三、依然存在問題

工具和組件都逐個列舉了出來,每個步驟都獨立了出來,清晰的線條勾勒出操作的細節(jié),因為沒有多余的文字說明,所以全世界各地的用戶應(yīng)該都能看懂其中的示意。

整個說明書已經(jīng)做的足夠條理清晰,其中的同理心和邏輯性幾乎達到了令人難以置信的程度。盡管如此,面對沒有文字的純指示性的說明,依然有用戶感到困惑不能理解。

撇開網(wǎng)上的吐槽和玩笑,對于這個狀況,我開始提出問題:

對于一個設(shè)計得已經(jīng)比較清晰的系統(tǒng),依然有人為之感到困惑,那么要怎樣設(shè)計得更清晰一些呢?

四、調(diào)研

1. 與用戶交流,量化問題

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

我創(chuàng)建了一個問卷,包含三個問題,然后在線隨機發(fā)給了40個人。前兩個問題分別是:

  • 「你以前有沒有用過需要組裝的組合家具?」
  • 「你有沒有購買過或者組裝過宜家的產(chǎn)品?」

這兩個問題只需要簡單的「是/否」來確定,并且這兩個問題是我用來確認這些用戶是否有過相關(guān)經(jīng)驗,如果有,我才會發(fā)送第三個問題:

  • 「按照宜家的家居說明書來裝配,對你而言有多容易?」

第三個問題包含5個不同的選項,從「非常清晰」到「非常困難」劃分了5個等級。事實上,我隨機選取的樣本當(dāng)匯總,絕大多數(shù)的用戶在按照裝配說明書的要求裝配的時候,遭遇了相當(dāng)?shù)睦щy,或者感到了混亂。

2. 定性分析

在調(diào)研的過程中,我通常在獲得答案之后,會更進一步采訪用戶。

通過誘導(dǎo),我開始了解到他們各自的經(jīng)歷,而之前我所想知道的問題,在這里得到了某種意義上的驗證:

我把所有的東西差不多都組合到了一起。最初我認為最糟糕的情況是缺少一些組件,甚至?xí)┑糁匾拇蟛考瑢嶋H的情況是,我為了組合這個包含收納箱的床,花費了整整一天時間,中間經(jīng)歷了好幾百萬個步驟。

很多回答和這個差不多。訪談中透露了一個事實,那就是絕大多數(shù)用戶其實根本不知道完成裝配要多長時間,需要多少步驟,他們壓根一點準(zhǔn)備都沒有。正如同他們所說的,通常他們會在這個事情上,耗費一整天時間。

周末我把宜家買的家具組裝了起來,按照說明來做的,比其他的同類組裝家具要方便不少。

我想我可能是個怪人,我非常喜歡組裝宜家的家具!我發(fā)現(xiàn)他們的家具組裝說明書非常明確,并且非常喜歡這個過程。

訪談過程中我還發(fā)現(xiàn),有過組裝宜家和其他同類的組合家具經(jīng)驗的用戶,對于說明書和產(chǎn)品本身有相對明確的預(yù)期,對于注意事項也更加了解,對于整個組裝流程的理解也更加深入。

五、宜家是怎么解決用戶的這個問題?

為更多人創(chuàng)造更美好的日常生活——宜家的使命宣言

宜家的業(yè)務(wù)看起來很簡單——為用戶提供更加經(jīng)濟實惠的家具。但是他們真實的目標(biāo)其實更高,要為用戶提供可持續(xù)性的、功能性強的高品質(zhì)家具,不是為少數(shù)人,而是為所有人。

可是,如果用戶連裝配的問題都解決不了,就更談不上使用了。所以宜家也在盡量解決這個問題。

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

2017年9月,宜家收購了 TaskRabbit ,希望以此為跳板,提升家具裝配服務(wù)。

可是問題在于,將用戶自己裝配從宜家產(chǎn)品中移除,是不是也會同時降低用戶和家具之間的情感聯(lián)系,將「宜家效應(yīng)」徹底從產(chǎn)品中去掉?

六、為宜家的APP改版

這個項目并不是宜家的官方項目,而是一個我自己創(chuàng)建的項目,作為我在 Codaisseur 設(shè)計學(xué)院的個人項目和作業(yè)。

基于我的采訪的樣本和調(diào)研,我最終梳理出來下面這張價值主張的圖:

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

解決方案從桌面端的信息架構(gòu)開始做。線框圖則是從宜家官方網(wǎng)站開始,按照搜索 - 購買的流程來梳理。

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

我的解決方案主要從3個不同的領(lǐng)域入手。

1. 切換

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

切換的功能其實并不復(fù)雜,它是一個功能切換的按鈕。在搜索結(jié)果頁面當(dāng)中,用戶點擊了「切換」按鈕,每個產(chǎn)品底部的「購買」按鈕就會變成「教你組裝」按鈕。

其實,選擇從這個地方入手,有一個非常重要的原因,那就是用戶。當(dāng)我在梳理流程的早期階段,注意到宜家網(wǎng)站上的一個重要的數(shù)據(jù):

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

網(wǎng)站首頁的瀏覽量高達21億。而搜索引擎又是用戶獲取信息的主要入口,因此我相信在宜家的首頁上應(yīng)用這個設(shè)計會是比較合理地優(yōu)化。如果在后期能夠搜集數(shù)據(jù),并不斷迭代這一功能,應(yīng)該能帶來更好的效果。

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

這個圖標(biāo)的設(shè)計,來自于宜家的說明書,說明書中所繪制的「助手」這一角色,而這一設(shè)計也算是向傳統(tǒng)內(nèi)容媒介的一個回應(yīng)和致敬。

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

2. 播放器

播放器的設(shè)計成敗直接影響到整個解決方案的效果。需要考慮到的因素非常之多:

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

移動端快速預(yù)覽的功能;

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

桌面端和移動端的縮略圖,搜索和過濾的早期草圖:

  • 如何以視頻的方式來呈現(xiàn)內(nèi)容,又同時清楚地向用戶表明這不是傳統(tǒng)的視頻教程呢?
  • 如何在 UI當(dāng)中向用戶反映當(dāng)前的步驟、上一步和下一步呢?步驟之間的過渡是什么樣的?
  • 如何讓用戶了解到到底有多少步驟呢?用面包屑可以嗎?

用戶訪談中所凸顯的問題:

我在宜家所作的最后的嘗試是一款木質(zhì)高腳凳。我開始以為這個2英尺高的高腳凳很好處理,誰知道到手之后太過于零碎,說明書也看不太明白。

為什么你覺得說明書的指示不夠明確?

我很想跳過開頭檢查手頭全部零件的部分,但是跳過之后就很難按照順序來操作了,到后面我就忍不住即興發(fā)揮了,最后就沒法做出來。

通過這些訪談,簡單的講,我就是讓說明書制作成易于消化的短動畫,通過特定的播放器循環(huán)播放。這樣用戶會更容易確知怎么操作,以及他們做到了什么程度,以及具體要做什么。

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

在這個階段,使用原型來進行可用性測試之后,得到了不少反饋,其中最重要的一個反饋,是前一步和后一步的短視頻都使用縮略圖的形式展現(xiàn),而不是不能預(yù)覽的模式。

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

檢查工具和配件,確保沒有缺損,用戶可以正確裝配。所有的這些都應(yīng)該包含在視頻當(dāng)中,這些對應(yīng)的是傳統(tǒng)紙質(zhì)的宜家說明書中的檢查的部分。

為什么不做簡單的完整視頻教程?

當(dāng)我查看教程的時候,必須全程注意屏幕內(nèi)容,暫停視頻,再返回操作,再看視頻,這樣太容易分心了,很容易錯過一些步驟,如果沒有適時的暫停,還得倒回去看……

相反,制作成易于消化的短動畫,一個步驟一個步驟地瀏覽,用戶更容易掌控,這是更合理的補救措施。

3. 播放控件

當(dāng)然,我的這些都還只是視覺稿,并未通過開發(fā)落地。

整個設(shè)計方案最后的環(huán)節(jié),是使用類似動畫的教程模式,教授用戶如何正確裝配家具的功能。

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

家具到貨之后,用戶可以在 APP 的搜索欄當(dāng)中,快速點選條形碼掃描按鈕,掃描條形碼,定位到產(chǎn)品頁面,通過切換按鈕,觸發(fā)教程模式。

它的核心是讓用戶通過 UI控件點擊切換步驟,或者使用語音指令,諸如「上一步」和「下一步」來快速切換步驟。

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

在可用性測試中發(fā)現(xiàn),通過移動端設(shè)備來呈現(xiàn)的動畫教程,比起帶縮略圖的視頻要更加方便。最初我還構(gòu)思過更加復(fù)雜的方案,比如通過 APP 將教程投射到電視或者桌面端上來瀏覽,后來發(fā)現(xiàn)這樣太復(fù)雜了。

設(shè)計實戰(zhàn)!怎么改版才能讓宜家產(chǎn)品的用戶體驗更好?

參與測試的人員,還提出使用手勢交互可以更快切換。你可以戳這里試試桌面端的高保真原型

七、反思

在整個項目當(dāng)中,最重要的經(jīng)驗是「任何設(shè)計方案都不可能做到全部的事情,優(yōu)先級很重要。」當(dāng)我開始策劃解決方案的時候,一瞬間有很多想法,但是真正落地能做的事情始終有限。

這是有必要的嗎?必須的還是可能的?這個方案是用來解決問題的,還是單純的看起來很酷?

盡可能少的修改來解決問題,高效,有效,這可能是更好的。

收藏 10
點贊 1

復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。