從國外旅遊一個月回來到台北,赫然發現原本停在合法停車格內的機車,不知道什麼時候被別人挪出停車格了,變成違規佔用人行道,還收到一張罰單通知書。遭到他人把我的機車挪出停車格,已經是第三次了,台北市民的公德心表現,實在令人灰心。

Email申訴的成功經驗

上一次的申訴才發生不久,當時透過網路進行申訴而且動作極為簡單,就是把違規告發單的資料以及事實寫在Email裡頭(Fig.1),寄到台北市停車管理處處長的信箱pma2@ms1.gsn.gov.tw,過了11天之後,我就收到回信確認申訴成功(Fig.2)。

Fig.1 透過Email提出申訴
Fig.1 透過Email提出申訴

Fig.2 收到Email申訴後的回覆
<br />
Fig.2 收到Email申訴後的回覆

當時,雖然感覺台北市政府的行政效率不是特別快,但是最後結果還算圓滿。最重要的是,過程順暢,我不需特別費功夫去處理申訴,寫封Email就完成申訴了,不費事。但今天要談的這第三次申訴─「網路申訴」經驗卻費了我大半天的時間,也深刻的體會到糟糕的網站設計有多麼的打擊使用者,值得撰文留念哪!!

藉著搜尋來到台北市政府警察局交通警察大隊網站

一開始我就不打算打電話詢問如何申訴,藉著google大神的威力,很快的找到網路申訴的信箱,使用的關鍵字是「交通違規申訴信箱」。查詢到的結果很多,有好幾個是台北市政府各單位的網址,而且每一個提到「交通違規申訴」的連結,通通指向台北市政府警察局交通警察大隊網站的網頁(Fig.3)。

Fig.3 台北市政府警察局交通警察大隊網站
網址: http://td.tcpd.gov.tw
<br />
Fig.3 台北市政府警察局交通警察大隊網站

很快速的瞄了一遍網頁,沒發現我想要找的停管處Email信箱,第一眼只看到幾個電話號碼。感覺這個網頁似乎不是我要的,又回頭拜託Google幫忙多查幾個網址,結果還是一樣,又是指回來這個網頁。

耐住性子仔細再讀,才發現有個非常不明顯的「線上申訴」四個字是可以click的。

轉到台北市民e點通網站

點進去線上申訴,來到新的網頁,這已經不是原來的交通大隊的網站了,而是「台北市民e點通網站」(Fig.4),我第一次來到這個網站,網址是.taipei.gov.tw結尾,雖然不是交通大隊的網站,但總還是台北市政府的網站。

仔細看看這個網頁,比交通大隊的網頁清楚。網頁標題叫做「違規申訴案件」,命名不夠精準,下方的文字很快的出現了交通,感覺這個網頁會跟”交通”+”違規申訴”有關。在頁面上方還有「線上申辦」button,不難找到,button前方的Icon有很好的提示效果。而另一個旁邊的「表格下載」button看起來就像是書面申訴的樣子,先不理它了。

Fig.4 台北市民e點通網站的違規申訴案件網頁
網址: http://www.e-services.taipei.gov.tw/
<br />
Fig.4 台北市民e點通網站的違規申訴案件網頁

ㄟ..又轉到「台北市民e點通網站」

點了”線上申辦”繼續往下走。突然跳出Javascript的Alert Message::「本案件已移至市民生活網」(Fig.5),不會吧!?我都還沒開始申訴,它怎麼就跟我說我的案件被移到市民生活網了,點掉Alert Message,網頁轉換到台北市民生活網(Fig.6)。原來是網頁搬家了,不是案件轉移,照道理說,講成「本業務已移至…」還比較白話些。

Fig.5 Alert”本案件已移至市民生活網”
<br />
Fig.5 Alert本案件已移至市民生活網

台北市民生活網的網址結尾.mytaipei.tw,看很不像政府機構網站,網站Logo也跟台北市政府無關,只有Logo上的用色勉強接近熟悉的台北市政府Logo。幸好,這一頁的內容與「台北市民e點通」的違規申訴案件網頁完全一樣,想都不想,繼續click「線上申辦」的button往下走。

