聊聊公共參與平台的 UI 問題

公共政策網路參與平台(下稱「參與平台」),為 2015 年國發會推出的網站,旨在透過網路降低民眾參與公共事務的門檻,其四大功能如下:

1. 「提點子」 — 公民提案與連署

2. 「眾開講」 — 政府預告即將推行的政策或徵求意見

3. 「來監督」 — 政府報告政策進度

4. 「找首長」 — 聯絡部會首長

參與平台經過兩任政府的時間,發生過如月亮杯網購合法化博愛座存廢檢討前瞻基礎建設等提案和議題討論,行政院更函示 105 年 1 月 1 日起,法規與命令之草案應公告於眾開講平台,其重要性日漸增加。筆者以長期關注和使用該平台的個人觀點,提出該平台的 UI 的問題,畢竟是個人意見,偏頗與疏漏之處,歡迎多加討論。我認為最終還是要對參與平台進行 UX Case Study,才能全面的去了解大部分的使用者遭遇的問題或感受為何,並以此進行 Redesign。

做到一半的響應式設計

參與平台支援響應式網頁設計(RWD),排版能隨裝置螢幕大小而變動,結果導覽列沒做最重要的下滑後縮小功能,於是乎使用者不管到了哪裡,來說都有一條又灰又粗的導覽列佔去畫面六分之一到七分之一的空間(以最常見的 1366*768 解析度來說)。下方的「最新消息」一次只能顯示 4 個政府的回應,在黃色虛線框中間還有無意義的空白佔去畫面空間。

邏輯不一的按鈕們

同一個網站應避免採用風格或互動行為不一致的 UI 元件。提案平台使用的按鈕的樣式不一。在可點擊範圍不明的情況下,使用者不一定能知道按鈕的存在。比如網站中同時使用了有明確邊框的按鈕、但有像「最新消息」、「協助改善」這樣邊界隱形的、還有不規則甜甜圈圖比例變成按鈕,也有簡單用書名號括成的「【請點我】」。

到底哪裡是按鈕?

首頁的「最新消息」和底下的「協助我們改善網站」完全沒有任何等邊界讓使用者知道哪裡可以按哪裡不能按,以上圖的「最新消息」為例,只有我標藍色的區塊的部分是按鈕,在這範圍外就不是按鈕了,點下去不會有任何反應,畢竟連邊界或色差都沒有了,要怎麼知道哪裡是按鈕呢?


「協助我們改善服務」這邊,你可能以為這「+」號就是新增意見表單的按鈕,當然不是,而是整個矩形區塊(如下圖)都是按鈕。連代表關閉表單的的「×」號也只是裝飾,不管按的是表單的何處都能展開/收放頁面,讓人疑惑放這 icon 究竟是要做什麼用?


當書名號變成了按鈕

「多元帳號登入畫面」的三大平台用色彩和外型未經處理的 LOGO 原圖就算了,更奇怪的事情是在桌面端看起來好歹也有置中對齊,怎麼到行動裝置上就一起偏向左邊呢?畫面最底下,「貼心」設有帳號申請的連結,但連按鈕都懶得放,乾脆直接用書名號文字打一個「【請點我】」。


小到按不到的甜甜圈圖

按鈕中我認為最沒道理的是甜甜圈圖形,圖形的各個「環」都是一個按鈕,按鈕的大小還會隨著「附議中」、「已成案」等案件比例而變化,以下圖的「協作討論來說」,可點選區域的最長邊只有 33.64 Px,已經低於大多數 UI Guildline 的建議值(比如 iOS 是 44px)。這只是以可觸控區而言,可視區塊實際上更小,只有橘色區塊那麼大。那如果其他數據的比例再增加了,那這「協作討論」的按鈕不就必定會小到難以看見和點按嗎?

甜甜圈圖的意義在於告訴使用者目前此類型的資料佔有總數據的多少,但如果其中一個類型的數據只會不斷增加而不會減少,那圖維持同樣大小的情況下其他區塊只會不斷被壓縮小到看不見。例如已成案未成案的數量隨著時間過去,必然只會變多不會變少,於是乎覆議中和協作討論的比例環只會被不斷遭壓縮直到看不見,根本不需要甜甜圈圖統計也能知道「成案」和「未成案」的比例會最大。這圖就好比在戶政事務所放把已死亡人口放進「總人口比例圖」之中一樣的缺乏意義。


越解釋越混亂的流程圖

