編輯導(dǎo)語：住房問題一直以來是困擾當(dāng)代年輕人的一大問題，信息時(shí)代，住房信息也逐步實(shí)現(xiàn)了現(xiàn)代化。本篇文章從用戶場(chǎng)景出發(fā)，結(jié)合新房信息線上化這一熱點(diǎn)深度剖析，一起來看看吧！

眾所周知，鏈家在二手房業(yè)務(wù)中深耕多年，無論是線下服務(wù)體系和線上產(chǎn)品工具都處于行業(yè)內(nèi)頭部水平。但相較于二手業(yè)務(wù)，新房業(yè)務(wù)的整體發(fā)展還存在較大差距，部分業(yè)務(wù)流程仍處于線上化建設(shè)中。

聚焦到經(jīng)紀(jì)人的作業(yè)工具來看，二手和新房的產(chǎn)品使用體驗(yàn)差異也很大，其中房源模塊的問題尤為突出。如果二手房源產(chǎn)品體驗(yàn)是80分，那新房可能只有20分。而房源是新房經(jīng)紀(jì)人最重要的作業(yè)模塊，在產(chǎn)品滿意度貢獻(xiàn)權(quán)重最高。但滿意度偏低，因此其體驗(yàn)問題亟待解決。

圖1 節(jié)選自《2021H1新房經(jīng)紀(jì)人滿意度調(diào)研報(bào)告》

一、為什么改版

1. 改版契機(jī)：新房信息質(zhì)量正穩(wěn)步提升

很長一段時(shí)間以來，新房房源詳情頁是被“棄用”的，大多數(shù)經(jīng)紀(jì)人使用第三方工具獲取房源信息。最底層原因是內(nèi)部工具上房源信息質(zhì)量差（不全不準(zhǔn)）。而質(zhì)量差則是由于之前在新房基礎(chǔ)建設(shè)人力不足、產(chǎn)品迭代慢，不能滿足城市業(yè)務(wù)發(fā)展需求。

城市為保證各自發(fā)展，使用了更靈活的第三方工具進(jìn)行新房信息傳遞。2021年上半年隨著項(xiàng)目「新房基礎(chǔ)信息建設(shè)」的進(jìn)行，新房信息質(zhì)量正穩(wěn)步提升，且城市也在使用第三方工具中發(fā)現(xiàn)諸多問題，這正是新房房源詳情頁重振旗鼓的最好契機(jī)。

2. 產(chǎn)品價(jià)值：促進(jìn)新房信息線上化正循環(huán)

作為新房信息線上化的其中一環(huán)，新房房源詳情頁起著信息呈現(xiàn)的作用。好的呈現(xiàn)方式能夠幫助經(jīng)紀(jì)人更好地消費(fèi)信息，讓經(jīng)紀(jì)人認(rèn)可平臺(tái)產(chǎn)品和服務(wù)，同時(shí)經(jīng)紀(jì)人的正向反饋也能激勵(lì)生產(chǎn)新房信息的駐場(chǎng)們更有動(dòng)力去維護(hù)信息，從而促進(jìn)新房信息線上化的正循環(huán)。

圖2 新房信息線上化流程

3. 現(xiàn)狀問題：欠缺規(guī)劃，信息可讀性差

改版前，新房詳情頁繼承著二手房詳情頁的頁面結(jié)構(gòu)，但由于業(yè)務(wù)場(chǎng)景不同，當(dāng)前信息組織方式并不適合新房經(jīng)紀(jì)人的作業(yè)場(chǎng)景。另外近一年內(nèi)，詳情頁在沒有統(tǒng)籌規(guī)劃下，陸續(xù)接入了“各自為戰(zhàn)”的新內(nèi)容模塊。

新房詳情頁逐漸出現(xiàn)信息冗余和混亂的問題，直接影響了信息的呈現(xiàn)效率和可讀性。比如在新房業(yè)務(wù)中房源圖片一般是效果圖，不能像二手房一樣通過圖片識(shí)別房源，經(jīng)紀(jì)人表示不會(huì)優(yōu)先關(guān)注圖片，但卻占據(jù)了首屏1/4的空間。

