跳到主要內容區塊

機關網站使用者介面(UI)與體驗(UX)案例分析_高雄市捐稅捐稽徵處

網站現況

高雄市稅捐稽徵處網站主要服務對象為專業人士和部分有稅務需求的民眾,首頁內容包含主要功能、大圖廣告、消息公告、影音專區及連外資訊;整體大致區塊分明。

網站目標使用者分析

1. 專業人士
主要為工作上之稅務查詢、稅額試算等。
2. 一般民眾
生活需求為主,主要為繳稅、瞭解稅務申辦流程、查詢稅務知識等。
3. 學生、老師
有教育上的需求,主要查詢稅務常識、使用兒童網等。

高雄市稅捐稽徵處網站使用者分析

網站問題分析

問題1-主要功能不明顯
由於稅捐稽徵處偏向功能型的的網站,有許多專業人士因應工作需求至網站進行稅務查詢、試算等功能;原網站主要功能雖已獨立置於首頁,然置放位置與視覺效果仍不及主選單搶眼,易讓使用者忽略。
問題2-提供的資訊過於表淺圖像視覺設計混亂
首頁大圖數量過多,且視覺設計混亂,部分圖像解析度不足,使網站資訊被視覺混淆以致忽略。
問題3-用詞語意不明確或過於專業
部分文字用詞較為專業,對一般民眾而言,較難理解其中內涵與目標之關聯。
問題4-缺乏明確形象
網站視覺設計未納入品牌形象之概念,網站缺乏一致視覺感受。

導入目標與策略

為提升高雄市稅捐稽徵處現有網站的易用性、便利性與易讀性,讓使用者能夠更直覺操作網站或取得資訊,並呈現稅捐稽徵處專業卻親民之定位,呈現出內容清楚、操作便利的功能型網站樣態。

導入目標

•提升高雄市稅捐稽徵處網站之易讀性、便利性。
•讓使用者可直覺取得資訊、完成任務。
•塑造具品牌渲染性與一致性的風格形象。

導入策略

使用者經驗面相
•簡化架構,整合重複功能,刪除非必要資訊。
•提升網站自身教學功能,提升非專業人士對稅務的瞭解,進而提高網站易用性。
•減少輪播大圖的數量,增加宣導重點的能見度,增設宣導專區放置長期宣導項目。
•增加網站頁面內容,讓使用者可以透過網站初步找到相關資料,減少直接跳轉 、 離開或使用搜尋引擎才找得到資料的情況。

使用者介面面相
•改善使用者介面型態,以扁平化視覺設計及資料區隔差異化為設計手法 (如icon、文字連結、banner設計),並增加微互動設計。
•調整區塊間距,增加功能性,並提升區隔性,提高版面舒適度。
•制定文字、圖像的視覺標準,塑造機關形象。
•增加圖像或圖像化的應用(如 icon、圖表、圖形等),減少條列式⽂字的使⽤。

導入手法

高雄市稅捐稽徵處網站之使用者介面調整包含入口形象之設計、以城市風格插畫導入品牌形象、曲線造型應用、以圖像優化溝通效率、導入、加大版面留白呼吸空間及導入品牌品牌識別色彩及形象等六大目標為手段。

視覺風格導入目標

一、入口形象設計
二、城市風格插畫導入品牌形象
三、曲線造型應用
四、以圖像優化溝通效率
五、加大版面留白呼吸空間
六、導入品牌品牌識別色彩及形象

視覺風格導入解析

一、入口形象設計:
以圓弧之造型框住Banner主要視覺作為入口意象之框架,鮮明的造型輪廓能加深使用者對於網站的印象,增強網站的品牌力度。但Banner需要進行嚴謹的圖像規範。
二、城市風格插畫導入品牌形象:
以乾淨、純粹、清新之城市風格的扁平插畫建構整個網頁之意像,提升使用者網站閱覽之親和性。
三、曲線造型應用:
呼應開源四方之意向,故以圓弧曲線造型作為此次網頁設計之風格基底,並套用至各元素之造型。
四、以圖像優化溝通效率:
清楚與簡潔的的圖像文字設計,運用Banner圖像、行銷廣告圖、Icon設計優化,以提升圖像傳達資訊的效率。
五、加大版面留白呼吸空間:
加大區塊與區塊之間的留白距離,以提升閱讀瀏覽舒適度與辨識度。
六、導入品牌品牌識別色彩及形象:
網站經營需有清楚的品牌意識與形象營造之目標,透過圖像與文字呈現加深目標對象對於網站之印象,進而建立品牌信任度。為呼應稅捐稽徵處標誌之色系,品牌品牌識別色彩以帶有桃紅偏藍色的亮紫色作為網頁色彩基底,以對比色綠色作為主要配色,兩色皆為中性色,互相搭配勾勒出鮮明強烈有記憶點的品牌意象。

色彩計畫

網站色彩可大幅度增強使用者對於網站閱覽的印象,色彩意象更能詮釋傳達品牌的精神與論點。目前高雄市稅捐稽徵處網站色彩使用以淺藍色作為主色,白色作為基底,較難彰顯稅捐稽徵處之品牌形象。故此次網頁用色建議從標誌出發,以標誌之紫色作為網站主要色彩基調,並配合國際網頁用色趨勢,將暗紫色調整為彩度與明度較高的亮紫色。整體網頁色彩調整方向如下:以無彩色-白作為整體的基底,搭配(10%-30%)的灰,與大面積的主色-亮紫⾊(#6052c6),輔以草綠色(#8ecd40)與其鄰近色黃色(#fcec72)作為畫面點綴;又因目前使用的亮紫色、草綠色與黃色作配色,建議插畫與Banner各類圖像均可妥善運用此色系之色彩,強化網頁視覺的整體意象。

文字規範

網站的文字為求簡潔明快與力量的感覺,建議整體使用無襯線的黑體字,並依據現有網站之文字大小微調:
1.內文-16px
2.選單-18px
3.大標題-44px
4.一般標題-20px
為了提升網站閱讀性,讓使用者瀏覽文字時更加舒適,更符合人的閱讀習慣,文字段落的行距建議訂定於1.2-1.4倍之間,段落的前後盡量避免標點符號與落單的字。

導入成果