編輯導語：住房問題一直以來是困擾當代年輕人的一大問題，信息時代，住房信息也逐步實現了現代化。本篇文章從用户場景出發，結合新房信息線上化這一熱點深度剖析，一起來看看吧！
眾所周知，鏈家在二手房業務中深耕多年，無論是線下服務體系和線上產品工具都處於行業內頭部水平。但相較於二手業務，新房業務的整體發展還存在較大差距，部分業務流程仍處於線上化建設中。
聚焦到經紀人的作業工具來看，二手和新房的產品使用體驗差異也很大，其中房源模塊的問題尤為突出。如果二手房源產品體驗是80分，那新房可能只有20分。而房源是新房經紀人最重要的作業模塊，在產品滿意度貢獻權重最高。但滿意度偏低，因此其體驗問題亟待解決。
圖1 節選自《2021H1新房經紀人滿意度調研報告》
一、為什麼改版1. 改版契機：新房信息質量正穩步提升很長一段時間以來，新房房源詳情頁是被“棄用”的，大多數經紀人使用第三方工具獲取房源信息。最底層原因是內部工具上房源信息質量差（不全不準）。而質量差則是由於之前在新房基礎建設人力不足、產品迭代慢，不能滿足城市業務發展需求。
城市為保證各自發展，使用了更靈活的第三方工具進行新房信息傳遞。2021年上半年隨着項目「新房基礎信息建設」的進行，新房信息質量正穩步提升，且城市也在使用第三方工具中發現諸多問題，這正是新房房源詳情頁重振旗鼓的最好契機。
2. 產品價值：促進新房信息線上化正循環作為新房信息線上化的其中一環，新房房源詳情頁起着信息呈現的作用。好的呈現方式能夠幫助經紀人更好地消費信息，讓經紀人認可平台產品和服務，同時經紀人的正向反饋也能激勵生產新房信息的駐場們更有動力去維護信息，從而促進新房信息線上化的正循環。
圖2 新房信息線上化流程
3. 現狀問題：欠缺規劃，信息可讀性差改版前，新房詳情頁繼承着二手房詳情頁的頁面結構，但由於業務場景不同，當前信息組織方式並不適合新房經紀人的作業場景。另外近一年內，詳情頁在沒有統籌規劃下，陸續接入了“各自為戰”的新內容模塊。
新房詳情頁逐漸出現信息冗餘和混亂的問題，直接影響了信息的呈現效率和可讀性。比如在新房業務中房源圖片一般是效果圖，不能像二手房一樣通過圖片識別房源，經紀人表示不會優先關注圖片，但卻佔據了首屏1/4的空間。
圖3 詳情⻚頭圖佔據高優空間卻無實際作用
諸如此類的問題還有很多，但散點式的解決問題可能會引發新的問題，因此設計應該重新迴歸起點，從用户使用場景出發。
二、新房經紀人真實的看房流程通過訪談經紀人和觀察他們的實際作業操作，我們發現經紀人需要查看房源內容的場景可以分為兩種——熟悉樓盤和回答客户問詢，兩種場景下的行為目標和對房源信息的關注順序有所不同。
圖4 經紀人看房的真實過程
1. 看房場景1：熟悉樓盤在「熟悉樓盤」的場景下，經紀人是在自己準備功課，無客户時識別一些好樓盤來找客户，這一場景下，經紀人會經歷以下四個步驟：識別（樓盤是什麼）、吸引（樓盤亮點）、深入（瞭解房源細節）、匹配（房與客）。需要按照經紀人的判斷邏輯展示房源信息，逐漸引導其做成合理判斷。
2. 看房場景2：回答客户問詢與二手房經紀人駐紮在小區附近不同的是，新房經紀人的客户多來自線上商機諮詢，即客户在貝殼APP上看到某個感興趣的樓盤後向經紀人發起諮詢。經紀人需要在短時間內的交流給客户留下好印象，讓客户信任自己，才能進一步產生線下看房行為促進成交。
而信任的第一來源便是經紀人對於客户問題的快速又專業的解答。這一場景下，經紀人通常經歷3個步驟：識別（樓盤是不是客户感興趣的）、定位（查找客户問題的答案）、回覆（解答客户問題）。對樓盤熟悉度高的經紀人，能夠將大部分樓盤信息背誦下來，直接回復客户。
但對於大多數經紀人來説，需要先查找到相關樓盤的信息。尤其是目前多數新房經紀人的司齡都時長較短，快速查找到信息則對他們來説十分關鍵。
三、快速聚焦的信息閲讀體驗基於以上兩種看房場景，我們可以發現，經紀人查看房源信息是一個有規律的漸進式的判斷過程，而經紀人在其中的心路歷程正是對詳情頁改版設計最根本的依據。而且我們也發現，目前經紀人所使用的第三方工具內容的組織方式也基本符合上述場景。
綜合前期調研的所有結論，包括對經紀人使用反饋的收集、第三方工具內容的分析和經紀人看房流程的梳理，最終確定了本次改版的設計目標和設計策略，如下圖所示：
圖5 改版目標及策略
1. 頁面結構重建，符合經紀人看房流程新房房源詳情頁的作用就是幫助經紀人在兩種場景下能夠輕鬆完成任務，那麼就需要沿着經紀人的心路歷程對詳情頁內容進行更加合理的信息結構設計。
改版方案中，綜合兩種場景的看房流程，將詳情頁整體內容進行梳理歸類。在刪除冗餘信息後，按照“識別→吸引→深入→匹配”的順序排列，保證經紀人在自然向下瀏覽時毫不費力地獲取房源信息。這一順序下，“識別→定位→回覆”也能同時得到滿足。
圖6 新版詳情頁結構
2. 整合強關聯信息，減少閲讀跳點在前期調研中發現一個痛點：明明是關係緊密需要一起閲讀的信息卻分散在多處位置，造成經紀人閲讀時出現跳點和斷點。
比如在瞭解户型信息時，經紀人通常需要一起看户型格局圖、户型樣板間，貝殼也提供了靜態圖、視頻講解和VR三種形式。但在舊版詳情頁中，户型模塊只能看到户型圖，樣板間信息需在頁面頭圖中查看。當經紀人想完整地看幾個户型的格局和樣板間時，不得不在兩個位置來回跳動，不僅操作麻煩，也在不停中斷閲讀進程。
因此改版時，我們將户型相關的信息都集中在户型模塊，經紀人可一次性完整地獲取户型信息。
圖7 户型信息模塊優化前後對比
在經紀人深入瞭解樓盤信息時，會涉及到户型、樓棟、小區概況、區位配套和開發商/物業共五個維度的信息。在舊版詳情頁中，小區概況信息放在了二級頁面且入口在頁面頭部位置，而户型等其他信息則位於頁面中下部。
這種結構給經紀人帶來一定困擾，有的經紀人以為壓根沒有小區概況信息，知道入口的經紀人則需要在中途切換位置。因此改版方案中，我們按照真實物理空間中從小到大的順序，將户型、樓棟、小區概況、區位配套依次排列，即便經紀人只關注某幾個模塊信息，也不會迷失於找入口。
圖8 樓盤詳細信息優化前後對比
3. 縮短路徑，實現信息快速觸達在完成結構和單個模塊的內容閲讀體驗優化後，我們發現了另一問題：新房房源的信息體量很大，為了讓經紀人在一級頁面能夠獲得核心完整的信息，頁面高度已經達到5屏。而在「回答客户問詢」場景下，經紀人則需要快速查找到某個位置靠後的模塊信息，那麼如何解決這個問題呢？
舊版中有常規的模塊定位導航，但問題是該導航無法在首屏暴露，經紀人需要上滑頁面再左滑Tab導航找到對應模塊內容。在需要即刻回覆客户時，這種方式肯定是不夠快速的。
於是，我們便增加了快捷導航，它固定在可見屏幕的右側，經紀人可一鍵定位至模塊位置。目前快捷導航呈現的4個入口也是調研經紀人後挑選出的高頻使用模塊，同時這4個定位點也基本能夠均分整體頁面，即便想看其他模塊，也能輔助快速定位。
圖9 詳情⻚導航優化前後對比
除了在整體結構上縮短觸達路徑，在單個模塊的內容查看上也做了細節交互調整。比如作業規則模塊細分了6個子分類，舊版方案是需要橫滑查看的Tab導航，經紀人反饋不知道可以橫滑，甚至有人不知道可以點擊切換分類。新版方案則優化成了標籤導航並將分類全部展示，足夠直接。
圖10 客户規則分類優化前後對比
四、能夠快速捕捉的“顯著線索”盤源詳情頁作為B端新房信息承載最重要的頁面，體量大且繁雜，當海量內容如決堤般襲來時，信息被割裂的更加碎片化，經紀人往往會感到失焦，從而引起心理牴觸。
而詳情頁面向90%為司齡時長較短的經紀人，處在業務熟悉階段居多，會停留較長時間查找信息，導致講盤或熟盤的過程體驗感降低。因此，如何在短時間內引導經紀人快速觸達到有用的“線索”，降低經紀人的信息理解成本，找到記憶打點的形式則顯得尤為重要。
詳情頁改版的核心目的在於打造快速聚焦的閲讀體驗，提升新房信息線上化的服務體驗。根據產品定位及改版目標，我們對盤源工具中高價值信息進行強化感知，凸顯視覺重點，弱化次要信息，在吸引經紀人快速定位的同時，儘可能降低頁面其餘元素的干擾。因此提煉了以下“顯著線索”：
1. 視覺聚焦線索這裏我們以萊斯托夫效應為設計的切入點。
什麼是來萊斯托夫效應？意指在同質類材料中具有差異化表現，視覺突出便於記憶，實際上説明了材料的特獨性對大腦處理信息時起到一定作用。
例如詳情頁是一座山，我們可以通過“峯頂”和“谷底”的對比來抓取眼球，同等於用誇張或強化的形式去吸引注意力，直觀的幫助經紀人明確焦點信息是什麼，從而降低其腦力資源的消耗。
如何聚焦信息？首先需要對盤源關鍵信息進行有效的聚類整合，其次無限貼合業務場景，獲取不同階段下經紀人的關注點及訴求，再以合適的差異化表現形式配合信息節奏，優化整體信息的透傳路徑。
1）拆解功能，聚類整合
人的大腦擅長處理具有區塊感的內容，塊狀信息能夠快速抓住用户焦點，我們可以把盤源詳情頁拆解成顆粒度不一的各類模塊，再進行歸納收攏。
對比舊版詳情頁中的盤源基礎信息結構散亂，對經紀人的閲讀及認知造成一定負擔，所以在設計中，我們把頁面拆解成樓盤賣點、基礎信息以及作業內容三大結構，在頭部信息處理上，將盤源賣點與基礎信息利用Z軸空間關係劃分了層級，重色塊與白卡片互相襯托，形成強烈對比，在保證賣點凸顯的同時也能強化卡片信息；
圖11 詳細⻚頭部優化前後對比
舊版頁面的户型模塊與樣板間信息呈現位置不同，導致經紀人的閲讀割裂感很強，因此在新版設計中，對户型信息做了功能比重的協調處理。
基於熟盤或講盤特點，經紀人及客户對於户型圖的需求較高，因此在視覺上擴大其佔比，強調一眼定位户型模塊，同時集合三種功能，使卡片結構更加緊密，讓經紀人在有限的空間內能夠快速找到對應功能，提升整體的閲讀及操作效率。
圖12户型功能優化前後對比
2）色彩定位，視覺抓取
由於人們的視覺更容易受到更大面積的影響，所以利用色彩差異化，對經紀人最為關注的賣點及激勵信息進行了色彩輔助突出，通過放大視覺對比，減輕經紀人的閲讀壓力、從而達到有效快速聚焦的目的。
首先樓盤賣點是輔助新手經紀人作業的核心信息，在特定場景下需要第一時間幫助決策和溝通，因此頭部以大面積藍色背景做襯托，在視覺上輔助經紀人快速定位，並與基礎信息進行了區域分割，在視覺上更聚焦於核心話術，便於更快找到且即時表達。
其次新房經紀人賦予激勵和規則的瞭解訴求比較大，需要實時關注政策及佣金激勵等變化情況，此類信息也是最能刺激經紀人後期的作業效果，所以在設計上做了較為誇張的處理。卡片採用對視覺搶眼的紅色背景，輔助“喇叭”插畫形式襯托內容，加深經紀人對於公告信息的認知和記憶。
圖13 色彩輔助效果圖
整體從屏效層面來説，頭部利用了色彩差異劃分了信息組，能夠保證在首屏快速聚焦到詳情⻚最核心的三塊信息，比舊版⻚面大大提升了信息觸達的效率。
2. 認知理解線索此次改版出發點是讓經紀人們能夠做到“傻瓜式閲讀”，儘可能降低其認知理解成本。我們可排列文本邏輯順序，明確引導路徑，從而形成有效焦點的內容組，讓用户輕負擔地找到有用信息。
圖14 “傻瓜式”閲讀策略
3）貼近用户，彌補斷層
若想讓用户感到好用，設計的核心還是要了解用户當下目標，並去不斷貼近其工作路徑及閲讀習慣，站在對方視角去感知頁面呈現的效果是否達到目的，拉齊心智彌補認知斷層，防止以自身視角做判斷。
4）給予規律，優化結構
根據線性瀏覽習慣，盤源基礎信息的呈現需要保證服務者的講盤順序及閲讀邏輯，在新版設計中，對有邏輯關係的信息產生聯繫，給予規律性，保證經紀人的理解轉化。
我們基於理解順序及習慣，可對應表達價格、盤源屬性及標籤的親疏關係，通過緊密度讓用户感知到信息組的規律。
例如，盤源基礎卡片是要引導經紀人先關注盤源的相關價格，因此價格關聯的信息間距更緊密，其次是用途、面積、位置等屬性相關，最後利用標籤概括總結樓盤特性，再次強調整體盤源特點，從而由淺至深的強化用户認知和記憶。
此次改版的視覺側重點是將信息差異放大，打造一定的記憶點，使得經紀人在進入詳情頁時，可不仔細查看信息，即可大致定位模塊內容，從而進行快速瀏覽，提升整體的信息閲讀效率。
在這個過程中，不僅需要對業務場景下經紀人的作業邏輯進行把控，合理的梳理信息關係以及具有良好的表達形式，同時更多的是需要平衡自身感知與用户感知，明確目標用户的感知顆粒度大小，以對方視角有側重性的強化信息，這樣才能提升服務體驗。
五、結語上述改版方案是從信息閲讀效率提升角度的一次嘗試，但這僅是經紀人對於房源功能的基礎訴求。隨着新房業務打法的逐步精細，詳情頁不會僅僅承載房源基礎信息，也將是越來越多元化信息的承載體，比如案場直播、樓盤解讀、周邊二手房數據、房客匹配推薦等等。
無論是什麼形態的信息，其最終目標都是：在幫助經紀人更好地理解盤源信息的基礎上，促進盤源的轉化（分享和報備）。
希望此次改版成為新房房源詳情頁變好的開始，在日後的持續迭代中逐步成為新房經紀人的房源作業利器，我們會繼續努力，敬請期待。
作者：晨曉，胡月；公眾號：貝殼KEDC
本文由 @貝殼KEDC原創發佈於人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基於 CC0 協議