圖3 詳情?頭圖占據(jù)高優(yōu)空間卻無實(shí)際作用

諸如此類的問題還有很多，但散點(diǎn)式的解決問題可能會(huì)引發(fā)新的問題，因此設(shè)計(jì)應(yīng)該重新回歸起點(diǎn)，從用戶使用場(chǎng)景出發(fā)。

二、新房經(jīng)紀(jì)人真實(shí)的看房流程

通過訪談經(jīng)紀(jì)人和觀察他們的實(shí)際作業(yè)操作，我們發(fā)現(xiàn)經(jīng)紀(jì)人需要查看房源內(nèi)容的場(chǎng)景可以分為兩種——熟悉樓盤和回答客戶問詢，兩種場(chǎng)景下的行為目標(biāo)和對(duì)房源信息的關(guān)注順序有所不同。

圖4 經(jīng)紀(jì)人看房的真實(shí)過程

1. 看房場(chǎng)景1：熟悉樓盤

在「熟悉樓盤」的場(chǎng)景下，經(jīng)紀(jì)人是在自己準(zhǔn)備功課，無客戶時(shí)識(shí)別一些好樓盤來找客戶，這一場(chǎng)景下，經(jīng)紀(jì)人會(huì)經(jīng)歷以下四個(gè)步驟：識(shí)別（樓盤是什么）、吸引（樓盤亮點(diǎn)）、深入（了解房源細(xì)節(jié)）、匹配（房與客）。需要按照經(jīng)紀(jì)人的判斷邏輯展示房源信息，逐漸引導(dǎo)其做成合理判斷。

2. 看房場(chǎng)景2：回答客戶問詢

與二手房經(jīng)紀(jì)人駐扎在小區(qū)附近不同的是，新房經(jīng)紀(jì)人的客戶多來自線上商機(jī)咨詢，即客戶在貝殼APP上看到某個(gè)感興趣的樓盤后向經(jīng)紀(jì)人發(fā)起咨詢。經(jīng)紀(jì)人需要在短時(shí)間內(nèi)的交流給客戶留下好印象，讓客戶信任自己，才能進(jìn)一步產(chǎn)生線下看房行為促進(jìn)成交。

而信任的第一來源便是經(jīng)紀(jì)人對(duì)于客戶問題的快速又專業(yè)的解答。這一場(chǎng)景下，經(jīng)紀(jì)人通常經(jīng)歷3個(gè)步驟：識(shí)別（樓盤是不是客戶感興趣的）、定位（查找客戶問題的答案）、回復(fù)（解答客戶問題）。對(duì)樓盤熟悉度高的經(jīng)紀(jì)人，能夠?qū)⒋蟛糠謽潜P信息背誦下來，直接回復(fù)客戶。

但對(duì)于大多數(shù)經(jīng)紀(jì)人來說，需要先查找到相關(guān)樓盤的信息。尤其是目前多數(shù)新房經(jīng)紀(jì)人的司齡都時(shí)長較短，快速查找到信息則對(duì)他們來說十分關(guān)鍵。

三、快速聚焦的信息閱讀體驗(yàn)

基于以上兩種看房場(chǎng)景，我們可以發(fā)現(xiàn)，經(jīng)紀(jì)人查看房源信息是一個(gè)有規(guī)律的漸進(jìn)式的判斷過程，而經(jīng)紀(jì)人在其中的心路歷程正是對(duì)詳情頁改版設(shè)計(jì)最根本的依據(jù)。而且我們也發(fā)現(xiàn)，目前經(jīng)紀(jì)人所使用的第三方工具內(nèi)容的組織方式也基本符合上述場(chǎng)景。

綜合前期調(diào)研的所有結(jié)論，包括對(duì)經(jīng)紀(jì)人使用反饋的收集、第三方工具內(nèi)容的分析和經(jīng)紀(jì)人看房流程的梳理，最終確定了本次改版的設(shè)計(jì)目標(biāo)和設(shè)計(jì)策略，如下圖所示：

