UX Case Study: Designing a user-focused web app
Brian Cray版權(quán)所有
作者：Brian Cray
譯者：UCD翻譯小組，波希米亞
原文地址： http://briancray.com/2010/01/26/ux-case-study-designing-user-focused-web-app/

這篇文章記錄了Nearby Tweets改版的完整設(shè)計(jì)過程。Web開發(fā)者和商家期望借此獲取些靈感。用戶則更有興趣找尋這些設(shè)計(jì)中所蘊(yùn)藏的東西。當(dāng)然，我希望能在文章結(jié)尾了解到你的想法和反饋！OK，我們開始吧。

故事的起因是這樣地…
這一切開始于對(duì)Nearby Tweets的第一次迭代，目的是讓當(dāng)?shù)氐娜伺c人、商家與商家之間能夠通過一種簡(jiǎn)單的形式相互取得聯(lián)系。

但產(chǎn)品開發(fā)向來(lái)不可能十全十美，只有不斷迭代——產(chǎn)品好壞取決于用戶認(rèn)可。因此，借Uservoice的機(jī)會(huì)得盡我所能快地跟用戶接觸。通過Uservoice，用戶可以針對(duì)Nearby Tweets的改版進(jìn)行投票。

Nearby Tweets用戶的主要需求

默認(rèn)地區(qū)
保存關(guān)鍵字和地點(diǎn)
令人懊惱的“抽屜”
目錄手冊(cè)
移動(dòng)版本
tweets自動(dòng)刷新
屏蔽用戶
屏蔽地區(qū)
follow特性

選擇哪些功能實(shí)現(xiàn)

盡管所有用戶的請(qǐng)求都合理，但我得根據(jù)自己的資源和日程情況安排哪些可以實(shí)現(xiàn)。

移動(dòng)版本要再往后排了

現(xiàn)在已經(jīng)有web版了，所以對(duì)移動(dòng)版持觀望態(tài)度。因?yàn)樾枰噘Y源和新一輪考慮，暫時(shí)沒有精力。

目錄手冊(cè)也要往后排

市面上已經(jīng)充斥了大量的Twitter目錄手冊(cè)應(yīng)用。我的發(fā)展空間并不大，但在自動(dòng)匹配地理位置領(lǐng)域，一直都是我的，現(xiàn)在是，將來(lái)也是。(參見 Twellow, WeFollow, 和 just tweet it)

其余的功能，一個(gè)個(gè)來(lái)

其余的功能需求都在我的日程上，在開始UI設(shè)計(jì)之前，我得把它們?cè)偈崂砬逦恍?/P>

縮小設(shè)計(jì)范圍

為保持自己的路線，我為Nearby Tweets擬定了3個(gè)改版必備條件：

獲取用戶反饋。在得到少量用戶反饋后我迅速發(fā)布了Nearby Tweets的第一個(gè)版本，用這個(gè)有趣、有用的項(xiàng)目小試牛刀。通過這次改版我希望在設(shè)計(jì)過程中盡可能多地獲取用戶反饋。利用 Twitter，Uservoice等資源，進(jìn)行私測(cè)和公測(cè)。
把Nearby Tweets打造的更健壯。盡管焦點(diǎn)是第 一版的優(yōu)勢(shì)，但還是沒有擴(kuò)展的基礎(chǔ)功能。這次Nearby Tweets將為用戶偏好提供核心功能，以及高級(jí)搜索。
保持 Nearby Tweets的簡(jiǎn)單。一直以來(lái)，我們努力保持Nearby Tweets的簡(jiǎn)單，并使它的體驗(yàn)更簡(jiǎn)化。

接下來(lái)，我制定了設(shè)計(jì)目標(biāo)
允許用戶隨意查看Nearby Tweets，當(dāng)需要時(shí)也允許他們調(diào)整。

將概念轉(zhuǎn)化為UI設(shè)計(jì)
為保持Nearby Tweets的簡(jiǎn)潔，我擬定了2套UI設(shè)計(jì)概念：“Progressive disclosure” 和 “l(fā)azy registration”
在UI設(shè)計(jì)上實(shí)施Progressive disclosure

Progressive disclosure主張把高級(jí)和不常用的功能放在第二屏（不顯眼的地方），使應(yīng)用看起來(lái)簡(jiǎn)單易用，且不易出錯(cuò)——Jakob Nielsen

需要指出的是，第二屏可以被理解為把功能隱藏起來(lái)。

Tweet設(shè)置

對(duì)每條tweet來(lái)說，“誰(shuí)說了什么”和“是誰(shuí)說的”才是重點(diǎn)，所以我保持tweet表現(xiàn)成這個(gè)樣子。

然而，用戶還有其他需求，他們要求可以關(guān)注某人、屏蔽某人，甚至屏蔽地區(qū)。像這種高級(jí)功能就不能塞滿tweet區(qū)域。Progressive disclosure的思想派上用場(chǎng)了。當(dāng)用戶把鼠標(biāo)移動(dòng)到每條tweet上時(shí)，上述3個(gè)功能才顯示出來(lái)。就像這樣：

地區(qū)和關(guān)鍵字的修改窗口

一個(gè)初次訪問Nearby Tweets的用戶也就是四處看看。所以在首頁(yè)里只顯示“Tweets nearby xxxxx about yyyyy.”就已經(jīng)足夠了。

但當(dāng)用戶想要搜索已經(jīng)新地區(qū)和新關(guān)鍵字時(shí)怎么辦？你會(huì)發(fā)現(xiàn)地區(qū)和關(guān)鍵字看上去像是可點(diǎn)的鏈接。當(dāng)用戶想修改這些信息時(shí)，點(diǎn)鏈接后會(huì)出現(xiàn)一個(gè)彈出層。

