QQ導航改版設計心得
前言
在切入設計正文前先來看一組08年的搞笑圖片,對比了日本的NHK,TBS,朝日等電視臺與東京電視臺同一時段播出節目的差別:
新瀉發生六級強震,只有他們還在播料理節目
九州大地震,他們的畫面上打出的字幕拼成日文為“太好了!”的意思。。。
比起小泉純一郎參拜靖國神社,金目鯛更為重要
發生歹徒挾持人質事件,只有他們還在播動畫。而且正好是挾持人質的劇情!
東京大停電時,只有東京電視臺有速報。不過報給誰看啊?
雖說是08年的搞笑圖,也不排除是有人故意PS的結果。不過我相信肯定有人在捧腹之余,對東京電視臺產生了濃厚的興趣。如果剛好能收到甚至會忍不住想看一看現在在播什么節目吧?如果這些圖片都是真實的,那么東京電視臺的確是獨樹一幟,與眾不同。這樣不按常理出牌的電視臺,如果要觀眾投票的話估計也會因為其‘奇葩’和滿足不同觀眾需求的特質收獲滿滿一籮筐‘贊’吧。
回到本文的主題,設計師們在接到需求時往往會看到“希望能有更簡潔、更好、更與眾不同的設計”或類似的字眼,那么在現實工作中,‘更好’(better)和‘與眾不同’(different)這對魚與熊掌該如何取舍呢?
蘋果的首席工業設計師和副總裁喬納森·艾維(Jonathan Ive)說 “It’s very easy to be different, but very difficult to be better”,大意是要做到不同很容易,但要做到更好就非常困難了。東京電視臺的與眾不同對消費者來說是件好事,因為它為用戶在眾多可選擇的頻道中提供了多樣性,可以說是出奇制勝。但如果在產品設計,特別是互聯網產品的設計上,同一消費者對同一類型的產品往往只會采用一兩款的情況下,僅僅靠‘與眾不同’就行不通了。電視節目不像用戶的桌面和移動設備,不管漏掉多少重要新聞,只要看其他臺就好了。特別是對網站來說,如果用戶在頭幾分鐘的時間內找不到他們感興趣的內容或覺得網站不可靠,使用體驗不佳的話,這個用戶就會去別的網站,對產品來講這是不可接受的。在接到QQ導航網站改版的需求時,因為市場上已經形成了‘好123’和‘360導航’兩家獨大的格局,因此主要任務是功能補齊和對舊版進行優化。但作為設計師本身來講,多少還是希望自己能做出一些‘不一樣’的東西。本文結合改版過程中的兩個例子,講述了我對設計中的‘更好’和‘與眾不同’的感悟。
產品背景
網址導航站點的原型是由李興平在1999年創建的“網址導航”—www.hao123.com從創立最初至今已經成為中國上億用戶上網的第一站,?hao123的設計也成為了行業的標準之一。 創始初期李興平作為網吧管理員,發現網吧用戶的一個共性:“很多人都不知道如何上網,上網后又不知道去哪里找到所需要的內容。”這樣一個簡單的基本需求“上網去哪兒?”支撐著hao123飛速成長,截止2012年6月,導航網站用戶的周均覆蓋人數占全部網民數的40%(2.2億?。τ谶@樣一個增長迅猛的市場,騰訊自然也需要不斷進化的產品來參與競爭。
2011年4月-2012年4月各主要導航網站日均覆蓋人數(萬人)和市場領先的產品
例一:首頁排版
在設計一款產品前,最重要的就是認清用戶需求?!叭ツ膬荷暇W?”這個需求在多年之后是否仍是我們目標用戶的主要需求?用戶本身的成長和互聯網環境的變化會不會引起需求的變更?通過對比市場的領頭羊hao123和360導航我們發現它們在首頁都采用了將網址列表(后面我們將這個模塊分為“名站導航”與“酷站推薦”)放在頁面靠右的位置, 而左側留給了新聞,影視,小游戲等內容模塊。這體現出它們的主要用戶需求在成長過程中從過去的“上網去哪兒?”向“上網有很多去處,但具體看什么?”變化的趨勢。反映在頁面上就是從純粹的網址收錄與推薦轉變為內容聚合的收集與推薦。
以下是好123和360導航主頁的布局,因為用戶習慣和自身逐漸轉變為內容導航與門戶網站的原因,符合‘F’法則的頁面黃金位置并不是名站導航與酷站推薦:
好123主頁
360導航主頁
過半好123的用戶使用時間在2-3年及以上,和QQ導航的用戶構成形成了鮮明的對比。360在設計上一直追隨好123的步伐,通過安全衛士和瀏覽器的捆綁,用戶構成接近好123也只是時間問題。不過使用時間2-3年及以上的用戶也已經大大超過QQ導航。
QQ導航用戶結構
360用戶結構
好123用戶結構
因此,在首頁結構上,因為目標用戶的主要需求不同,新版的結構和主要競品形成了鮮明的對比。
QQ導航?V1.0版本首頁基本結構
在前期的調研和訪談中,我們總結出用戶對新版導航的訴求關鍵詞為:清爽,快速,權威,智能與個性。并且在“我的導航”中放置10個以下網址的用戶占比超過一半,高達53%,使用10-20個網址的用戶占比約為20%,30個以上的占比僅為6%。每天瀏覽10個以下網站的用戶高達75%。還有的用戶抱怨“實際我們常用到的網址無非是那么一二十個,像百度,Google,雅虎,網易,支付寶…等酷站,它們的位置也是固定不變的,現在的導航網站內容實在太多了,很多都是不用的?!边@表示我們可以放心大膽的開始做減法并朝著“清爽”,“簡約”的康莊大道前進了嗎?—很多時候,用戶說的不一定是他們想要的。如果不仔細注意下一組數據,很有可能在設計上會陷入這種用戶設下的‘陷阱’。在對“您是否能在QQ導航找到自己經常訪問的網站?”這個問題的回答上,仍然有40%的用戶僅僅能部分找到。考慮到我們的潛在目標用戶忠誠度并不高,如果出現找不到的情況,很有可能就變成了流失的用戶。
因此新版QQ導航的名站部分沒有大刀闊斧的刪減網址數量, 每行的網址數在保持不變的情況下將網址推薦的數量減少一排。頂部的常用與個人信息在視覺上更加突出。在搜索欄下方新增了二級內容頁面的全局導航欄。在后續的1.1版本中, 還將進一步將每排的網址數量精簡至5個,猜你喜歡的行數從4行精簡至2行。并且讓用戶可以自行編輯名站導航區域的網址。
舊版QQ導航首頁布局
新版QQ導航首頁布局
下一版的名站導航還將進一步精簡,同時滿足用戶對清爽,快速,權威,智能與個性化的需求。
通過對目標用戶進行細分并針對其需求調整設計,QQ導航?V1.0的主頁在上線后得到了用戶的肯定與好評。The number speak for themselves(數據為證):
例二:名站導航的編輯與添加
沒有特意想要做出差異化和與眾不同效果的主頁得到了用戶的一致好評,不禁讓我們在設計名站導航的編輯與自定義功能時暗下決心,一定要在這里做出與眾不同的設計!但因為太想要與眾不同,名站導航的編輯方式成為了項目至今從設計稿到最終實現爭論最大的方案之一。
好123添加,編輯網址時彈出的界面
360導航添加,編輯網址時彈出的界面
在改版最初,我們將用戶添加網址和編輯網址的交互流程進行了細分。用戶一般在添加網址時目的性較明確,交互流程預期耗時較短;而在編輯網址時目的性較為分散,很多行為是在編輯的過程中產生的(比如,將某些網址按順序或種類排序時發現新的分類或歸類方式),交互流程預期耗時較長。和好123與360不論是編輯還是添加網址時都彈出猜你喜歡的做法不同,在用戶點擊添加網址時,我們只彈出非末態的添加窗口。讓這個本來預期耗時很短的流程更輕量化和精簡,在風格上也和競品形成了鮮明的對比。
但在最終實現前,這一方案因為可能導致 ‘猜你喜歡’的網址對用戶曝光量下降而讓產品無法下定決心進行嘗試,我們又無法確定現在主流的交互方式到底會不會讓用戶反感(之所以將單獨添加網址和編輯網址的場景分開,也考慮到用戶可能對每次添加、編輯網址時都彈出的猜你喜歡感到反感)。對我們的目標用戶來說,甚至有可能會因為在不知道去哪兒上網時因為沒有這些彈出的推薦網址而覺得茫然的可能性。
在沒有資源進行測試和無法確定用戶反應的情況下,最終的方案不得不做一些妥協,按照主流的交互方式進行實現:
回顧最初的設計方案,設計時的確是按照用戶可能的添加場景和流程并進行了細分,根據不同的預期給予不同的交互反饋。在與產品評審時也是信心十足,認為不但滿足了不同場景用戶的
需要,還避免了多余的信息干擾。更重要的是,作為設計師本省來講,這個方案和主要的競爭對手相比顯得與眾不同。不過因為想要做出差異化的心情太迫切,反而導致我們在設計時低估了運營,產品在這一功能上的需求和側重點。
- 雖然360導航和好123的方式每次都會強行推給用戶推薦的網址甚至廣告,但我們沒有證據證明用戶對這種方式感到不適;
- 對于運營和產品來講,添加網址的途徑輕量化后可能導致推薦網址的曝光率大幅下降;
- 對于有批量添加網址需求的用戶來說輕量化的添加方式反而增加了他們的操作成本;
只求更好,不求不同
在決定主頁排版時,我們并未強調要與眾不同,綜合分析用戶市場和需求后,設計和產品各方很容易就在新版本上達成了一致。在設計名站導航交互時,雖然設計也是從細分用戶使用場景出發,但在一個與競品有差異化的方案面前,忽略了衡量最終結果好壞的其它因素和緯度(運營需求,網址曝光率和產品考量)。最后的方案雖然在形式上沒有不同,不過在視覺上進行了大幅的優化,也能保證給用戶較上一個版本更好的使用體驗。這里再把“It’s very easy to be different, but very difficult to be better”拿出來點一下題。因為也在各種不同的場合聽到過有人說這句話倒過來念也能成立,即為“It’s very easy to be better, but very difficult to be different”要做到更好很容易,但要做到與眾不同就非常困難了。對于追求卓越的設計師來說,很多時候往往更好是不夠的,但這也會將他們帶入到一個誤區中,就是為了不同而不同。我們在做產品設計時應該只遵循“更好”的原則,特別是商業產品設計。
日本設計大師原研哉曾經舉辦過一個通心粉設計大賽,但通過對比后發現在烹飪難易度,生產成本和外觀等緯度的綜合考量下,勝出的反而是傳統的通心粉。
現有的東西雖然沒有‘與眾不同’的產品那樣振奮人心,但它們往往都經過了用戶與市場的考驗才得以留存。我認為,好的設計師在聽到“希望能有更簡潔、更好、更與眾不同的設計”時會自動將這句話過濾為“希望能有更好的設計”。只是最求更好的設計,心無旁鳩的仔細分析產品,功能,市場等各種因素,自然會讓你設計出適合不同用戶群體與需求的產品,而因為用戶的多樣性,在做出更好設計的同時,”與眾不同”往往也已經水到渠成了。
好奇葩