圖5 改版目標(biāo)及策略

1. 頁面結(jié)構(gòu)重建，符合經(jīng)紀(jì)人看房流程

新房房源詳情頁的作用就是幫助經(jīng)紀(jì)人在兩種場(chǎng)景下能夠輕松完成任務(wù)，那么就需要沿著經(jīng)紀(jì)人的心路歷程對(duì)詳情頁內(nèi)容進(jìn)行更加合理的信息結(jié)構(gòu)設(shè)計(jì)。

改版方案中，綜合兩種場(chǎng)景的看房流程，將詳情頁整體內(nèi)容進(jìn)行梳理歸類。在刪除冗余信息后，按照“識(shí)別→吸引→深入→匹配”的順序排列，保證經(jīng)紀(jì)人在自然向下瀏覽時(shí)毫不費(fèi)力地獲取房源信息。這一順序下，“識(shí)別→定位→回復(fù)”也能同時(shí)得到滿足。

圖6 新版詳情頁結(jié)構(gòu)

2. 整合強(qiáng)關(guān)聯(lián)信息，減少閱讀跳點(diǎn)

在前期調(diào)研中發(fā)現(xiàn)一個(gè)痛點(diǎn)：明明是關(guān)系緊密需要一起閱讀的信息卻分散在多處位置，造成經(jīng)紀(jì)人閱讀時(shí)出現(xiàn)跳點(diǎn)和斷點(diǎn)。

比如在了解戶型信息時(shí)，經(jīng)紀(jì)人通常需要一起看戶型格局圖、戶型樣板間，貝殼也提供了靜態(tài)圖、視頻講解和VR三種形式。但在舊版詳情頁中，戶型模塊只能看到戶型圖，樣板間信息需在頁面頭圖中查看。當(dāng)經(jīng)紀(jì)人想完整地看幾個(gè)戶型的格局和樣板間時(shí)，不得不在兩個(gè)位置來回跳動(dòng)，不僅操作麻煩，也在不停中斷閱讀進(jìn)程。

因此改版時(shí)，我們將戶型相關(guān)的信息都集中在戶型模塊，經(jīng)紀(jì)人可一次性完整地獲取戶型信息。

圖7 戶型信息模塊優(yōu)化前后對(duì)比

在經(jīng)紀(jì)人深入了解樓盤信息時(shí)，會(huì)涉及到戶型、樓棟、小區(qū)概況、區(qū)位配套和開發(fā)商/物業(yè)共五個(gè)維度的信息。在舊版詳情頁中，小區(qū)概況信息放在了二級(jí)頁面且入口在頁面頭部位置，而戶型等其他信息則位于頁面中下部。

這種結(jié)構(gòu)給經(jīng)紀(jì)人帶來一定困擾，有的經(jīng)紀(jì)人以為壓根沒有小區(qū)概況信息，知道入口的經(jīng)紀(jì)人則需要在中途切換位置。因此改版方案中，我們按照真實(shí)物理空間中從小到大的順序，將戶型、樓棟、小區(qū)概況、區(qū)位配套依次排列，即便經(jīng)紀(jì)人只關(guān)注某幾個(gè)模塊信息，也不會(huì)迷失于找入口。

圖8 樓盤詳細(xì)信息優(yōu)化前后對(duì)比

3. 縮短路徑，實(shí)現(xiàn)信息快速觸達(dá)

在完成結(jié)構(gòu)和單個(gè)模塊的內(nèi)容閱讀體驗(yàn)優(yōu)化后，我們發(fā)現(xiàn)了另一問題：新房房源的信息體量很大，為了讓經(jīng)紀(jì)人在一級(jí)頁面能夠獲得核心完整的信息，頁面高度已經(jīng)達(dá)到5屏。而在「回答客戶問詢」場(chǎng)景下，經(jīng)紀(jì)人則需要快速查找到某個(gè)位置靠后的模塊信息，那么如何解決這個(gè)問題呢？

