健保卡網路服務註冊
成果發表會報告
葉伊蕙 楊曉曄 郭又宗
Content 議題探 問題定 Wirefram Lo-fi Prototyp Hi-fi Prototyp 未來展望
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
利用三步驟，熟悉網站並且探索服務流程中可能存在的問題 Heuristic Evaluation
十大經驗法則評估
Competitor Analysis
競品分析
Semi-Structured Interview
半結構式訪談
初步瞭解現行網站中，存在 哪些基本易用性問題，並且 將問題依嚴重性排序
專注在嚴重性較高的易用性 問題，並參考擁有相似功能 的網站設計
利用半結構式訪談，了解使 用者對於網頁的理解，也探 索未來設計的可能
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
RAY 5.0 健保卡網路服務註冊流程優化
經由 Heuristic Evaluation 分析後，將問題統整且排序 瞄準較嚴重區塊，針對該功能加強研究。 網頁使用流程
0 嚴
重
等
級
1 2
瀏覽首頁
註冊帳號
完成申請
登入帳號
總計
4
0
1
0
5
5
4
1
2
12
2
2
2
0
6
11
6
4
2
23
RAY 5.0 健保卡網路服務註冊流程優化
首頁 CTA 按鍵資訊層級不一致
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
此按鍵區塊綜整了所有可以執行動作的按鍵，然而層級不一且用字不直觀 評估標準 1 – Visibility of system status
6 – Recognition rather than recall 嚴重等級 2 – 很困擾，會對使用體驗造成很大的影響 問題描述 各項功能按鈕並列層級錯 註冊按鈕名稱不夠直觀
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
註冊即登入發生問題時所給予的指示，無法順利引導排解錯誤 網頁中發生各式錯誤皆會產生同一錯誤訊息，導致使用者無從獲得協助 評估標準 1 – Visibility of system status
9 – Help users recognize, diagnose, and recover from errors 嚴重等級 2 – 很困擾，會對使用體驗造成很大的影響
問題描述 無法讀取健保卡時，跳出視窗 並未給予使用者明確的指示
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
競品分析｜元件下載功能，以 Richart 為例
健保署網頁中提供的元件資訊過於複雜及不夠直觀，參考 Richart 的簡潔設計 健保系統網站元件下載區域的問題 下載點連結與提示的文字過 提供了不會使用到的資訊 → 檔案名稱、驗證碼 Richart 簡化下載區域的方式 使用 icon 提示， 讓介面較為整齊美觀
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
招募受訪者，探索使用者對於現行網站的感受
以未曾使用過網站為主，並盡量擴及各年齡層、網路能力的使用者 U01
18-25 歲
行銷好青年
U02
18-25 歲
剛畢業大學生 U6
26-35 歲
學術研究
U03
46-55 歲
中年家庭主婦 U7
46-55 歲
鋼琴老師兼翻譯
U04
36-45 歲
酷酷工程師
U8
18-25 歲
大學生
U05
18-25 歲
上進大學生
U9
26-35 歲
助理工程師
U10
18-25 歲
公務員
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
給予受訪者明確任務，發覺流程中的痛點與設計空間
利用 cognitive walkthrough，確保使用者對網站的理解與團隊一致 註冊服務 User Journey
閱讀註冊條款
需求及痛點
條款內容冗長
呈現未經整理
資訊
使用者 quote
U01：這這麼長，我根本 不會看啊···我可以理解資 安什麼的很重要，但這 至少要整理下、畫個重 點吧，不然我真的就會 直接跳過
機元件
類自然人憑證
輸入個人資訊
安裝資訊難以查找
健保卡難以讀取
戶號提供門檻高
教學資訊無法完整 協助使用者操作
無從得知失敗原因
安裝讀卡
U03：在安裝程式，這個 那麼多，我不知道要開哪 個欸，有點鬼打牆，我覺 得應該進去之後，就鎖定 一個，要更簡單一點
U01：什麼啊·····我就安裝 好了為什麼都跟我說讀不 到，他只會說讀不到，好 算了我放棄。 U02：我不知道他有沒有 讀取，還是這個壞了啊， 欸不行欸，我要生氣了， 我又回來了。
U02：蛤，我的戶口名簿 在哪？我真的不知道我的 戶口名簿在哪裡欸，健保 卡上會有嗎？好難喔，戶 號是什麼啦······
成功申請
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
RAY 5.0 健保卡網路服務註冊流程優化
將初步分析結果與健保署人員分享，並擬定共同目標 改變是好的，但我們一步一步慢慢來。
在不影響資訊安全的狀況下，排除使用者在技術上遇到的問 「很多民眾對於讀卡機的使用會有障礙，但我們沒辦法不使用讀卡機。 「在疫苗開放登記當天有兩三萬人完成註冊，
我們也很想知道為什麼有些人沒辦法把元件裝好。」 改善新版網站的使用者體 「有沒有一個網站設計能讓民眾覺得在使用的流程是很流暢的？ 「他不用多想，只要按照網頁的指示就可以完成目標。」 廖委員名言佳句：「安全跟方便是一體兩面的，越安全的東西越不方便，
但我們也不能確保它絕對安全，這些關卡只是讓有心人跳障礙賽。」
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
RAY 5.0 健保卡網路服務註冊流程優化
根據議題探索結論，再度訪談使用者以定義最終問題 以 job story 為任務設定，確認使用者操作是否與情境相符 U01
18-25 歲
行銷好青年
U02
18-25 歲
剛畢業大學生
U6
26-35 歲
學術研究
U03
46-55 歲
中年家庭主婦
U7
46-55 歲
鋼琴老師兼翻譯 U04
U05
18-25 歲
上進大學生
U04
46-55 歲
酷酷工程師 U8
18-25 歲
大學生 U04
U9
26-35 歲
助理工程師 U04
46-55 歲
U10
18-25 歲
公務員 U04
46-55 歲
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
功能如此簡單卻又充滿挑戰的網站，使用者會是誰呢？ 生活中也許較少見，但這群人比你想像地更需要這項服務。
張順發
不到做不動絕不退休的科長 性別：男
年齡：64
居住地：新竹
興趣：爬山、品茶
網路操作能力
「疫情來襲，
口罩、疫苗我自己處理！」
「即使離鄉背景，
我也要照顧好我的父母！」
Goal 希望自己即便接近退休年齡，也要 繼續工作保持頭腦靈 希望在生活上可以獨立自主，能不 麻煩他人就不麻煩他人
Challenge 網路時代變化太快，操作電子產品 時常感到吃 發生問題時，會不太知道該如何求 助，也不喜歡撥打客服電話
電子產品：父親節時兒子買門號送手 機獲得的 iphone、asus 桌機
網路服務：LINE、Facebook
Goal 即便畢業後離家工作，也希望能隔週 回家，照顧父 努力工作並快速升職，讓父母能盡快 不受房貸壓力所苦
Challenge 工作繁忙常會忘記接到父母的來電或 是忘記回覆訊 工作地點在台北，沒辦法就近照顧自 己的父母
電子產品：samsung 手機、asus 電 腦、asus 平板
網路服務：IG、Youtube、KKbox
林峰銘
離鄉打拼孝順的獨生子 性別：男
年齡：32
居住地：彰化
興趣：唱 KTV、攀岩
網路操作能力
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
任務屬性：照顧家人的需求
透過健保卡網路註冊服務將家人身份綁至自己門號之下，以照顧家人的需求。
當我要幫家人買口罩時，我想要透 過網站，綁定所有人的健保卡到我 的門號，所以我才可以一次買到大 家的口罩。
RAY 5.0 健保卡網路服務註冊流程優化
任務屬性：跨越技術的障礙
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
因沒有手機門號或是門號不在自己身份之下，而需要透過網站進行身份認證、使用健保服務。 當我身邊的人沒有手機（門號）時，我 想要幫助他們利用健保卡網路註冊系統 登錄健保卡，所以他們才可以直接上 網、使用 app 登記疫苗／領取口罩。
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
任務屬性：查看自身健保資訊
透過健保卡網路註冊服務，在線上查看自身醫療、健保資訊。
當我需要線上查看就醫紀錄、健保資訊 時，我想要透過健保卡網路註冊系統使 用服務，所以我才可以用健保卡在家看 到所有資訊
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
根據核心問題，發展出對應的 how might we 透過 HMW 聚焦問題、提出解方構想 使用者技術
1 操作問題
如何讓使用者確定目前遇到的技術問題為何 如何讓使用者有效解決問題？
2 網站技術問題
如何在網站出現問題時讓負責單位得知 如何讓負責單位有效處理問題？
3 使用流程問題
如何引導使用者有效率完成網頁操作、達成任務目標？
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望 A 可行性為優先版本
Wireframe 發想
以工作坊形式，在有限時間內共 同發想三種線框稿版本
B 天馬行空版本
C 綜合兩者版本
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
Wireframe 發想工作坊流程 發想 A 版
Wireframe 每人針對首頁、註冊及登入頁面，各 花費 10 分鐘 繪 每人各有 5 分鐘 分享自己的設計亮 在能夠解決已知問題的設計貼上貼紙
發想 B 版
Wireframe
統整 C 版
Wireframe
每人針對首頁、註冊及登入頁面，各 花費 10 分鐘 繪 每人各有 5 分鐘 分享自己的設計亮 在能夠解決已知問題的設計貼上貼紙
匯整所有貼紙並斟酌可行性， 討論出兼具 A、B 優點的 C 版
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
網站首頁主要設計亮點 調整首頁版面位置並清楚闡述各項功能 將健保署 Logo 與健保卡網路服務註冊合 將網站提供服務加上圖示說明擺放至左 加上登入步驟流程圖並簡化按 加上安裝教學圖示
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
註冊頁面主要設計亮點 調整註冊頁面使用流程
加上註冊步驟流程 將註冊流程分為五步驟，讓使用者在每個 頁面僅需專注完成一項步 首要步驟為填寫基本資料，避免使用者一 開始因安裝元件發生問題而產生挫折 加上回到上一步的按鈕，讓使用者能返回 前頁閱讀註冊相關要點
RAY 5.0 健保卡網路服務註冊流程優化
登入頁面主要設計亮點 確保網站功能一目了然
將原先的四大功能分為兩 將健康存摺與個人健保資料
連結置於登入頁面
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
易用性測試規劃
統合各式情境與任務類別，確保測試結果得以回答研究問題
將線框稿製作為可操作的
低保真原型
基於認知走查法及綠野仙蹤法發想 測試情境與任務，並新建符合情境 之低保真原型
邀請五位受測者進行測試，找出關 鍵易用性問題，並再次進行迭代
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
RAY 5.0 健保卡網路服務註冊流程優化
招募受訪者，探索使用者對於現行網站的感受
以使用過網站註冊，且失敗的使用者為主，並盡量擴及各年齡層、網路能力的使用者 U01
18-25 歲
行銷好青年
U02
18-25 歲
剛畢業大學生
U06
26-35 歲
學術研究
U03
46-55 歲
中年家庭主婦
U07
46-55 歲
鋼琴老師兼翻譯 U11
U05
18-25 歲
上進大學生
U04
36-45 歲
酷酷工程師
U08
18-25 歲
大學生 U12
U09
26-35 歲
助理工程師 U13
18-25 歲
U10
18-25 歲
公務員 U14
18-25 歲
RAY 5.0 健保卡網路服務註冊流程優化
易用性問題統整
詳讀逐字稿後，從中萃取出關鍵 議題並依照任務排序
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
區分易用性問題嚴重性程度
將問題依嚴重程度分級，並且排序優先解決順序 4 -- critical
該問題會影響到使用者順利完成任務，例如沒辦法收到確認 信以完成註冊
3 -- serious
該問題會拖慢任務完成的進度，例如使用者沒辦法到下一頁 或重設密碼
2 -- medium
該問題不影響任務完成，但會讓使用者感到挫折，例如需要 滑動網頁來找到需要的資訊
1 -- low
該問題不會影響到使用者體驗，例如拼錯字
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
關鍵易用性問題｜下載安裝元件流程不順暢 嚴重程度：3 -- serious，拖慢任務完成的進度
初步設計解法 在完成下載之後直接跳轉到教學頁面，不需 要再額外點擊箭頭到下一 在教學手冊的地方也提供連結下載，讓使用 者可以跟著教學一步一步做
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
關鍵易用性問題｜錯誤解決提示方式不夠順暢
嚴重程度：2 -- medium，不影響任務完成，但會讓使用者感到挫折 初步設計解法 在常見問答提示當中，附上專線諮詢的相關 資 在專線諮詢介面中提供更多的文字說明，讓 使用者知道遇到的情況需要撥打哪隻電話
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
關鍵易用性問題｜其它嚴重程度較低的問題 嚴重程度：1 -- low，不會影響到使用者體驗 登入介面資訊不夠直觀
資訊層級、命名問題
密碼設定方式不方便查看 * 註冊密碼 ******** * 註冊密碼 ******** * 註冊密碼 ********
提供更多文字提示，例如提醒 使用者讀卡機的資訊即帳號
將同類型的功能分類，並用更 不容易誤導的方式命名
加上查看目前輸入密碼的功能
RAY 5.0 健保卡網路服務註冊流程優化
高保真原型成果展示
迭代低保真原型改善易用性問題
並以 Figma 製作高保真原型
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
網站首頁主要設計亮點
簡化首頁資訊並重新規劃資訊層級 將註冊與登入按鈕置於右上角，避免首 頁一次呈現過多資 四大服務說明加上簡介及 Call to Action 按鈕，方便使用者點選至對應功能
Before After
RAY 5.0 健保卡網路服務註冊流程優化
登入頁面主要設計亮點 改善登入流程步驟
調整登入流程順 將登入流程分為三步驟，使用者僅需 在單一頁面專注完成一項任務
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
協助中心主要設計亮點
新增常駐於各個頁面的協助中心 將常見問題、元件下載及安裝、客服專 線諮詢整合至協助中 新增意見與問題回饋功能幫助健保署蒐 集使用者回饋
協助中心 常見問題 元件下載及安裝 客服專線諮詢 意見與問題回饋
RAY 5.0 健保卡網路服務註冊流程優化
註冊頁面主要設計亮點
調整安裝讀卡機元件步驟的引導資訊 在讀卡機元件安裝步驟，同個畫面中 提供相對應的下載檔案及安裝手 附註需要使用讀卡機的原因
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
RAY 5.0 健保卡網路服務註冊流程優化
註冊頁面主要設計亮點
彙整發生錯誤情況並提供可能解方 健保卡讀取確認步驟的問號圖示改為 發生錯誤 發生錯誤彈跳視窗中提供可能的錯誤 情境，讓使用者再次檢查安裝設定
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
RAY 5.0 健保卡網路服務註冊流程優化
主頁主要設計亮點
調整功能分類並新增登出功能 調整資訊層級，將健康存摺與個 人健保資料分類至其他健保服務 新增登出按鈕
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
易用性測試規劃
統合各式情境與任務進行測試，找出關鍵易用性問題
基於認知走查法發想測試情境與三種任務
邀請五位受測者進行測試，找出關 鍵易用性問題，並再次進行迭代
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
RAY 5.0 健保卡網路服務註冊流程優化
招募受訪者，探索使用者對於現行網站的感受 U03
U04
U02
U01
涵蓋各種使用經驗，並盡量擴及各年齡層、網路能力的使用者 46-55 歲
36-45 歲
18-25 歲
18-25 歲
行銷好青年
中年家庭主婦
剛畢業大學生
U6
26-35 歲
學術研究
U7
46-55 歲
鋼琴老師兼翻譯 U11
46-55 歲
會計師
酷酷工程師
U8
18-25 歲
大學生 U12
26-35 歲
業務
U05
18-25 歲
上進大學生
U9
26-35 歲
助理工程師 U13
18-25 歲
大學生
U10
18-25 歲
公務員 U14
18-25 歲
大學生
U15
18-25 歲
大學生
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
區分易用性問題嚴重性程度
將問題依嚴重程度分級，並且排序優先解決順序 4 -- critical
該問題會影響到使用者順利完成任務，例如沒辦法收到確認 信以完成註冊
3 -- serious
該問題會拖慢任務完成的進度，例如使用者沒辦法到下一頁 或重設密碼
2 -- medium
該問題不影響任務完成，但會讓使用者感到挫折，例如需要 滑動網頁來找到需要的資訊
1 -- low
該問題不會影響到使用者體驗，例如拼錯字
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
關鍵易用性問題｜發生錯誤提示無法協助解決問題 嚴重程度：3 -- serious，拖慢任務完成的進度
可能設計解法 新增圖示並給予明確指示告知如何檢查電腦 系統版 給予回到上一頁下載安裝元件的明確指示， 或在安裝步驟頁面若無法偵測到讀卡機元件 便無法點選下一步
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
關鍵易用性問題｜登入註冊過程未備齊所需設備及文件 嚴重程度：2 -- medium，不影響任務完成，但會讓使用者感到挫折
可能設計解法 註冊及登入流程中，於第一步驟提醒所需設備 及文件，如健保卡、讀卡機、戶口名簿等
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
關鍵易用性問題｜對首頁四大服務功能感到疑惑
嚴重程度：2 -- medium，不影響任務完成，但會讓使用者感到挫折 可能設計解法 修改服務說明文 調整四大服務的標示符號
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
關鍵易用性問題｜登入後回到首頁感到疑惑 嚴重程度：1 -- low，不會影響到使用者體驗
可能設計解法 登入後直接進入主頁並且附上回首頁的按鈕
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
整合健保署同仁需求，做出服務提供者人物誌
完整的服務體系，除了滿足使用者需求，也須含括服務提供者的感受 將客服人員感受、專線諮詢流程納入設計考量 藉由統整已知問題，將問題處理及排解製作為 SOP，幫助客服人員迅速了解使用者困難，並且提 供一致的服務 突破目前的技術困難，考量除了口頭說明的可行 性，加入更多元的問題排除技術（例如： teamviewer，或參考 apple 客服流程），幫助網路 使用能力較低的使用者，能夠解決困難。
RAY 5.0 健保卡網路服務註冊流程優化
議題探索｜問題定義｜wireframe｜Lo-fi Prototype｜Hi-fi Prototype｜未來展望
在其他服務平台、裝置上，提供對應的服務流程指示
讓使用電腦版本以外的使用者，也能夠順利被引導至正確的服務流程中 給予各式使用者對應指示 偵測使用者裝置，若使用手機或是平板等非電 腦裝置時，給予對應的操作指示，例如：下載 健保快易通 app 使用服務，或是更換裝置，使 用電腦進行登入 整合線下服務，與藥局、便利商店合作，雖然 需要走馬路，但能夠幫助網路使用能力較低的 使用者，獲得同等的健保服務
感謝健保署同仁！
辛苦了！
葉伊蕙 楊曉曄 郭又宗