國家發展委員會 106年度政府網站服務品質提升推廣委外服務案

1. 中華民國資訊軟體協會 107/7
機關網站使用者介面(UI)與體驗(UX)案例分析
台中榮民總醫院
1

2. 簡報大綱
• 研究目的
• 研究方法
• 研究發現
• UI/UX分析
• 其他內頁調整建議
• 首頁設計調整建議
簡報大綱
2

3. 研究目的

4. 研究目的
• 整理輪播大圖區塊，優化使用者經驗。
• 使用者能夠更輕易了解中榮或是取得資訊
• 功能導向設計，解決使用者對醫療資訊與看診資訊的需求。
• 提升網站於⾏動裝置的易用性。
研究目的
4

5. 研究方法

6. 研究方法
機關
訪談/問卷
使用者檢測
提出網站
UI/UX分析
民眾的感受
機關的設想
兩者落差即為
機關網站使用
評 價 (UI/UX)
不佳因素
1. 萃取機關網站建置目的及期望
2. 建立優使性檢測任務
1. 由5位使用者進⾏任務檢測
2. 透過質化研究萃取使用者期望
1. 機關首頁示意
2. 網站色彩/視覺風格建議
3. 關鍵任務服務流程或資訊傳達
手法建議
6

7. 研究發現

8. 研究發現
台中榮總網站的內容可分為醫院企業資訊、就醫資訊、醫療
資訊、醫院媒體，主要使用者為就醫民眾。為提升網站的易
讀性與易用性，讓瀏覽者在進入首頁後能快速進入狀況，獲
得目標訊息，因此建議首頁的內容依功能重新分配區域，並
透過色塊、區塊加以分隔，使內容的易讀性提高。
網站現況
8

9. 研究發現
• 調整色彩、⽂字－提高顏色之間的
對比度，適度加粗加深部分標題或
內容，提升閱讀清晰度。
• 視覺元素與造型統⼀－延展首頁圖
塊⾄所有頁面，icon的造型調整圓
潤符合整體視覺，資訊圖表視覺語
彙統⼀。
• 增加照片的使用－適度使用具質感
的照片，提升形象。
UI UX
• 依台中榮民總醫院主要業務與使命，
調整資訊呈現排列順序。
• 依使用者族群調整資訊區分功能－
將醫院企業資訊、就醫資訊、醫療
資訊、醫院媒體等不同資訊予以區
分、整併。
• 調整網頁互動提示，確保使用者對
當前功能明確理解。
色彩 文字
圖像 佈局
調整策略
9
資訊架構
資訊溝通互動體驗

10. UI/UX 分析

11. UI/UX分析大圖輪播區
11
現況 建議
字級切換提示不明顯 A.直接以「大」、「中」與「小」顯示
自動輪播無法停用 B.輪播圖片會影響無障礙網頁使用，不建議使用
輪播控制指示不明確
• 控鍵待游標移入輪播區後才出
現
• 輪播指示與圖片內容重疊
• 圖片說明與圖片顯示不同步
• 輪播指示預覽縮圖並不會提升
民眾對於輪播內容的辨識，反
而會增加頁面的視覺複雜度，
造成瀏覽上的困難
C.加大輪播區切換控鍵並常駐，或不使用輪播
D.重新設計輪播區內容數量與當前位置指示配色
E. 輪播區內容數量不超過5項
F. 具備輪播區切換功能
G.將輪播圖片內標題移⾄下方標題區，以減緩頁面視
覺密度
H.簡化輪播區內容標題
I. 播區內容標題作為該輪播內容觸動範圍，點選後進
入該內容詳細內頁
C A
D~F
G~I

12. UI/UX分析主要功能與常用功能選單區
12
現況 建議
主要功能與常用功能相互影響
• 選單展開時會遮住常用功能選單，導致無法使用
• 常用功能為主要功能之精選，兩者緊臨使其功能
性降低
A.將主要功能移置輪播區上方的視
覺熱區
主要功能選單顯示不完全
• 主要功能位於輪播大圖下方，展開選單時需滾動
滾輪方可繼續瀏覽
• 主要功能之次選單項目過多，無法於⼀頁顯示完
全
B.將主要功能移置輪播區上方
C.次選單項改採雙欄方式呈現，並
重新檢視次功能選項加以整合
選單互動體驗不⼀致
• 點選主要功能選單除「資訊公開」及「特色醫療
中心」外，其餘會跳回首頁頂端
• 常用功能選單「網路掛號」、「健康檢查」與
「交通指南」為同視窗開起，其餘則為另開視窗
D.調整資訊開啟方式，使互動體驗
⼀致
C
A

