今天，我們在網(wǎng)頁端的維基百科當中發(fā)布了頁面快速預(yù)覽功能。以下是該項目背后的一些設(shè)計思路與經(jīng)驗沉淀。

兔子洞

人們喜歡維基百科。喜歡的原因來自多個方面，譬如以下由 XKCD 所描述的這一點就非常具有代表性。雖然圖中的用詞是“問題”，看上去像是在表達不滿，但我認為正是這些“問題”使他對維基百科愛不釋手：

圖片來自 Randall Monroe（XKCD）

我們內(nèi)部將 XKCD 所描述的這種狀況稱為“兔子洞”；這正是我們在維基百科上看到的最具代表性也是最受歡迎的用戶模式之一：人們從一篇文章開始，通過內(nèi)鏈不斷地瀏覽到更多地方，沿途學(xué)習(xí)著許多不同的主題。

保持語境，降低成本

設(shè)計目標決定著設(shè)計決策的優(yōu)劣。我們?yōu)樽x者而設(shè)計，優(yōu)化的目標在于幫助讀者學(xué)習(xí)，而非盲目追求頁面瀏覽量或互動率。如何確保用戶在當前頁面語境中了解更多內(nèi)容，避免頻繁的頁面跳轉(zhuǎn)，這對于提升學(xué)習(xí)質(zhì)量很關(guān)鍵。

自 JavaScript 誕生以來，頁面快速預(yù)覽就成為了一種非常實用的交互設(shè)計模式。

Twitter 通過快速預(yù)覽功能來呈現(xiàn)用戶信息

在不脫離當前頁面語境的情況下提供信息預(yù)覽，這不是什么創(chuàng)新的解決方案了。然而對于維基百科而言，即便要實現(xiàn)一些最基本的交互模式調(diào)整，我們也會面臨獨特的挑戰(zhàn)。一起來了解一下為什么這會是一個棘手的問題。

通過數(shù)據(jù)了解問題所在

? 維基百科近四分之一的流量來自藍色內(nèi)鏈的點擊，也就是我們所說的“掉進兔子洞”。

? 藍色內(nèi)鏈每個月會產(chǎn)生40億的 PV。

? 在維基百科上，每秒鐘有超過10000個藍色內(nèi)鏈被鼠標懸停。

換句話說，藍色內(nèi)鏈是維基百科上最常用的交互元素。因此，對于藍色內(nèi)鏈及其相關(guān)功能的任何變動，都會變得非常微妙和具有挑戰(zhàn)性。

增加價值，而非痛苦

調(diào)整這種高頻行為絕非易事。我們從定性和定量的角度來歸納出預(yù)覽功能的交互時間線：

時間線顯示了藍色內(nèi)鏈上產(chǎn)生鼠標懸停之后發(fā)生的事件

圖片來自 Nizar Pangarkar / Wikimedia Foundation

考慮到維基百科的規(guī)模，這些變量當中的任何一個微小的調(diào)整都有可能對用戶體驗甚至是網(wǎng)站本身產(chǎn)生巨大的影響。通過研究，我們發(fā)現(xiàn)有些人在瀏覽網(wǎng)頁上的文本內(nèi)容時，會將鼠標指針懸停在語句上面輔助閱讀。對于這部分用戶來說，通過鼠標懸停來觸發(fā)快速預(yù)覽的功能甚至可能造成麻煩。

因此，人為地在預(yù)覽內(nèi)容呈現(xiàn)之前增加大約650毫秒的延遲，這將幫助我們減少誤觸發(fā)的可能性。同時，我們還為預(yù)覽功能提供了非常便捷的禁用設(shè)置。

呈現(xiàn)預(yù)覽內(nèi)容

下一個挑戰(zhàn)在于，如何針對難以準確預(yù)估的實際內(nèi)容形式來設(shè)計快速預(yù)覽的內(nèi)容樣式。你怎樣才能從容應(yīng)對未知的內(nèi)容？答案是面向所有的可能性進行設(shè)計。

