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

分析結果

1.使用者未能認知介面資訊意涵並採取行動

目前首頁的介面設計將版面切分成左右兩個區塊(如圖1)，左側為功能列表，右側為資訊顯示區塊，例如「最新公告」與「服務項目」，但這些資訊非使用者常用或是當下所需要使用之內容，使用者所需要的功能為登入、註冊、相關執行方法說明及使用動機。

圖1 ：首頁架構

2.使用者對於使用目的認知不清楚

目前網站首頁資訊並未提及註冊後能開通什麼樣的功能與服務的相關介紹(如圖2)，故使用者無法理解使用健保卡網路服務註冊這項服務的目的以及能帶給他什麼樣的便利性功能。 

圖2 ：首頁缺乏相關服務介紹

3.使用者對於系統用詞感到疑惑

頁面所使用的說明用詞，對於缺乏安裝元件認知與數位能力較低的使用者來說，無法正確理解首頁檢測環境的作用與安裝方式，包含健保卡讀取時，欄位「支援使用健保卡」出現紅色的Ｘ警示符號(如圖3)，亦無法瞭解其含義，並感到疑惑或慌張。

圖3 ：出現紅色的Ｘ警示符號

4.按鈕與圖示設計相像，造成使用者不易辨別

介面按鈕設計將許多功能放在同區塊且未分類，在視覺層級上以相同尺寸的按鈕和相同的色彩進行設計，以至於使用者無法直接辨識與分類按鈕功能與種類，部分區塊按鈕無點選連結功能(如圖4標示1)。

圖4：按鈕設計相近且無分類

優化項目

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

1.重整首頁資訊與視覺層級排序

服務項目建議依使用者的重要性排序，使用者的重要性依序為登入、首次註冊及註冊後能使用的相關服務(如圖5)。圖5中標示1~3為重要性排序與視覺引導路徑，讓使用者能明確理解並掌握整網站的資訊與服務。

 
圖5：視覺層級以登入與註冊為主，相關服務介紹資訊為輔

2.註冊登入區塊考量使用者行為設計，強化操作與分流

(1)將網站之使用者行為分為登入網站(已註冊完成)與首次註冊，互動邏輯為若使用者不能登入，就使用下方的註冊，引導至註冊的流程中(如圖6標示1)，若無法註冊或需要其他幫助，區塊下方可協助使用者進行疑難排解，透過明確的介面設計引導使用者操作服務。
(2)介面設計以外框線引導使用者視線至登入與註冊區塊(如圖6標示2)，並透過色彩引導使用者採取動作，例如「讀取」按鈕與註冊按鈕，鮮明的色彩有助於使用者辨識。另在設計上運用色彩將「登入」與「註冊健保卡網路服務」按鈕明顯區隔。

 
圖6：登入區塊視覺設計引導

3.增加服務介紹說明區塊，提升使用者對系統使用的認知

(1)首頁右側建議加入服務說明區塊，以「健保卡註冊，熱門加值服務與應用」為標題，告知尚未註冊健保卡的使用者，在註冊後可使用的加值服務，以提升使用者對系統使用的認知。加值服務的說明內容為「健康存摺」、「個人健保資料網路服務作業」、「多憑證網路承保作業」及「健保快易通app」(如圖7)。

 
圖7：服務介紹說明區塊

(2)服務區塊的標題下方，放置使用人數、使用面向及該怎麼使用的資訊，並針對以上資訊與功能加註額外說明(如圖8)。

A.顯示全國已註冊人數：一般使用者心理會傾向使用已被多數人使用之功能。
B.相關應用加值服務一覽：下載此列表能快速地瞭解所有與健保卡介接的相關服務。
C.說明懶人包：使用者可透過輕鬆、簡單有趣的懶人包來理解註冊健保卡的相關內容。

 
圖8：額外加註服務提示與說明

4.重新定義網站設計

(1)視覺層級建議調整，並在頁面中做出視覺引導。
(2)符合本網站風格一致的圖示(Icon)設計，圖示(Icon)明確的表示該功能與資訊的意涵(如圖9標示1)。
(3)重新定義網站配色，使用色彩產生指示行動作用，以綠色為主色；藍色為輔助色；紅色為警示色，背景色則由灰色、白色及淺藍色，作為網頁配色系統使用。
(4)增加標題文字的層級，並減少在首頁上呈現過多的資訊；制定文字、圖像的視覺標準，並統一風格，提升網站易讀性。文字規範如下：

A.網站的文字為求簡潔明快，建議整體使用無襯線的黑體字，例如微軟正黑體、蘋方體。
B.於解說相關服務的頁面區域，以較為活潑與親民的圓體呈現，例如思源圓體。
C.根據World Wide Web Consortium(W3C)訂定之行動版網頁文字標準，將大小微調，條例如下：
內文：16px
選單：18px
次標題：24px
主標題：30px

D.提升網站閱讀性：行間距建議設定於字體大小的1.2-1.4倍；段間距建議設定於字體大小的2-2.5倍。

 
圖9：風格一致的圖示設計