舊版中有常規(guī)的模塊定位導(dǎo)航，但問題是該導(dǎo)航無法在首屏暴露，經(jīng)紀(jì)人需要上滑頁面再左滑Tab導(dǎo)航找到對(duì)應(yīng)模塊內(nèi)容。在需要即刻回復(fù)客戶時(shí)，這種方式肯定是不夠快速的。

于是，我們便增加了快捷導(dǎo)航，它固定在可見屏幕的右側(cè)，經(jīng)紀(jì)人可一鍵定位至模塊位置。目前快捷導(dǎo)航呈現(xiàn)的4個(gè)入口也是調(diào)研經(jīng)紀(jì)人后挑選出的高頻使用模塊，同時(shí)這4個(gè)定位點(diǎn)也基本能夠均分整體頁面，即便想看其他模塊，也能輔助快速定位。

圖9 詳情?導(dǎo)航優(yōu)化前后對(duì)比

除了在整體結(jié)構(gòu)上縮短觸達(dá)路徑，在單個(gè)模塊的內(nèi)容查看上也做了細(xì)節(jié)交互調(diào)整。比如作業(yè)規(guī)則模塊細(xì)分了6個(gè)子分類，舊版方案是需要橫滑查看的Tab導(dǎo)航，經(jīng)紀(jì)人反饋不知道可以橫滑，甚至有人不知道可以點(diǎn)擊切換分類。新版方案則優(yōu)化成了標(biāo)簽導(dǎo)航并將分類全部展示，足夠直接。

圖10 客戶規(guī)則分類優(yōu)化前后對(duì)比

四、能夠快速捕捉的“顯著線索”

盤源詳情頁作為B端新房信息承載最重要的頁面，體量大且繁雜，當(dāng)海量內(nèi)容如決堤般襲來時(shí)，信息被割裂的更加碎片化，經(jīng)紀(jì)人往往會(huì)感到失焦，從而引起心理抵觸。

而詳情頁面向90%為司齡時(shí)長較短的經(jīng)紀(jì)人，處在業(yè)務(wù)熟悉階段居多，會(huì)停留較長時(shí)間查找信息，導(dǎo)致講盤或熟盤的過程體驗(yàn)感降低。因此，如何在短時(shí)間內(nèi)引導(dǎo)經(jīng)紀(jì)人快速觸達(dá)到有用的“線索”，降低經(jīng)紀(jì)人的信息理解成本，找到記憶打點(diǎn)的形式則顯得尤為重要。

詳情頁改版的核心目的在于打造快速聚焦的閱讀體驗(yàn)，提升新房信息線上化的服務(wù)體驗(yàn)。根據(jù)產(chǎn)品定位及改版目標(biāo)，我們對(duì)盤源工具中高價(jià)值信息進(jìn)行強(qiáng)化感知，凸顯視覺重點(diǎn)，弱化次要信息，在吸引經(jīng)紀(jì)人快速定位的同時(shí)，盡可能降低頁面其余元素的干擾。因此提煉了以下“顯著線索”：

1. 視覺聚焦線索

這里我們以萊斯托夫效應(yīng)為設(shè)計(jì)的切入點(diǎn)。

什么是來萊斯托夫效應(yīng)？意指在同質(zhì)類材料中具有差異化表現(xiàn)，視覺突出便于記憶，實(shí)際上說明了材料的特獨(dú)性對(duì)大腦處理信息時(shí)起到一定作用。

例如詳情頁是一座山，我們可以通過“峰頂”和“谷底”的對(duì)比來抓取眼球，同等于用夸張或強(qiáng)化的形式去吸引注意力，直觀的幫助經(jīng)紀(jì)人明確焦點(diǎn)信息是什么，從而降低其腦力資源的消耗。

如何聚焦信息？首先需要對(duì)盤源關(guān)鍵信息進(jìn)行有效的聚類整合，其次無限貼合業(yè)務(wù)場(chǎng)景，獲取不同階段下經(jīng)紀(jì)人的關(guān)注點(diǎn)及訴求，再以合適的差異化表現(xiàn)形式配合信息節(jié)奏，優(yōu)化整體信息的透?jìng)髀窂健?/p>