13. UI/UX分析資訊內容區
13
現況 建議
主題區塊間區分不明顯
• 標題字體與內文用色相似，不易區辨
A.調整內文文字用色，提高辨識度
Facebook專區覆蓋主要頁面
• 遮蔽首頁資訊
• 當游標進入Facebook視窗時，滾動滑鼠滾輪時，
捲動的為Facebook的內容
B. 將Facebook移⾄首頁下方社群
互動區
A

14. UI/UX分析頁尾區
14
現況 建議
相關連結選單只是切換鍵操作區
域小，不易使用
A.加入常駐切換控鍵
網站地圖選單使用不易
• 預設為收合狀態
• 點選「展開選單」後會跳回首
頁最上方
• 選單展開後，上面顯示文字仍
為「展開選單」
B.直接展開，瀏覽者瀏覽全頁後，能快速尋找下⼀目
標資訊。
C.若採收合式設計，點選「展開選單」應原地開啟，
並調整選單文字為「收合選單」
B
AA

15. 15
其他內頁調整建議

16. 其他內頁調整建議
16
現況 建議
此首頁非彼首頁
• 進入內頁後點選左上角Logo導向民眾版首頁，非
最新版首頁
• 點選麵包屑的「首頁」同樣導向民眾版首頁
A.首頁版本應⼀致

17. 其他內頁調整建議
17
現況 建議
步驟相同且有關連性之功能宜整併
• 「門診預約取消」與「門診預約查詢」步驟相同
A.整合為「門診預約查詢/取消」
B.每⼀項預約掛號內容皆增加「取消預約」按鈕
預約掛號查詢
◎ 取消預約
B

18. 初診民眾請⾄「初診預約掛號」辦理掛號
其他內頁調整建議
18
現況 建議
提早提示初診需使用「初診預約掛號」
• 初診民眾選取完看診科別、醫生與時段後，輸入身
分證與生日後，才會發現無法順利完成門診預約掛
號，待系統導向「初診預約掛號」
A.強化提示引導初診民眾⾄「初診預約掛號說明」辦
理掛號作業
A

19. 簡易資料 詳細資料
其他內頁調整建議
19
現況 建議
互動提示不明確
• 醫師專長介紹網頁內的「簡易資料」與「詳細資料」
內容相同
• 當「簡易資料」或「詳細資料」被選取時，頁籤無
任何視覺回饋
A.資料內容應有區別
B.強化被選取資料之頁籤提示
如：被選取頁籤採用與資料內容框相同顏色作為視
覺提示，未被選取之頁籤則以深色作為提示
B

20. 其他內頁調整建議
20
現況 建議
互動提示不明確
• 點選「診間」欄位會出現診間所在位置資訊，但當
游標移入該欄位時，游標並未變化，無法提供民眾
作為該欄位可點選的提示
A.游標移入「診間」欄位時，游標轉為手指，強化該
欄位可點選的提示
B

21. 其他內頁調整建議
21
現況 建議
互動提示不明確
• 交通指南內的六項資訊選項，當被選取後，缺乏視
覺回饋作為當前頁面內容的提示
A.將六項資訊選項移⾄上方
B.交通指南內的六項資訊選項，當被選取時，以選項
變色作為視覺回饋
停車資訊
B

22. 其他內頁調整建議
22
現況 建議
功能名稱與實際功能不⼀致
• 選取「院內環景導覽」後，進入動態導覽畫面，此
畫面缺乏回到「交通指南」的控鍵
• 功能列中的「回首頁」非回到「臺中榮民總醫院」
首頁或「交通指南」頁面，而是回到「院內環景導
覽」的原點，名詞定義易使民眾感到疑惑
• 當右上方工具列展開時，最右邊的按鈕功能為關閉
工具列，而非其標示的「開始」功能
A.選取「院內環景導覽」後，以開新視窗方式呈現內
容
B.功能列中的「回首頁」調整為「回大廳」或「回起
點」
C.當右上方工具列展開時，最右邊的按鈕功能的名稱
調整為「關閉」
B
關閉
回大廳 C

