國家發展委員會 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. 研究發現
目前國立自然科學博物館的網站是乘載資訊型的網
站，主要放置許多展覽與消息，對於在觀展的一般
民眾使用者來說並不有善，網站目前有許多區塊都
是針對專家學者進行設計，但這樣的設計方向與
「為大眾有效地優化與改善網站服務品質」相違背，
故建議將TA設定為親子家庭，與一般逛展覽的民眾，
從他們身上所衍伸出的「參觀資訊」「管區導覽」
等服務內容皆為使用者較確切使用的需求。因此定
調此網站是「功能導向」＋「資訊瀏覽導向」兼具
的網站平台
網站現況
8

9. 研究發現
• 調整網站色彩度－提高網站顏色彩
度，減少灰色系的使用，提升使用
者對科博館網站的情境體驗。
• 視覺元素與造型微調－依親子族群
及自然科普形象，增加圓角及曲線
有機造型
• 增加照片的使用－科博館為探索、
挖掘自然真相之博物館，透過照片
的使用，使用者可更輕易理解網站
內容。
UI UX
• 依國立自然科學博物館主要業務與
使命，調整資訊呈現排列順序-將大
眾前往參觀科博館所需資訊、展覽
資訊等優先展示，其他網站連結與
影片則配置於網頁頁較下方。
• 調整網頁互動體驗，確保使用者使
用功能順暢。
色彩 文字
圖像 佈局
調整策略
9
資訊架構
資訊溝通互動體驗

10. UI/UX 分析

11. UI/UX分析主要功能選單區
11
現況 建議
使用者須以 L 型軌跡選取主要功
能選單
A.當游標停留於特定主類別項目啟動區範圍內超過
0.5秒後，再於0.1秒內開啟該主類別之選單
B.若特定主題類別之選單開啟時，當游標移出啟動區
範圍外超過0.5秒後，再於0.1秒內關閉該主類別之
選單
A~B
A~B

12. UI/UX分析輪播圖片區
12
現況 建議
自動輪播無法停用 A.輪播圖片會影響無障礙網頁使用，不
建議使用
輪播控制指示不明確
• 無左右切換控鍵
• 輪播指示控鍵作用範圍過小
• 輪播圖片數量過多
B.增加輪播區切換控鍵，或不使用輪播
C.加大輪播區內容數量與當前位置指示
圖示
D.輪播區內容數量不超過5項
互動體驗不一致
• 非所有內容皆可點選進入
• 大圖連結內容不一致，點選後部分為網站內
頁或主題網站，使用者在非預期下跳離網站
• 並非所有進入後之頁面都具備返回首頁功能，
需透過瀏覽器「回上頁」
E. 移除無內容之圖片
F. 輪播區圖片一致以新增分頁方式開啟
G.確保所有頁面都有回首頁或麵包屑功
能
B
C~D

13. UI/UX分析輪播圖片區
13
現況 建議
自動輪播無法停用 A.輪播圖片會影響無障礙網頁使用，不
建議使用
輪播控制指示不明確
• 無左右切換控鍵
• 輪播指示控鍵作用範圍過小
• 輪播圖片數量過多
B.增加輪播區切換控鍵，或不使用輪播
C.加大輪播區內容數量與當前位置指示
圖示
D.輪播區內容數量不超過5項
互動體驗不一致
• 非所有內容皆可點選進入
• 大圖連結內容不一致，點選後部分為網站內
頁或主題網站，使用者在非預期下跳離網站
• 並非所有進入後之頁面都具備返回首頁功能，
需透過瀏覽器「回上頁」
E. 移除無內容之圖片
F. 輪播區圖片一致以新增分頁方式開啟
G.確保所有頁面都有回首頁或麵包屑功
能
B
C~D

14. 14
其他內頁調整建議

15. 其他內頁調整建議
15
現況 建議
選單與內容資訊不一致
• 主選單「參觀與服務」內之次選單項目(12項)與左
側次選單項目(13項)不一致，多出「移失物招領預
公告」
• 主選單「參觀與服務」內之次選單項目(12項)與左
側次選單項目(13項)不一致，多出「移失物招領預
公告」
• 主選單「研究典藏與圖書」內之次選單項目與左側
次選單項目名稱不一致，上方為「近年成果」，左
側則為「研究成果」
• 主選單「關於科博館」內之次選單項目(8項)與左側
次選單項目(13項)不一致
A.主要選單的次選單名稱與數量需與左側次選單保持
一致
B.整合次選單內容，次選單選項建議不宜超過9項

