ux ui design works banner

臺北市市民服務大平臺

遊石設計團隊本次與中華軟協、PDIS合作,參與並協助「體檢政府網站數位服務」使用者中心設計(UCD)工作坊,並針對「臺北市政府市民服務大平臺」網站進行UIUX評估作業。在過去執行政府數位轉型專案:桃園市網路e指通的成功經驗下,我們期望能輔佐協助政府機關與青年學生團隊積極溝通,使參與方們在三天工作坊中,釐清目前網站遇到的問題、使用者痛點、機關人員需求等,並重新規劃網站平台的使用者體驗與流程,讓民眾在線上進行申辦服務時能更加輕鬆、流暢、有效率,進而引導民眾生活經營逐步走向數位化,帶來數位轉型的正向成效。

市民服務大平臺簡介

市民服務大平臺是由台北市資訊局所建構,整合臺北市政府各機關之申辦案件服務,提供超過1400項線上申辦服務,並提供市民24小時全年無休的案件申辦服務。



“超過 1400項服務,如何透過導入使用者中心設計優化策略,統整原先五花八門的資訊,並精簡使用者申辦步驟?“


設計挑戰


1. 重整資訊架構
2. 簡化申辦步驟
3. 順暢流程動線
4. 改善搜尋檢索



重整資訊架構:
臺北市市民服務大平臺是市民申辦服務的綜合入口網站,提供民眾日常生活所需的相關申辦服務如申辦說明、線上申辦、進度查詢等,網站服務資訊內容多而龐雜,而目前的網站沒有提供有效的服務項目分類與對應的資訊架構,無法有效幫助使用者找到目標申辦服務。需更符合使用情境與需求,讓使用者在尋找目標上更順暢。

簡化申辦步驟:
線上申辦服務步驟繁雜,申請流程過於冗長、費時,若以線上申請「租用公有場地」流程為例,申請步驟共有七個階段,讓使用者在申請流程在感到煩雜、不悅,且表單跳轉頁面多、表單設計易造成填答錯誤,更加造成使用者困擾。

順暢流程動線:
頁面視覺動線設計不順暢,不易確認相關申請資訊的內容,若以租借場地的時間選取流程為例,時間資訊顯示不明,難以快速理解是否可供租借,且在選取時間後,資訊內容和確認選項編排位置不佳,使用者容易因視覺動線不流暢而產生焦慮。

改善搜尋檢索:
首頁易用的關鍵字搜尋功能,也沒有有效的篩選搜尋功能,例如目前搜尋功能沒有支援模糊搜索或全文搜索,故使用者在關鍵字查詢上不易搜尋;另外,目前各項申辦服務並無提供的篩選器或能篩選條件極少,讓使用者難以選取適合的篩選條件,需放置符合使用者需求的搜尋欄和篩選器,讓用戶在搜尋功能上無障礙。




設計研究

顧客旅程地圖
導入策略與手法

透過顧客旅程地圖 CJM,找出網站問題與痛點


帶領工作坊團隊成員共同利用「顧客旅程地圖」(customer journey map)工具進行網站使用者流程分析,將蒐集到的使用者與利害關係人訪談資訊透過視覺化、圖表化,拆解使用者的使用流程、行為動作、接觸點、情緒波動和痛點等,進而檢討服務過程的缺失,以作為設計改善的參考。


導入策略與手法

在檢視現有網站的過程中,我們認為Jacob Nielson於2005年所提出的十大網站體驗設計原則中,有幾項特別可以用來檢視網站的視覺介面設計,透過以下六點經驗法則(heuristics)來進行評估,可以更快速地讓我們定義現有的視覺介面設計問題:

1.一致性和標準化(Consistency and standards)
市府主色系帶入設計,定義網站的視覺識別系統,也透過重新設計呈現元件的樣式,提升一致性和標準化,降低使用者的學習門檻並增加識別度。

2.連結系統與真實世界(Match between system and the real word)
打破原本以機關的服務為框架的資訊架構,改以更貼近使用者的語言、情境出發,重新分類1400餘種的功能,以更有效查找。

3.幫助和說明文件(Help and documentation)
增加畫面上的說明文案,並以更加精確和能幫助使用者理解的方式撰寫。透過強化幫助和說明文件,加以改善工具型網站資訊過於複雜而造成困擾的議題。

