(一)分析結果

1. 首頁內容呈現未符合使用者需求

   目前首頁優先展示宣導影片、最新消息（如公告、政策等），而課程入口被置於頁面最下方。使用者進站主要目標是修課或下載證明，但課程資訊不明顯，尤其在小螢幕裝置上課程內容更難找到，造成操作困難。

   

   圖1：首頁內容呈現未符合使用者需求（課程）

2. 首頁搜尋與分類設計不直覺

   首頁搜尋欄位選項偏多、與版面元素（如Banner）混雜，且分類位置隱蔽，難以用「志工訓練」、「時數證明」等關鍵字快速直達任務目標，提升操作成本與學習門檻。同時，上方選單「選課中心」的子分類中只有「分類列表」直接對應找課需求；「課程清單下載」、「研討活動報名」與多數學員並無關聯性，因此降低了導覽效率。

   

   圖2：選課中心許多功能與使用者無關

3. 首頁缺乏新手與網站重點服務說明

   多數使用者第一次進站時，不容易理解網站的主要功能與操作流程，缺乏「新手上路」或「網站重點服務導引」。使用者希望能在首頁快速理解平台定位、主要課程入口與證明下載等常用服務。

(二)設計原則建議

設計顧問依據上述分析結果，運用Jakob Nielsen十大網站體驗設計原則 ，進行評估和導入策略，其中3項可用來檢視網站首頁的設計，相關說明如下：

1. 系統與真實世界的關聯性(Match between system and the real world)

   系統應以使用者語言與心智模型呈現資訊與功能，避免以機關內部分類或宣導為首頁主軸。首頁與主選單建議從「內容宣導與公告」轉為「找課／開始上課」導向：以「課程分類」等用語與捷徑作為第一層入口；精簡「選課中心」導覽，保留能直接找課的「分類列表」，將「課程清單下載」、「研討活動報名」降權或另置其所，以減少判讀成本並縮短找課路徑。此調整回應多數使用者進站主要為修課而非瀏覽宣導資訊的需求，以及現況中搜尋與分類不易快速導引至課程的痛點。

2. 視覺層級(Visual hierarchy)

   以視覺層級凸顯「找課／開始上課」為首要任務，降低次要資訊（公告、新聞、宣導、橫幅）干擾。建議首屏(Above the fold)配置「搜尋找課」與「熱門／常用分類」區；公告與宣導降至次層，強化首頁對任務的可見性。

3. 幫助和說明文件(Help and documentation)

   為確保使用者能夠流暢的操作，網站提供幫助與說明文件，預防少數使用者產生混亂及挫折感，透過強化幫助和說明文件，以改善網站資訊過於複雜而造成困擾的議題。新增「新手上路／網站重點服務」模組，快速說明平台定位與協助首次使用者建立正確心智模型。

(三)優化項目

依據分析結果與建議原則，提出3項優化項目，詳細說明如下：

1. 以課程導向為主的首頁設計

   首頁聚焦找課：將「搜尋找課＋常用分類＋精選課程」置於上方，公告與宣導改至最下方，避免與課程主線爭奪注意力，精簡首頁訊息，縮短或移除跑馬燈與冗長的最新消息卡片，明確區隔 Banner與搜尋列，避免彼此搶奪焦點導致課程入口下沉。

   

   圖3：新版首頁優先顯示搜尋、課程分類、精選課程

2. 精簡搜尋與導覽，強化選課動線

   簡化搜尋與導覽命名，讓學員以最少步驟從首頁直達「找課→開始上課」，降低迷航與誤觸成本：

   • 單一搜尋框＋熱門建議

     改為單一輸入框並加入同義詞與關鍵字自動完成（如「志工訓練／基礎訓練」），降低多欄位表單造成的操作負擔。

     

     圖4：簡化搜尋列＋熱門搜尋

   • 重整「選課中心」

     保留可直接找課的「分類列表」並改命名為「課程分類」，將「課程清單下載」、「研討活動報名」移除，縮短找課決策路徑，降低誤觸。

     

     圖5：導覽列將複雜的選課中心重整為單一課程分類

   • 首頁露出常用分類與精選課程

     於首頁置中顯示熱門分類，搭配精選課程，提升可見度並加速進入修課動線。

     

     圖6：首頁露出常用分類與精選課程

