跳到主要內容區塊

二、政府機關網站親和性設計原則

  • 資料來源:數位發展部

一、說明

  本設計原則整合網站設計親和性指標,分為「首頁親和設計」、「任務導向」、「導覽及架構」、「網頁及內容設計」、「搜尋機制」、「服務可信度」等6大原則,定義政府網站設計原則,訂定網站架構、版型設計及內容管理共同規範,以達民眾利用政府網站易用性,提供政府網站管理者設計維護網站時之快速導讀。

 

二、設計原則

項次 原則及細項指標

1.首頁親和設計

  清楚傳達政府網站目的,提供網站必要資訊,讓民眾產生良好印象

1.1 設計性
1.1.1 網站名稱及LOGO置於版面上方適當處(例如左上方)
1.1.2 常用服務功能,置於版面上方適當處(例如右上方)
1.1.3 版本切換按鈕,置於版面上方適當處(例如右上方)
1.1.4 服務功能應明確顯示,如「常見問答」
1.1.5 機關宣告資訊置於頁尾,如「無障礙標章」
1.1.6 站外連結按鈕6個以內為原則,置於版面適當處
1.1.7 提供胖頁尾(Fat footer)設計,做為輔助導覽之用
1.1.8 提供網站圖示(Favicon),做為輔助辨識之用
1.2 功能性
1.2.1 網站選單兩層內出現主要項目
1.2.2 考量友善,不宜產生橫向捲軸及跑馬燈等捲動性內容編排
1.2.3 提供必要導覽幫助,協助首次進入網站及使用期間遭遇問題之民眾

2.任務導向

  建立政府網站使用之必要提示,提供民眾友善操作網站功能

2.1 提供之下載文件或內容檔案,建議讓民眾自行選擇直接以瀏覽器開啟或下載儲存;超連結建議讓民眾自行選擇在目前視窗/分頁中開啟,或以新視窗/分頁開啟
2.2 網站圖片兼顧清晰品質與下載時間,避免過長等待
2.3 多媒體影音內容應預設關閉音效、不自動讀取,且可切換靜音,以避免干擾輔助科技操作
2.4 確保各項功能及媒體內容播放操作介面可僅使用鍵盤完成所有操作
2.5 表單填寫格式錯誤或未填寫的欄位,應告知正確處理方式;表單設計應盡可能減少資料蒐集,及避免要求民眾填寫政府機關已知或可由政府機關資料交換取得的資料
2.6 因應網站服務需要,於相容螢幕報讀軟體及瀏覽器朗讀功能之餘,額外提供文字轉語音服務
2.7 因應網站服務需要,以相容輔助科技之網頁標準技術提供文字旁注音服務,例如參考經濟部標準檢驗局補助財團法人中文數位化技術推廣基金會的「數位排版中注音調號定位方式」階段性成果,以運用W3C Ruby標記語法。
2.8 按鈕設計應明顯易按,具備足夠的觸發互動面積,與相鄰按鈕具備足夠間距,可由輔助科技辨認為按鈕,可透過鍵盤、觸控設備、滑鼠游標及其他指標介面依照按鈕的慣例行為進行操作觸發,且提供充足對比之視覺焦點指示及觸發操作反饋

3.導覽及架構

   建立網站使用動線,方便民眾找到相關政府資訊

3.1 導覽設計
3.1.1 以鍵盤Tab鍵觸發之輸入焦點移動應符合邏輯及視覺順序,並提供鍵盤操作機制使民眾可將鍵盤輸入焦點快速移動至各網頁地標位置
3.1.2 導覽功能列設計與排版具一致性
3.1.3 導覽按鈕名稱應清楚易懂,避免相近或重複,可由輔助科技辨認,且輔助科技透過應用程式介面取得之名稱與按鈕在視覺呈現的名稱相同
3.1.4 導覽按鈕應加註文字說明,不得僅以圖示代表
3.1.5 提供路徑連結列,用以顯示目前所在的位置與層級,方便返回上層頁面,路徑節點須具備連結功能
3.1.6 導覽目錄設計應依視埠尺寸適時調整為不同導覽模式,例如設計為摺疊式目錄,並於目錄展開收合等不同狀態間設計合宜的操作互動體驗,減少不必要的指標或鍵盤輸入焦點移動
3.2 訊息架構
3.2.1 架構依民眾使用目的、角色和興趣適當分類
3.2.2 提供有意義視窗標題
3.2.3 內容超出視埠尺寸或容器尺寸之頁面,應於靠近內容開始處加入可將焦點跳至各內容區塊或段落標題的快速連結
3.2.4 與網站內不同連結行為應清楚說明,如「站外連結」、「檔案下載」,宜設置中介頁面,區分站內與站外範圍,以有效告知使用者視窗將切換
3.2.5 網頁文章標題與重點應使用網頁標準語法明確標示,以利快速瀏覽