此圖的目的是在解釋提案的流程,我覺得非常難看懂這張圖,因為塞太多資訊,又沒有辦法組織這些資料。圖的大意是流程始於最左方的「申請提議」,基於各種不同條件和一定的時間,而有「成案、未成案、撤回或移除」等結果。我好奇的事情是

  1. 為何要將說明圖和主流程分開畫?
    一個提案成功的流程,會經過「申請提議」、「認證」、一直到「成案」,所以中下實心的黃橘框才是主要的流程,上方的灰色圖案只是補充說明,那為何要將說明圖和主流程分開畫呢,不是徒增理解困難嗎?使用者有辦法理解上方的每個插圖都是對應到下方的文字過程嗎?
  2. 流程的開始和結束在哪裡?
    一個基本的流程圖得有明確的開始和結束。狀態之間透過箭頭或是畫面安排,讓讀者了解流程運行的方向,並標明是什麼條件造成的不同結果。為何「申請提議」—「成案」之間這個主流程沒有箭頭表明方向?反而只有上方的補充說明圖和下方失敗結果有箭頭指向?
  3. 其他各種混亂
    從左下角第一個「自行繳回」看來,黃色空心框說的應該是導致失敗的「條件」,但隔壁的「管理機關檢核」怎麼會是提案失敗的條件呢?應該是「檢核未通過」才對吧。此外一樣都是指時間。「3 個工作日」放在框外,「2 個月」卻放在框內。諸如此類妨礙理解的設計族繁不及備載。
  4. 無法自行縮放
    流程包含文字是個一張完整的圖檔,所以無論是文字還是 icon 都無法根據裝置顯示器大小而改變佈局,搞半天網頁都用 RWD 了結果內文卻用個無法自己調整最適大小的圖片檔。

徒佔空間的素材

參與平台在每個子頁的頁首處都有大約 240 寬的圖片 banner,其中並寫有標題。但顯示該頁功能為何的標題在導覽列上就有了,內容處也都有對於該頁面功能的說明,這些無法增進理解的素材圖和標題顯得雞肋又徒佔空間,不是有塞素材圖網頁就會變得好看


不知道進度到哪的進度圖

此進度圖是參與平台中「來監督」中政府對自己政策完成度的說明。但除了「啟動囉」和「完成了」這樣不是已開始或已完成的進度狀態。使用者根本不知道具體的「努力中」和「快完成」進度到底等於是完成了政策的多少?階段的完成是用什麼當標準在評估?這就好比瀏覽器下載列的進度只有「下載囉」「努力中」「快下載好了」「下載了」,只是今天換成是顯示政策。缺乏成果說明和評估標準的情況下,本圖跟 2012 年經濟動能推升方案廣告的「很多事情都在加速進行中」十分的相似。

政策的落實和檔案下載的確是不一樣的,不是說到百分之幾就百分之幾,甚至時常會遭遇阻力,也因為如此,所以我們得尋找一個更好的進度呈現方式。

一個把提案按鈕藏起來的提案網站

沒有在參與平台提案過的朋友們不妨在下圖的「提點子」的網頁猜猜,該按哪個按鈕才能發起連署的提案?

猜到在哪裡嗎?提案按鈕藏在「如何提議」的區塊中,游標還得懸停在「如何提案」上方「我要提案」四字的按鈕才會冒出來。

在 UX 設計中,行動召喚(Call to Action,CTA)的設計十分重要,比如說在 Apple MacBook 網頁中,希望喚起使用者進行「購買」這個Action,Firefox 頁面則是希望喚起使用者前去進行下載這個 Action。而誘導的工作其中一個很重要的就是 CTA 的按鈕的設計,如果提點子希望使用者靠著該網頁進行議題提出解法, CTA 自然便是提案。而 CTA 的按鈕或文字等應放在與內容有明顯差異的地方,以同樣都是提案連署的網站為例,英國的 e-petitions 將提按鈕放在最下方,美國的 We the People 則有兩組,一組放在右上角,一組聚焦在首頁的正中間,符合 Z 型的視覺動線,且按鈕都位在使用者掃視網站時會經過的區域,並用適當的顏色或外型差異分隔此按鈕和內文。

我不確定參與平台為何要將「我要提案」的按鈕隱藏,預設成得滑鼠懸停才出現的設計,也許這是種避免太多提案造成氾濫的反使用者體驗設計(?

小結

公部門的網站遭批難以使用或醜陋已不是新鮮事,從第一代科技部的官網一直到報稅網頁皆可看出端倪,參與平台上近日更出現了希望在公部門網頁上標記製作單位的資訊以表負責的提案,足足表示了民眾對政府網頁的不滿意。參與平台本身看似在外觀上改善許多,但實際上細看會發現依然缺乏一致性、可用性,還增添不少冗餘。在政府網站採最低標、且容易受到受到主管機關「傳統美學」的影響下,我們難道只能被動的盼望著,下一個接到包案的廠商會更好嗎?

(待續)

延伸閱讀:

打敗時尚圈和建築界 英國官網如何奪設計首獎

Introducing:U.S. Web Design Standards