close

Twitter設計細節引發的慘烈思考 - 網頁設計

http://webdesign.zoapcon.com

版權聲明:轉載時請以超鏈接形式標明文章原始出處和作者信息及本聲明
http://arslanyard.blogbus.com/logs/88837905.html

Twitter大規模改版已經過去一段時間,但自己早已習慣使用第三方客戶端,幾乎沒有認真的使用和思考過它的重設計,直到前兩天客戶端遇阻,不得不爬上Twitter,才注意到一點點細節。先讓我們看看一切平靜時的頂部頁面:


圖1:平靜的界面

如果從未獲得過焦點,上圖甚至連輸入框也會更簡潔(有趣的是,一旦獲得焦點,即使再失去,輸入框也會維持在如上圖狀態)。然而,對于實時系統,真正有趣的是當新的消息到來時:


2:掀起漣漪的界面

剛開始,我只注意到類似“7 new tweets”的信息提示。遲鈍許久,我才發現“Home”導航條目下似乎有個泛藍的亮點 。是我設置的背景一部分?我沒有啊;仙女?哪跟哪啊?美劇看太多,腦子進水...展開新消息,亮點消失,找回理智的我也終于跟上你的思路,意識到這亮點的作用。

那么為什么Home下面也要用visual cue來提示新信息的“到達”呢?有這個必要嗎?比起直白、明顯而毫無歧義的“7 new tweets”,這亮點不是很莫名嗎?我當即非常自大的將其解釋為Twitter的設計人員濫用視覺提示,然而不到半個小時,我就徹底推翻了自己的推斷。

為什么我要否定自己呢?因為一個人想要偉大,就必須學會否定自己?這是屁話,用來哄粉絲用的,如果你有的話。真正原因是我很快進入這樣一個場景:


圖3:下拉的界面

當我下拉頁面到圖3所示時,“7 new tweets”的“主顯區”早已被拋在了“此時”,而我則隨著鼠標回到了12分鐘前(Twitter果然是“時間機器”)。那么要怎樣才能知道自從離開消息提示的“主顯區”后,新信息的到來呢?上翻到主顯區?抬頭看看導航欄的“Home”。

突然之間我認為多余的設計元素向我無情的嘶吼起它的意義。因為Twitter的重設計將導航欄fixed在了viewport的頂端,于是這么一個“附著”在“Home”下的亮點成就了新信息提示的“次顯區”,跟隨我們的時間軸,隨時提示新信息的等待,這很重要,因為它是實時性產品,就需要以某種方式表達這一特性。

但這并不是沒有問題,我們要如何查看新信息?點擊Home?翻回主顯區?我們是否考慮過,點擊Home與點擊主顯區的意義本是不同的,點擊Home是重新請求整個頁面,那么頁面上其它實時元素也會發生改變,例如趨勢、推薦用戶等;而點擊主顯區,則僅僅是請求新信息,而不影響頁面的其它實時元素。

于是,我的些許疑問:

開關與數字
這樣說是否很莫名?我們把亮點的呈現與否作為邏輯的開與關:開燈,有新消息等待;關燈:無新信息到來。這是Twitter的“次顯區”采取的策略。

那么如果用數字呢?這應該很容易,只要和主顯區的數字使用同一變量,沒有新消息就直接顯示0,或者“關燈”。問題在于:為什么?為什么要用數字換開關?“次顯區”的作用是什么?它與“主顯區”有什么不同?提示用戶有信息 等待,還是提示用戶有多少信息 等待?這兩者有區別嗎?如果有,會影響用戶的認知負擔和行為嗎?更有趣的是,因為次顯區是與“Home”導航條目“合并”的,如前面提到的,這會影響到用戶對“Home”的理解,甚至整個導航條的理解嗎?

次顯區的作用是什么?當主顯區離開Viewport,而有新消息到來時,給予我們提示,我們可以由此決定是上翻到主顯區,還是直接按下Home。如果我們用數字呢?那么當主顯區與次顯區共存時,就會有同一數字兩次提示。這一點或許有點奇怪,我們可以接受不同形式的冗余視覺提示,例如我們將標題加粗的同時還要改變字體,但如果是具體文字與數字的提示重復,卻會引起我們的反感。而當僅有次顯區存在的情況下,它提示新消息的到來同時,也暗示了Twitter本身的“實時”屬性,如果再考慮界面整體的清晰、功能主次,在這一點的設計上選擇“開關”從我的使用角度來說是更適合的決策。

你或許會想,一旦點擊 Home,我們在不知有多少新消息的情況下更新會跟用戶帶來困難。一方面,下面一點說到,精確的數字在這樣的情況下給予我們的是無法言狀的心理作用,很大程度上需要的還是我們的記憶來輔助;另一方面,文章后段提到視覺提示時,一種思路或許能夠解決這個問題,還請耐心。

那么主顯區的數字有意義嗎?為什么不簡單說聲:嘿,你有幾條新消息了,或者,你有好多新消息了...這個我真沒讀到過相關研究,不過一種常見的心理或許能夠給出一些答案。數字的“精確”表象能夠給人確定感,把握、控制感。雖然我們不會數著1、2、3來讀條目,但知道將要面對一個精確數目,比起心里沒底的讀到某條舊信息而止,讓用戶擁有更多確定感:一切盡在掌握!哪怕兩種情況下我們都是靠著記憶告訴我們新舊的界限。當然,如果出現GReader里很多人遇到的“1000+”的情況, “精確感”恐怕只能轉化為“無力感”甚至“恐懼感”了。

說來說去,設計在每個層次都要確定主次,決策需要取舍。實時應用所要考慮的一大維度就是時效性,大多數用戶來到Twitter主頁恐怕不是為了尋找上個星期咱在廁所里發了一條什么推,而是每隔一段時間點擊“主顯區”,了解最新發生的事情,這也是為什么我要把“7 new tweets”占據的位置稱為主顯區。當然,咱們也可以從位置關系,從Fitts's Law的來解釋,這就不提了,既然它是主,而“燈”是次,不能說狠狠地來句deal with it,而是design with it。

邏輯適用局限性
“次顯區”的提示僅僅在主頁有效,而當我們離開主頁,例如去“Profile”,或“People”頁面,即使你有信息更新,次顯區也不再有效,準確的說,50%有效。即你是“開燈”狀態離開,那么Home下面的燈永遠是開的,無論此時信息是否更新,“開燈”狀態都是“正確”的,而如果我們是“關燈”狀態離開,那么此時所有信息的更新都無法在“次顯區”得到展現。

于是在這時,這盞燈的意義就不完全如前所述了,它并不完全代表你上次查看信息后的更新狀態,而只在你停留在主頁面的狀況。如果是這樣一個邏輯,那么或許就需要質疑將其與“Home” 合并是否是一個合理的決策了。如果我們將Home增加了這么一個更新提示功能,那么其它導航條目呢?我都知道這樣的頂級導航條目是全局性,即全站內有效的,這也算是互聯網用戶的一種隱形常識。那么頂級導航的功能是否也該全站內有效呢?至少Twitter的這盞燈不是。

雖然Twitter將導航欄設置為Fixed,從頁面呈現(CSS)屬性上給了“次顯區”一個視覺上合乎邏輯的棲身之地,但從更大范圍的流程邏輯來說,這是有很大“瑕疵”的。


arrow
arrow
    文章標籤
    網頁設計 web design
    全站熱搜
    創作者介紹
    創作者 Zoap_網頁設計 的頭像
    Zoap_網頁設計

    zoap的部落格

    Zoap_網頁設計 發表在 痞客邦 留言(0) 人氣()