3. 建立網站重點服務說明及新手上路

   傳達平台的核心價值：人人都能輕鬆學習（任何裝置即可快速開始）、學習成果，即刻認證（完成課程後列印證明）、必修需求，一次搞定（公務人員必修需求）。作為信任與定位的說明帶，回應使用者「首次進站需要更快理解網站重點」的期待。

   

   圖7：建立網站重點服務說明

   建立「新手上路」連結導向專頁；專頁內再完整說明註冊／登入、選課、上課、測驗與於學習紀錄下載證明的步驟，解決首次使用者導覽需求。

   

   圖8：建立新手上路並連至專頁

(一)使用者行為分析紀錄

1. 角色人物誌

   

   圖9：角色人物誌

2. 顧客旅程地圖

   利用「顧客旅程地圖」工具進行網站使用者流程分析，將蒐集到的使用者與利害關係人訪談資訊透過視覺化和圖表化，拆解使用者的使用流程、行為動作、接觸點、情緒波動和痛點等，進而檢討服務過程的缺失，以作為設計精進的參考。

   

   圖10：顧客旅程地圖

(二)流程關鍵步驟

依據此次工作坊之易用性測試情境：小明想加入社區志工，聽朋友說可以在「臺北e大」完成基礎志工訓練課程並下載時數證明，以提交給里辦公處。使用者完成任務「學習志工基礎教育訓練課程並下載時數證明」須操作8個關鍵步驟，如圖11。

圖11：服務流程關鍵步驟

(三)關鍵步驟分析結果

依搜尋服務前與流程關鍵步驟做分析，詳細說明如下：

1. 搜尋與分類入口不明確、操作負擔高

   搜尋欄位過多、命名與位置不直覺，常與其他版位混雜；「分類列表」不易被看見或找不到，使用者需反覆尋找路徑才能進入選課，導致迷航與時間成本上升。

   

   圖12：搜尋列太複雜

   

   圖13：主分類在左側不明顯處

2. 課程介紹頁資訊冗長且側欄干擾判讀

   課程介紹內容篇幅過長，關鍵資訊不易掃描閱讀；同時左側推薦或輔助欄位造成視覺干擾，增加閱讀負擔與判讀成本，使用者難以快速掌握是否符合自身需求。

   

   圖14：多數人覺得左側推薦欄位不必要

3. 上課畫面偏小且介面指示不足

   上課區畫面偏小，上課內的圖示或按鈕不可點擊或缺乏說明，整體操作缺乏一致性，影響學習流暢度與可控性。

   

   圖15：上課畫面偏小

4. 學習紀錄資訊分散，時數證明位置不明顯

   學習紀錄相關功能的編排分散且標示不清，最常見的問題為「時數證明不好找／列印按鈕不明顯」，使用者需要反覆嘗試或到處點選才找到正確入口，降低任務完成效率。

   學習紀錄使用表格呈現不易使用者瀏覽，小尺寸螢幕裝置使用者表格更不友善。

   

   圖16：學習紀錄充斥不必要資訊，多數人找不到時數證明

(四)設計原則建議

設計顧問依據上述「關鍵步驟分析結果」，運用Jakob Nielsen十大網站體驗設計原則，進行評估和導入策略，其中3項可用來檢視此服務流程的設計，相關說明如下：

1. 系統與真實世界的關聯性(Match between system and the real world)

   系統應以使用者熟悉的語言與心智模型呈現資訊與功能，減少專業或內部用語，並以任務導向來組織內容與導覽。

   搜尋與分類的命名與位置需貼近學員語彙（如「課程分類／熱門主題／志工基礎教育訓練」），避免不明確或系統性術語造成迷航；課程頁與學習紀錄中的欄位與按鈕名稱應與使用者期待一致（如「時數證明」），降低理解與記憶負擔。

2. 美觀與簡化設計(Aesthetic and minimalist design)

   介面不應堆疊與任務無關或低頻率使用的資訊；凡可省略之內容都會提升關鍵資訊的可見度與可讀性。

   課程介紹頁以精要摘要呈現關鍵資訊（時數、通過門檻、更新日期、裝置支援等），避免冗長段落與側欄干擾；上課介面僅保留必要控制與說明，版位聚焦於播放器與章節內容，減少視覺雜訊與操作負擔。

3. 一致性與標準(Consistency and standards)

   導覽、命名、元件位置與互動行為需在全流程保持一致，並遵循通用的網頁與媒體操作慣例。

   搜尋入口與「課程分類」的出現位置與標示應在各頁一致；播放器控制（播放/暫停、進度、快轉、音量、全螢幕等）採用通行樣式與固定位置，避免圖示不可點或意義不明；學習紀錄的資訊編排與「時數證明」入口需在各情境保持同名同位，讓使用者不必重新學習與猜測。