23. 其他內頁調整建議
23
現況 建議
互動體驗不⼀致
• 選取「院內地圖」後，上方交通指南六項次功能按
鈕消失
A.保留「院內地圖」上方交通指南六項次功能按鈕
功能呈現不明確
• 「院內地圖」下方各位置欄位，當游標滑入任⼀欄
位後，下方圖示隨即改變
• 下方圖示因版面高度限制，顯示區域相當有限，當
民眾透過滑鼠滾輪將頁面往下捲動後，由於游標不
斷滑過不同位置選項，以導致當圖示區完全顯示時，
以非最初選擇的區域
B. 點選「院內地圖」內任⼀位置後，以浮出層的方
式，顯示該位置的詳細位置圖
C. 下方設置「上⼀區」與「下⼀區」的控鍵，提供
使用者不須關閉視窗即可瀏覽前後數個位置的詳
細位置圖
D. 使用者可點選浮出層視窗外範圍或以視窗右上角
之圖示關閉視窗，回到「院內地圖」列表
下一區 >< 上一區
急診大樓服務台第二醫療大樓麻
醉病患服務中心
服務台
第二醫療大樓一樓服務台
X
B
C C
D

24. 持用慢性病連續處方箋注意事項
其他內頁調整建議
24
現況 建議
圖片無加註說明
• 用藥資訊畫面選項圖片無法顯示
• 當游標置於圖片選項上方時，無任何文字提示，以
⾄於選項提示完全失效
A.正確顯示用藥資訊畫面選項圖片
B.當游標置於圖片選項上方時，提供文字提示
B

25. 25
首頁設計調整建議

26. 首頁設計調整建議
26
• 根據榮總Logo造型，將Header由原先的曲線改為⽔平長方形
• 常用功能，於網頁右側增加快速連結的浮動選單，提升網站
易易用性與便利性。
• 重新整合訊息公告區域，以儀表板方式呈現資訊，增加畫面
的顯示比例，讓使用者快速獲取所需要的資訊內容。
• 病友感謝採用圖⽂形式，添增故事性，吸引使用者目光
• 利用三等分排版，重新安排常⾒問題，與Facebook。
• 重新整合影⾳專區，在右側新增相關影片，吸引使用者目光，
增加影片點閱率。

27. 首頁設計調整建議
27

28. 首頁設計調整建議
28
輪播圖上的曲線色塊，建議修改呈長方形，其次建議輪播圖上切割出明確空間，展示企業標誌。
Before
After
Header
標誌看不⾒，輪播圖上的曲線色塊，會造成響應式網站版面樣式不統⼀，且許多零碎矛盾之空間。

29. 首頁設計調整建議
29
將搜尋列單獨區隔放置輪播大圖的下方，並增加搜尋列
於整體網站畫面的比例，以提高使用者的使用度。
Before After
搜尋列
搜尋列的位置曖昧，「熱門搜尋」的色彩與底色明度幾
乎相同，辨識度低。

30. 首頁設計調整建議
30
「色彩」採用官網的主色，調近icon間隔距離並加大icon尺寸，降低使用者觀看時的⾏為成本，這樣的調整更貼近
響應式的設計，也更能將icon上的細節表現出來。
Before
After
常用功能選單

31. 首頁設計調整建議
31
「常用選單列」會常駐於網頁右側最上層，以提供使用
者更快速便捷的連結途徑，分別的功能是「網路掛號」、
「看診進度」、「門診時刻」、「常⾒問題」、「粉絲
專頁」，院方可以依照自己的需求更換此模組的內容。
Before After
快速功能選單
右邊的臉書外掛，並不切合使用者登入此網站的需求。
並且遮蓋住太多版面，跳出的按鈕做在logo上，很難找
到，是使用⾏為的阻礙。

32. 首頁設計調整建議
32
整理空白區塊，框線將區塊完整的區隔，「最新消息」
與「各類訊息」消息類的資訊做整併，並以儀表板的方
式呈現，使用者能在同質的內容中快速切換主題，選擇
自己需求的主題內容，更深的近⼀步閱讀。
Before After
其他部分
最新消息區塊文字過長不易閱讀

33. 首頁設計調整建議
33
三欄卡片式設計，將「常⾒問題」、 「病友感謝」、
「病友選單」主題明確區分，調整文案段落，強化資訊
標題，控制文字長度，增加易讀性
Before After
其他部分
病友感謝文字過多，且資訊排列不易閱讀

34. 首頁設計調整建議
34
加大影片於網站中的視覺佔比，重新整合影專區，在右
側新增相關影片清單，減少使用者跳出網站的機率
Before After
其他部分

35. 35
簡報結束