「網站首頁」分析與建議

針對首頁進行分析並提出優化建議，詳細說明如下：

(一)分析結果

1.服務分類無法有效率查找

首頁服務多元且未依使用者需求進行分類（如圖1），部份服務使用者不認識或不需要，易導致使用者在尋找服務時感到混亂。

 
圖1 ：首頁服務分類無法有效率查找

2.服務未依使用者的需求排序

以網站左邊「相關服務」之「嬰幼兒照顧服務」為例(如圖2)，分析說明如下：

(1)服務中夾雜一般使用者、專業人員（保母）及機關人員所需之服務與資訊，增加使用者找尋服務的難度。

(2)當專有名詞過於相似且未分類時，一般使用者不易瞭解且感到混淆，使用者須花時間反覆點選與理解，才能找到需要的服務。

(3)點選「嬰幼兒照顧服務」之「嬰幼兒托育地圖（找托嬰資源）」及「福利據點」，不同的服務名稱卻都連結到臺北市嬰幼兒托育地圖的頁面(如圖3)，重複的網頁內容讓使用者感到困惑。

圖2 ：服務未依需求排序

圖3 ：選取不同服務名稱皆連結到相同頁面

3.網站資料設計應考量整體性

機關各業務單位放置各自的資料，不同服務項目之子項目出現重複的資料，例如「相關法規」、「統計資料」及「影音專區」等(如圖4)，非使用者常用的服務，易增加使用者消化資訊的時間，且讓網站整體的資料設計更複雜。

 
圖4 ：網站資料設計應考量整體性

4.搜尋功能尚待完善

網站使用「臺北市資訊局搜尋引擎」，未跟臺北市社會局網站內之資訊整合，使用者輸入關鍵字查詢時，無法有效找到目標資訊，對使用者產生不便。以登記公托為例，輸入「公托」可找到公托登記相關資料，但無法找到申辦服務的入口；輸入「報名公托」及「公托登記」，無法有效找到需求頁面(如圖5)。

 
圖5：搜尋功能尚待完善

(二)設計原則建議

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

1.辨識而非記憶(Recognition rather than recall)

減少使用者需要記憶的事情、行動和可見的物件。使用者不應該去記住資訊的流程和步驟。使用說明應在適當的方式都可以讓使用者輕易的看到和取回。
使用者會需要簡單明確的資訊，首頁應重新規劃資訊內容，依使用者的需求重新分層與整理，幫助使用者快速分辨並從中取得訊息，能快速閱讀網站內容。

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

增加畫面上的文案，並以更加精確和能幫助使用者理解的方式撰寫。透過強化幫助和說明文件，以改善網站資訊過於複雜而造成困擾的議題。
服務專有名詞過於相似且未分類時，頁面可提供更多說明或優化服務分類，讓使用者能更快瞭解網站資訊。

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

系統應該要運用使用者的語言，使用使用者熟悉的詞句、短語及概念。打破原本以機關的服務為框架的資訊架構，改以更貼近使用者的語言與立場出發，使用導引式的分類，讓使用者更易理解與查找。
使用者習慣以較生活化的字詞找目標服務而非機關用語，福利應以業務或使用者身分做分類，並依使用者的重要性排列首頁資訊與服務，以有效引導使用者查找服務。

(三)優化項目

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

1.依使用者需求重新設計常用服務

(1)使用者常用服務建議挑選出來，並放置在首頁明顯處（如圖6標示1），讓使用者明確看到並能快速的點選。

(2)福利依業務類別分類，其中使用者最常用的8項服務，以簡潔的編排方式呈現，並附上條列式的服務內容（如圖6標示2），讓使用者在點選前，可先瞭解服務內容有哪些並作出選擇；其餘的福利類別可點選「查看所有分類」按鍵作查看。

(3)提供使用者依身分查找服務，讓使用者可透過「身分」尋找對應的需求及服務（如圖6標示3），對於想瞭解更多服務相關資訊、或是還不確定要申辦什麼服務的使用者，可協助他們在申辦前先做好相關的準備工作。

圖6 ：常見服務依使用者需求設計

2.優化服務分類

以「嬰幼兒照顧服務服務」為例，分類中同時包含不同需求的使用者，使用者在選擇上易產生困難。網站服務可透過卡片分類法重新定義分類（如圖7），將一般使用者、專業人員及機關人員的需求重新分層與整理，幫助使用者減少需要記住的資訊，針對類似、易混淆的名詞重新定義或新增提醒，並刪除重複的資訊。

圖7 ：卡片分類法優化服務分類

3.重新彙整網站資訊

將各業務單位重複資訊重新彙整，並依使用者的重要性排列首頁資訊與服務。「依身分尋找」下方調整為「線上影音專區」、社會局希望傳達給民眾的理念、「重點宣導」及「相關連結」（如圖8）等區塊，簡單明確的呈現資訊，讓使用者能快速閱讀網站內容。

圖8：網站資料重新調整

4.強化搜尋功能

提供社會局網站本身搜尋功能，或資訊局整合社會局網站資料庫，並調整網站搜尋結果，以貼近使用者的目標資訊，讓使用者有效查詢與申辦。