(五)優化事項

依據分析結果與設計原則，提出4項優化項目，詳細說明如下：

1. 搜尋與分類簡化且分開設計
   • 以單一搜尋框搭配熱門搜尋

     

     圖17：簡化成單一搜尋框

   • 簡化分類為兩層分類，並置於畫面中間正上方

     

     圖18：簡化分類並置於畫面中間正上方

2. 課程介紹頁精要化

   置頂課程摘要，一次呈現課程時數、測驗門檻等關鍵資訊；段落化結構，移除左側推薦，避免干擾判讀。

   固定「報名課程」、「時數證明」主行動按鈕(Primary CTA)於可視範圍內，引導使用者行動。

   

   圖19：重新設計課程介紹頁

3. 上課介面與播放器優化

   放大播放器區域並採通用控制列（播放/暫停、進度、快轉/倍速、音量、全螢幕），章節側欄顯示目前單元／時間狀態，支援自動連播與斷點續播。

   固定「學習紀錄」、「前往測驗」、「時數證明」主行動按鈕(Primary CTA)於可視範圍內，引導使用者行動。

   

   圖20：重新設計上課介面

4. 學習紀錄精簡化

   移除對一般使用者不必要的專區與欄位，讓重點資訊一屏可得，降低掃描與判讀成本。

   以「區塊卡片」取代表格，單卡呈現課程名稱、學習進度條、測驗進度、認證時數。並簡化列印多個證明，讓使用者更直覺。

   

   圖21：學習紀錄精簡化，並以卡片取代表格

本次工作坊以評估「網站首頁」與「學習志工基礎教育訓練課程並下載時數證明」服務流程現況為基礎，分析流程並提出協助服務提供者與服務使用者省工和省時之建議，說明如下：

(一)首頁

1. 以課程導向為主的首頁設計

   將「搜尋找課＋常用分類＋精選課程」固定在首屏，公告與宣導下移至頁尾；同時移除跑馬燈與冗長消息卡，避免搶奪焦點並確保課程入口清晰可見。

2. 精簡搜尋與導覽，強化選課動線

   簡化搜尋與導覽命名，將搜尋改為單一輸入框，並重整「選課中心」只保留「課程分類」，移除不相關選項。優先呈現常用分類與精選課程，提升可見度並讓學員以最少步驟直達「找課→開始上課」。

3. 建立網站重點服務說明及新手上路

   以「人人都能輕鬆學習、學習成果即刻認證、必修需求一次搞定」傳達平台核心價值，作為信任與定位的說明帶，協助新進使用者快速理解網站重點。另提供「新手上路」連結至專頁，完整說明註冊、選課、上課、測驗與下載證明流程，以滿足首次使用者的導覽需求。

表1：首頁輔導前後對照圖示

輔導前	輔導後

(二)「學習志工基礎教育訓練課程並下載時數證明」服務流程

1. 搜尋與分類簡化且分開設計

   以單一搜尋框搭配熱門搜尋取代多欄位表單，降低操作負擔；同時將分類簡化為兩層並置於畫面中間上方，方便使用者快速查找。

2. 課程介紹頁精要化

   課程頁置頂摘要，集中呈現時數與測驗門檻等關鍵資訊，並移除左側推薦以減少干擾。主行動按鈕如「報名課程」、「時數證明」固定於可視範圍，引導使用者清楚操作。

3. 上課介面與播放器優化

   放大播放器並採用標準控制列，章節側欄同步顯示單元進度，支援自動連播與斷點續播。主行動按鈕如「學習紀錄」、「前往測驗」、「時數證明」固定於可視範圍，引導使用者完成操作。

4. 學習紀錄精簡化

   移除不必要的專區與欄位，讓重點資訊一屏可見以降低判讀成本。以區塊卡片取代表格，呈現課程名稱、進度、測驗與認證時數，並簡化多份證明列印流程，提升直覺性。

表2：服務流程輔導前後對照圖示

輔導前	輔導後

以上建議方案提供臺北e大未來精進方向與設計參考，相關設計製作成高擬真網頁並經由使用者測試驗證新設計方案之可行性(機關網站原/新設計之測試紀錄，請參見附件二)，建議後續可會同利害關係人（包含服務提供者、服務使用者、系統開發廠商等）一同研擬實際可落實之執行細節，讓政府網站服務品質更臻完善。