《用戶研究角度看設(shè)計》系列是淘寶的用戶研究團(tuán)隊在可用性測試之后的點(diǎn)滴思考。在每次與淘寶用戶的直接接觸、觀察用戶的操作之后，作為體驗(yàn)分析師的我們總是會感慨：“為什么有些細(xì)節(jié)設(shè)計看似已經(jīng)很顯眼了，用戶就是沒有注意到？”、“為什么用戶偏偏要那樣去理解？”、“用戶在那個流程中為什么陷入困惑，甚至不能完成任務(wù)了？”，然后，我們會思考這界面背后的原因，分析用戶當(dāng)時具體說了什么，是什么原因?qū)е掠脩裟菢永斫狻@個過程需要非常嚴(yán)謹(jǐn)?shù)乃伎?，因?yàn)橄蛟O(shè)計師反饋的任何一個詞語都會導(dǎo)致不同的設(shè)計。同時，這個過程也令我們非常享受，如果說設(shè)計就是解決問題，在可用性測試之后的分析時間就是分析師的“設(shè)計”時光。

我們冀望通過用戶研究角度的思考，帶給設(shè)計師一點(diǎn)點(diǎn)啟發(fā)，并且將我們在研究中發(fā)現(xiàn)的問題，固化在設(shè)計模式庫中，以便今后不再出現(xiàn)同樣的問題。當(dāng)然，作為體驗(yàn)分析師，我們對交互設(shè)計和視覺設(shè)計了解得不夠精深，還不能像設(shè)計師一樣把握項目中的種種約束，所以，這個系列的內(nèi)容可能還比較粗淺，更偏重于“商業(yè)-技術(shù)-用戶”三者中“用戶”這個角色的直接想法。

另外，我們的思考來源于淘寶或其他網(wǎng)站各位設(shè)計師的設(shè)計，所以，有時可能會拿來作為反例，還請各位設(shè)計師見諒。我們盡可能拿自己網(wǎng)站的例子作為反面教材，如果在反例中涉及了您的網(wǎng)站，還請多多包涵。

讓我們開始第一個故事吧——

有一個網(wǎng)頁上典型的細(xì)節(jié)，它如此細(xì)微以至有時設(shè)計師在項目的最后時刻才記得擠一個位置給它，但它又如此常見，在不少網(wǎng)站的詳情頁面不經(jīng)意就出現(xiàn)了；我們在軟件中不常見到它，但在超文本世界里，在互聯(lián)了朋友的世界里，它卻時而閃現(xiàn)——它就是“復(fù)制鏈接”，英文別名是Tell a friend、send to a friend、tip a friend、share、email to a friend或者直接就是URL（如圖1）。作為設(shè)計師，你曾經(jīng)注意過它嗎？

（圖1：youtube ）

它什么時候出現(xiàn)更合適？

當(dāng)你想將一個網(wǎng)頁（或網(wǎng)頁中的主體內(nèi)容)分享給別人的時候，這時它的出現(xiàn)可以節(jié)約用戶的時間。

通常，它出現(xiàn)在一個網(wǎng)站的內(nèi)容詳情頁面，比如視頻網(wǎng)站的播放視頻頁面、博客網(wǎng)站的博客文章頁面、照片網(wǎng)站的照片詳情頁面、購物網(wǎng)站的商品頁面等等。就拿博客網(wǎng)站為例，它的出現(xiàn)似乎在說，“也許你的朋友會對這篇文章感興趣哦，點(diǎn)擊我，然后分享給朋友看看吧！”

使用它時注意什么

1.不必在一個頁面多次出現(xiàn)

設(shè)計師既要在設(shè)計過程記著它，但也別太惦念它了。只在需要的時候提供它，即使頁面很長，也沒有必要像“立刻購買”按鈕那樣在頁面的第一屏和最后一屏出現(xiàn)兩次，因?yàn)椤傲⒖藤徺I”可以讓用戶進(jìn)入到下一個步驟完成購買，而“復(fù)制鏈接”只是一個次要的任務(wù)，大部分為對它感興趣的人使用。