5.重新定義網站設計

(1)重新定義網站色調、資訊框架，以明確定義網站服務定位。以粉原色（# FEF0EF）定義為網站的主要色彩系統，搭配大面積紫粉色（# EFEFF6），再以紅色（# F56962）突顯不同資訊和重點，並且適時使用粉彩色及白色搭配，讓整體頁面呈現簡潔溫暖的視覺印象。

(2)增加標題文字的層級，並減少在首頁上呈現過多的資訊；制定文字、圖像的視覺標準，並統一風格，提升網站易讀性。增加列與列之間的間距，提升瀏覽舒適度。文字規範如下：

A.網站的文字為求簡潔明快與力量的感覺，建議整體使用無襯線的黑體字，例如微軟正黑體、蘋方體等。根據World Wide Web Consortium(W3C)訂定之行動版網頁文字標準，將大小微調：
內文：16px
選單：18px
次標題：32px
主標題：40px
B.行間距，建議設定於字體大小的1.2-1.4倍；段間距，建議設定於字體大小的2-2.5倍。例如：用16px 的字體時，行間距：24-32px；段間距：32px-40px。

「網站服務流程」分析與建議

依工作坊組員討論並擇定以「公托報名登記」為主要服務流程進行精進，運用角色人物誌（Persona）與顧客旅程地圖（Customer Journey Map）瞭解使用者行為，進而分析使用者在服務流程關鍵步驟所遇到問題，並提出優化建議，詳細說明如下：

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

1.「公托報名登記」角色人物誌，如圖9。

圖9：「公托報名登記」角色人物誌

 
2.「公托報名登記」的顧客旅程地圖，如圖10。

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

 
圖10：「公托報名登記」顧客旅程地圖

 
(二)流程關鍵步驟

「公托報名登記」須操作5個關鍵步驟，如圖11。

 
圖11 ：「公托報名登記」服務流程關鍵步驟

(三)關鍵步驟分析結果

依流程關鍵步驟做分析，詳細說明如下：

1.公托報名登記申辦首頁
(1)網頁內容以公文方式呈現，含專有名詞及機關用語（如圖12），使用者不易理解資訊。使用者傾向看圖片與影片，例如網路上整理好的懶人包。
(2)文字大小與顏色未統一，易造成使用者閱讀上的不適感。

 
圖12 ：申辦首頁-服務說明不易理解

(3)多數使用者尋找報名連結時遇到困難，文字內的報名連結未明顯標示（如圖13），使用者感到混淆，對於只想報名登記不想看這麼多資訊的使用者來說，覺得內容過於冗長。

 
圖13：申辦首頁-報名連結不明顯

2.登入台北通

(1)公托報名登記只能使用台北通登入（如圖14），未提供其它常使用的登入方式，例如Google、Facebook及Line帳號登入，增加公托報名登記的難度。
(2)對於從未使用過台北通的使用者，需另下載APP，讓註冊的流程更加繁瑣，使用者無法瞭解跳出頁面註冊APP的意義；對於已有台北通但不常使用的使用者，因忘記帳號及密碼而需要重設密碼再登入，覺得很不方便。

 
圖14 ：公托報名登記僅提供台北通登入

3.填寫報名表單頁面

(1)欄位定義不清楚且格式複雜，「大公托」及「小家園」沒有填寫的次序（如圖15），填寫上易混淆，表單上也未說明兩者之間的差異，使用者不確定是否兩者都要填寫。
(2)填寫表單時無法分次填寫或上傳資料，需要一次填寫提交，對於生活忙碌的使用者較不方便。
(3)使用者提交表單後，系統會跳出「必填欄位」的提醒（如圖16），使用者才能發現有未填寫正確的欄位，使用者須自行尋找欄位位置，且反覆填寫與送出，增加登記報名的難度。
(4)「登記收托單位」資訊僅提供機構名稱，未提供收托單位相關資訊或位址，使用者在填寫時易產生不確定感。

 
圖15：公托報名登記表單格式複雜

圖16 ：表單填寫送出後發現未填寫正確

(四)設計原則建議

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

1.辨識而非記憶(Recognition rather than recall)
減少使用者需要記憶的事情、行動和可見的物件。使用者不應該去記住資訊的流程和步驟。使用說明應在適當的方式都可以讓使用者輕易的看到和取回。
重新規劃資訊內容，協助使用者快速分辨並從中取得訊息，且將使用者的3項主要需求「公托登記」、「報名查詢」及「相關資訊」調整於流程第1步驟，讓使用者集中注意力於執行關鍵行為。

2.美觀與簡化設計(Aesthetic and minimalist design)
資訊呈現時不應包含較不相關或很少用到的資訊。介面中任何可省略的資訊都會讓重要資訊的視覺明顯度下降。尤其多數使用者習慣僅「瀏覽」而不「閱讀」，捨棄多餘資訊即能突顯重要資訊，同時亦能提高資訊的易讀性。
使用者會期望重要的公托資訊易懂，而非公文式內容呈現，公托資訊應圖像化並搭配重點文字說明，或提供托育地圖，以協助使用者能快速閱讀資訊。

