機關網站使用者介面(UI)與體驗(UX)案例分析國家發展委員會

中華民國資訊軟體協會 106年12月18日
機關網站使用者介面(UI)與體驗(UX)案例分析
國家發展委員會
1

簡報大綱
• 研究目的
• 研究方法
• 研究發現
• UI/UX分析
• 總結
• 附件：其他內頁調整建議
簡報大綱
2

研究目的
• 提升國發會網站之易用性、優使性
• 使用者能夠更輕易了解國發會或是取得資訊
• 呈現國發會之科技、沈穩、前瞻性定位
• 呈現較⼀致的風格形象
研究目的
4

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

研究發現
使用族群：
A.各界專業人士，如：記者、經濟學家、社會研究者…等
B.⼀般民眾
使用目的：瀏覽國家政策、計畫發展…等
網站目的：
A.提供各類專業資訊
B.展現政府形象，塑造科技、沈穩、前瞻的風格印象
現行網站為近期網頁設計趨勢的長網頁與資訊區塊樣式，在
首頁上已能各類專業資訊內容，且功能區域界線明顯，為提
供使用者更好的使用體驗，在UI/UX部分提出幾項建議調整
項目。
網站現況
8

研究發現
• 制定文字、圖像的視覺標準，統⼀
風格。
• 增加圖像或圖像化的應用：如 icon、
圖表、圖形等。
• 減少條列式的⽂字的使用。
UI UX
• 依國發會主要業務與使命，調整資
訊呈現排列順序。
• 主要業務資訊圖表數據呈現手法調
整，使不同使用族群皆易取得資訊。
• 調整網頁互動效果，減少因效果而
干擾使用者瀏覽網頁。
色彩文字
圖像佈局
調整策略
9
資訊架構
資訊溝通互動體驗