邊緣案例，邊緣案例，邊緣案例

我個人不喜歡這個說法，因為它容易使你在進行設(shè)計決策時產(chǎn)生誤判。為維基百科進行設(shè)計時，這個說法就更加不準確了。

維基百科的內(nèi)容由超過20萬人（包括 bots）通過300余種語言編寫，在語氣、格式、可用性、詳細度和主觀態(tài)度等諸多方面有著不同程度的差異。對于維基百科而言，一切案例都是邊緣案例，因此，也就不存在任何邊緣案例。

為維基百科設(shè)計頁面快速預(yù)覽，這有些像是在玩“俄羅斯方塊”；然而不用于游戲的是，你無法預(yù)先了解下一個方塊會是什么形狀。以下是預(yù)覽模式可能涉及到的各種變量：

圖片來自 Nizar Pangarkar / Wikimedia Foundation

一系列不同的用例組合在一起，構(gòu)成了預(yù)覽多種多樣的表現(xiàn)形式，包括“橫向圖片，縱向圖文預(yù)覽”，“縱向圖片，橫向圖文預(yù)覽”，“左文右圖”，“左圖右文”等一系列模式。在泰米爾語的預(yù)覽模式中，對于那些與數(shù)學(xué)相關(guān)的內(nèi)容，你必須調(diào)整文字的行高，才能實現(xiàn)正確的文字截斷樣式 - 對于我們來說，這類“邊緣案例”全部是設(shè)計工作的常規(guī)組成部分。

文本和圖片來自不同語言的維基百科文章

圖片來自 Nizar Pangarkar / Wikimedia Foundation

預(yù)覽功能的未來

這些只是開始；頁面預(yù)覽功能還可以在諸多領(lǐng)域打開更多的可能性。因為保持頁面語境的穩(wěn)定狀態(tài)正變得越發(fā)重要，無論對于維基百科還是整個互聯(lián)網(wǎng)產(chǎn)品領(lǐng)域來說都是如此。

以下這些只是關(guān)于模式運用的暢想，尚未進入正式開發(fā)階段：

支持更多類型的內(nèi)容

目前，頁面預(yù)覽僅用于呈現(xiàn)文章，但我們的構(gòu)建方式使得該功能在將來也可以被用于承載不同類型的內(nèi)容及格式。

圖片來自 Nizar Pangarkar / Wikimedia Foundation

編輯器的強化預(yù)覽

到目前為止，頁面預(yù)覽功能僅面向于讀者；但其同樣可以被用于構(gòu)建編輯器，面向內(nèi)容編輯者提供更為全面的內(nèi)容信息及實用操作。

如今，很多內(nèi)容編輯器都在使用一種名為“導(dǎo)航彈窗”的工具，其功能特性可以很容易地由頁面預(yù)覽模式進行承載。

圖片來自 Nizar Pangarkar / Wikimedia Foundation

維基百科網(wǎng)站之外的應(yīng)用

我們通常將維基百科作為“二類資訊源”。如同詞典可以幫助你在讀書時了解陌生單詞的含義，維基百科也常常被人們在訪問其他網(wǎng)站內(nèi)容時用來查詢陌生的概念。

圖片來自 Nizar Pangarkar / Wikimedia Foundation

維基百科的頁面預(yù)覽功能可以開放給其他內(nèi)容發(fā)布者進行調(diào)用，為他們提供快速呈現(xiàn)特定內(nèi)容相關(guān)信息的能力。

結(jié)語

頁面預(yù)覽功能為維基百科開拓出了人與內(nèi)容互動的新路，使得維基百科的閱讀體驗可以被拆解為互動成本更低的一個個片段。我們也期待著通過更多的交互方式使維基百科逐漸擺脫單一文章整體的認知形態(tài)，使閱讀體驗更加模塊化，更易于學(xué)習(xí)。