2.相類似的功能具有相同的視覺權(quán)重

翻翻看你的網(wǎng)站人物角色（或是網(wǎng)站的點(diǎn)擊日志），他們常用什么分享給朋友——是通過IM、Email還是其它，那么請突出最主要的那一個，如果將多個相似的功能平鋪在一起，恐怕會違背“別讓我思考”的原則?？磮D2中播放器下面第二排前幾個鏈接：“站外引用”、“發(fā)送聊友”、“轉(zhuǎn)發(fā)”，三個功能都具有分享的含義，并混雜在9個鏈接中，我不得不停下來想想，“我要點(diǎn)擊哪一個呢？”

（圖2：某視頻網(wǎng)站 ）

3.不要讓它本身顯得太喧囂

設(shè)計它的過程，要記得讓用戶注意得到，或者是在用戶想尋找的時候知道在哪里尋找，這一點(diǎn)很重要。舉個例子，假如是一篇blog頁面，不要讓“復(fù)制鏈接”的 文字大小超過blog正文內(nèi)容，也不要讓復(fù)制鏈接區(qū)域太明顯，以至于干擾了最核心的文章內(nèi)容。

圖3是淘寶社區(qū)的一個反例，輸入框和按鈕多在表單中出現(xiàn)，這個組件總是比普通文字要明顯的，它出現(xiàn)在社區(qū)內(nèi)容的底部，可能會干擾用戶對后幾段文字的閱讀。

（圖3：淘寶社區(qū)）

另外，在使用輸入框復(fù)制的設(shè)計中，是不是可以考慮當(dāng)用戶點(diǎn)擊了輸入框，用腳本自動全選了整個輸入框的內(nèi)容（例1），而不是讓用戶從左至右按住左鍵拖動鼠標(biāo)，進(jìn)行全選。

<input type=”text” id=”foo” />

<script type=”text/javascript”>
document.getElementById(’foo’).onfocus = function() {this.select();}
</script>

（例1）

它出現(xiàn)在頁面的哪個位置？

在可用性測試的準(zhǔn)備階段，我們這么帶著這樣的問題去觀察：“用戶對某個東西感興趣的時候，他知道去哪里找它嗎？”和“用戶點(diǎn)擊了它之后，他清楚在做（復(fù)制或分享）什么嗎？”，前一個問題意味著它的可尋性（findability）是否足夠好，后一個問題意味著這個位置能不能與他想做的事情聯(lián)系起來。

舉個例子，如果用戶想把文章分享給朋友看，那么將這個功能放置在文章的附近而不是評論的附近更合適?？赡苓@么說，有些人會想“那當(dāng)然是文章附近更好了，誰會把它設(shè)計到評論附近呢”，但有時在文章下面加入了一個橫幅廣告之后，它就與評論而不是文章更相近了。

用什么中文詞語來描述它？

我個人認(rèn)為在不同的情景中應(yīng)該用不同的中文詞語，但是界面上不要有其它詞語干擾了用戶的理解，圖4是某博客一篇文章的部分截圖，你能立刻說出來，上下兩個“分享”有什么區(qū)別嗎？

（圖4：某門戶博客）

我想你已經(jīng)猜出來了，上面的“分享”是名詞，下面的“分享”是動詞，所以在使用一個既可以是動詞也可以是名詞的詞語時候，要謹(jǐn)慎一些。另外，我建議設(shè)計師時刻考慮到“此時此刻”那個時點(diǎn)， 想象用戶是從搜索引擎過來的，他不清楚你的網(wǎng)站的結(jié)構(gòu)、功能，他一下子來到了你設(shè)計的某個頁面，他來了、他時間有限、他可不愿意思考太多，你的網(wǎng)站能通過那一刻就讓他一目了然嗎？

不要使用什么詞語

1.“共享”：

共享含有共享編輯的含義，常在wiki中使用。所以使用它可能會產(chǎn)生歧義。

（圖5：google文檔）