Fig.6 台北市民生活網的違規案件申訴網頁
網址: http://eservice.mytaipei.tw/
<br />
Fig.6 台北市民生活網的違規案件申訴網頁

來到了台北市民生活網會員登入畫面

接下來,進入了SSL加密網頁,是台北市民生活網的會員登入畫面(Fig.7)。我滿的肚子的疑惑,若這個頁面才是真正的違規申訴網頁終點,那麼所有其他的前導頁面,根本不用繞來繞去,直接指到這個終點不就好了。

為了來到此處,不把click在google search result page計算在內,我已經去過了三個網站了:交通警察大隊網站 –> 台北市民e點通網站 –> 台北市民生活網了。

真是越來越像迷宮…看著這頁會員登入,我想下次我如果要協助客戶規劃網站會員登入,一定不要搞成這樣子,什麼說明都沒有,突然從上一頁的「線上申辦」變成得先登入會員。這實在很難理解,我想提出違規申訴,跟"成為台北市生活網的會員"有什麼關聯,除非這個網站Webmaster要靠衝會員人數來當作經營績效,連違規申訴都要綁加入會員才行。

Fig.7 台北市民生活網會員登入畫面
網址: https://www.mytaipei.tw/sso/Login.jsp
<br />
Fig.7 台北市民生活網會員登入畫面

賭氣的決定,非搞定線上申訴不可

走到這裡,沒有闖關成功,已經不是我要不要申訴交通違規的問題了,而是面子問題了,竟然有人能設計這樣的網路迷宮,若連我這種Internet Power User還不能闖關成功,那可不行,我打算跟這個迷宮拼了。

回頭來仔細看看台北市民生活網的會員登入畫面(Fig.7)中間,左邊是會員登入,右邊是憑證登入,而且有自然人憑證登入。這讓我有一點點佩服台北市政府的網站了,很不錯,可以使用自然人憑證去登入,感覺會很省事,心裡頭盤算至少不需要為了加入會員填寫一大堆欄位。

安裝讀卡機/加解密軟體,關掉Firefox改成IE

開了抽屜拿出了自然人憑證跟讀卡機,安裝好硬體之後,接下來則安裝軟體。憑證登入的說明文字很精簡,很快的讀到第三點,要安裝內政部SafeSign CSP
資料加解密軟體及憑證所需的ActiveX元件。雖然還要下載軟體及安裝,但對我來說,這兩個軟體安裝都不算難。

