一個(gè)大神研究的UI設(shè)計(jì)和UX設(shè)計(jì)的區(qū)別

內(nèi)容是作者自述


首先講一講背景。這是在我們周會(huì)上發(fā)生的事情：

“Andrew，我們做了幾個(gè)很厲害的新功能，測(cè)試一下吧。”

“好的，當(dāng)然。”

“嘿，你甚至?xí)滩蛔?xiě)篇文章來(lái)介紹的！”

“呃……”

只有一個(gè)問(wèn)題……

當(dāng)我被要求測(cè)試一項(xiàng)功能，通常意思是讓我發(fā)起一場(chǎng)可用性測(cè)試，這就包括尋找參與者、準(zhǔn)備一系列任務(wù)和問(wèn)題，并且通過(guò)Skype訪談來(lái)執(zhí)行（執(zhí)行問(wèn)題，不是處決參與者）。

于是我去看了我們的網(wǎng)站，自己先研究了這個(gè)新功能，基于它想象各種相關(guān)聯(lián)的任務(wù)。我花了11秒嘗試了所有可能性。我甚至嘗試反復(fù)來(lái)回點(diǎn)選，就好像我在一邊和我媽通電話一樣，這樣花了30秒。然后我媽真的打電話來(lái)了，我又試了一次，花了20秒。

我所講的功能，是圖中右上角的3個(gè)按鈕。3種視圖模式的切換。

△ 3個(gè)按鈕可以讓視圖在3種模式中切換：純圖標(biāo)、帶標(biāo)簽的圖標(biāo)、表格視圖

通常我的Skype訪談會(huì)持續(xù)30分鐘：其中80%是任務(wù)，20%是簡(jiǎn)短的談話和我的蹩腳笑話。如果任務(wù)只有30秒，我就得講29分鐘的笑話。我才不會(huì)那么做，有2個(gè)原因：

• 沒(méi)人愿聽(tīng)
• 如果我能做到，我就是個(gè)喜劇大咖了

于是，我現(xiàn)在有的只是3個(gè)按鈕，只能通過(guò)一個(gè)問(wèn)題來(lái)檢驗(yàn)。

此時(shí)我的劇本大概是這樣：

1. 設(shè)定一些任務(wù)來(lái)檢驗(yàn)人們是否注意到這3個(gè)按鈕。
2. “這3種模式中，你最?lèi)?ài)用哪種？”

通俗而言，UI與UX的區(qū)別

我還需要更多信息。于是我繼續(xù)深入。在某種模式下我發(fā)現(xiàn)了第4個(gè)按鈕。

1. 設(shè)定一項(xiàng)任務(wù)來(lái)檢驗(yàn)人們是否注意到這3個(gè)按鈕。
2. “你知道這個(gè)‘加號(hào)’按鈕是做什么的嗎？”
3. “這3種模式中，你最?lèi)?ài)用哪種？”

到目前為止，這個(gè)訪談仍然非常簡(jiǎn)短，然而按鈕就只有這些。我就只是這么坐著，在3種模式間來(lái)回亂點(diǎn)，思考人生、存在、還有精神崩潰。然后我忽然間深受觸動(dòng)。

在此之前我只是在思考UI，那只是界面。確切的說(shuō)，是思考這些按鈕和它們的功能——在3種視圖中切換。

現(xiàn)在我開(kāi)始考慮UX了，或者說(shuō)體驗(yàn)。腦海中涌現(xiàn)出大量的問(wèn)題。文字標(biāo)簽會(huì)以某種方式影響人們嗎？它對(duì)人們查找圖標(biāo)的方式有影響嗎？它會(huì)影響整體體驗(yàn)嗎？我很想知道！

這些抽象的問(wèn)題非常棒，但我不能直接這么問(wèn)參與者：“嘿，你覺(jué)得文字標(biāo)簽有用嗎？”因?yàn)槿藗兊拇鸢负蛯?shí)際行為之間有巨大差距。我不得不找到具體的任務(wù)來(lái)檢驗(yàn)人們的實(shí)際行為。

怎么辦？我就設(shè)身處地，開(kāi)始搜索不同的圖標(biāo)。我搜索了汽車(chē)圖標(biāo)、貓、狗、常用的圖標(biāo)、不常用的圖標(biāo)。我切換不同的視圖，一遍又一遍搜索。

當(dāng)然，搜索不同內(nèi)容，得到結(jié)果也不同。但關(guān)鍵在于，我的關(guān)注點(diǎn)不一樣。如果我尋找貓，我有明確的預(yù)期。但是如果我搜索“新聞”或“音樂(lè)”，我的預(yù)期就模糊得多。