16. 開放時間
開放時間
聯絡我們
其他內頁調整建議
16
現況 建議
資訊指示不明確
• 全網頁內容區塊皆僅以麵包屑作為標題，辨識度較
低
• 內頁次選單並未以變色或其餘方式作為當前功能提
示
A.內容頁面增加標題
B.增加各主選項的簡介頁面，而非點選各主選項後，
以第一個次選項作為預設內容
C.左側次選單以變色方式作為當前功能之視覺提示
D.游標滑入次選單時與點選後可採用不同顏色作為提
示
A
C
D

17. 其他內頁調整建議
17
現況 建議
資料架構層級顯示不明確
• 「參觀與服務/常見問題」有第三層選項(5項)
• 左側選單標題仍為第一層的「參觀與服務」，「常
見問答」標題則以更小的尺寸，顯示於上方，資訊
結構提示上不一致
A.以頁籤方式呈現於右側主要畫面內
B.左側次選單「常見問答」以變色方式作為當前選項
之視覺提示
C.麵包屑則顯示至「常見問題」，不需再顯示該五項
「常見問題」之選項路徑
B
A
C

18. 劇場簡介
影片介紹
場次時間
劇場資訊
目前位於： 科博館 〉 展覽與劇場 〉 劇場資訊
其他內頁調整建議
18
現況 建議
資料架構層級顯示不明確
• 「展覽與劇場/劇場資訊」有第三層及第四層選項
• 左側選單標題仍為第一層的「展覽與劇場」，「劇
場資訊」標題則以更小的尺寸，顯示於上方，資訊
結構提示上不一致
A.將「劇場資訊」內之選項整合為「劇場簡介」、
「影片介紹」與「場次時間」
B.點選左側選單「劇場資訊」時，子選單由下方展開
C.左側次選單「劇場資訊」以變色方式作為當前選項
之視覺提示
D.上方麵包屑則顯示至「劇場資訊」
A~B
C

19. 劇場簡介
影片介紹
場次時間
劇場資訊
太空劇場 立體劇場 環境劇場 鳥瞰劇場
目前位於： 科博館 〉 展覽與劇場 〉 劇場資訊 〉 劇場簡介
其他內頁調整建議
19
現況 建議
資料架構層級顯示不明確
• 「劇場資訊/劇場簡介」之第四層選項
A.「劇場簡介」內四個劇場選項以頁籤切換方式呈現
於右側主要畫面內
B.左側選單內「劇場簡介」以變色方式作為當前選項
之視覺提示
C.上方麵包屑則顯示至「劇場簡介」
B
C
A

20. 劇場簡介
影片介紹
場次時間
劇場資訊
目前位於： 科博館 〉 展覽與劇場 〉 劇場資訊 〉 影片介紹
尋找星生命 狂野非洲 宅鳥出任務
博物館
復活夜
漁取魚求暖化的故事 暖化危機 鳥瞰龜山島
其他內頁調整建議
20
現況 建議
資料架構層級顯示不明確
• 「劇場資訊/影片介紹」之第四層選項
A.將四個劇場八部影片簡介以頁籤切換方式呈現於右
側主要畫面內
B.左側選單內「影片介紹」以變色方式作為當前選項
之視覺提示
C.上方麵包屑則顯示至「影片介紹」
B
C
A

21. 劇場簡介
影片介紹
場次時間
劇場資訊
目前位於： 科博館 〉 展覽與劇場 〉 劇場資訊 〉場次時間
其他內頁調整建議
21
現況 建議
資料架構層級顯示不明確
• 「劇場資訊/場次時間」之第四層選項
A.將四個劇場場次時間以頁籤切換方式呈現於右側主
要畫面內
B.左側選單內「場次時間」以變色方式作為當前選項
之視覺提示
C.上方麵包屑則顯示至「場次時間」
太空劇場 立體劇場 環境劇場 鳥瞰劇場
C
B
A

22. 館區地圖
一樓平面圖 二樓平面圖
地下一樓
平面圖
科學中心 展廳位置圖演講廳 劇場位置圖 全館鳥瞰圖
目前位於： 科博館 〉 展覽與劇場 〉 館區地圖
其他內頁調整建議
22
現況 建議
資料架構層級顯示不明確
• 「展覽與劇場/管區地圖」有第三層及第四層選項
• 左側選單標題仍為第一層的「展覽與劇場」，「管
區地圖」標題則以更小的尺寸，顯示於上方，資訊
結構提示上不一致
A.將八個館區地圖以頁籤切換方式呈現於右側主要畫
面內
B.左側選單內「館區地圖」以變色方式作為當前選項
之視覺提示
C.上方麵包屑則顯示至「館區地圖」
C
B
A

