偷聽兩個HR妹子私聊引發的設計Case。
改版背景中華英才網作為白領招聘方面的先驅者, 對建立完備的簡歷庫是很重視的, 而英才的簡歷作為其招聘業務的主要吸引點,
從設計的角度來講, 簡歷的樣式以及使用者體驗是我們需要著重去考慮的, 由於目前B端、C端的簡歷詳情頁樣式是一致的, 且從拓展性上來講, 目前的佈局略顯不足, 基於此, 我們對B端簡歷樣式進行了改版。
舊版b端簡歷詳情頁樣式
舊版問題 頁面配置的問題導致操作區域不利於拓展;簡歷資訊展示以及區分不明確, 內容區文字顏色單一;部分內容展示不合理(如標籤部分, 作為可操作的區域, 卻放在以查看為主的簡歷內容區, 並且位置太過靠後, 容易被忽視)。 用戶及需求分析在改版之前, 我們要明確幾個問題:我們的用戶是誰?用戶的主要訴求是什麼?我們能帶給用戶什麼?改版後希望能夠達成什麼目標, 從而在業務層面和邏輯層面進行分析。
用戶分析
通過對用戶群體的分析和業務需求的瞭解, 我們能夠瞭解到, 由於是面向B端的簡歷詳情頁用戶大多都是企業的HR, 而目前企業HR的主要工作就是為所在企業提供人力資源方面的配給和徵召, 通俗來講, 我們的用戶——企業HR與中華英才網的直接接觸就是去查看各種簡歷, 而通過和部分HR溝通, 我們發現, 目前他們的剛需是在每天大量的查閱簡歷的過程中,
回溯之前一次偶然的親身經歷, 某次在坐地鐵歸家途中, 身邊站著兩位貌似企業HR的妹子, 就在我身邊大吐各大招聘企業的B端簡歷流覽與操作中的槽點, 其中談論最多的一點就是不夠方便快捷, 當企業HR進行招聘任務操作時, 每天要流覽大量的簡歷, 他們希望在一屏內能夠看到更多的資訊, 能夠讓她們在最快的時間內對簡歷做出判斷, 在談論此事的過程中, 他們還不時地發出讚歎和埋怨, 這是一次完全偶然的路人對話, 以此管中窺豹, 讓我更貼近了用戶的需求, 設計上也能直擊用戶的痛點。
設計目標
制定並達成設計目標通過對使用者需求的分析以及舊版的不足, 我們制定出三個設計目標並總結為三個詞:快速、清晰、延展性, 現在具體分析一下這個三個詞。
快速:企業HR在使用過程中能夠快速的查閱一份簡歷中有用的資訊, 並快速完成後續操作;清晰:整體頁面的內容以及功能展示清晰明瞭;延展性:合理分佈內容展示區域, 擴大內容展示以及設計上的可延展性。其實以上這三點都是互相結合缺一不可的。
佈局結構圖對比
通過明確的區塊化來使內容區域更加清晰,頭像及主要個人資訊區域採取左右佈局,比之前採用的上下佈局要節省一些空間,能讓用戶在首屏內看到盡可能更多的內容。簡歷資訊內的各項內容標題用不同顏色的區別來著重突出,使得內容之間的區隔明確。所有內容的標題文字顏色弱於內容的文字顏色(如:求職意向內、教育經歷),著重突出內容,每行內容之間的間距縮小,通過這樣的設計手法來引導HR能夠更快地看到主要內容。
新版B端簡歷詳情頁頭部區域
由於使用者在填寫簡歷時的自由度較高,除必填選項外,其他非必填選項實際的填寫變化會比較大,那麼頁面的佈局將受到較大影響,分清區域以及主次資訊的擺放能在一定程度上降低頁面的跳躍感。
將簡歷操作區域從舊版的始終懸浮在螢幕下方的條狀操作按鈕區,改變為始終懸浮在螢幕右側作為專門的懸浮操作區域,將標籤等對簡歷的操作內容統一集合在一處,便於使用者直接看到與操作,從佈局和使用習慣上來講,這樣也會提高用戶的使用效率,並且使整體頁面操作的可延展性擴大。新增測評報告內容,加入可切換的TAB區便於主體內容的切換和延展。
新版B端簡歷詳情頁_簡歷資訊區域
B端簡歷詳情頁底部區域
結語目前改版還在不斷探索新的思路並進行更深入的用戶分析,當然還存在一定的問題,例如,簡歷內容區域的資訊還可以繼續整合,在用戶簡歷填寫較少時會顯得頁面左重右輕,這些都是需要和產品以及交互同學再次溝通且不斷探索的,B端簡歷詳情頁的改版只是我們不斷探索完善的一小部分;解決痛點是我們一直要堅持的事,期望通過我們不斷的探索和持續優化,讓體驗變得更加便捷,能夠幫助求職者找到心儀的工作,幫助企業找到適合的員工是我們最終的使命。
在此也感謝所有為項目付出的同學們~
作者:周奕鳴。視覺設計師
本文來源於人人都是產品經理合作媒體@58用戶體驗設計中心(微信公眾號@58UXD),作者@ 周奕鳴
題圖來自Pixabay,基於CC0協議
擴大內容展示以及設計上的可延展性。其實以上這三點都是互相結合缺一不可的。
佈局結構圖對比
通過明確的區塊化來使內容區域更加清晰,頭像及主要個人資訊區域採取左右佈局,比之前採用的上下佈局要節省一些空間,能讓用戶在首屏內看到盡可能更多的內容。簡歷資訊內的各項內容標題用不同顏色的區別來著重突出,使得內容之間的區隔明確。所有內容的標題文字顏色弱於內容的文字顏色(如:求職意向內、教育經歷),著重突出內容,每行內容之間的間距縮小,通過這樣的設計手法來引導HR能夠更快地看到主要內容。
新版B端簡歷詳情頁頭部區域
由於使用者在填寫簡歷時的自由度較高,除必填選項外,其他非必填選項實際的填寫變化會比較大,那麼頁面的佈局將受到較大影響,分清區域以及主次資訊的擺放能在一定程度上降低頁面的跳躍感。
將簡歷操作區域從舊版的始終懸浮在螢幕下方的條狀操作按鈕區,改變為始終懸浮在螢幕右側作為專門的懸浮操作區域,將標籤等對簡歷的操作內容統一集合在一處,便於使用者直接看到與操作,從佈局和使用習慣上來講,這樣也會提高用戶的使用效率,並且使整體頁面操作的可延展性擴大。新增測評報告內容,加入可切換的TAB區便於主體內容的切換和延展。
新版B端簡歷詳情頁_簡歷資訊區域
B端簡歷詳情頁底部區域
結語目前改版還在不斷探索新的思路並進行更深入的用戶分析,當然還存在一定的問題,例如,簡歷內容區域的資訊還可以繼續整合,在用戶簡歷填寫較少時會顯得頁面左重右輕,這些都是需要和產品以及交互同學再次溝通且不斷探索的,B端簡歷詳情頁的改版只是我們不斷探索完善的一小部分;解決痛點是我們一直要堅持的事,期望通過我們不斷的探索和持續優化,讓體驗變得更加便捷,能夠幫助求職者找到心儀的工作,幫助企業找到適合的員工是我們最終的使命。
在此也感謝所有為項目付出的同學們~
作者:周奕鳴。視覺設計師
本文來源於人人都是產品經理合作媒體@58用戶體驗設計中心(微信公眾號@58UXD),作者@ 周奕鳴
題圖來自Pixabay,基於CC0協議