唐鳳專欄:打造設計系統─提升政府網站使用者體驗

2021-12-07 05:40

? 人氣

唐鳳期盼,未來設計系統能提供範例以及具體友善的建議,進一步改善政府網站的體驗。示意圖。(取自sweetlouise@pixabay/CC0)

唐鳳期盼,未來設計系統能提供範例以及具體友善的建議,進一步改善政府網站的體驗。示意圖。(取自sweetlouise@pixabay/CC0)

過去使用繳稅系統等政府數位服務時,是否曾經遭遇過「難用到爆炸」、「華麗到讓人迷惘」等體驗?「手機版網站怎麼這麼難用」、「怎麼又空白畫面」,是不是多少有聽過這些抱怨?

[啟動LINE推播] 每日重大新聞通知

在行政院工作前,我也時常遇到政府網站體驗不佳、易用性低等問題,比如手機支援度不良、資訊架構邏輯性低、找不到功能、不符合通用設計,亦或是介面上字體、排版、配色等,無法滿足各種與日漸增的民眾需求,也影響著人民與政府之間的互信。

近年來,為了提供更一致、順暢的使用者體驗,許多政府及企業紛紛開始制定自己的網站設計系統(Design System)。何謂設計系統?它就如同網站規劃的規範書,不但定義原則(principle)與樣式(style),包含顏色、排版或間距;也提供可重複使用的元件(component),如下圖的FlatUI提供按鈕、輸入框、下拉式選單、導覽列、進度條等元件;有些也會規範到互動模式(pattern),在特定情境下提供最佳的解決方案,例如表單、錯誤頁面如何呈現等等。使用相同的介面架構,能夠讓不同網站有一致性的風格與設計,而採用類似邏輯的資訊架構,更能有效降低使用者的學習成本,讓民眾能更容易的使用網站。

20211203-FlatUI提供的元件。(截自FlatUI)
FlatUI提供的元件。(截自FlatUI

英國GDS推出的設計系統,就是一個很好的例子。點開首頁,馬上能感受到其強烈的風格,藍色與黑色作為主色系,並提供各種樣式、元件、模式的規範與範例,設計師與開發者只要符合這些條件,就能打造出具有「英國政府風格」的政府網站。這套設計系統廣泛應用到其他政府網站,包含政府首頁開放資料平台疫情資訊等等,雖然各具網站功能差異,仍能呈現出整體的風格,不僅建立良好的品牌形象,使用者也更容易上手相同設計系統的網站。

20211203-英國政府設計系統。(截自英國GDS設計系統網站)
英國政府設計系統。(截自英國GDS設計系統網站
20211203-新冠病毒疫情資訊。(截自疫情資訊平台)
新冠病毒疫情資訊。(截自疫情資訊平台

我們辦公室的PDIS團隊,延續之前RAY與青年學生共同檢視、改善政府網站數位服務的精神,從單點延伸至全面,現正與新一批的實習生共同合作,研發「政府網站設計系統」。我們希望融入更多屬於台灣的元素,並參考常見的UI框架,並且盤點出容易導致使用者困惑的問題。

秉持「從自己辦公室做起」的精神,這套系統會先行與PDIS的網站進行整合,並與設計師、工程師持續調整精進,提供「便民、安心、省力」的數位服務。我們期待,未來的設計系統能提供範例,以及具體友善的建議,進一步改善政府網站的體驗。

*作者為政務委員

關鍵字:
風傳媒歡迎各界分享發聲,來稿請寄至 opinion@storm.mg

本週最多人贊助文章