3.視覺層級(Visual hierarchy)
利用視覺元素區別資料的重要性，並且重新組織、排序內容，引導使用者視覺焦點或順序，讓使用者儘可能輕易地理解資訊。
重新設計報名表，原先複雜的表單，改以步驟化並突出重點，減少使用者的記憶負擔，防止使用者在繁瑣的流程中出錯。

(五)優化項目

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

1.服務流程調整

(1)將原流程的第3步驟「公托登記申辦系統」調整至第1步驟，省略難懂的「公托報名登記申辦首頁」。
(2)報名表單需要填寫的資訊較多且複雜，將「填寫報名表單」拆成4個步驟，並提供明確的指引，讓使用者能以簡單且流暢的流程，完成公托報名登記。

 
圖17  ：服務流程優化

2.依使用者需求提供主要服務

(1)將公文式介面重新調整，以使用者的3項主要需求出發（如圖18），包含「公托登記」、「報名查詢」及「相關資訊」，使用者可依當下需求選擇服務，並在服務中新增流程與提醒等資訊，協助使用者預先瞭解後續會遇到的情況。
(2)「相關資訊」的部分，將大量的資訊整理並區分為不同的主題，讓使用者可快速的找到需要的資訊。

 
圖18 ：依使用者需求提供服務主題

3.協助使用者做好申辦前的準備工作

在台北通登入的頁面，新增公托登記符合資格說明，提醒使用者作確認，減少申辦時的錯誤，並提供「公共托育懶人包」連結及「台北通使用手冊」（如圖19），幫助不清楚的使用者做好準備工作。

圖19：事前準備提醒

4.重新設計報名表單

將「填寫報名表單」拆成「托育機構」、「家庭資料」、「身分資格」及「最後確認」4個步驟，並於頁面上方顯示步驟，讓使用者知道完成填寫表單的確切步驟。
(1)使用者在選擇收托機構時，提供「大公托」和「小家園」更多資訊，例如候補人數、評鑑、電話及地址等機構資訊（如圖20），以協助使用者作出決定或核對收托機構。

圖20 ：協助使用者選擇托育機構

(2)「家庭資料」先說明所有欄位皆為必填，且直接在輸入錯誤的欄位上提醒，並確認資料是否填寫完整，以解決使用者需反覆送出確認哪項資料沒有填寫正確的困擾；在「家長二」的部分，可點選不同身分，對應不用需求提示進行輸入資料，改善原先表單易讓人混淆的問題（如圖21）。

 
圖21：輸入錯誤時於該欄位上提醒

(3)「請選擇身分資格」將原勾選是與否的方式調整為開關元件（Toggle Switch），較大的開關元件用於行動裝置上，使用者將更容易選取，並解決使用者猶豫要選取「是」或「否」的疑惑。每項資格序位新增相關說明或上傳資料提醒，幫助使用者瞭解並選取正確的序位（如圖22）。

圖22：選擇身分資格改為開關元件

(4)系統自動篩選身分提供上傳證明文件，並標示說明正確的檔案格式（如圖23），以確保使用者上傳文件符合格式的要求。

 
圖23 ：自動篩選身分提供上傳證明文件

(5)「最後確認」顯示使用者所填寫的資訊，並提供「修改」功能（如圖24），讓使用者再次確認資料內容，降低填寫錯誤資料就送出的風險，報名成功後提供「前往查詢登記結果」功能（如圖25），讓使用者確認登記結果。

 
圖24：協助使用者再次確認資料內容

圖25：報名成功後前往查詢

5.提供報名完成的下一步動作
(1)報名查詢功能須以台北通帳號登入，建議新增「台北通使用手冊」，協助不清楚登入台北通的使用者瞭解操作流程並順利登入（如圖26）。

圖26  ：新增台北通使用手冊

(2)報名查詢頁提供資料補件功能，網頁上方設置補件提醒與連結（如圖27），讓還沒補件的使用者可快速的點擊前往文件上傳頁面。報名查詢頁包含「托育機構」、「候補人數」、「候補序號」及「家庭資料」等重要訊息，協助使用者判斷候補狀況。

 
圖27  ：協助使用者判斷候補狀況

6.公托資訊圖像化
(1)公托相關資訊建議分為「登記資格」、「申請流程」、「托育補助」、「托育地圖（找機構）」及「公共招生計畫」5部分(如圖28)，使用者可依據自身的需求找到對應的資料，並做好申辦前的準備工作。

圖28：協助使用者快速找到目標資料

(2)資訊呈現方式以圖片搭配重點文字表格的懶人包為主（如圖29），幫助使用者快速理解與掌握資訊。
 

圖29：提供公托懶人包

(3)托育地圖（找機構）協助使用者判斷要選擇哪個托育機構，並在地圖下方新增「立即登記」按鍵（如圖30），點選後畫面會跳出至公托報名登記頁，使用者可接續操作，不需再離開頁面。

圖30 ：托育地圖新增「立即登記」按鍵