Web Design中該如何「複製鏈接」

《用戶研究角度看設計》系列是淘寶的用戶研究團隊在可用性測試之後的點滴思考。在每次與淘寶用戶的直接接觸、觀察用戶的操作之後,作為體驗分析師的我們總是會感慨:“為什麼有些網頁設計細節看似已經很顯眼了,用戶就是沒有注意到?”、“為什麼用戶偏偏要那樣去理解?”、“用戶在那個流程中為什麼陷入困惑,甚至不能完成任務了?”,然後,我們會思考這界面背後的原因,分析用戶當時具體說了什麼,是什麼原因導致用戶那樣理解......這個過程需要非常嚴謹的思考,因為向設計師反饋的任何一個詞語都會導致不同的設計。同時,這個過程也令我們非常享受,如果說設計就是解決問題,在可用性測試之後的分析時間就是分析師的“設計”時光。

我們冀望通過用戶研究角度的思考,網站設計帶給設計師一點點啟發,並且將我們在研究中發現的問題,固化在設計模式庫中,以便今後不再出現同樣的問題。當然,作為體驗分析師,我們對交互設計和視覺設計瞭解得不夠精深,還不能像設計師一樣把握項目中的種種約束,所以,這個系列的內容可能還比較粗淺,更偏重於“商業-技術-用戶”三者中“用戶”這個角色的直接想法。

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

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

有一個網頁上典型的細節,它如此細微以至有時設計師在網頁寄存項目的最後時刻才記得擠一個位置給它,但它又如此常見,在不少網站的詳情頁面不經意就出現了;我們在軟件中不常見到它,但在超文本世界裡,在互聯了朋友的世界裡,它卻時而閃現——它就是“複製鏈接”,英文別名是Tell a friend、send to a friend、tip a friend、share、email to a friend或者直接就是URL(如圖1)。作為設計師,你曾經注意過它嗎?

(圖1:youtube ) 它什麼時候出現更合適?

當你想將一個網頁(或網頁中的主體內容)分享給別人的時候,這時它的出現可以節約用戶的時間。

通常,它出現在一個網站的內容詳情頁面,比如視頻網站的播放視頻頁面、博客網站的博客文章頁面、照片網站的照片詳情頁面、購物網站的商品頁面等等。就拿博客網站為例,它的出現似乎在說,“也許你的朋友會對這篇文章感興趣哦,點擊我,然後分享給朋友看看吧!”

使用它時注意什麼

1.不必在一個頁面多次出現

設計師既要在設計過程記著它,但也別太惦念它了。只在需要的時候提供它,即使頁面很長,也沒有必要像“立刻購買”按鈕那樣在頁面的第一屏和最後一屏出現兩次,因為“立刻購買”可以讓用戶進入到下一個步驟完成購買,而“複製鏈接”只是一個次要的任務,大部分為對它感興趣的人使用。

2.相類似的功能具有相同的視覺權重

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

(圖2:某視頻網站 )

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

設計它的過程,要記得讓用戶注意得到,或者是在用戶想尋找的時候知道在哪裡尋找,這一點很重要。舉個例子,假如是一篇blog頁面,不要讓“複製鏈接”的 文字大小超過blog正文內容,也不要讓複製鏈接區域太明顯,以至於干擾了最核心的文章內容。

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

(圖3:淘寶社區)

另外,在使用輸入框複製的設計中,是不是可以考慮當用戶點擊了輸入框,用腳本自動全選了整個輸入框的內容(例1),而不是讓用戶從左至右按住左鍵拖動鼠標,進行全選。 <input type=”text” id=”foo” /> <script type=”text/javascript”>
document.getElementById(’foo’).onfocus = function() {this.select();}
</script>

(例1)

它出現在頁面的哪個位置?