搞定後,快快的按下登入鍵,這麼大顆的登入button,連我這個大近視眼都看得很清楚,很好!!然後,跳出來Javascript Alert Message:「憑證登入只提供IE瀏覽器使用」((Fig.8)。

Fig.8 Alert” 憑證登入只提供IE瀏覽器使用”
<br />
Fig.8 Alert 憑證登入只提供IE瀏覽器使用

原來我使用Firefox是不能做憑證登入的,原諒他們這點小麻煩吧,過去的經驗告訴我,要同時設計一個網站符合IE跟Firefox或者其他瀏覽器,是一件非常有學問的事情,如果我自己都覺得困難了,也不要苛求台北市政府了。

就算是自然人憑證登入還是得加入會員

關掉Firefox,改成開啟IE,再按下一次憑證登入button。真沒想到,竟然要求我要登入會員(Fig.9),躲來躲去,還是避免不了加入會員這個迷宮大魔王,真是氣餒。網頁上的文字訊息是這麼說的:「第一次使用憑證登入,系統會自動要求您輸入臺北市民生活網的會員帳號和密碼。完成確認後,往後使用憑證登入,不會再要求確認帳號與密碼」。

Fig.9 憑證登入頁面
<br />
Fig.9 憑證登入頁面

第一次憑證登入要求要輸入一般會員的帳號跟密碼,這種設計雖然不正常,但是可以理解,很可能是為了採用相同的會員資料庫結構,因此即便是憑證登入者,也必須有會員資料才能跟後續的動線程式串接。

這一頁設計上的問題主要有兩個,第一個問題是缺乏引導加入會員的連結,既然要求第一次憑證登入的使用者要會員帳號,就應該考慮到非會員的使用者需要加入會員,也就不應該讓使用者來到這裡還要猜測是不是哪個步驟搞錯了,以致於還要輸入帳號密碼。

第二個問題是,憑證登入的說明文字沒有說明非會員首次憑證登入需要先加入,以致於首次非會員使用者點進去之後,才發現還要先加入會員。這就好像讓客人開了門進來,又把客人趕出門,感覺很糟。

認命的加入生活網的會員了

研究半天,終於確認還是得加入會員(Fig.10)才行,否則這個迷宮我闖不過去,只好乖乖認命去加入會員的地方填寫資料,然後收確認信,再回到網站確認一次。這才總算搞好了會員加入,有了一個台北市民生活網的帳號,配合憑證,這才順利的進入到真正填寫交通違規申訴的網頁了。這麼冗長的過程,弄得我差點都忘了到底自己在幹啥了!

Fig.10 加入台北市民生活網的會員
<br />
Fig.10 加入台北市民生活網的會員

原本以為總送幹掉迷宮大魔王了,沒想到那個魔王算小隻的。登入成功,進入違規申訴頁面前,還有一頁「台北市民網路e點通同意書」(Fig.11),不知道為什麼這一頁同意書又變成台北市民e點通了,我明明是在台北市民生活網啊!

認命的點選「同意」button,雖然訊息不一致,但是前面的過程已經夠亂,亂到麻木了,這個訊息上的不一致已經不算什麼了。

Fig.11 台北市民生活網裡頭的「台北市民網路e點通同意書」
<br />
Fig.11 台北市民生活網裡頭的「台北市民網路e點通同意書」

從違規申訴案件網頁的未登入頁面 (Fig.5) click登入button,登入之後,程式會聰明的自動帶往違規申訴案件網頁(Fig.12),萬一不是走這樣的動線,那就還要傷腦筋了,不過這是另一件事情了。

Fig.12 違規申訴案件網頁的登入後頁面,也是真正的違規申訴填寫資料的地方
網址: http://eservice.mytaipei.tw/ 須登入
<br />
Fig.12 違規申訴案件網頁的登入後頁面,也是真正的違規申訴填寫資料的地方

這一頁填寫違規申訴欄位的網頁(Fig.12),看起來平淡無奇,但這才是最厲害的地方,武俠小說中的無招勝有招就是這個。

網路迷宮的最後一關:迷宮大魔王之大考驗

基本資料欄位填寫不特別,只是我很無奈的把剛剛填過加入會員的資料,再填一次。原以為自然人憑證的驗證,可以很容易地驗證身份,省下填寫基本資料的動作,就像是報稅軟體一樣。(有沒有人可以告訴我,類似台北市民生活網的這種狀況,使用者已經採用自然人憑證來進行身分驗證了,但網站並沒有把我的地址資料撈出來的原因是什麼?)

下方的違規舉發通知單相關欄位的填寫可就令人頭疼了,其中有一欄 (Fig.12. point A) 必須填寫「違規通知單號碼」,有趣的是通知單(Fig.13)本身看起來像是號碼的地方有兩個,根本無從判斷哪一個才是所謂的通知單號碼。

Fig.13書面的舉發通知單
<br />
Fig.13書面的舉發通知單

「舉發員警姓名」(Fig.12 point B) 這個欄位跟通知單本身的欄位名稱雖然還是不一致,但至少還可以猜測應該是採證人這個欄位,偏偏我收到的通知單上頭有印刷的員警姓名,還有蓋印章的員警姓名。到底我要填哪位警察先生的大名呢?為了避免遺漏其中一位,只好把兩個人的名字都填了上去(幸好,資料庫欄位夠長,兩個人的姓名字串還容納的下去)。

接下來的「申訴內容」單純的text field輸入介面(Fig.12 point C),介面只提供一行高的輸入空間,猜想介面設計者也許認為申訴民眾都不會輸入太多內容?但萬一民眾想要舉證跟說明事實,要多寫些內容,這樣的欄位實在不容易輸入。

竟然得出動數位相機(或scanner)!!

下一個欄位「上傳原舉發通知單旣採證照片」(Fig.12 point D)。這個地方有兩個大問題。

一是舉發通知單跟採證照片都是書面的,我哪裡有辦法上傳到網路,除非掃描成數位檔案。第二個問題是,只有一個上傳檔案的欄位,表示只能上傳一個檔案,這豈不是要舉發通知單跟採證照片掃瞄在一起,或者利用繪圖軟體合併兩張圖嗎?

我家沒有Scanner,後來想了變通方式改成用數位相機拍照,直接把這兩個實體書面資料,拍在同一張數位照片裡頭。這樣子算是一種變通的解法。

理論上,不管是舉發通知單或者採證照片,書面檔案或數位檔案都在政府的交通管理機關裡頭,按照我上一次Email申訴的作法 (Fig.1),根本只要把舉發單的資料提供給停管處,他們就有辦法查證了。很難理解在網路申訴卻必須先把民眾手上收到的書面通知單及照片數位化,才能夠上傳完成申訴。

後來發現在”台北市民生活網的違規案件申訴網頁”(Fig.6.)的最下方,有這麼一段話(Fig.14),就說明了這一切,原來是逕行舉發的案件,如果要網路申辦得掃描原通知單及採證照片正本,可以縮短查復時間。但是要求民眾去掃描照片本來就是一件有挑戰性的任務,難不成台北市政府希望透過這個門檻來降低網路申訴數量嗎?

Fig.14 違規案件申訴網頁最下方的文字說明
<br />
Fig.14 違規案件申訴網頁最下方的文字說明

整個違規申訴頁面最讓人不服氣的地方是與書面申訴的差異。在違規申訴案件網頁上方(Fig.6) 可以下載 「交通違規陳述單」(如下圖Fig.15),有兩種格式(word/pdf)可以下載。

仔細比較,書面的交通違規陳述單(Fig.16)所需填寫的欄位,比起線上申訴網頁上的欄位,只要填寫少少的幾個欄位,姓名/身分證/通訊地址/車號/通知單號碼/違規時間地點,也不要求民眾必須附上通知單或照片。這種差異待遇,對線上申訴者很不公平。

Fig.15 書面的交通違規陳述單
<br />
Fig.15 書面的交通違規陳述單

終於來到最後一個欄位了「上傳申訴內容主張之提證(證據) (Fig.12 point E) 」。很可惜的是,這個欄位也是有問題的。要民眾提供採證的必要性或合理性,這裡不做評論。但是既然網路申訴的欄位要求民眾上傳檔案,來當作申訴的證據,為何沒有說明究竟要提供什麼檔案格式? 即便是Free Format自由格式,那也應該做說明。

如果這個欄位為非必填欄位,做個非必填的標示,不也很容易理解嗎? 這又是一個很像考試的欄位,除了考使用者猜測是否必須提供證據檔案,也考大家要如何選擇什麼檔案格式,甚至考驗上傳檔案的大小,萬一民眾提供的是100M的視訊檔案當作證據呢? (難不成這麼大的檔案也接受,那就厲害了)

打敗大魔王,迷宮過關了!!

由於不知道網站是否接受Word檔案?我決定乾脆直接用影像處理軟體,將護照上的出入境及不在台北市的時間證明,通通拍成數位影像,連同舉發通知書及採證照片,及申訴文字,合成在同一個影像檔案裡頭,當作是證據欄位的附件上傳。

處理完畢後,彷彿經歷了一次戰鬥,戰戰兢兢的按下最下方的「下一步」button,因為上傳兩個約500k的影像檔當附件,稍稍等了一下子,網站傳來令人欣慰的回應(Fig.16),我終於闖過這個難以置信的網路迷宮了。太高興了!

Fig.16 線上申訴送件終於成功
<br />
Fig.16 線上申訴送件終於成功

後記

文章寫到這裡,火氣早已經消了。反而為網站設計的同業們感覺汗顏,畢竟我自己也在這個領域裡頭,大家真是該好好檢討。這種網站只考慮到符合最低階的規格,完全沒辦法讓網路為大眾謀福利了,甚至讓網路多背負一個惡名。我認為網站規劃的思維,應該思考全面性的使用者經驗,並且關照到組織本身與外界互動的作業程序,只符合功能規格卻忘了使用者的便利,肯定得不到使用者的掌聲。