找工作頁改版：優化操作瀏覽體驗
此專案旨在重構找工作頁面，以改善使用者的操作瀏覽體驗，並提升未來的擴充性。設計目標包括重新整理資訊架構、改善篩選體驗、提升職缺資訊呈現和搜尋體驗等方面的優化。同時，這些優化也帶來了 SEO 排名和自然流量的增長，進一步提升了頁面的效果。
專案背景
518人力銀行轉型為518熊班後瞄準服務型求職市場，想要為求職者重新設計目前的職缺搜尋體驗，然而當前的找工作頁面結構，無法良好支持新的業務發展。
競品分析
在專案的前期，我們選擇直接競品（如：1111人力銀行、104人力銀行、Yes123、Linkedin等）做重點分析，透過團隊內部人員實際走查，針對特定功能流程的用戶體驗與設計進行比較。
首先，為了確認設計走查的執行範圍，拆解找工作頁的功能與資訊架構：
![[fig1] 找工作頁資訊架構拆解](https://ruuuchen.github.io/portfolio/img/findjob/fig_找工作頁資訊架構拆解.png)
在一天的時間內，將大量的分析做系統化的整理。下表以「A-4. 近期搜尋」為例：
| 競品名稱 | A-4. 近期搜尋 | 呈現位置 | 有用性 | 可學習性 | 可記憶性 | 合乎邏輯 | 具擴充性 | 畫面截圖 |
|---|---|---|---|---|---|---|---|---|
是否有此功能？ | 此功能的呈現位置為？ | 是否有用，可以幫助用戶完成一些必須的事物？ | 是否可以輕易地學習？是否能明白如何使用與操作？ | 每次使用時，不需要重新學習？ | 是否為用戶認知中的使用方式？ | 是否已具有擴充性的應用？ | ||
Ｏ | 關鍵字搜尋點擊後出現的Dropdown選單 | Ｏ，可自動新增近期搜尋紀錄、可刪除單筆近期搜尋紀錄 | △，要點擊過關鍵字搜尋才知道 | Ｏ | Ｏ，類似常見的搜尋引擎(eg.Google)會將近期搜尋結合在點擊後出現的選單裡 | Ｏ，會依輸入框狀態變換選單內容，提供熱門關鍵字、Autocomplete、文字廣告版位等。 | https://drive.google.com/file/d/1XUWbeFlv8xzvW0ukJaasM7eW6r_iwwUE/view?usp=drive_link | |
Ｏ | 關鍵字搜尋點擊後出現的Dropdown選單 | Ｏ，可自動新增近期搜尋紀錄、可刪除單筆近期搜尋紀錄 | △，要點擊過關鍵字搜尋才知道 | Ｏ | Ｏ，類似常見的搜尋引擎(eg.Google)會將近期搜尋結合在點擊後出現的選單裡 | X，僅提供近期搜尋紀錄。 | https://drive.google.com/file/d/1YuNb5POx_oe9ZktNor9Uy9U9hOmi9l-w/view?usp=drive_link | |
Ｏ | 獨立的開口，點擊後出現的POPUP選單 | △，可自動新增近期搜尋紀錄、無法刪除近期搜尋紀錄 | Ｏ | Ｏ | Ｏ | Ｘ，僅提供近期搜尋紀錄。 | https://drive.google.com/file/d/1Uw-_JJv-9BhBn-mqyzJgorlMl_xLotNf/view?usp=drive_link | |
Ｏ | 關鍵字搜尋點擊後出現的Dropdown選單 | Ｏ，可自動新增近期搜尋紀錄、可刪除多筆近期搜尋紀錄 | △，要點擊過關鍵字搜尋才知道 | Ｏ | Ｏ，類似常見的搜尋引擎(eg.Google)會將近期搜尋結合在點擊後出現的選單裡 | Ｏ，會依輸入框狀態變換選單內容，提供熱門關鍵字、Autocomplete。 | https://drive.google.com/file/d/1QhwR2JgLzJVtHPGtWssRULBKaG2ANgUA/view?usp=drive_link | |
X，要手動儲存搜尋紀錄 | - | - | - | - | - | - | ||
O | 關鍵字搜尋點擊後出現的Dropdown選單 | △，可自動新增近期搜尋紀錄、無法刪除近期搜尋紀錄 | △，要點擊過關鍵字搜尋才知道 | Ｏ | Ｏ，類似常見的搜尋引擎(eg.Google)會將近期搜尋結合在點擊後出現的選單裡 | Ｏ，會依輸入框狀態變換選單內容，提供熱門關鍵字、Autocomplete。 | https://drive.google.com/file/d/1HmqnlHN6huaMN88_LfEJPGR_17vs5kjy/view?usp=drive_link |
透過上方表格化的競品分析，我梳理提出設計建議，供內部討論與評估，以驗證需求目標，更快的推進到設計階段。
![[fig2] 近期搜尋的設計建議](https://ruuuchen.github.io/portfolio/img/findjob/fig_近期搜尋的設計建議.png)
定義問題
1. 整體資訊架構混亂
呈現的資訊缺乏視覺層級以及好的架構，因此對很多使用者來說產生很多認知負擔並且不方便快速瀏覽。
![[fig3] Before-資訊架構混亂](https://ruuuchen.github.io/portfolio/img/findjob/fig_Before-資訊架構混亂.png)
2. 篩選條件查找使用不便
透過 Hotjar 熱點追蹤可以得知使用者需往下滾動頁面一陣子才能選到或看到想要的篩選條件。
![[fig4] Before-篩選條件使用不便](https://ruuuchen.github.io/portfolio/img/findjob/fig_Before-篩選條件使用不便.png)
3. 設計樣式缺乏規範
留白與字級過小，導致資訊呈現擁擠，且設計元件的使用較混亂，缺乏規範。
![[fig5] Before-設計樣式缺乏規範](https://ruuuchen.github.io/portfolio/img/findjob/fig_Before-設計樣式缺乏規範.png)
4. 程式維護不易
Desktop、Mobile Web 拆分成兩套程式進行維護，職缺搜尋為求職會員主要的操作行為，因此找工作頁經常會有迭代需求，工程夥伴常反應維護兩套程式會增加開發工時的困擾。
團隊目標
我們可以如何改善找工作頁的操作瀏覽體驗以符合當前市場需求？
- 重新整理資訊架構，增加未來產品擴展彈性。
- 遵循統一的視覺規範與設計系統，並利用視覺樣式區分權重層級。
- 進行 RWD 設計，在不同裝置之間，都可以感受同樣的操作體驗，並提升頁面體驗細節。
設計產出
1. 更好的篩選體驗
將篩選模塊與搜尋模塊整合，且隨著頁面往下滾動時會置頂，讓篩選模塊固定在顯而易見的位置，方便置換條件。
並控制表層條件數量，以 Hotjar 的熱點分布狀況為依據，將常用的條件（更新日期、職務性質、薪資待遇、上班班別、工作經驗、職缺特色）置於表層，其他收到進階篩篩選裡，讓表層控制條件的數量盡量不超過 7，降低用戶一開始下條件的負擔。
![[fig6] After-篩選與搜尋模塊整合](https://ruuuchen.github.io/portfolio/img/findjob/fig_After-篩選與搜尋模塊整合.png)
2. 更好的進階篩選索引
進階篩選內容過多時，透過將相似的條件分門別類歸到一個個單元中，如：休假制度、空班制度、排班制度收攏於「出勤管理」單元中，讓篩選條件索引變得簡單、清爽。
同時，RWD 介面設計上也將手機端的瀏覽體驗與應用方式納入重要的考量範圍中，讓其在不同裝置下能呈現相似的資訊內容與操作體驗，達到良好的適應性，並以 Chips 的方式設計元件，優化可觸發點擊的範圍。
![[fig7] After-進階篩選](https://ruuuchen.github.io/portfolio/img/findjob/fig_After-進階篩選.png)
3. 更清晰的職缺資訊
重新設計了職缺資訊的視覺呈現和資料結構讓它更簡潔好閱讀，我們依據內容的重要性去創造了更清楚的視覺層級、在內容間增加更多呼吸空間。
- 優化廣告行銷標籤
- F 型閱讀動線佈局
- 提升後續接觸點
優化職缺廣告標籤（New、推薦、急徵），加上 Icon 讓標籤圖像化更像廣告行銷用途，並統一顯示於固定的列表最前方版位。
職缺資訊依重要程度呈 F 型的配置，薪資雖然安插於中間，但透過調整字色讓其突出。
產品營運考量，希望能增加延伸用戶瀏覽職缺的後續接觸點，所以優化熊快投 CTA 的樣式提升引導性，並增加收藏功能。
![[fig8] After-職缺列表](https://ruuuchen.github.io/portfolio/img/findjob/fig_After-職缺列表.png)
4. 更即時流暢的搜尋體驗
下條件時，透過 Loading 動畫即時給予用戶畫面反饋，並讓頁面內容轉換時有視覺過渡效果。
![[fig9] After-loading動畫](https://ruuuchen.github.io/portfolio/img/findjob/fig_loading動畫.gif)
歡迎直接到網頁上瀏覽與操作：
關鍵成果
上線後，找工作頁相關在 SEO 排名上有所成長，全站一個月的自然流量與去年同期相比成長46%。
反思與學習
這個專案當時遇到不少技術上的問題，時常會收到工程夥伴回報無法實現，或是不好實現的功能與交互體驗，導致開發團隊一直是繃緊神經的狀態，我意識到我可以從中扮演著工程師與 PM 間的溝通橋樑，盡量把工程的專業語言轉換成可以理解的語句，同步資訊讓 PM 了解當前問題，找尋是否有範例可以參考，或是有沒有折衷的做法可以解決，以及評估上線時程哪些體驗是可以先犧牲的，讓團隊一起面對並解決問題，而不是讓開發人員孤軍奮戰。
Enther Wu, Gin Wu, Design team Eason Lin, Kio Chang, Engineering team Dolly Lin, Ting-Shan Hsu, Ada Hsu, PM team Mindy Huang, MKT team
Next →