資訊的阻力設計 | 賈洪濤
本文根據UI中國第十屆使用者體驗設計大會上,自如設計中心高階總監賈洪濤現場演講整理而成。
什麼是阻力?
使用者使用App時需要穿越層層頁面,在穿越這些頁面時需要消耗時間和精力,稱之為阻力。
首先探討一下品類方面的阻力。
如圖,這是幾個電商App介面,一眼望過去並不知道哪個頁面是哪家電商,其實這個並不重要。如果你到一個平臺購物,往往不是因為線上產品使用者體驗不一樣,而是因為賣的商品不一樣,或者商品的價格亦或配送速度不一樣。所以這裡它們長的一樣我覺得沒有太大問題,甚至我認為他們之間雷同是一件好事,使用者省去了切換的成本,尤其是新平臺跟老平臺長得像都是沒什麼問題的,這樣使用者切換新平臺阻力就小了很多。
但是當我們需要定義一個新品類時,這個思路就會不一樣。
定義新品類
舉個例子,國際化品牌Airbnb,在2014年的改版中做了很大的調整,這次改版後發現,要找房子下單,搜尋瀏覽和操作效率並不是很高,但是他們還是做了這種低效高顏值的選擇。
對大多數人來說,私人房屋短租給其他人的這種服務是個新產品,是高階還是低端使用者其實沒有概念。所以在2014年Airbnb重新推廣的時候,他的設計理念是各位房客先別管這個產品是什麼樣的模式,先說這個事情是不是看起來很酷。是不是酷這件事對於一個新產品是重要的,如果我用過一個酷的產品,分享給朋友。對方往往也會因為我分享的產品酷而覺得我這個人很酷。有些實用性還不錯但是品牌調性沒那麼高的產品,使用者使用完後會覺得“把這個產品分享給別人,並不會給我加分”而止步分享。鑑於此,我認為Airbnb高顏值雖然一定程度上犧牲了效率,但是拔高了品牌調性,也就提高了產品的推薦值,是一個正確的選擇。
那麼當我們需要重新定義一個已有品類時,我們的思路是什麼呢?
重新定義品類
這是我們2016年發版的首頁設計,自如和跟之前的租房平臺不太一樣,所以我們的首頁設計要 重新定義一個品類 。以前,尤其是我們80後對於租房會有什麼樣的感受都是有一些認知的,比如說黑中介…其實大家都有一些印象,被坑過的80後不在少數。自如出現的時候可能就需要重新整理大家對於這個品類的認知。所以我們在設計首頁的時候,先用一個高顏值大圖展現一下房子是什麼樣子(因為我們的房子確實顏值很高品質不錯),搜尋按紐也不是很大。所傳達的思路是我們希望使用者在找房子之前對我們的平臺有些認知,或者說對租房這個品類,打破固有的刻板印象,有重新的認知。我把這種重新定義已有品類的設計方法定義為“ 我們不一樣 ”。
在今年,自如的影響力大了很多,在這個背景下我們進行了新一輪的改版。雖然從使用者的角度講可能進APP第一件事是要找房子,但是從企業的角度,企業有很多想要傳達給使用者的資訊,這個頁面也是讓使用者知曉其他業務的入口(自如給大多數人的印象是一個租房平臺,但是我們也有像保潔,搬家這類的服務)這些入口也許使用者當時不會點選,可是當他需要用保潔,或者搬家的時候就會想到好像自如有這麼一個業務,之後他會去自如的首頁找。所以多條業務線的並列呈現,也有類似廣告曝光的作用。
我用這張圖來代替我們的原型圖,我們要展現多條使用者線的時候很依賴於這個介面上的多個按紐,當時就想能不能順著這個思路在儘可能的情況下做的好看一點。我們之所以覺得這個介面給你的感覺沒那麼好,是因為這個介面資訊量太大了,還有色彩的衝撞過猛了。
我覺得色彩的間隙太小了,應該加大,所以加了一些白框,讓這些顏色之間離的更遠,顏色間的衝撞也就比較小。
然後再看這個顏色本身,我們是不是可以選一些相對共性的顏色,比如把標準的紅綠藍改成紅,暖綠,和偏綠的藍(暖藍),然後把選中的顏色找他的擴充套件色,用擴充套件色畫出一些按紐。
這就是我們後來首頁的樣子。
低頻應用的阻力設計
作為一個低頻使用的App,跟高頻使用的App阻力設計思路最重要的不同點是什麼呢?我從學習成本這點來切入。
學習成本
微信的聊天記錄刪除功能,有一點學習成本。
使用者在使用中偶爾向左滑發現了可以刪除聊天記錄,通過偶爾的觸發,使用者學會了這樣刪除聊天記錄。通過後期每天不斷地使用強化了對這個功能點的記憶。
但是我們的低頻App似乎沒有這個機會,由於使用次數比較少,有些功能隱藏起來的話使用者大概率永遠都不會去用。設計時不但要把點讚的按紐放出來,而且點讚的時候還要告訴使用者,點贊後飄在右上角。
告訴使用者收藏之後,收藏列表可以點選右上角這個按鈕檢視。我們不但要把所有的功能擺出來,而且還要告訴使用者這個功能下一步怎麼走。因為他如果這次沒學會,以後可能也不會用這個App了,這點跟高頻的產品不一樣。
點選資料
我們設計首頁的時候對於點選資料會有一個預期和目標,但是往往資料反饋會跟設計初衷多少有些不相符。大家可以猜一下哪是點選率最高的…在這裡我只能告訴大家一個大概的排名。我們當初希望是租房的點選高一些,因為使用者點選後可以瞭解我們有多少個租房產品,所以我們把它在視覺上設計的重了一些。但是其實搜尋是排在他前面的,使用者對於大面積的區域像banner這類東西是有免疫力的,所以不管做的多花哨其實使用者會習慣性的忽略掉,也就是視覺中心和實際的互動中心不見得一樣。合租在租房的前面,整租都可以在前面,看來使用者還是比較仔細的看了我們的介面,而且可以斷定大家對於合租是什麼東西瞭解的很清晰。
可以看到,“租房”這個按紐我們剛開始設計的時候,感覺應該是高的,因為這個是總集,我們在後期的訪問中發現使用者認為這個是表示分類,所以設計的雖然明顯,但是使用者仍然認為這個不可點。
減少阻力
減少阻力,需要跟使用者的預期相符。
租房按紐怎麼做互動才能讓使用者感到順暢?租房的按紐包括右邊的四種,其實是個1.5級(介於一級頁面和二級頁面之間)的介面,所以點選左側的租房,使用者會進入“租房”頁面。而右邊的這四個Button應該還在,只是這四個按紐變成放大精細版。包括租房Button的底圖,也是放大放在頁面最上面,這跟使用者的預期才比較一致。
從首頁到列表,到詳情再到下單及更深層的頁面,頁面的ICON和精細程度和用力程度都不一樣,層級越深視覺衝擊越輕。
如圖,最右側預約那一列,假設設計師有足夠精力和時間,是否可以把最右側的頁面做的視覺更豐富,甚至跟首頁一樣?然而我們現在的規範裡面仍然不允許做的更花哨,原因是我們認為在前半段的時候,使用者需要一些阻力來提升注意力,從首頁先認知這個租房APP跟他平時認知的不一樣,接下來有一些資訊的輸入比如圖片,再往後,如果一旦點約看或者是點簽約,這時他的決策做好了,產品要做的事就是一步步往以最快的速度,完成這個事情,不要讓他有任何的猶豫,不要讓他分心,任何的分心都有一定的概率讓這個流程中止甚至是終止。
如圖,我把整個流程的資訊阻力畫了一個曲線,首頁阻力是最大的,越往後越小,實質性的資訊越多。決策前需要讓使用者提升注意力,所以資訊量要大,表達要豐富。一旦決策後,資訊的傳達以最簡潔的排他形式存在,讓使用者路徑儘可能的縮短也讓資訊阻力盡可能的變小。
以上就是是我對資訊阻力設計的整理,希望大家能夠有所收穫。