編者按：生活在舊金山的用戶體驗(yàn)設(shè)計(jì)師Lin Wang 并非供職于Spotify，但是作為這款軟件的重度用戶又出于職業(yè)習(xí)慣，她開始為這款著名的音樂軟件的網(wǎng)頁版APP，進(jìn)行了一系列的可用性測(cè)試，提出了自己的優(yōu)化意見和建議。文章內(nèi)容并不出奇，但是測(cè)試方法和思路頗為實(shí)用，值得學(xué)習(xí)。

作為一個(gè)獨(dú)立音樂愛好者，Spotify是我每天會(huì)用到的APP，Spotify所貢獻(xiàn)出的音樂資源深得我心。但是正如許多偉大的產(chǎn)品一樣，優(yōu)秀的Spotify依然有提升的空間。通過一組可用性測(cè)試，我們發(fā)現(xiàn)用戶在使用Spotify的某些功能的時(shí)候，還是會(huì)碰到一些關(guān)鍵性的問題。

從圖標(biāo)開始重生，Spotify APP 的革命之路：《小圖標(biāo)大學(xué)問！我是如何設(shè)計(jì)著名音樂軟件SPOTIFY里的圖標(biāo)》

測(cè)試目的

確定Spotify 網(wǎng)頁APP在“查找音樂”、“整理音樂”和“分享音樂”功能上的問題和痛點(diǎn)。

這是目前的Spotify 網(wǎng)頁版APP的著陸頁的界面（2014年5月24日）

• 測(cè)試對(duì)象：Spotify 網(wǎng)頁版 APP
• 測(cè)試人員：八名每天都會(huì)登錄Spotify聽音樂的固定用戶（他們并非只使用Spotify）
• 測(cè)試地點(diǎn)：舊金山

設(shè)定參與者

我新創(chuàng)建了一個(gè)虛擬人物Nick，并設(shè)定他為一名iOS開發(fā)者并且熱愛音樂。

測(cè)試任務(wù)

• 創(chuàng)建一個(gè)個(gè)人播放列表
• 添加音樂到播放列表
• 編輯播放列表并分享它
• 訂閱（關(guān)注）音樂人

這套測(cè)試系統(tǒng)是基于網(wǎng)絡(luò)在線流媒體音樂服務(wù)的基本需求來設(shè)定的。人物的劃分是基于開放式的場(chǎng)景，避免測(cè)試參與者會(huì)按照預(yù)定的方式來完成這些項(xiàng)目。

測(cè)試過程

在這個(gè)過程中，我會(huì)使用QuickTime來記錄八項(xiàng)可用性測(cè)試。完成記錄之后，我再根據(jù)記錄做筆記，并且確定可用性測(cè)試問題的優(yōu)先級(jí)。

我會(huì)根據(jù)測(cè)試用戶的反饋出來的痛點(diǎn)來進(jìn)行記錄。

根據(jù)用戶操作來搜集“痛點(diǎn)”

如你所見，盡管這一塊明顯有許多的問題，但是我依然不打算將它們記錄到一起。相反我更愿意著重關(guān)注那些被關(guān)注較多的、更能提升Spotify用戶體驗(yàn)的問題。

問題1：搜索結(jié)果過濾

用戶希望能夠?yàn)樽约憾ㄖ扑阉鹘Y(jié)果：
有用戶反饋：“我不想用Spotify的原因在于我很難通過它的搜索殷勤找到我想要的東西?！?/p>

下面的圖片表明，用戶希望找到關(guān)于“旅游”主題的歌曲，但是用戶輸入“tourist”到搜索框之后，搜索結(jié)果無法過濾和篩選，更重要的是搜索結(jié)果本身的呈現(xiàn)形式也不是那么易懂。總而言之，用戶無法找到他們預(yù)期中的歌曲。

所以，要不試試這種處理方式：允許用戶根據(jù)藝術(shù)家、專輯甚至日期進(jìn)行排序和篩選，并且將更有意義的搜索結(jié)果呈現(xiàn)在列表中。

進(jìn)入下一個(gè)環(huán)節(jié)

著名設(shè)計(jì)師Daniel Burka曾經(jīng)好心地指出：“……用戶真正想要的并非更好的排序，而是要篩選出結(jié)果…”

在Spotify的篩選系統(tǒng)中，用戶已經(jīng)可以根據(jù)“專輯”、“藝術(shù)家”、“詳情”、“播放列表”以及“音樂”進(jìn)行排序了（正如我們之前所討論的），但是這種篩選機(jī)制的問題并非在功能本身，而是視覺上讓用戶感到迷惑——它們看起來太相似了。下圖中，搜索出的標(biāo)簽圖標(biāo)和內(nèi)容看起來就非常相似，哪個(gè)是用戶真正想要的？用戶不知道。

不妨試試這種方案：通過小圖標(biāo)來區(qū)分不同屬性的內(nèi)容，比如下圖中，在專輯內(nèi)容的圖標(biāo)背后加上一個(gè)小唱片來從視覺上區(qū)別于其他，使用人物頭像圖標(biāo)來標(biāo)識(shí)出用戶；使用區(qū)分大小寫的單詞，來強(qiáng)化詞語的視覺識(shí)別度。相信這些細(xì)節(jié)上的調(diào)整足以改變這種局面。

問題2：混亂的工具提示信息