與其讓用戶看到搜索框及其他一堆篩選條件，不知所措，還不如只給個(gè)“Change”按鈕，目的明確。點(diǎn)擊按鈕后進(jìn)行下一步操作。實(shí)際整個(gè)區(qū)域都是可點(diǎn)的， 目的是為了增加用戶的可點(diǎn)區(qū)域。

你會(huì)注意在地區(qū)彈出層里有個(gè)名叫“use the map”的按鈕。在UI里設(shè)置地圖有兩個(gè)目的：一來(lái)，給用戶位置感；二來(lái)通過Progressive disclosure提供高級(jí)搜索功能。

地區(qū)搜索利用交互地圖完成
初窺地圖會(huì)發(fā)現(xiàn)它就在Nearby Tweets的后面，營(yíng)造了一個(gè)用戶地區(qū)的虛擬環(huán)境，將tweet作為搜索結(jié)果不斷滾動(dòng)顯示。

當(dāng)用戶搜索地區(qū)時(shí)，Nearby Tweets閃到一旁，地圖就成主窗口了。這樣做可以在地圖不用時(shí)，巧妙地將它當(dāng)作Nearby Tweets的背景，需要時(shí)再將其呼出。

用戶偏好
作為Progressive disclosure的經(jīng)典示范，用戶可以添加保存地區(qū)、關(guān)鍵字，甚至更多偏好設(shè)置，目的都是讓Nearby Tweets變的更好用。提高用戶偏好，讓我們看看它是怎么運(yùn)作的。

UI中的Lazy registration
一個(gè)用戶可能從不碰偏好設(shè)置，但仍能體會(huì)所有優(yōu)點(diǎn)。要怎么做？Lazy registration是一種 growing UI trend ，它能讀取用戶之前的數(shù)據(jù)，自動(dòng)完成已知信息的填寫。

被動(dòng)偏好
雖然Nearby Tweets不用注冊(cè)，但它同樣有一個(gè)偏好設(shè)置頁(yè)面供用戶配置。其中“l(fā)azy”這部分抽取的是用戶喜好的集合。

用戶每次切換地區(qū)后，都會(huì)被自動(dòng)保存
用戶每次搜索關(guān)鍵字后，都會(huì)被自動(dòng)保存
主UI允許用戶屏蔽某人 或某地區(qū)
默認(rèn)地區(qū)
雖然用戶可以設(shè)置默認(rèn)地區(qū)，但通常都沒必要。Nearby Tweets能自動(dòng)獲取用戶地區(qū)信息，根本不需要用戶動(dòng)手，除非他想自定義。

處理用戶需求
默認(rèn)地區(qū)
Nearby Tweets也不是總能找到用戶的位置，所以有時(shí)也需要手動(dòng)覆蓋掉默認(rèn)地區(qū)。我想過很多方法解決這個(gè)問題，比如增加個(gè)“set to default”的選項(xiàng)在每個(gè)已保存地區(qū)旁邊，但這可能會(huì)多出來(lái)很多鏈接，讓界面變得冗余。

我決定在用戶偏好中保留“設(shè)置成默認(rèn)”這個(gè)功能。在那我用空間來(lái)展示這個(gè)選項(xiàng)。每個(gè)已保存的地區(qū)都可以被設(shè)置成“默認(rèn)地區(qū)”。如圖：

已保存的關(guān)鍵字和地區(qū)
我用“當(dāng)前的”替代“已保存的”是因?yàn)樗N切。關(guān)鍵字和地區(qū)的保存像是書簽，但工作原理像瀏覽器歷史。

Tweets的自動(dòng)滾動(dòng)
在控制新tweets刷新頻率時(shí)有些困難。我很矛盾：如果太慢，會(huì)有用戶覺得Nearby Tweets是不是沒在工作；但太快，用戶又沒法閱讀，過猶不及。在經(jīng)過一些用戶的測(cè)試后我發(fā)現(xiàn)，3秒這個(gè)速度正好。

并非每個(gè)人的閱讀速度都一樣，自動(dòng)刷新頻率可以當(dāng)作用戶偏好。據(jù)分析，除了3秒外，30秒、10秒、5秒和1秒也都很常見。

屏蔽用戶

屏蔽地區(qū)

如何屏蔽地區(qū)又是個(gè)難題，因?yàn)橐ケ容^tweet所在的地區(qū)與被屏蔽的地區(qū)。問題在于當(dāng)用戶屏蔽了“俄亥俄 州哥倫布市”，但發(fā)布者的地區(qū)是“哥倫布”。雖然人可能清晰辨別這兩個(gè)是同一地區(qū)，但在電腦里，“俄亥俄州哥倫布市”并不等于“哥倫布”。

接下來(lái)如果我假設(shè)用戶只想屏蔽精確匹配“俄亥俄州哥倫布市” 的地區(qū)，或者所有在“哥倫布”發(fā)布的tweets？為了使軟件智能化，我讓程序能夠自動(dòng)匹配城市名。然而，另一問題接踵而至，如果兩個(gè)地區(qū)擁有同樣的城市 名，就像“俄亥俄州哥倫布市” 和“佐治亞哥倫布”。那么，所有“佐治亞哥倫布”的用戶想屏蔽來(lái)自“俄亥俄州哥倫布市” 的tweets時(shí)，就會(huì)屏蔽掉所有名為“哥倫布”的地區(qū)。如果它已經(jīng)成為一個(gè)問題，我想我不得不豎起耳朵，聽取用戶的聲音。

關(guān)注功能