如何做好詳情頁改版?來看58的實戰(zhàn)案例
隨著58APP整體體驗升級,又趕上7月份超職季活動的契機,我們展開了招聘詳情頁的改版升級,期望打造一個更年輕,更有溫度的招聘詳情頁,給用戶煥然一新的視覺感知,同時也為求職者提供更好的使用體驗。
接下來會從設(shè)計流程,設(shè)計思路,和總結(jié)思考三個方面來講講我們這次的改版故事:
從研究到設(shè)計——發(fā)現(xiàn)問題,解決問題。
從設(shè)計研究到設(shè)計輸出,我們分兩階段進行:
STAGE1/研究探索——將業(yè)務(wù)目標(biāo)轉(zhuǎn)化為設(shè)計目標(biāo)
項目初期,我們通過體驗走查,用戶研究,數(shù)據(jù)分析,競品分析的形式,發(fā)現(xiàn)當(dāng)前存在三個主要體驗問題:頁面一致性低,查找信息效率低,用戶信任度低。
為了優(yōu)化這些問題,我們將體驗優(yōu)化的業(yè)務(wù)目標(biāo)細化,確定了我們的兩個主要設(shè)計目標(biāo):
- 優(yōu)化信息結(jié)構(gòu),提高頁面一致性和閱讀效率;
- 設(shè)計「情境感」,增強頁面情感體驗。
STAGE2/設(shè)計產(chǎn)出——先發(fā)散,再聚焦
明確了設(shè)計目標(biāo)后,我們開始了方案設(shè)計,因為此次改版更偏重于體驗層面,在設(shè)計上有一定的主導(dǎo)權(quán),同時也希望能產(chǎn)出更多的創(chuàng)意,在設(shè)計流程上,我們也突破常規(guī),嘗試采用「合力設(shè)計」的形式。
從前期調(diào)研分析到最后產(chǎn)出方案,交互與視覺同學(xué)合力配合。一方面更高效快速產(chǎn)出完整方案,一方面也通過合作的方式激發(fā)了更多創(chuàng)新的想法。
從「信息高效獲取」到「增強情感連接」
「信息重組」—— 提升頁面一致性,查找效率
在前期研究的過程中我們發(fā)現(xiàn),詳情頁作為連接企業(yè)與求職者的信息傳達頁面,主要價值是幫求職者更方便快捷地查詢職位信息、與招聘方進行連接,這也是用戶使用的核心場景。
針對于信息層級不夠清晰,標(biāo)簽類目多不易理解,用戶關(guān)注信息位置偏低的問題,我們的解決思路主要是信息精簡和重組。
首先,我們將職位信息/發(fā)布人信息/職位詳情/公司信息等模塊重新分類,提高重要信息的優(yōu)先層級,按照用戶對信息關(guān)注優(yōu)先級排序,提高閱讀查找效率。
另外,標(biāo)簽類目多樣式不一致,造成用戶不易理解,導(dǎo)致混亂。我們將不同類型的標(biāo)簽與重組后的信息模塊進行融合,同時在視覺風(fēng)格上進行精簡,提升一致性。
「設(shè)計情境感」——增強頁面的情感體驗
但是如何在清晰高效展示信息、輔助決策的同時,滿足用戶的情感訴求,讓詳情頁更有溫度,是更值得我們?nèi)ニ伎嫉慕嵌取?/p>
Step 1.情境打造
什么是情境感呢?我們將情境感拆分為場景+人物+情感的的結(jié)合。
在我們的情境中,人物就是求職者和公司hr,場景就是求職/找工作的場景。
Step 2.情感設(shè)計
圍繞著我們營造的找工作情境,根據(jù)用戶找工作時的心理狀態(tài),我們主要從參與感和信任感兩個方面來滿足用戶的情感體驗。
參與感:設(shè)計瀏覽動線,與頁面有互動
我們在詳情頁中為用戶劃定一個有情境感的瀏覽動線,從「用戶主動查找」到「引導(dǎo)用戶參與其中」進行瀏覽。瀏覽動線如下:
大概看看主要信息——hr展開講解,有問題隨時可聊——感受企業(yè)環(huán)境氛圍——查看自己的競爭力——感覺不合適推薦更多。希望增強用戶與頁面的互動性。
信任感:保障標(biāo)識,舉報信息
同樣在之前調(diào)研中,我們發(fā)現(xiàn)信任感在用戶查看職位詳情頁的體驗中也占據(jù)重要地位,職位信息真實性是用戶關(guān)注的重點,也是對用戶求職前期的重要保障。
在無法控制信息質(zhì)量的基礎(chǔ)上,如何才能通過設(shè)計提高信任感?我們從兩個方面進行了嘗試,一是將保障標(biāo)簽轉(zhuǎn)化為信息的一部分,減弱標(biāo)簽感;二是將舉報信息和風(fēng)險提示整合為一個完整模塊露出,給用戶固定舉報入口,嘗試提升用戶信任感。
Step 3.情境延伸——差異化情境
在滿足用戶的同時,為了滿足業(yè)務(wù)的訴求,針對于運營和特殊企業(yè)的定制化需求,我們將情境感進一步延伸,進行差異化情境的設(shè)計。
在基本模塊保持一致的基礎(chǔ)上,可對顏色,個別模塊內(nèi)容及順序進行適配。例如超職季一類的大型運營活動,我們提供頭部/職位詳情模塊/公司信息模塊的靈活配置能力,提升運營承載能力。
隨著上線走查的結(jié)束,詳情頁項目告一段落,我們也對這次改版進行了復(fù)盤總結(jié),希望能沉淀下來一些經(jīng)驗和方法,為之后的改版設(shè)計積累值得參考的內(nèi)容。
1. 滿足業(yè)務(wù)訴求的基礎(chǔ)上,量化設(shè)計目標(biāo)
在前期更深入了解項目(包括業(yè)務(wù)模型、組織模型、運營模型…),將產(chǎn)品目標(biāo)最大程度轉(zhuǎn)化為可實行的設(shè)計目標(biāo),同時兼顧用戶及B/C兩端需求,化繁為簡,尋找設(shè)計結(jié)合點,基于可量化的明確目標(biāo),建立設(shè)計的數(shù)據(jù)評估驗證標(biāo)準(zhǔn)。
2. 提高整體設(shè)計效率,關(guān)注主路徑
關(guān)注主路徑,在設(shè)計之初不在細節(jié)上花費太多時間;確定主風(fēng)格后,交互和UI同學(xué)應(yīng)該從主路徑出發(fā),梳理出分支的各個場景(提示、彈窗、缺省等),相互配合提升整體設(shè)計效率。
3. 提前溝通可行性,推動設(shè)計成果落地
提前一步,設(shè)計稿做完之前或者做之初就和開發(fā)溝通一輪可行性,在設(shè)計之初先去了解產(chǎn)品的底層邏輯,以避免出現(xiàn)設(shè)計方案同現(xiàn)有邏輯相悖而導(dǎo)致延期或被砍的風(fēng)險。
有些功能點雖然因為種種原因可能無法成功推動改進,但是換個角度看,這也為之后的改版儲備了更多的方案。
設(shè)計改版雖然會一次又一次的來,但是依然是件又有意思的事情,希望大家在設(shè)計改版的道路上不斷有更新更好的想法
聲明:免責(zé)聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻自行上傳,本網(wǎng)站不擁有所有權(quán),也不承認相關(guān)法律責(zé)任。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容,請發(fā)
送郵件至:operations@xinnet.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,本站將立刻刪除涉嫌侵權(quán)內(nèi)容。本站原創(chuàng)內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時
需注明出處:新網(wǎng)idc知識百科