網頁中的“複製連結”該如何設計

來源:互聯網
上載者:User

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

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

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

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

有一個網頁上典型的細節,它如此細微以至有時設計師在項目的最後時刻才記得擠一個位置給它,但它又如此常見,在不少網站的詳情頁面不經意就出現了;我們在軟體中不常見到它,但在超文本世界裡,在互聯了朋友的世界裡,它卻時而閃現——它就是“複製連結”,英文別名是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個漢字很難表達出來複製之後要做什麼,使用者會想“我為什麼不能直接複製地址欄或是點擊滑鼠右鍵複製呢?”,“我點擊它可以為我帶來什嗎?”。在某些情境下,“複製圖片連結發送給好友”也許是更直接、清晰。更進一步,如果你通過調查,發現很多使用者是通過淘寶WangWang傳送圖片地址的,那麼,更好的表達方式可能是“複製圖片地址發給WangWang好友”。

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

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

1.要考慮“複製連結”的內容

當你仔細考慮過使用者的使用情境,你應該就很清楚怎麼設計複製連結了。像圖6一樣將內容主題包含在分享資訊裡對那些通過IM來分享的使用者確實不錯。

(圖6:新浪部落格 )

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

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


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

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

3.幫使用者想的更多:

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


(圖9:photobucket.com ) 總結

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

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



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。