1）拆解功能，聚類整合

人的大腦擅長處理具有區(qū)塊感的內(nèi)容，塊狀信息能夠快速抓住用戶焦點(diǎn)，我們可以把盤源詳情頁拆解成顆粒度不一的各類模塊，再進(jìn)行歸納收攏。

對(duì)比舊版詳情頁中的盤源基礎(chǔ)信息結(jié)構(gòu)散亂，對(duì)經(jīng)紀(jì)人的閱讀及認(rèn)知造成一定負(fù)擔(dān)，所以在設(shè)計(jì)中，我們把頁面拆解成樓盤賣點(diǎn)、基礎(chǔ)信息以及作業(yè)內(nèi)容三大結(jié)構(gòu)，在頭部信息處理上，將盤源賣點(diǎn)與基礎(chǔ)信息利用Z軸空間關(guān)系劃分了層級(jí)，重色塊與白卡片互相襯托，形成強(qiáng)烈對(duì)比，在保證賣點(diǎn)凸顯的同時(shí)也能強(qiáng)化卡片信息；

圖11 詳細(xì)?頭部優(yōu)化前后對(duì)比

舊版頁面的戶型模塊與樣板間信息呈現(xiàn)位置不同，導(dǎo)致經(jīng)紀(jì)人的閱讀割裂感很強(qiáng)，因此在新版設(shè)計(jì)中，對(duì)戶型信息做了功能比重的協(xié)調(diào)處理。

基于熟盤或講盤特點(diǎn)，經(jīng)紀(jì)人及客戶對(duì)于戶型圖的需求較高，因此在視覺上擴(kuò)大其占比，強(qiáng)調(diào)一眼定位戶型模塊，同時(shí)集合三種功能，使卡片結(jié)構(gòu)更加緊密，讓經(jīng)紀(jì)人在有限的空間內(nèi)能夠快速找到對(duì)應(yīng)功能，提升整體的閱讀及操作效率。

圖12戶型功能優(yōu)化前后對(duì)比

2）色彩定位，視覺抓取

由于人們的視覺更容易受到更大面積的影響，所以利用色彩差異化，對(duì)經(jīng)紀(jì)人最為關(guān)注的賣點(diǎn)及激勵(lì)信息進(jìn)行了色彩輔助突出，通過放大視覺對(duì)比，減輕經(jīng)紀(jì)人的閱讀壓力、從而達(dá)到有效快速聚焦的目的。

首先樓盤賣點(diǎn)是輔助新手經(jīng)紀(jì)人作業(yè)的核心信息，在特定場(chǎng)景下需要第一時(shí)間幫助決策和溝通，因此頭部以大面積藍(lán)色背景做襯托，在視覺上輔助經(jīng)紀(jì)人快速定位，并與基礎(chǔ)信息進(jìn)行了區(qū)域分割，在視覺上更聚焦于核心話術(shù)，便于更快找到且即時(shí)表達(dá)。

其次新房經(jīng)紀(jì)人賦予激勵(lì)和規(guī)則的了解訴求比較大，需要實(shí)時(shí)關(guān)注政策及傭金激勵(lì)等變化情況，此類信息也是最能刺激經(jīng)紀(jì)人后期的作業(yè)效果，所以在設(shè)計(jì)上做了較為夸張的處理?？ㄆ捎脤?duì)視覺搶眼的紅色背景，輔助“喇叭”插畫形式襯托內(nèi)容，加深經(jīng)紀(jì)人對(duì)于公告信息的認(rèn)知和記憶。

圖13 色彩輔助效果圖

整體從屏效層面來說，頭部利用了色彩差異劃分了信息組，能夠保證在首屏快速聚焦到詳情?最核心的三塊信息，比舊版?面大大提升了信息觸達(dá)的效率。

2. 認(rèn)知理解線索