在可用性測試的準備階段,我們這麼帶著這樣的問題去觀察:“用戶對某個東西感興趣的時候,他知道去哪裡找它嗎?”和“用戶點擊了它之後,他清楚在做(複製或分享)什麼嗎?”,前一個問題意味著它的可尋性(findability)是否足夠好,後一個問題意味著這個位置能不能與他想做的事情聯繫起來。 舉個例子,如果用戶想把文章分享給朋友看,那麼將這個功能放置在文章的附近而不是評論的附近更合適。可能這麼說,有些人會想“那當然是文章附近更好了,誰會把它設計到評論附近呢”,但有時在文章下面加入了一個橫幅廣告之後,它就與評論而不是文章更相近了。

用什麼中文詞語來描述它?

我個人認為在不同的情景中應該用不同的中文詞語,但是界面上不要有其它詞語干擾了用戶的理解,圖4是某博客一篇文章的部分截圖,你能立刻說出來,上下兩個“分享”有什麼區別嗎?

(圖4:某門戶博客)

我想你已經猜出來了,上面的“分享”是名詞,下面的“分享”是動詞,所以在使用一個既可以是動詞也可以是名詞的詞語時候,要謹慎一些。另外,我建議設計師時刻考慮到“此時此刻”那個時點, 想像用戶是從搜索引擎過來的,他不清楚你的網站的結構、功能,他一下子來到了你設計的某個頁面,他來了、他時間有限、他可不願意思考太多,你的網站能通過那一刻就讓他一目瞭然嗎?

不要使用什麼詞語

1.“共享”:

共享含有共享編輯的含義,常在wiki中使用。所以使用它可能會產生歧義。

(圖5:google文檔)

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

我個人認為“複製鏈接”屬於情境式鏈接,Peter Morville在《web信息架構》中提到“情境式鏈接必須非常直接而有意義......如果你點選下去,就知道會看到什麼東西。這樣高度有代表性的標籤,會通過它們的情景而更加清晰:具有說明性的文字、明確的標題,以及網站本身就有的直接明瞭的用法。”

“複製鏈接”只是這篇文章中我對這類鏈接的稱謂,而不建議直接採用這個名稱,僅僅用4個漢字很難表達出來複製之後要做什麼,用戶會想“我為什麼不能直接複製地址欄或是點擊鼠標右鍵複製呢?”,“我點擊它可以為我帶來什麼?”。在某些情境下,“複製圖片鏈接發送給好友”也許是更直接、清晰。更進一步,如果你通過調查,發現很多用戶是通過淘寶旺旺傳送圖片地址的,那麼,更好的表達方式可能是“複製圖片地址發給旺旺好友”。

我想,沒有最佳答案,文字和你的網站氣質以及用戶使用場景息息相關,文字亦是設計師的利器之一。

點擊它之後,會出現什麼?

1.要考慮“複製鏈接”的內容

當你仔細考慮過用戶的使用場景,你應該就很清楚怎麼設計複製鏈接了。像圖6一樣將內容主題包含在分享信息裡對那些通過IM來分享的用戶確實不錯。

(圖6:新浪博客 )

2.讓分享中的內容滿足用戶的需要:

如果用戶對複製鏈接有多種需要,那麼不妨設計多種複製途徑。學習一下flickr的設計(圖7、圖8),它如何在多種複製鏈接中,保持了清晰的邏輯關係。(當然,其中默認第一項通過郵件分享可能對美國人更常用,對中國用戶就另當別論了 )

(圖7:flickr網站 ,用戶點擊分享之前)

(圖8:用戶點擊分享之後)

3.幫用戶想的更多:

分享一個photobucket的例子(圖9),當鼠標上移到圖片時,就會出現灰色的浮動層(這是改良過的設計,原本是灰色層始終存在),讓用戶複製。鼠標點擊到包含地址的輸入框裡,系統會自動複製好其中的鏈接,並在輸入框前出現幾秒鐘的“copied”提示。這種方式既能做到提供反饋,又不會有alertbox的生硬感。

(圖9:photobucket.com ) 總結

設計“複製鏈接”功能時候,首先思考用戶的使用場景以及用戶可能會用它做什麼,其次一定要讓用戶理解這個功能可以用來做什麼的。最後,優秀的設計還應該給用戶一個驚喜。在我收集例子的過程中,photobucket的“複製地址”設計確實給了我不小的驚喜。

你還發現了哪些更好的例子呢,歡迎告訴我!