用戶期望“+”的意味著“添加”，而非什么“保存”、“關(guān)注”。
有用戶反饋：“單擊‘+’按鈕我以為會(huì)將音樂添加到播放列表里面，可問題在于，我添加到哪個(gè)列表去了？”
還有用戶說：“我擦這到底是個(gè)什么功能？？？”
每一次點(diǎn)擊“+”按鈕都會(huì)將第一首歌添加到他們的播放列表中。即使有一般的用戶已經(jīng)意識(shí)到這個(gè)功能可能有問題，可還是點(diǎn)擊了它。在不同的頁面中，同樣的“+”按鈕同樣存在，但是它在這個(gè)語境下的含義已經(jīng)并非添加，而是“關(guān)注”或者其他。這種不一致性令用戶感到困惑。

當(dāng)鼠標(biāo)移動(dòng)到“+”按鈕上去的時(shí)候，會(huì)顯示“保存”的提示，但是用戶完全不知道它意味著什么以及音樂到底保存到了什么地方。

“+”按鈕在這里的含義是“關(guān)注”，用戶感到迷惑的原因在于，它之前的提示是“保存”。

奇怪的地方在于，在播放列表頁，同樣的按鈕干脆是沒有任何提示。

那么我們不妨做做如下嘗試：我們?yōu)椤?”按鈕統(tǒng)一賦予“添加”的含義，讓用戶選擇他們將音樂保存到哪個(gè)列表中。

問題3：為何要“關(guān)注”？

“關(guān)注”（Follow）按鈕令用戶感到迷惑。
實(shí)際上測(cè)試中，所有的用戶對(duì)對(duì)于“關(guān)注”按鈕表示疑惑。每個(gè)測(cè)試者都以為對(duì)某個(gè)藝術(shù)家“關(guān)注”之后就可以在左側(cè)的“關(guān)注”按鈕下的列表中看到這個(gè)藝術(shù)家的名字，實(shí)際上，并不是這樣。
有用戶疑惑地問：“我去，我關(guān)注的藝術(shù)家去哪兒了？”
也有用戶疑惑：“那左側(cè)面板的‘關(guān)注’是干啥用的？”
有一個(gè)用戶機(jī)智地說：“自從知道這個(gè)按鈕沒用之后我每次都會(huì)親自搜索特定的藝術(shù)家，然后找歌?！?/p>

用戶們幾乎都認(rèn)為這個(gè)“關(guān)注”面板下會(huì)有他們關(guān)注的藝術(shù)家，實(shí)際上并非如此，這個(gè)面板只有下列的三個(gè)功能：

我們不妨試試這個(gè)功能：在“關(guān)注”面板之下增加一個(gè)“關(guān)注的藝術(shù)家”的分區(qū)，明確地顯示更新的信息、巡回演唱會(huì)的日期等內(nèi)容，就像下圖的設(shè)計(jì)：

進(jìn)入下一個(gè)環(huán)節(jié)

毫無疑問現(xiàn)在的Spotify設(shè)計(jì)是非常簡(jiǎn)潔的，但是它向用戶呈現(xiàn)的信息是否完整呢？用文字信息替換圖標(biāo)固然可以傳遞更精準(zhǔn)的信息，但是是否會(huì)破壞整個(gè)界面的用戶體驗(yàn)？

設(shè)計(jì)師Daniel Burka認(rèn)為：“在圖標(biāo)上懸停顯示文字提示固然緊湊，但你不能否認(rèn)這種UI真的很差?！?/p>

在這個(gè)信息呈現(xiàn)的問題是姑且不做深究，但是導(dǎo)航面板中的信息組織上存在的問題才是我們應(yīng)當(dāng)關(guān)注的核心。

最初的Spotify導(dǎo)航面板

不論是對(duì)于觸摸屏設(shè)備還是傳統(tǒng)的桌面端設(shè)備，大按鈕設(shè)計(jì)是更符合用戶需求的。因此我建議在界面上呈現(xiàn)更多的信息，入下圖所示：

我讓整個(gè)面板比之前更寬，可以承載更多內(nèi)容；令搜索框更明顯；圖標(biāo)和文字相互搭配，清晰自然；可以點(diǎn)擊查看的二級(jí)菜單，容納更多信息和選擇；增加了滾動(dòng)條，方便操作；更加清晰的個(gè)人信息呈現(xiàn)。

下一步

• 驗(yàn)證我的設(shè)計(jì)建議
• 進(jìn)行更多測(cè)試
• 產(chǎn)品迭代

進(jìn)行用戶研究的目的是要了解用戶的需求和冬季，使我們可以開發(fā)用戶真正喜愛的產(chǎn)品，更加優(yōu)秀的產(chǎn)品。我們需要將用戶的需求和動(dòng)機(jī)融入到產(chǎn)品中，推動(dòng)開發(fā)，完善設(shè)計(jì)過程中每一個(gè)步驟。

APP是如何鳳凰涅磐的？下面的文章不容錯(cuò)過！

基于LBS，F(xiàn)ourSquare是這樣重設(shè)計(jì)的：
《涅磐重生！我們是如何重新設(shè)計(jì)FOURSQUARE的》

工具型APP Todoist的設(shè)計(jì)之道：
《UI設(shè)計(jì)實(shí)戰(zhàn)！知名時(shí)間管理軟件TODOIST的改版歷程》

巧用動(dòng)效，Yep！是這樣闡釋交互的：
《引導(dǎo)有門道！YEP!教你用動(dòng)效闡釋APP運(yùn)作機(jī)制》

原文地址：medium
優(yōu)設(shè)網(wǎng)譯者：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

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

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量83萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：