4.網頁內容及設計

   建立網站內容規格標準化及視覺一致性,讓民眾瀏覽網站順暢無阻

4.1 表單
4.1.1 在輸入框前面加註填寫限制、格式或提供填寫範例,民眾於填寫過程可看到填寫說明,讓應用程式介面使輔助科技能讀取各輸入欄位的填寫說明
4.1.2 確保表單可及性,讓民眾使用任何上網設備與輔助科技皆可順利使用
4.1.3 確保輸入框有足夠的填寫空間,或可由民眾自行調整填寫空間
4.1.4 在表單旁提供諮詢服務聯絡資訊
4.1.5 表單欄位應妥善依照網頁標準設置相關屬性,使民眾可運用各作業系統提供的輸入輔助功能及鍵盤配置,更有效率且更容易地輸入資訊
4.2 內容和文字
4.2.1 提供下載檔案包含符合網頁標準、國際標準、國家標準或技術開放性的檔案格式,註明檔案格式及檔案大小,文件檔案應符合文件格式規格定義的無障礙規範或指引建議
4.2.2 提供單位及主管業務介紹
4.2.3 提供申辦服務介紹及程序說明
4.2.4 提供單位最新消息、公告事項或活動時程等資訊,並利用RSS或Atom格式提供可接受網路爬蟲程式抓取的完整資訊版本
4.2.5 提供機關主管業務所產生的核心資訊
4.2.6 提供相關單位網站連結資訊
4.2.7 機關應視其業務性質及所可運用資源,提供語音及影音資訊服務
4.2.8 外語版網站內容應依外語人士需求提供,提高可用性,外語版內容須維持正確性與及時性並與華語版內容相符
4.2.9 外語版網站內容建議應經該外語系為母語之人士撰寫或審稿
4.3 頁面佈局和視覺設計
4.3.1 考量所有裝置及輔助科技,確保大多數民眾能正常使用及順利操作
4.3.2 考量螢幕解析度、設備直橫方向、文字尺寸偏好、明暗配色及對比偏好、動態效果多寡偏好,確保各種設備及民眾合理調整需求均能獲得合理且有效的使用體驗
4.3.3 建議設計列印專用的CSS樣式規則,使網頁內容可響應印表機特性呈現
4.3.4 字體格式大小及顏色具一致性
4.3.5 文字內容以使用各作業系統預設字型並設定代用字型為原則。使用網頁字型應考量網頁效能,以及不同語系之文字字型應符合各語系文化常用方式。多語系文字內容混合編排應考量視覺之一致性,用於數值、代碼、數理公式及程式碼之字型,應注重可識別性、對齊及換列等需求
4.3.6 超連結文字應標示底線,另可搭配不同顏色或游標懸浮效果以增加辨識
4.3.7 為影像、聲音與多媒體內容提供具同等意義的替代文字、字幕、逐字稿或描述性內容,以利使用者瞭解內容
4.3.8 網站版面應簡潔,避免使用不必要的圖像及動態效果,主要內容區域宜採用單欄式設計
4.3.9 機關網站因業務性質需求,如需建置外語版網站,宜採用相同版型語系切換方式設計,以利民眾於不同語系版本間切換閱覽

5.搜尋機制

   讓民眾輸入關鍵字,就能找到所需之服務,解決疑惑

5.1 搜尋輸入框應置於版面可清楚識別之處,且於網站所有頁面顯示及一致的位置
5.2 搜尋結果標示所在頁數及總頁數,方便檢閱
5.3 搜尋結果頁面不重複顯示結果
5.4 如果沒有搜尋成功,系統應依據民眾輸入的資料提供建議之搜尋項目
5.5 提供進階搜尋功能,篩選多種條件

6.服務可信度

   確保政府資訊可信度及一致性,讓民眾產生信賴感

6.1 連結文字應與目標內容相符
6.2 機關應及時更新網站內容,並標示更新日期,視網站情形標示內容權責單位,例如1個機關網站多個單位負責不同業務
6.3 定期檢視並修正網站資料
6.4 網站資訊內容用語應依所涉主管機關規定稱呼,包括立法院《法律用字用語統一表》、行政院身心障礙者權益推動小組《身心障礙者權利公約法規及行政措施修正原則》及中華民國大陸委員會《臺灣地區與大陸地區人民關係條例》等相關規定
6.5 政府資料開放應採用開放格式並定期檢核
6.6 外語版網站宜建立網站稿件審核機制,以確保網站內容正確