眾所周知，鏈家在二手房業(yè)務(wù)中深耕多年，無(wú)論是線下服務(wù)體系和線上產(chǎn)品工具都處于行業(yè)內(nèi)頭部水平。但相較于二手業(yè)務(wù)，新房業(yè)務(wù)的整體發(fā)展還存在較大差距，部分業(yè)務(wù)流程仍處于線上化建設(shè)中。
聚焦到經(jīng)紀(jì)人的作業(yè)工具來(lái)看，二手和新房的產(chǎn)品使用體驗(yàn)差異也很大，其中房源模塊的問(wèn)題尤為突出。如果二手房源產(chǎn)品體驗(yàn)是80分，那新房可能只有20分。而房源是新房經(jīng)紀(jì)人最重要的作業(yè)模塊，在產(chǎn)品滿意度貢獻(xiàn)權(quán)重最高。但滿意度偏低，因此其體驗(yàn)問(wèn)題亟待解決。
圖1 節(jié)選自《2021H1新房經(jīng)紀(jì)人滿意度調(diào)研報(bào)告》
1.改版契機(jī)：
新房信息質(zhì)量正穩(wěn)步提升
很長(zhǎng)一段時(shí)間以來(lái)，新房房源詳情頁(yè)是被“棄用”的，大多數(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)諸多問(wèn)題，這正是新房房源詳情頁(yè)重振旗鼓的最好契機(jī)。
2.產(chǎn)品價(jià)值：
促進(jìn)新房信息線上化正循環(huán)
作為新房信息線上化的其中一環(huán)，新房房源詳情頁(yè)起著信息呈現(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)。
3.現(xiàn)狀問(wèn)題：
欠缺規(guī)劃，信息可讀性差
改版前，新房詳情頁(yè)繼承著二手房詳情頁(yè)的頁(yè)面結(jié)構(gòu)，但由于業(yè)務(wù)場(chǎng)景不同，當(dāng)前信息組織方式并不適合新房經(jīng)紀(jì)人的作業(yè)場(chǎng)景。另外近一年內(nèi)，詳情頁(yè)在沒(méi)有統(tǒng)籌規(guī)劃下，陸續(xù)接入了“各自為戰(zhàn)”的新內(nèi)容模塊。
新房詳情頁(yè)逐漸出現(xiàn)信息冗余和混亂的問(wèn)題，直接影響了信息的呈現(xiàn)效率和可讀性。比如在新房業(yè)務(wù)中房源圖片一般是效果圖，不能像二手房一樣通過(guò)圖片識(shí)別房源，經(jīng)紀(jì)人表示不會(huì)優(yōu)先關(guān)注圖片，但卻占據(jù)了首屏1/4的空間。
圖3 詳情?頭圖占據(jù)高優(yōu)空間卻無(wú)實(shí)際作用
諸如此類(lèi)的問(wèn)題還有很多，但散點(diǎn)式的解決問(wèn)題可能會(huì)引發(fā)新的問(wèn)題，因此設(shè)計(jì)應(yīng)該重新 回歸起點(diǎn)，從用戶(hù) 使用場(chǎng)景出發(fā)。
二、新房經(jīng)紀(jì)人
真實(shí)的看房流程
通過(guò)訪談經(jīng)紀(jì)人和觀察他們的實(shí)際作業(yè)操作，我們發(fā)現(xiàn)經(jīng)紀(jì)人需要查看房源內(nèi)容的場(chǎng)景可以分為兩種—— 熟悉樓盤(pán)和 回答客戶(hù)問(wèn)詢(xún)，兩種場(chǎng)景下的行為目標(biāo)和對(duì)房源信息的關(guān)注順序有所不同。
圖4 經(jīng)紀(jì)人看房的真實(shí)過(guò)程
在「熟悉樓盤(pán)」的場(chǎng)景下， 經(jīng)紀(jì)人是在自己準(zhǔn)備功課，無(wú)客戶(hù)時(shí)識(shí)別一些好樓盤(pán)來(lái)找客戶(hù)，這一場(chǎng)景下，經(jīng)紀(jì)人會(huì)經(jīng)歷以下四個(gè)步驟：
需要按照經(jīng)紀(jì)人的判斷邏輯展示房源信息，逐漸引導(dǎo)其做成合理判斷。
看房場(chǎng)景2：回答客戶(hù)問(wèn)詢(xún)
與二手房經(jīng)紀(jì)人駐扎在小區(qū)附近不同的是，新房經(jīng)紀(jì)人的客戶(hù)多來(lái)自線上商機(jī)咨詢(xún)，即客戶(hù)在 貝殼APP上看到某個(gè)感興趣的樓盤(pán)后向經(jīng)紀(jì)人發(fā)起咨詢(xún)。經(jīng)紀(jì)人 需要在短時(shí)間內(nèi)的交流給客戶(hù)留下好印象，讓客戶(hù)信任自己，才能進(jìn)一步產(chǎn)生線下看房行為促進(jìn)成交。
而信任的第一來(lái)源便是經(jīng)紀(jì)人對(duì)于客戶(hù)問(wèn)題的快速又專(zhuān)業(yè)的解答。這一場(chǎng)景下，經(jīng)紀(jì)人通常經(jīng)歷3個(gè)步驟：
識(shí)別（樓盤(pán)是不是客戶(hù)感興趣的）
對(duì)樓盤(pán)熟悉度高的經(jīng)紀(jì)人，能夠?qū)⒋蟛糠謽潜P(pán)信息背誦下來(lái)，直接回復(fù)客戶(hù)。但對(duì)于大多數(shù)經(jīng)紀(jì)人來(lái)說(shuō)， 需要先查找到相關(guān)樓盤(pán)的信息。尤其是目前多數(shù)新房經(jīng)紀(jì)人的司齡都時(shí)長(zhǎng)較短，快速查找到信息則對(duì)他們來(lái)說(shuō)十分關(guān)鍵。
三、快速聚焦的
信息閱讀體驗(yàn)
基于以上兩種看房場(chǎng)景，我們可以發(fā)現(xiàn)，經(jīng)紀(jì)人查看房源信息是一個(gè)有規(guī)律的漸進(jìn)式的判斷過(guò)程，而經(jīng)紀(jì)人在其中的心路歷程正是對(duì)詳情頁(yè)改版設(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ì)策略，如下圖所示：
1.頁(yè)面結(jié)構(gòu)重建，
符合經(jīng)紀(jì)人看房流程
新房房源詳情頁(yè)的作用就是幫助經(jīng)紀(jì)人在兩種場(chǎng)景下能夠輕松完成任務(wù)，那么就需要沿著經(jīng)紀(jì)人的心路歷程對(duì)詳情頁(yè)內(nèi)容進(jìn)行更加合理的信息結(jié)構(gòu)設(shè)計(jì)。改版方案中，綜合兩種場(chǎng)景的看房流程，將詳情頁(yè)整體內(nèi)容進(jìn)行梳理歸類(lèi)。在刪除冗余信息后，按照“識(shí)別→吸引→深入→匹配”的順序排列，保證經(jīng)紀(jì)人在自然向下瀏覽時(shí)毫不費(fèi)力地獲取房源信息。這一順序下，“識(shí)別→定位→回復(fù)”也能同時(shí)得到滿足。
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)。比如在了解戶(hù)型信息時(shí)，經(jīng)紀(jì)人通常需要一起看戶(hù)型格局圖、戶(hù)型樣板間，貝殼也提供了靜態(tài)圖、視頻講解和VR三種形式。
但在舊版詳情頁(yè)中，戶(hù)型模塊只能看到戶(hù)型圖，樣板間信息需在頁(yè)面頭圖中查看。當(dāng)經(jīng)紀(jì)人想完整地看幾個(gè)戶(hù)型的格局和樣板間時(shí)，不得不在兩個(gè)位置來(lái)回跳動(dòng)，不僅操作麻煩，也在不停中斷閱讀進(jìn)程。因此改版時(shí)，我們將戶(hù)型相關(guān)的信息都集中在戶(hù)型模塊，經(jīng)紀(jì)人可一次性完整地獲取戶(hù)型信息。
圖7 戶(hù)型信息模塊優(yōu)化前后對(duì)比
在經(jīng)紀(jì)人深入了解樓盤(pán)信息時(shí)，會(huì)涉及到戶(hù)型、樓棟、小區(qū)概況、區(qū)位配套和開(kāi)發(fā)商/物業(yè)共五個(gè)維度的信息。在舊版詳情頁(yè)中，小區(qū)概況信息放在了二級(jí)頁(yè)面且入口在頁(yè)面頭部位置，而戶(hù)型等其他信息則位于頁(yè)面中下部。這種結(jié)構(gòu)給經(jīng)紀(jì)人帶來(lái)一定困擾，有的經(jīng)紀(jì)人以為壓根沒(méi)有小區(qū)概況信息，知道入口的經(jīng)紀(jì)人則需要在中途切換位置。因此改版方案中，我們按照真實(shí)物理空間中從小到大的順序，將戶(hù)型、樓棟、小區(qū)概況、區(qū)位配套依次排列，即便經(jīng)紀(jì)人只關(guān)注某幾個(gè)模塊信息，也不會(huì)迷失于找入口。
圖8 樓盤(pán)詳細(xì)信息優(yōu)化前后對(duì)比
3.縮短路徑，
實(shí)現(xiàn)信息快速觸達(dá)
在完成結(jié)構(gòu)和單個(gè)模塊的內(nèi)容閱讀體驗(yàn)優(yōu)化后，我們發(fā)現(xiàn)了另一問(wèn)題：新房房源的信息體量很大，為了讓經(jīng)紀(jì)人在一級(jí)頁(yè)面能夠獲得核心完整的信息，頁(yè)面高度已經(jīng)達(dá)到5屏。而在「回答客戶(hù)問(wèn)詢(xún)」場(chǎng)景下，經(jīng)紀(jì)人則需要快速查找到某個(gè)位置靠后的模塊信息，那么如何解決這個(gè)問(wèn)題呢？舊版中有常規(guī)的模塊定位導(dǎo)航，但問(wèn)題是該導(dǎo)航無(wú)法在首屏暴露，經(jīng)紀(jì)人需要上滑頁(yè)面再左滑Tab導(dǎo)航找到對(duì)應(yīng)模塊內(nèi)容。在需要即刻回復(fù)客戶(hù)時(shí)，這種方式肯定是不夠快速的。
于是，我們便增加了快捷導(dǎo)航，它固定在可見(jiàn)屏幕的右側(cè)，經(jīng)紀(jì)人可一鍵定位至模塊位置。目前快捷導(dǎo)航呈現(xiàn)的4個(gè)入口也是調(diào)研經(jīng)紀(jì)人后挑選出的高頻使用模塊，同時(shí)這4個(gè)定位點(diǎn)也基本能夠均分整體頁(yè)面，即便想看其他模塊，也能輔助快速定位。
圖9 詳情?導(dǎo)航優(yōu)化前后對(duì)比
除了在整體結(jié)構(gòu)上縮短觸達(dá)路徑，在單個(gè)模塊的內(nèi)容查看上也做了細(xì)節(jié)交互調(diào)整。比如作業(yè)規(guī)則模塊細(xì)分了6個(gè)子分類(lèi)，舊版方案是需要橫滑查看的Tab導(dǎo)航，經(jīng)紀(jì)人反饋不知道可以橫滑，甚至有人不知道可以點(diǎn)擊切換分類(lèi)。新版方案則優(yōu)化成了標(biāo)簽導(dǎo)航并將分類(lèi)全部展示，足夠直接。
圖10 客戶(hù)規(guī)則分類(lèi)優(yōu)化前后對(duì)比
盤(pán)源詳情頁(yè)作為B端新房信息承載最重要的頁(yè)面，體量大且繁雜，當(dāng)海量?jī)?nèi)容如決堤般襲來(lái)時(shí)，信息被割裂的更加碎片化，經(jīng)紀(jì)人往往會(huì)感到失焦，從而引起心理抵觸。
而詳情頁(yè)面向90%為司齡時(shí)長(zhǎng)較短的經(jīng)紀(jì)人，處在業(yè)務(wù)熟悉階段居多，會(huì)停留較長(zhǎng)時(shí)間查找信息，導(dǎo)致講盤(pán)或熟盤(pán)的過(guò)程體驗(yàn)感降低。因此，如何在短時(shí)間內(nèi)引導(dǎo)經(jīng)紀(jì)人快速觸達(dá)到有用的“線索”，降低經(jīng)紀(jì)人的信息理解成本，找到記憶打點(diǎn)的形式則顯得尤為重要。詳情頁(yè)改版的核心目的在于打造快速聚焦的閱讀體驗(yàn)，提升新房信息線上化的服務(wù)體驗(yàn)。根據(jù)產(chǎn)品定位及改版目標(biāo)，我們對(duì)盤(pán)源工具中高價(jià)值信息進(jìn)行強(qiáng)化感知，凸顯視覺(jué)重點(diǎn)，弱化次要信息，在吸引經(jīng)紀(jì)人快速定位的同時(shí)，盡可能降低頁(yè)面其余元素的干擾。因此提煉了以下“顯著線索”：這里我們以萊斯托夫效應(yīng)為設(shè)計(jì)的切入點(diǎn)-什么是來(lái)萊斯托夫效應(yīng)？意指在同質(zhì)類(lèi)材料中具有差異化表現(xiàn)，視覺(jué)突出便于記憶，實(shí)際上說(shuō)明了材料的特獨(dú)性對(duì)大腦處理信息時(shí)起到一定作用。
例如詳情頁(yè)是一座山，我們可以通過(guò)“峰頂”和“谷底”的對(duì)比來(lái)抓取眼球，同等于用夸張或強(qiáng)化的形式去吸引注意力，直觀的幫助經(jīng)紀(jì)人明確焦點(diǎn)信息是什么，從而降低其腦力資源的消耗。如何聚焦信息？首先需要對(duì)盤(pán)源關(guān)鍵信息進(jìn)行有效的聚類(lèi)整合，其次無(wú)限貼合業(yè)務(wù)場(chǎng)景，獲取不同階段下經(jīng)紀(jì)人的關(guān)注點(diǎn)及訴求，再以合適的差異化表現(xiàn)形式配合信息節(jié)奏，優(yōu)化整體信息的透?jìng)髀窂健?/section>人的大腦擅長(zhǎng)處理具有區(qū)塊感的內(nèi)容，塊狀信息能夠快速抓住用戶(hù)焦點(diǎn)，我們可以把盤(pán)源詳情頁(yè)拆解成顆粒度不一的各類(lèi)模塊，再進(jìn)行歸納收攏。對(duì)比舊版詳情頁(yè)中的盤(pán)源基礎(chǔ)信息結(jié)構(gòu)散亂，對(duì)經(jīng)紀(jì)人的閱讀及認(rèn)知造成一定負(fù)擔(dān)，所以在設(shè)計(jì)中，我們把頁(yè)面拆解成樓盤(pán)賣(mài)點(diǎn)、基礎(chǔ)信息以及作業(yè)內(nèi)容三大結(jié)構(gòu)，在頭部信息處理上，將盤(pán)源賣(mài)點(diǎn)與基礎(chǔ)信息利用Z軸空間關(guān)系劃分了層級(jí)，重色塊與白卡片互相襯托，形成強(qiáng)烈對(duì)比，在保證賣(mài)點(diǎn)凸顯的同時(shí)也能強(qiáng)化卡片信息；
圖11 詳細(xì)?頭部?jī)?yōu)化前后對(duì)比
舊版頁(yè)面的戶(hù)型模塊與樣板間信息呈現(xiàn)位置不同，導(dǎo)致經(jīng)紀(jì)人的閱讀割裂感很強(qiáng)，因此在新版設(shè)計(jì)中，對(duì)戶(hù)型信息做了功能比重的協(xié)調(diào)處理。基于熟盤(pán)或講盤(pán)特點(diǎn)，經(jīng)紀(jì)人及客戶(hù)對(duì)于戶(hù)型圖的需求較高，因此在視覺(jué)上擴(kuò)大其占比，強(qiáng)調(diào)一眼定位戶(hù)型模塊，同時(shí)集合三種功能，使卡片結(jié)構(gòu)更加緊密，讓經(jīng)紀(jì)人在有限的空間內(nèi)能夠快速找到對(duì)應(yīng)功能，提升整體的閱讀及操作效率。
圖12 戶(hù)型功能優(yōu)化前后對(duì)比
由于人們的視覺(jué)更容易受到更大面積的影響，所以利用色彩差異化，對(duì)經(jīng)紀(jì)人最為關(guān)注的賣(mài)點(diǎn)及激勵(lì)信息進(jìn)行了色彩輔助突出，通過(guò)放大視覺(jué)對(duì)比，減輕經(jīng)紀(jì)人的閱讀壓力、從而達(dá)到有效快速聚焦的目的。首先樓盤(pán)賣(mài)點(diǎn)是輔助新手經(jīng)紀(jì)人作業(yè)的核心信息，在特定場(chǎng)景下需要第一時(shí)間幫助決策和溝通，因此頭部以大面積藍(lán)色背景做襯托，在視覺(jué)上輔助經(jīng)紀(jì)人快速定位，并與基礎(chǔ)信息進(jìn)行了區(qū)域分割，在視覺(jué)上更聚焦于核心話術(shù)，便于更快找到且即時(shí)表達(dá)。其次新房經(jīng)紀(jì)人賦予激勵(lì)和規(guī)則的了解訴求比較大，需要實(shí)時(shí)關(guān)注政策及傭金激勵(lì)等變化情況，此類(lèi)信息也是最能刺激經(jīng)紀(jì)人后期的作業(yè)效果，所以在設(shè)計(jì)上做了較為夸張的處理。卡片采用對(duì)視覺(jué)搶眼的紅色背景，輔助“喇叭”插畫(huà)形式襯托內(nèi)容，加深經(jīng)紀(jì)人對(duì)于公告信息的認(rèn)知和記憶。
整體從屏效層面來(lái)說(shuō)，頭部利用了色彩差異劃分了信息組，能夠保證在首屏快速聚焦到詳情?最核心的三塊信息，比舊版?面大大提升了信息觸達(dá)的效率。此次改版出發(fā)點(diǎn)是讓經(jīng)紀(jì)人們能夠做到“傻瓜式閱讀”，盡可能降低其認(rèn)知理解成本。我們可排列文本邏輯順序，明確引導(dǎo)路徑，從而形成有效焦點(diǎn)的內(nèi)容組，讓用戶(hù)輕負(fù)擔(dān)地找到有用信息。
若想讓用戶(hù)感到好用，設(shè)計(jì)的核心還是要了解用戶(hù)當(dāng)下目標(biāo)，并去不斷貼近其工作路徑及閱讀習(xí)慣，站在對(duì)方視角去感知頁(yè)面呈現(xiàn)的效果是否達(dá)到目的，拉齊心智彌補(bǔ)認(rèn)知斷層，防止以自身視角做判斷。（2）給予規(guī)律，優(yōu)化結(jié)構(gòu)根據(jù)線性瀏覽習(xí)慣，盤(pán)源基礎(chǔ)信息的呈現(xiàn)需要保證服務(wù)者的講盤(pán)順序及閱讀邏輯，在新版設(shè)計(jì)中，對(duì)有邏輯關(guān)系的信息產(chǎn)生聯(lián)系，給予規(guī)律性，保證經(jīng)紀(jì)人的理解轉(zhuǎn)化。我們基于理解順序及習(xí)慣，可對(duì)應(yīng)表達(dá)價(jià)格、盤(pán)源屬性及標(biāo)簽的親疏關(guān)系，通過(guò)緊密度讓用戶(hù)感知到信息組的規(guī)律。例如，盤(pán)源基礎(chǔ)卡片是要引導(dǎo)經(jīng)紀(jì)人先關(guān)注盤(pán)源的相關(guān)價(jià)格，因此價(jià)格關(guān)聯(lián)的信息間距更緊密，其次是用途、面積、位置等屬性相關(guān)，最后利用標(biāo)簽概括總結(jié)樓盤(pán)特性，再次強(qiáng)調(diào)整體盤(pán)源特點(diǎn)，從而由淺至深的強(qiáng)化用戶(hù)認(rèn)知和記憶。此次改版的視覺(jué)側(cè)重點(diǎn)是將信息差異放大，打造一定的記憶點(diǎn)，使得經(jīng)紀(jì)人在進(jìn)入詳情頁(yè)時(shí)，可不仔細(xì)查看信息，即可大致定位模塊內(nèi)容，從而進(jìn)行快速瀏覽，提升整體的信息閱讀效率。在這個(gè)過(guò)程中，不僅需要對(duì)業(yè)務(wù)場(chǎng)景下經(jīng)紀(jì)人的作業(yè)邏輯進(jìn)行把控，合理的梳理信息關(guān)系以及具有良好的表達(dá)形式，同時(shí)更多的是需要平衡自身感知與用戶(hù)感知，明確目標(biāo)用戶(hù)的感知顆粒度大小，以對(duì)方視角有側(cè)重性的強(qiáng)化信息，這樣才能提升服務(wù)體驗(yàn)。
