飛書這個頁面的設計,超越整個行業(yè)!
空狀態(tài)頁面是設計中一個非常常見的頁面設計,但不少產品的空狀態(tài)設計做得非常差。這篇文章,作者分享了飛書的頁面設計,從設計和情感方面來說,都比其他產品強很多。
空狀態(tài)的頁面是一個非常常見的東西。在任何產品中,當用戶剛開始使用時都非常有可能遇到頁面中沒有內容、沒有數(shù)據(jù)的場景。
如果頁面顯示為一片空白的話,那用戶用戶有可能認為是網絡出現(xiàn)了問題,或者是產品本身存在bug,就很有可能給用戶造成誤解。
所以在UI設計相對成熟之后,各個產品中都會對頁面的空狀態(tài)做出一些美化處理。比如像下面這樣。
這樣的頁面在視覺上更加美觀。并且也給予了對于異常狀態(tài)的處理入口。相對于一片空白的頁面,當然是有一些優(yōu)化的。
我們似乎也習慣了這種放一個插畫和一個按鈕的空頁面形式。但是作者今天在看到飛書的設計之后,才意識到即使是一個非常簡單的靜態(tài)空頁面,也可以有更多的體驗提升,而不僅僅局限在美觀這一方面。
首先我們來還原一下當時的場景,今天作者在上班的時候,本來因為一個設計問題討論的比較煩躁。和同事的溝通也有一些激烈。
然后再打開飛書查看消息時,偶然遇到了一個這樣的空頁面,如下圖。
直接說主題:這個頁面就是作者覺得飛書的設計領先了全部產品。
我們可以想象一下。如果這個頁面按照常規(guī)做法放一個沒有新消息的插畫。那么結果就是一個中性的設計。沒有給用戶帶來新的體驗增量。也沒有給用戶造成困擾。只是一個中性的設計。
但是如果像上圖中這樣做,就達到了讓空頁面的作用不局限在空頁面的效果。
詳細解釋一下這句話的意思:我們這些打工人在使用溝通工具時,最主要的使用場景當然是和同事進行溝通。所以最主要的體驗來源自然也是溝通過程中的體驗。
那么即使在這個頁面里放一個精美度max的插畫,會對我的溝通體驗會產生一丁點兒影響嗎?當然不會。因為這是兩個完全沒有關系的事情。
那么如果像飛書這樣放一個對點贊的行為的引導呢?就有可能引導出一些用戶的使用習慣。
比如說在進行飛書會議時,當我們正在發(fā)言或會議即將結束、當我們講完了設計方案時,可能會有一些同事因為這個點贊的行為引導,就在那個場景下給我們點了一個贊。
這個行為才是我們在使用工作溝通產品的過程中能夠影響到最主要體驗來源的行為,而這個行為是受一個空頁面的內容的引導產生的。
所以作者上面才說這個空頁面內容的作用,不僅僅體現(xiàn)在空頁面而是影響到了產品中其他場景的體驗。
如果再進一步分析的話,其實還可以從人類記憶的特點展開一下。例如現(xiàn)在某個用戶已經使用了飛書這款產品一段時間。在他使用的過程中,與他協(xié)作的一些用戶偶爾會有為他點贊的行為,包括他自己也會給其他的用戶點贊。
那么在這一批用戶的體驗感知中,會形成兩方面的感知。一方面是會對給他點贊的其他同事有一定好感。
另一方面是這種正面的情緒會產生一定的泛化遷移。當時間略微變長之后,由于人的記憶并不會記錄所有細節(jié),而是像一個壓縮文件那樣只記憶最牢固的信息,再根據(jù)明顯信息去聯(lián)想到細節(jié)信息。
這個結果就是在用戶的潛意識中會認為使用飛書的體驗也是正面的。也就是說用戶會把對其他同事的好感有一部分遷移到飛書這個產品中。好處不言而喻。
除了上面的圖片外,還有幾張其他的也可以用同樣的思維理解一下:
作者測試了十幾次,一共遇到了這四種內容,如果說一種內容只是巧合的話,那么這四種情況全部都是對產品整體體驗的增強,而不僅僅局限在對空頁面狀態(tài)的處理。這也能進一步佐證我們的分析過程。
我們再來看一些負面的案例(為了避免得罪人,就不提具體的產品名稱了。)
在這個空狀態(tài)的頁面中有一行文字叫做信號可能跑到外星球了。我實在是不理解,就算他跑到火星了又和用戶有什么關系。看起來有點幽默可愛的文案真的有意義嗎?充其量也只是一個中性的設計。
還有一些更過分的案例我們來看一下。
這張圖中是某個產品里六個空狀態(tài)頁面的。使用的不同插畫。如果作者不解釋每個插畫代表什么含義的話,有多少人能完全看懂?至少其中有三個作者是看不懂的。
這種設計。就是為了追求視覺上的差異性。和不同場景下的視覺區(qū)分。而影響到了更重要的易辨識的體驗指標。可能也是。由于在某個內卷的環(huán)境里自己為自己找了一些可做的事情。但作者只能說這種產品對用戶體驗的理解還僅僅停留在很表層的階段。
在以前作者也曾經寫過空狀態(tài)頁面的設計應該遵循哪些原則,大致如下:
1. 傳達清晰:確保頁面上的文案簡潔明了,直接告訴用戶當前頁面為什么是空的,比如“您還沒有添加任何收藏”或“搜索未找到結果”。文案應具有指導性和友好性。
2. 行動召喚:給用戶提供一個明確的下一步操作提示,如“立即添加第一個收藏”、“嘗試其他關鍵詞搜索”或“創(chuàng)建您的第一條筆記”。這有助于用戶了解如何開始填充內容或解決問題。
3. 情感化設計:使用插圖、動畫或色彩來提升頁面的情感吸引力,使空狀態(tài)頁面看起來不那么冰冷。設計應與品牌的整體視覺風格保持一致,增加用戶的親切感。
4. 教育與引導:利用空狀態(tài)頁面作為教育用戶的機會,展示產品功能或提供使用小貼士,幫助用戶更好地了解產品并鼓勵他們采取行動。
5. 反饋與錯誤處理:如果空狀態(tài)是由于錯誤或加載失敗造成的,提供具體的錯誤信息,并給予解決建議,比如檢查網絡連接或刷新頁面。
6. 適應不同場景:根據(jù)不同的空狀態(tài)場景(如初次使用、內容被清空、搜索無結果等)設計相應的頁面,每個場景都應有其特定的引導策略。
但是現(xiàn)在看來以前的這些設計原則在當下來衡量,也僅僅是及格的做法了。
因為用戶對產品的性能要求會越來越高,對于產品體驗的期待也會越來越高。
在過去看起來非常好的設計,當用戶習慣了之后,會逐漸變?yōu)橐粋€比較普通的設計方案。
這種現(xiàn)象就像卡諾模型中的魅力需求會逐漸降級一樣。
簡單解釋一下:比方說十年前我們去一家飯店,如果能提供免費的WiFi,那用戶會覺得非常驚喜。
因為這種免費WiFi服務是很少有飯店能夠提供的。能幫用戶節(jié)省很多流量的費用。
但是如果是今天我們到一家飯店發(fā)現(xiàn)他們能提供免費WiFi。這就變成了一個很普通的事情,很多飯店都會提供這種服務,有什么好驚訝的。
有當然好沒有也無所謂,自己每個月的套餐流量都不一定用得完。我們并不會為此感到驚喜。這就是一個魅力需求轉變?yōu)闊o差異需求的例子。
當用戶習慣了我們曾經做出的優(yōu)秀方案。就要求設計師們去做更多的創(chuàng)新。
只有再次將設計方案帶來的體驗做的超出用戶的預期。才能讓用戶產生整個產品體驗都偏正面的強烈感知。
飛書這個設計案例其實就是一個非常簡單的靜態(tài)頁面,但是作者想到的這些設計思路如果真的是設計者的思路,那真的很讓人佩服。
大家可以嘗試把這篇文章轉發(fā)到一些群里,看看我們能不能收到。飛書官方設計師的回應。看一看到底是過度解讀了,還是事實如此。
專欄作家
杜昭,微信公眾號:AI與用戶體驗,人人都是產品經理專欄作者,實戰(zhàn)派設計師,目前在某手機公司負責手機OS交互設計,所負責產品覆蓋用戶數(shù)億,主要研究AI與人機交互設計的融合及人因學對用戶體驗的影響。
本文原創(chuàng)發(fā)布于人人都是產品經理,未經許可,禁止轉載。
題圖來自 Unsplash,基于 CC0 協(xié)議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發(fā)揮!