23. 巡迴展
目前位於： 科博館 〉 展覽與劇場 〉巡迴展
其他內頁調整建議
23
現況 建議
資料架構層級顯示不明確
• 「展覽與劇場/巡迴至展」有第三層及第四層選項
• 左側選單標題仍為第一層的「展覽與劇場」，「巡
迴展」標題則以更小的尺寸，顯示於上方，資訊結
構提示上不一致
A.「巡迴展」架構下之「相關程序」與「可借用項目」
可整合為單一頁面，直接呈現於右側主要畫面
B.左側選單內「巡迴展」以變色方式作為當前選項之
視覺提示
C.上方麵包屑則顯示至「巡迴展」
C
B
A

24. 其他內頁調整建議
24
現況 建議
資料架構層級太深
• 「教育與活動」與「研究典藏與圖書」資訊架構過
深，不利於民眾建立對於資訊架構的心智模式與搜
尋
A.重新整合「教育與活動」與「研究典藏與圖書」架
構
B.建議不超過三個階層
A
• 科博館 〉 教育與活動 〉 活動項目 〉 導覽解說 〉 假日主題解說
• 科博館 〉 教育與活動 〉 活動項目 〉 科普演講 〉 科普講座
• 科博館 〉 教育與活動 〉 活動項目 〉 幼兒科學園 〉 關於幼兒科學園
• 科博館 〉 教育與活動 〉 活動項目 〉 劇場教室教學 〉 關於劇場教室
• 科博館 〉 教育與活動 〉 活動項目 〉 SOS劇場 〉 什麼是SOS？
• 科博館 〉 研究典藏與圖書 〉 圖書與出版 〉 使用注意事項 〉 民眾使用注意事項
• 科博館 〉 研究典藏與圖書 〉 圖書與出版 〉 本館出版品 〉 館 訊
• 科博館 〉 研究典藏與圖書 〉 圖書與出版 〉 本館出版品 〉 博物館學季刊 〉 各期目次
A

25. 25
首頁設計調整建議

26. 首頁設計調整建議
26
• 分眾連結一致首頁頂端，使分眾使用者快速進入目標頁面
• 搜尋列自成一個欄位，強化使用者搜尋所需資訊速度
• 將館內主要特展活動以滿版大圖方式呈現，有效吸引使用者
視覺焦點
• 參觀資訊以大型圖示表示，讓使用者使用更為直覺
• 增設館區導覽獨立區塊，讓使用者便於安排參觀行程
• 調整影片位置，降低使用者跳出率，並加大顯示比例，強化
視覺焦點
• 將其他園區聯外網站連結以圖示方式呈現，吸引使用者點閱
• 調整相關連結位置，提升相關連結有效性

27. 首頁設計調整建議
27

28. 首頁設計調整建議
28
• 元素排列靠齊格線，使閱讀視覺流暢。
Before
After
Header
• 圖像與icon並未對齊，使視覺產生擾動與混亂不協調的感覺。

29. 首頁設計調整建議
29
• 將聯外其他園區網站連結移至頁面尾端，降低使用者跳出機率
• 分眾連結移致首頁頂端，使分眾使用者快速進入目標頁面
• 移除特展廣告，使網站名稱區塊明確易讀
Before
After
Header

30. 首頁設計調整建議
30
• 主要功能選單採扁平化設計，維持網站清爽、明確的風格一致性
• 提升色彩飽和度，使高彩度的用色增添科博館多元、具前瞻、活力科學知識之意象
Before
After
Header

31. 首頁設計調整建議
31
• 將館內主要特展活動以滿版大圖方式呈現，有效吸引
使用者視覺焦點
• 搜尋列自成一個欄位，強化使用者搜尋所需資訊速度
Before After
搜尋列

32. 首頁設計調整建議
32
• 館區消息、活動、公告、參觀資訊等性質相近的資訊
整合於同一區塊
• 以條列式呈現資訊，使資訊溝通更明確
• 常態需求性之參觀資訊以大型圖示方式呈現，讓使用
者可快速獲取資訊
Before After
搜尋列

33. 首頁設計調整建議
33
• 將其他園區聯外網站連結以圖示方式呈現，較能吸引使用者點閱
Before
After
Header
• 原其他園區聯外網站連結以文字方式置於首頁頂端，容易被使用者忽略

34. 首頁設計調整建議
34
• YouTube影片移置業面相對尾端位置，減少使用者跳出
機率
• 加大影片比例，增加使用者留在網頁中瀏覽的機率
• 同步放置熱門展覽區塊，可對使用者再次宣傳主題展覽
Before After
搜尋列

35. 首頁設計調整建議
35
• 資訊頁尾一般給人頁面結束的概念，相關連結至於資訊
頁尾下方，使用者易忽略
Before After
搜尋列
• 將相關連結移至於資訊頁尾上方，可使相關連結有效性
提升

36. 36
簡報結束