雖然不同的搜索預(yù)期有影響，那不同的視圖模式呢？

這個(gè)簡(jiǎn)單的問(wèn)題充滿(mǎn)了我的30分鐘調(diào)研。

真理：深入挖掘總是對(duì)的

 

最終的劇本草稿

1. 設(shè)定一些任務(wù)來(lái)檢驗(yàn)人們是否注意到這3個(gè)按鈕。
2. 用「純圖標(biāo)」模式來(lái)搜索：貓、手機(jī)、箭頭、新聞、開(kāi)始、音樂(lè)。用「帶標(biāo)簽的圖標(biāo)」模式搜索：狗、線條、盒子、創(chuàng)意、停止、工作。并且指出認(rèn)為離譜的搜索結(jié)果。
3. “你知道這個(gè)‘加號(hào)’按鈕是做什么的嗎？”
4. “這3種模式中，你最?lèi)?ài)用哪種？”

我讓參與者在純圖標(biāo)模式下搜索“貓”，然后指出任何離譜的搜索結(jié)果。

然后我讓另一位參與者搜索同樣的“貓”圖標(biāo)，但是用圖標(biāo)+文字標(biāo)簽?zāi)Ｊ?，并指出離譜的搜索結(jié)果。

看見(jiàn)沒(méi)，那是Gabriel Aul。一切都說(shuō)得通了！或許也沒(méi)有……【譯者注，Gabriel Aul是windows 10忍者貓形象的創(chuàng)造者】有時(shí)候，搜索甚至?xí)o我們自己帶來(lái)驚喜。

好吧，我們換個(gè)更好的例子。假設(shè)你搜索線條圖標(biāo)：

有了文字標(biāo)簽，參與者就不會(huì)再覺(jué)得“命令行”是不相干的圖標(biāo)。但這只是諸多影響之一。

我想證明的是，不同人對(duì)搜索結(jié)果的關(guān)聯(lián)性有不同的感受，于是我明白了他們的預(yù)期有什么差別。我也會(huì)盡可能求證標(biāo)簽是否會(huì)影響預(yù)期。

真理：努力尋找方法衡量用戶(hù)的體驗(yàn)

 

檢驗(yàn)我的測(cè)試

到此為止，我的調(diào)研劇本已經(jīng)比較完善了。但我仍然感覺(jué)不確定，邀請(qǐng)我同事來(lái)作為參與者，就像真實(shí)訪談一樣。

結(jié)果證明這根本沒(méi)那么完善。我不得不做出一些調(diào)整。

1. “你能改變一下搜索結(jié)果的展現(xiàn)方式嗎？”
2. 用「純圖標(biāo)」模式搜索：手機(jī)、新聞、開(kāi)始。用「帶標(biāo)簽的圖標(biāo)」模式搜索：盒子、創(chuàng)意、工作。指出離譜的搜索結(jié)果。
3. “你能否告訴我，在不點(diǎn)擊‘加號(hào)’按鈕的情況下，你覺(jué)得它是做什么的？”
4. “以上3種模式，你最喜歡哪種？”

為什么要改成上面這樣：

• 第一題模棱兩可。
• 10個(gè)不同的搜索任務(wù)讓訪談持續(xù)了60分鐘。我計(jì)劃只需要15-30分鐘，于是我不得不把參與者減少到6人。
• 第三題中，我得明白地告訴參與者，不要點(diǎn)擊按鈕——否則誘惑太多了。

真理：在展開(kāi)真實(shí)的訪談之前，非常有必要做一下實(shí)驗(yàn)

 

結(jié)論

成功只給有準(zhǔn)備的人?，F(xiàn)在我有了最終的調(diào)研劇本，可以對(duì)真實(shí)用戶(hù)展開(kāi)測(cè)試了，我照此執(zhí)行。7名參與者、超過(guò)15頁(yè)筆記、3小時(shí)的視頻素材，我得把這些資料組織起來(lái)。我現(xiàn)在正在撰寫(xiě)相關(guān)文檔。下一篇文章就是關(guān)于這些調(diào)研結(jié)果、領(lǐng)悟和尷尬的沉默「譯者注，我也正有此意 LOL」。如果你正在閱讀本文，卻沒(méi)找到下一篇的鏈接，有兩種可能：

1. 本文剛發(fā)布不久。
2. 我抓狂了，正在窗臺(tái)上奮筆疾書(shū)。