以用戶心理模型為基準實現設計目標
騰訊CDC出了一本書,“在你身邊,為你設計”。Yoyo也有小文一篇在書里,以下是全文:
2008年春天,在美國密歇根大學研究生課程“人類行為本質”第一節課上,老師讓我們玩一個很簡單的游戲:
每兩個同學一組,一個人在桌子上敲擊一段音樂的節奏,一個人聽并猜這個音樂是什么。要求很簡單,交流方式只能是用手在桌子上敲擊音樂節奏,聆聽者必須根據節奏一次猜出音樂。游戲開始,課堂上各種敲擊聲響起,我也敲擊了一個我認為比較流行的音樂節奏,結果聽的美國同學一頭霧水,沒有能猜出來。我突然想起,我選擇的是在國內KTV里比較流行的英文歌,或許這位美國同學根本沒有聽過。
后來課堂討論,我發現這個游戲遠遠比想象中難,課堂上成功的小組寥寥可數。失敗的原因主要為以下:
1. 敲擊者選擇的音樂,聆聽者沒有聽過。
2. 敲擊者選擇的音樂,聆聽者聽過,但是敲擊者的表現能力欠佳。
3. 敲擊者選擇的音樂,聆聽者聽過,敲擊者的表現能力也很好,但是類似音樂節奏太多,聆聽者理解為另一個音樂。
成功的小組音樂選擇前三名:
1. 生日歌。
2. Jingle Bells(圣誕歌)。
3. 任天堂超級馬里奧游戲開場音樂。
當時我是研究生第二年,剛結束在紐約愛立信移動設計部門實習,作為一個年輕的設計新手,我立刻在筆記本上寫下這個游戲給我的感受:
1. 理解用戶需要的設計。
2. 自己需要擁有實現設計的能力。
3. 設計必須有特色,辨識度。
4. 自己心里的音樂,不一定是別人心里的音樂。
畢業一些年,一直記得這次印象深刻的第一節課。這也是我第一次接觸心理模型這個概念。
什么是心理模型呢?
先談共感(empathy),我比較喜歡Douglas Stone的描述:“最深層次地了解他人的方式,是共感,這個過程是,你把從外界觀察到的事物,想象成為你自己所感受的東西”。心理模型的定義,我贊同Indi Young的闡述,是在設計過程中,我們應該通過共感,了解到用戶真實的需求,了解用戶真實的目標,以及他們為了達到這個目標會嘗試的方法和他們的思考過程。用戶的這個心理模型不會基于任何我們提供的設計,而是出自他們本身對事物的認知和自身習慣的行為方式。當我們設計師完整準確地了解了用戶的心理模型,就能清晰知道我們需要提供的價值是什么,并了解如何提供設計可以最自然最有效地滿足用戶的需求。
2011年9月,我有幸加入騰訊公司,與優秀的設計師們合作的第一個項目,是朋友網的改版。以上我對用戶心理模型的理解,貫穿于我在設計工作中的每個細節。整體設計流程如下:
1. 了解用戶心理模型,把自己與用戶群體融合在一起去思考,去設計。
2. 研究用戶心理模型,選擇最準確的設計方向。
3. 把握設計上的細節,實現自己預期的設計目標。
個人認為,在設計工作中,最容易被忽略的是第一步,最糾結的是第二步,最難做到的是第三步。
朋友網的整體改版從整體框架,到功能添加,創意設計,視覺風格都經歷了較大的變動。這里我僅取幾個小點來闡述以上設計思路。
I. 讓內容融于設計 – 網站整體風格設計
作為一個綜合性的SNS網站,設計的第一難題就是海量的數據應該如何呈現給用戶。誠然,我們希望提供給用戶盡可能全面的信息,但是我們設計師應該直接拿著產品經理給的功能列表就開始一個一個內容往朋友網頁面上加么?
我自己也是SNS網站用戶,在這次改版中,我總是會思考,如果自己看到這些功能,我是開心,還是沮喪;如果看到這些調整,我是省事,還是煩心;如果看到這種顏色,我是喜歡,還是討厭。設計一個產品,首先要過自己這關,總記得以前一個設計師同事的口頭禪:“產品感動不了自己,怎么可能感動用戶?”
其次,要研究用戶對SNS網站感知的心理模型。用戶登陸朋友網看到頁面各種信息是如何理解呢?重點在哪兒?閱讀習慣?什么功能最能引發用戶與好友進行互動?用戶習慣從哪些入口快速進入哪些功能?用戶在瀏覽,尋找,關注等各種狀態是如何使用網站的?我們設計師與用戶研究工程師配合需要理清各個用戶場景,并力保這些場景是最真實最自然貼近用戶本能使用習慣的。
面對海量內容,設計之前,我們已經思考好如何讓數據更好的呈現,如何讓閱讀更加舒適,如何合理分配各種數據,入口,運營資源等。這樣我們接下來的設計是有的放矢的,因為我們已經把觀察到的用戶心理模型,想象成為我們設計師自身的體驗。這個時候,第1步已經完成。
第2步,選擇最準確的設計方向,根據對用戶心理模型的了解與研究,我們對網站整體風格的設計方向是:
簡約,清新。
簡約,可以讓用戶把注意力更多的放在內容上;
清新,可以讓用戶在我們網站的用戶體驗更舒適,更有效,更喜愛。
最后是實現,如何滿足我們的設計目標呢?第3步把握設計細節的工作是最困難的,我們嘗試了很多種設計方案,進行反復討論與驗證,最后確定為以下方案:
簡約清新的設計,讓用戶更有效更舒適地集中注意力到他們本能會喜歡的地方。我們也希望用戶看到新網頁,有眼前一亮的感覺。
我們達到設計預期了么?雖然網頁上沒有在任何地方提示,“簡約”,“清新”這些詞,但是用戶在微博上的評述給了我們答案:
“朋友網改版,清新的感覺很好!”
“朋友網改版,清爽?!?/p>
“改版很好,一目了然?!?/p>
“明朗,快捷,更廣,更真?!?/p>
“界面很好看,更方便,更實用?!?/p>
“清新舒爽,好!”
“界面比以前更漂亮了,內容比以前更豐富了!”
“簡潔,大方,實用?!?/p>
“風格很清新,很干凈。”
“暢快風格,卓見不凡?!?/p>
“喜歡這種簡潔的風格?!?/p>
“心曠神怡?!?/p>
“簡明大方,美觀親近,惹人喜歡。”
“賞心悅目,心情大好?!?/p>
一目了然,我們的設計,實現了我們預期的設計目標。
II. 以個人美學裝飾社交平臺 – 個人名片設計
朋友網改版前,我們做了一次網站整體用戶研究,其中一個點非常有意思,在訪談過程中,用戶對個性化的社交網站非常感興趣。朋友網廣大的年輕人用戶群體中,對獨立個體自我表達的需求非常大,年輕人通過各種手段強調“我”這個概念,而社交網站,是滿足這個需求最便捷的平臺。
有這個需求,設計師應該怎么做呢?直接讓用戶對自己頁面有100%的控制權,讓他們隨意調整皮膚,顏色,結構,形狀,功能就可以?
先想象自己是用戶,如果有這樣的功能,我會如何呢?我也許會很懶惰,不會認真的去調整社交網站個人頁面的各個細節。我會想,也許我胡亂改一通,還沒有預設的頁面好看呢。但是,如果有一個方便快捷的展示我個人特點的頁面,好看,又很有質感,我會使用的。
這就是個人名片的由來。
了解了用戶的心理模型,我們的設計方向,是提供一個年輕人展示自己的平臺,要設置簡單,美觀大方,有質感。為了方便大家使用,我們設計提供了幾種預設模版,當然,為了設計大家都喜歡的各種類型的模版,設計師們辛苦研究了不少方案,試圖找到符合大眾口味的主題。
我們希望達到的設計目標是:“我們試圖找到一種方式,讓每個人都能成為設計師?!?/p>
以下是我們提供的標準模版例子:
以上以中國水墨畫為主題的個人名片模版,是最受好評的模版之一。
我們達到設計預期了么?改版發布后,我們找到了一些用戶對于這個創意的直接反饋(他們自己設定的個人名片):
優質的模版幫助用戶快速建立自己的個人名片,方便的個人名片設置幫助用戶個性化調整自己的品牌,更充分的展現自我。設計目標完成。
III. 細節與統一
主體風格與創新功能都在設計中的時候,我們也不能忽略朋友網其他細節。用戶看到一個新的版本,認知上是去了解一個新的產品。作為用戶來思考,如果我看到一個網站改版只是改了主要功能,其他細節沒有跟上改版風格,會是什么感受呢?我會感覺是參加宴會,穿好了禮服,卻忘記了穿鞋。
為了提供統一的設計風格,在朋友網改版各個細節上,我們也提供了同樣簡約,清新的設計。請看以下細節。
簡約清新的登陸頁:
簡約清新的新手引導:
朋友網新版發布后,我們也密切關注了新浪微博,知乎,騰迅微博等網站上用戶的反饋,以便后續設計上的持續優化。我們欣喜地看到用戶對簡約清新設計的認可和正面反饋。用戶的認同也帶來了網站數據的提升,首頁,相冊,日志,分享點擊數,投票等數據整體上升,網站整體活躍得到提高。
這個設計過程,也例證了一開始我以用戶心理模型為基準實現設計目標的3個流程。流程的文字描述很簡單,但是實施過程需要非常細致。有時在緊迫的項目節奏中,我也會迷失,設計方向不確定。但是每次看到設計初期為這個項目建立的用戶心理模型,我會找回最開始設定的用戶價值和設計目標,找回設計方向。
誠然,沒有一個流程可以保證設計師一定可以做出好的產品。但是,了解用戶心理模型絕對是一個可以有效提升設計質量與設計流程的方法。掌握用戶心理模型后,選擇正確的設計方向,有強大的設計執行力,保證設計質量,也是非常關鍵的。一個設計要達到設計目標,讓用戶生活品質提升,才是我們的最終目的。
此文獻給為朋友網改版做出貢獻的所有人。
特別感謝我的設計團隊:brella,wendy,pearl,and terran.