此次改版出發(fā)點(diǎn)是讓經(jīng)紀(jì)人們能夠做到“傻瓜式閱讀”，盡可能降低其認(rèn)知理解成本。我們可排列文本邏輯順序，明確引導(dǎo)路徑，從而形成有效焦點(diǎn)的內(nèi)容組，讓用戶輕負(fù)擔(dān)地找到有用信息。

圖14 “傻瓜式”閱讀策略

3）貼近用戶，彌補(bǔ)斷層

若想讓用戶感到好用，設(shè)計(jì)的核心還是要了解用戶當(dāng)下目標(biāo)，并去不斷貼近其工作路徑及閱讀習(xí)慣，站在對(duì)方視角去感知頁面呈現(xiàn)的效果是否達(dá)到目的，拉齊心智彌補(bǔ)認(rèn)知斷層，防止以自身視角做判斷。

4）給予規(guī)律，優(yōu)化結(jié)構(gòu)

根據(jù)線性瀏覽習(xí)慣，盤源基礎(chǔ)信息的呈現(xiàn)需要保證服務(wù)者的講盤順序及閱讀邏輯，在新版設(shè)計(jì)中，對(duì)有邏輯關(guān)系的信息產(chǎn)生聯(lián)系，給予規(guī)律性，保證經(jīng)紀(jì)人的理解轉(zhuǎn)化。

我們基于理解順序及習(xí)慣，可對(duì)應(yīng)表達(dá)價(jià)格、盤源屬性及標(biāo)簽的親疏關(guān)系，通過緊密度讓用戶感知到信息組的規(guī)律。

例如，盤源基礎(chǔ)卡片是要引導(dǎo)經(jīng)紀(jì)人先關(guān)注盤源的相關(guān)價(jià)格，因此價(jià)格關(guān)聯(lián)的信息間距更緊密，其次是用途、面積、位置等屬性相關(guān)，最后利用標(biāo)簽概括總結(jié)樓盤特性，再次強(qiáng)調(diào)整體盤源特點(diǎn)，從而由淺至深的強(qiáng)化用戶認(rèn)知和記憶。

此次改版的視覺側(cè)重點(diǎn)是將信息差異放大，打造一定的記憶點(diǎn)，使得經(jīng)紀(jì)人在進(jìn)入詳情頁時(shí)，可不仔細(xì)查看信息，即可大致定位模塊內(nèi)容，從而進(jìn)行快速瀏覽，提升整體的信息閱讀效率。

在這個(gè)過程中，不僅需要對(duì)業(yè)務(wù)場(chǎng)景下經(jīng)紀(jì)人的作業(yè)邏輯進(jìn)行把控，合理的梳理信息關(guān)系以及具有良好的表達(dá)形式，同時(shí)更多的是需要平衡自身感知與用戶感知，明確目標(biāo)用戶的感知顆粒度大小，以對(duì)方視角有側(cè)重性的強(qiáng)化信息，這樣才能提升服務(wù)體驗(yàn)。

五、結(jié)語

上述改版方案是從信息閱讀效率提升角度的一次嘗試，但這僅是經(jīng)紀(jì)人對(duì)于房源功能的基礎(chǔ)訴求。隨著新房業(yè)務(wù)打法的逐步精細(xì)，詳情頁不會(huì)僅僅承載房源基礎(chǔ)信息，也將是越來越多元化信息的承載體，比如案場(chǎng)直播、樓盤解讀、周邊二手房數(shù)據(jù)、房客匹配推薦等等。

無論是什么形態(tài)的信息，其最終目標(biāo)都是：在幫助經(jīng)紀(jì)人更好地理解盤源信息的基礎(chǔ)上，促進(jìn)盤源的轉(zhuǎn)化（分享和報(bào)備）。

希望此次改版成為新房房源詳情頁變好的開始，在日后的持續(xù)迭代中逐步成為新房經(jīng)紀(jì)人的房源作業(yè)利器，我們會(huì)繼續(xù)努力，敬請(qǐng)期待。

作者：晨曉，胡月；公眾號(hào)：貝殼KEDC

本文由 @貝殼KEDC原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于 CC0 協(xié)議