2.某些情況下，缺乏明確含義的詞語：

我個人認(rèn)為“復(fù)制鏈接”屬于情境式鏈接，Peter Morville在《web信息架構(gòu)》中提到“情境式鏈接必須非常直接而有意義……如果你點(diǎn)選下去，就知道會看到什么東西。這樣高度有代表性的標(biāo)簽，會通過它們的情景而更加清晰：具有說明性的文字、明確的標(biāo)題，以及網(wǎng)站本身就有的直接明了的用法?！?/P>

“復(fù)制鏈接”只是這篇文章中我對這類鏈接的稱謂，而不建議直接采用這個名稱，僅僅用4個漢字很難表達(dá)出來復(fù)制之后要做什么，用戶會想“我為什么不能直接復(fù)制地址欄或是點(diǎn)擊鼠標(biāo)右鍵復(fù)制呢？”，“我點(diǎn)擊它可以為我?guī)硎裁?？”。在某些情境下，“?fù)制圖片鏈接發(fā)送給好友”也許是更直接、清晰。更進(jìn)一步，如果你通過調(diào)查，發(fā)現(xiàn)很多用戶是通過淘寶旺旺傳送圖片地址的，那么，更好的表達(dá)方式可能是“復(fù)制圖片地址發(fā)給旺旺好友”。

我想，沒有最佳答案，文字和你的網(wǎng)站氣質(zhì)以及用戶使用場景息息相關(guān)，文字亦是設(shè)計師的利器之一。

點(diǎn)擊它之后，會出現(xiàn)什么？

1.要考慮“復(fù)制鏈接”的內(nèi)容

當(dāng)你仔細(xì)考慮過用戶的使用場景，你應(yīng)該就很清楚怎么設(shè)計復(fù)制鏈接了。像圖6一樣將內(nèi)容主題包含在分享信息里對那些通過IM來分享的用戶確實(shí)不錯。

（圖6：新浪博客 ）

2.讓分享中的內(nèi)容滿足用戶的需要：

如果用戶對復(fù)制鏈接有多種需要，那么不妨設(shè)計多種復(fù)制途徑。學(xué)習(xí)一下flickr的設(shè)計（圖7、圖8），它如何在多種復(fù)制鏈接中，保持了清晰的邏輯關(guān)系。（當(dāng)然，其中默認(rèn)第一項通過郵件分享可能對美國人更常用，對中國用戶就另當(dāng)別論了 ）

（圖7：flickr網(wǎng)站 ，用戶點(diǎn)擊分享之前）


（圖8：用戶點(diǎn)擊分享之后）

3.幫用戶想的更多：

分享一個photobucket的例子（圖9），當(dāng)鼠標(biāo)上移到圖片時，就會出現(xiàn)灰色的浮動層（這是改良過的設(shè)計，原本是灰色層始終存在），讓用戶復(fù)制。鼠標(biāo)點(diǎn)擊到包含地址的輸入框里，系統(tǒng)會自動復(fù)制好其中的鏈接，并在輸入框前出現(xiàn)幾秒鐘的“copied”提示。這種方式既能做到提供反饋，又不會有alertbox的生硬感。

（圖9：photobucket.com ）

總結(jié)

設(shè)計“復(fù)制鏈接”功能時候，首先思考用戶的使用場景以及用戶可能會用它做什么，其次一定要讓用戶理解這個功能可以用來做什么的。最后，優(yōu)秀的設(shè)計還應(yīng)該給用戶一個驚喜。在我收集例子的過程中，photobucket的“復(fù)制地址”設(shè)計確實(shí)給了我不小的驚喜。

你還發(fā)現(xiàn)了哪些更好的例子呢，歡迎告訴我！

延伸閱讀：

• http://ui-patterns.com/pattern/TipAFriend
• http://www.welie.com/patterns/showPattern.php?patternID=send-to-friend

更多例子：

• http://picasaweb.google.com/mimiqiao/TipAFriend

原文：http://ued.taobao.com/blog/2008/12/16/tip_a_friend/