研究發現
目前國發會網站顏色使用較為繽紛，為了塑造科技、沈穩、前瞻的風格印象，建議
色彩方面微調色調、使用比例。
以無彩色－白作為整體的基底，搭配黑、灰（10%－30%），與少量而大面積的主
色－藍色（#0a91f8），對比色橘色（#ff6701）和其他輔助藍色作為點綴。
又因目前所使用的藍色（#0a91f8）主色係較為年輕跳躍的感覺，故建議僅將其使
用在文字的部分，另微調ㄧ相近的藍色(#0a91ec）使用於大面積色彩。
色彩
10

研究發現
網站的文字為求簡潔明快與力量的感覺，建議整體使用無襯線的黑體字，例如
微軟正黑體、蘋方體，並依據現有網站之文字大小微調：
1. 內文－16px
2. 選單－18px
3. 大標題－36px
4. ⼀般標題－24px
5. 景氣指標標題－30px
為了提升網站閱讀性，讓使用者瀏覽文字時更加舒適，更符合人的閱讀習慣，
文字段落的行距建議訂定於1.2－1.4倍之間，段落的前後盡量避免標點符號與
落單的字。
文字
11

研究發現
建議整體形象清爽、簡潔明快，讓人有俐落的感覺，
可以清楚傳達出國發會意象與定位。
長網頁與資訊區塊為近期網頁設計趨勢，建議區塊功
能分明，並增加段落區塊間距的留白。
網頁頁面較長，使用者容易迷失，建議增設區塊快速
切換鍵，除了可顯示區塊數目，亦可作為目前所在區
塊之提示。
12
布局

研究發現
為了讓網站整體俐索、簡明，以色塊、線條切分功能區域。
圖型使用建議沿用「重大政策」中之圖形以達到⼀致性。
13
圖像

資訊架構
• 輪播內容皆為重大政策，與第三區塊重複
→ 資料內容應搭配時事、主要業務、重大政策等，多元化
• 公共政策參與平台選單重複出現
→ 刪除第6區塊之資訊，亦精簡第6區資料量
研究發現
14

UI/UX分析
• 字級切換的三個「A」圖示尺寸差異不夠明顯
→ 以「大」、「中」與「小」顯示
資訊導覽列
16

• 目前設計使用者須以 L 型軌跡選取右側選單
→ 特定主題類別之選單開啟時，當游標移出啟動區範圍外超過
0.5秒後，再於0.1秒內關閉該主類別之選單
資訊導覽列 / Mega Menu
UI/UX分析
17

• 游標⼀滑入啟動區便觸發選單
→ 無預期的開啟選單會產生干擾
→ 當游標停留於特定主類別項目啟動區範圍內超過0.5秒後，再
於0.1秒內開啟該主類別之選單
UI/UX分析
18

• Mega Menu資訊分類與呈現不明確
→ 以對比較高的顏色強化第2階與第3項目辨識度，避免使用相
同的項目符號
→ 第2階(藍色)與第3階(深灰色)項目區隔不明確
UI/UX分析
19

→ 主要業務/法治協調與國家發展基金無法在⼀個畫面完整顯示
→ 部分第三階選項名稱過長而跨行
→ 部分第3階選項項目名稱過長且跨行
UI/UX分析
20

→ 增加選單寬度，每列顯示五個主要業務類別
→ 縮短第3階項目名稱長度，以不須跨行為原則
UI/UX分析
21

• 跨瀏覽器相容性問題
→ 瀏覽器Chrome 解析度1920×1080 頁面縮放100%
→ 主要業務/法治協調無法在⼀個畫面完整顯示
→ 考量所有裝置，確保大多數民眾能正常瀏覽《網站親和性原則》
→ 考量螢幕解析度，以達最佳可視畫面《網站親和性原則》
FireFox/IE無此問題
UI/UX分析
22

UI/UX分析
• 按下Enter鍵無法觸發搜尋動作
→ 必須點選 SEARCH 按鈕
• 熱門搜尋的最後⼀項關鍵詞並未顯示完全
→ 將最後⼀項關鍵詞完全顯示，或只提供前四項熱門搜尋即可
• 按鈕名稱 SEARCH 與網頁語言不⼀致
→ 需考量使用者英文能力與網頁語言⼀致性
→ 按鈕名稱改為搜尋
搜尋列
23

UI/UX分析
• 搜尋列輸入搜尋關鍵字，再以Backspace鍵清除關鍵字後顯示
無關聯之關鍵字提示
→ 不需顯示任何關鍵字提示
搜尋列
24

UI/UX分析
• 搜尋結果頁切換範圍過小
→ 游標點選困難
搜尋功能-站內搜尋
• 無上⼀頁與下⼀頁控鍵
→ 使用者無法進行前後頁切換
→ 增加搜尋結果頁切換範圍
→ 增加上⼀頁 / 下⼀頁控鍵，使用者可快速進行前後頁切換
25

UI/UX分析
搜尋功能-站內搜尋
• 按鈕名稱 HOME 與網頁語言不⼀致
→ 需考量使用者英文能力與網頁語言⼀致性
→ 按鈕名稱改為首頁
26

UI/UX分析
• 首頁與內頁點選進階搜尋動作不⼀致
→ 使用者混淆是否還在國
發會網站
搜尋功能-進階搜尋
• 進階搜尋頁面與搜尋結果為Google網站畫面，點選任⼀結果，
原視窗回到國發會網站
→ 首頁點選進階搜尋，原視窗呈現Google進階搜尋頁面
→ 內頁點選進階搜尋，開新視窗呈現Google進階搜尋頁面
27

UI/UX分析
• 組件前景(搜尋列熱門搜尋/進階搜尋)與背景色彩相近
→
輪播區塊
• 輪播圖片重疊過多(6個)
→ 輪播數以不超過5項為佳
28

UI/UX分析
輪播區塊
• 搜尋列與輪播圖片重疊，且整個圖片皆觸動區域
→ 易誤觸
→ 將搜尋列與輪播區塊分開，亦可解決色彩相近問題
29

UI/UX分析
輪播區塊
• 圖文編排過於豐富，視覺無法聚焦
→ 主題視覺選用鮮明、強烈、清晰的圖像
→ 而文字區塊模組化，可以讓圖文的搭配不相互干擾
30

UI/UX分析
輪播區塊
• 圖文編排過於豐富，視覺無法聚焦
→ 主題視覺選用鮮明、強烈、清晰的圖像
→ 而文字區塊模組化，可以讓圖文的搭配不相互干擾
31

UI/UX分析
輪播區塊
• 自動輪播有礙於無障礙輔具使用
→ 不自動輪播
→ 由下方的圓點與兩側色塊提示使用者圖片切換
→ 當使用者的滑鼠在畫面上游移，大範圍的互動感應區塊能夠
讓使用者更輕易地觸及
32

UI/UX分析
景氣燈號與最新消息
• 景氣指標面板與輪播區重疊
→ 分散使用者的注意力且影響輪播區的瀏覽績效
→ 將最新景氣指標與燈號與輪播區塊分開
33

UI/UX分析
• 景氣指標圖表資訊過於簡化
→ ⼀般使用者無法理解圖表意涵
→ 以數據為主、搭配圖表與文字說明，讓使用者能快速取得指
標的數據資訊，並兼顧專業人士和⼀般民眾資訊取得難易度
34

UI/UX分析
• 影片與社群置於頁面前端
→ 易讓使用者停留較短時間而跳出網站
→ 將具時效性資訊(最新消息/熱門瀏覽)留在網頁前端，會轉跳
之資訊(社群/Youtube)置於後端
35

UI/UX分析
重大政策
• 重大政策僅顯示3項
→ 使人誤以為《國家有3項重大政策》
→ 四欄式的文章版面，同時呈現所有重大政策
• 直項單欄式的排列，閱讀模式為從上而下依序閱讀
→ 橫向四欄式版面，讓使用者可同時瀏覽並選擇要閱讀的項目
36

UI/UX分析
主要業務重要指標
• 圖像與內容呈現風格不⼀致
→ 現有的指標區塊已能夠很好的呈現其功能資訊
→ 各指標圖像風格、色彩與文字不⼀致，易使畫面紛亂，影響
資訊閱讀
37

UI/UX分析
• 圖像與內容呈現風格不⼀致
→ 圖表樣式、風格設計元素⼀致
• 圖表資訊過於簡化
→ 以數據為主、搭配圖表與文字說明，讓使用者能快速取得指
標的數據資訊，並兼顧專業人士和⼀般民眾資訊取得難易度
38

UI/UX分析
• 重要指標圖表－視覺標準與範例
→ 顏色統⼀以網站主要藍色（#0a91f8）為主，搭配較容易應用
的粉紅色（#ff71b5）
→ 字級建議20-22px，小字則為14px
39

總結
會造訪政府網站的人
多半是需要某項資訊
希望即時獲得正確且可信賴的解答
現行政府網站的呈現方式較注重政策廣宣和形象宣傳
民眾經常必須瀏覽許多不同部門
甚至搜尋半天還是找不到想要的答案
-政府該如何提升網站體驗，Bill FinnertyGartner研究總監
41
資料整理時
跳離 I wanna tell you…..
思考 If I were you….

42
附件：其他內頁調整建議

其他內頁調整建議
43
• 直接由google搜尋結果進入「協調推動產業創新計畫」時，麵包屑路徑錯誤
→ 連結文字應與目標內容相符《網站親和性原則》
正確路徑

44
• 點選特定⼀期的「當前經濟情勢月報」後，並未有任何說明，只有該期三個格
式的檔案下載
→ 造成選單階層過深，不利瀏覽外，增加操作次數
→ 只有檔案下載而無說明的內頁，如「當前經濟情勢簡報」、
「當前經濟情勢月報」，於上⼀層列表內直接提供檔案載點

45
• 主要業務/經濟發展規劃的「更多…」選項展開後無法直接看到更多的選單內容
→ 使用者於該選單所顯示的前5項內無法尋得所需的選項才會點選「更多…」
→ 更多的選單內容將「經濟發展規劃」內的所有選項與次選項展開，造成使
用者必須向下捲動並瀏覽剛才已排除之前5項分類及次選項後，才能看見原
本要看到的第6項及其後的選項
→ 只顯示大分類選項，點選後再展開其次選項
 國家發展規劃
 社會發展及對策
 人力資源發展
 國土空間規劃與發展
 經濟發展規劃
 促進產業發展
 數位政府

機關網站使用者介面(UI)與體驗(UX)案例分析國家發展委員會

Recommended

Recommended

More Related Content

Similar to 機關網站使用者介面(UI)與體驗(UX)案例分析國家發展委員會

Similar to 機關網站使用者介面(UI)與體驗(UX)案例分析國家發展委員會 (20)