4.辨識而非記憶(Recognition rather than recall)
篩選與規劃資訊內容,幫助使用者快速分辨並從中取得訊息,且將重要的介紹說明放在顯眼或可輕易使用的位置,讓使用者集中注意力於執行關鍵行為,減少錯誤發生的機會。

5.美觀與簡化設計(Help and documentation)
重新規劃設計申請流程,簡化原先繁瑣的申請步驟,合併或隱藏非關鍵訊息或功能,僅突出重點資訊,減少使用者的記憶負擔、增加易用性,也防止使用者在繁瑣的流程中出錯。

6.視覺層級(Visual Hierarchy)
利用視覺元素區別資料的重要性,並且重新組織、排序內容,引導使用者觀看的焦點(Call To Action)或順序,讓使用者盡可能輕易地理解資訊。




設計執行

面對不同的問題,我們也透過工作坊的發想,試圖提出可能的解決方案,以下列舉四項設計重點。

此外,在工作坊討論過程中,發現平台中「場地租借」為市民大平臺使用者流量最高的服務之一,且相比於活動場地,運動場地租借量更大,為重點服務項目。因此,為資訊局機關人員重視的使用者流程服務之一。

但目前使用流程有遭遇市民反應不夠順暢、不好用,且實際研究也發現資訊流和實際租借狀況不一致,沒有即時同步租借資訊。

設計重點範例#2、#3、#4,三項設計重點,則以「公用場地租借」此服務進行市民大平台體驗設計優化與改善的說明。


設計重點範例#1:改善首頁搜尋引導文字與資訊分類方式,讓使用者讀取資料無負擔

原本的引導文字「您需要什麼服務?」無法讓使用者清楚理解網站主要用途,需要使用者的推測與猜想。而建議改善的新版首頁設計,提供清楚明確的引導文字,並且加入熱門服務排行榜,作為市府政策宣導的區域,引導使用者可由此直接進入推薦服務。

而申辦服務區塊則重新設計分類方式,改為「服務主題」、「身份角色」、「機關單位」分類,以使用者需求而非機關單位的角度出發,能讓使用者快速了解平台主軸與申辦服務項目,更方便查找。


設計重點範例#2:優化進階篩選功能、索引標籤,服務查詢更便利

以公用場地租用為例,進階篩選功能改為獨立放置於左側更明顯,同時也考量RWD響應式設計優化體驗,並讓原先的篩選功能更易被發現和使用,解決不易搜索的問題,另外,也添加場地分類的索引標籤,清楚標示場地類別,方便擊進入查看相關場地。


設計重點範例#3:精簡申請流程,三步驟輕鬆完成

原先公有場地租用的申請流程為七個步驟,分別為簽署同意書、挑選租用時間、填寫資料、確認內容、身分驗證、繳費、步驟完成,繁瑣的流程會造成使用者申請時不耐煩且效率較低。團隊的重新規劃與設計申請流程,以合併頁面、小視窗呈現及刪減非必要的步驟等方式,將其簡化為三個步驟,增加使用者的申請效率。

流程優化關係圖:


設計重點範例#4:清楚區分租借狀況,使用流暢無障礙

原本的月曆設計,無法一眼看出可租借與不可租借日期的分別,使用者須個別點擊日期後才能了解預約狀況。而建議改善的新版月曆設計,運用顏色清楚區分租借日期的狀況,以黑色日期表示可點選租借、灰色日期表示無法點選租借,並且以灰色日期加上紅色斜線表示此場地已額滿。




專案總結

    1.後疫情時代的數位轉型需要看得見的硬體設施與建設,而從政府到個人的服務軟體平台多為服務整合平台,規模與資訊量龐雜。透過良好的資訊分類與資訊架構,引導使用者理解各服務內容、找到需求項目,並順利使用服務。

    2. 表格設計中遵守既有設計規範,著重跨流程間與操作控件的一致性,將有助於減少使用者的學習負擔。


    3.對於內容豐富,資訊繁雜的網站,透過資訊分類、編排規劃提升閱讀的順暢度。善用視覺階層規劃以及版面區塊配置,區分內容層級,更具組織性。



    4.重新規劃設計申請流程,簡化使用者所需步驟,合併或刪減非重要訊息及頁面,不只讓重點流程突出,同時增加操作過程中的流暢度。


特別感謝本次合作單位PDIS以及工作坊的同學們:李彤、孫若盈、李佩芸、張硯涵

你可能有兴趣的案例

联系我们