生活中的介面設計|報稅篇

前言:生活中的介面設計

隨著科技進步,我們越來越依賴技術來處理生活大小事務,同時也因為自動化服務的普及,介面友善度成為近期最受關注的一環。

不過,許多生活上必需接觸的介面,卻在傳達設計上,讓使用者產生錯愕。

身為設計師,面對問題並解決是我們的天命!這次文章的主題就是探索生活中遇到的介面傳達問題,同時提出可能的解決方式。

五月是 報稅 的時節,同時也產生許多民眾的困擾。報稅的方式由過去親自跑一趟國稅局,演進到推出各種不同的便民服務,如:安裝軟體,透過憑證 報稅 外,還有便利商店代收…等。目前,人手一台智慧型手機已成趨勢,或許新一代的族群在面對報稅議題時,馬上會猜想可能有對應的手機應用程式 ( App ),便開始在一些平台上進行搜找。不過,經過嘗試,我發現了以下幾點問題與情況:

輸入相關詞彙無法找到官方的 App

當我們在 Google Play 及 App Store 輸入「報稅」關鍵字,前者會出現幾個相關的 App,但並非由官方(財政部)上架,且也不是解決「報稅」這個核心問題;後者則沒有相關的產品。

Google Play 報稅

▲Google Play 上搜尋 : 「報稅」 所得出的前幾項結果。實際操作並沒有辦法解決所得稅申報的問題。

 

去年還有 報稅 的 App,但今年不在架上

在前個情況發生後,我們可能會想:「也許官方沒有製作報稅相關的應用程式吧?」。但搜尋過去的相關報導後發現,2015年有媒體曾刊載官方的報稅 App 資訊,不過從提供的連結嘗試到兩個平台 (iOS/Android)下載,卻都發生問題。

螢幕快照 2016-05-26 上午10.54.10

螢幕快照 2016-05-26 上午10.54.26

從連結發現,2個平台都沒辦法進入產品下載頁,顯然已經下架。

 

旁敲側擊,輸入關鍵字「國稅局」,找到有 報稅 功能的官方 App

上述的方法都無結果的情況下,我們嘗試搜尋其他關鍵字:「國稅局」,出現了若干結果。其中,財政部發行的「財政園地」App 描述中有提到繳稅的服務。

螢幕快照 2016-05-29 上午8.26.42

螢幕快照 2016-05-29 上午8.35.01

▲由財政部發行的「財政園地」App,主打財政資訊,也從描述中看到繳納稅款的服務功能。

我們立馬下載並進行繳費流程。打開後發現,繳稅只是該應用的一部分,還包含如資訊查詢等其他服務。而我們是由操作流程來評估整體的易用性,也藉此驗證是否能妥善完成報稅任務。

不過,使用過程中發現了幾個操作上的問題:(以下以 iPhone 5 為操作裝置,相異機型與平台可能結果會有不同)

首次進入財政園地 App 後(iOS版),整體介面卻以 Android 的設計配置為基準。除了這個較大的問題外,我們由上而下來分析首頁的設計:

Artboard 2

▲現在可下載到的財政園地 App. 從上至下的標記處分析一些使用問題

1. Status bar

每一種平台( iOS /Android)都有狀態列這個設計,App設計團隊為了延續其 Logo 底部多彩的特色,所以不顧 iOS Human Interface Guidelines 的建議,將多彩元素帶入狀態烈的背景中。雖然可能達到了某些辨識度的效益,但卻大大的干擾了時間與狀態資訊的閱讀。尤其 iOS 9 之後版本的狀態列還身兼回到上一項應用的功能,多彩的背景反而干擾使用者的操作。

螢幕快照 2016-06-02 上午1.02.30

▲忽略了 Apple 給開發者的高對比、單純色調的開發建議。設計準則請見 Apple 提供的:iOS Human Interface Guidelines – Bars

2. App名稱

畫面上看到,App 名稱靠向左側,雖不會有太多操作的障礙,但對於 iOS 常見的放置中央,為求更好的使用體驗,我們應該還是將名稱置於中央較好。

3. Navigation Bar (右側)

我們可從經驗判別,放大鏡圖示是搜尋的功能,不過旁邊出現的「眾」「稅」則難以從字意與顏色中,得到足以研判其功能的資訊。在此,使用者只能猜測可能代表的功能,若點按進入的結果與預期不同時,就會增加來回進出頁面的困擾;倘若使用者不常使用此 App(較少機會去熟悉), 下次肯定有很高的機率產生相同的情況。

Navigation_Q

▲單一的文字難以表達按鍵功能,除了點按後與預期功能不符造成來回出入頁面之外,與平台使用者習慣相左的位置配置,可能讓使用者忽略這些功能。

4. Banner

具廣告推廣的功用,但圖面的安排使得副標語過小,這樣反而無利於閱讀。另外,整個 banner 壓縮到下方文章標題,導致閱讀範圍被限縮,需要要多次滑動才得以閱讀完畢,降低閱讀效率。

font size

▲Banner 的副標字體小,幾乎是在 iOS 建議的最小字體尺寸。在可被閱讀的資訊中,這樣的字體大小是不夠友善的 (右側為 11 point 的字體尺寸比較) (iOS字體規範請見 iOS Human Interface Guidelines – Color and Typography)

Content_move

▲Banner與主要的文章功能相互搶位。像是 4.5吋 或低於此螢幕尺寸以下之螢幕裝置( iPhone 5/ 5S / SE / 4 / 4S ) ,一次能夠顯示的資訊就只剩 4欄 不到,以這樣的方式滑動,若有 40篇 文章,則需要向上滑動近 10次 才能將內容閱讀完畢。

5. 分類及文章

以首頁佔據的空間大小來看,此部分是整個應用中的主體。每篇文章會對應不同分類,設計上以顏色來區分,卻與 “分類列” 上的文字(熱門、最新消息、公告…)沒直接關係,使得這些標籤顏色用途不大。

kind

切換文章分類會以對應的顏色標籤呈現,而在閱讀熱門 (全部) 文章時,這些標籤會混合在一起,但這些顏色與分類的關係並沒有搭配,單純為裝飾而做的顏色反而顯得不知所以然。

6. Tab Bar

Tab Bar 常見於 iOS app 中,不過由這項特徵來判斷是 iOS 或 Android app 的概念已經模糊了,因此 Android 使用者應該也很熟悉這些切換方式。但這裡的 Tab 有一些問題,就是負責的功能類型太多,例如突然跑出來的財政地圖。另外,屬於閱讀資訊的「相關連結」與「我的收藏」被「首頁」按鍵分開,在功能的配置上不太妥當。

O Tab_Q

▲這裡將不同功能以不同顏色框起,發現「推薦連結」與「我的收藏」都是與文章閱讀有關的功能,這樣的 Tab 配置分佈在邏輯上產生疑惑。

7. 其他

除了首頁之外,整體流程中還存在許多瑣碎的問題,例如 : 進入文章閱讀後出現的分享標誌是 Android 使用者較熟悉的圓形連接圖示,不過這個問題與報稅流程的流暢度較無關,故不討論。

 

就目前的畫面,我們難以確認,怎麼進入報稅的功能。也可能因為目前不良的設計方式,讓使用者沒有察覺此項功能。我們秉持測試精神,點按可能是按鈕的的地方,發現原本寫著「稅」的右上角紅色塊狀則與稅務有關,只是進入後又有一些情況。

QR Question

這頁面名稱是「線上繳稅」,但出現另外兩項功能:「二維條碼」與「三段式條碼」,實在讓人摸不著頭緒。在翻找稅單與查閱網路的資訊後,才發現 QR Code 是今年的繳稅方式。

 

IMG_0483拷貝

▲翻找稅單才注意到的QR Code

在未廣泛宣導的情況下,民眾難以得知這兩種條碼的使用方式。這必須搭配實體的宣導政策,否則就得靠自己主動去找方法,反而產生更多疑惑與不便。(整個 App 測試完畢後,我還是不知到三段式條碼要怎麼使用 = =)

體驗過政府版的流程後,我們從現有的架構提出的若干修改,提供大家討論,並期待激盪更多可能性:

mockup

我講述幾個首頁調整的方向:

1. Status bar

在此,修改方式其實很簡單,拿掉影響閱讀的多彩色塊,回到單純底色,清楚的傳達資訊即可。

2. Navigation Bar

這邊修改重點在於,讓配置回歸 iOS 使用者熟悉的位置。首先,將功能鍵置於 Navigation Bar 左右兩端 ,分別是設定與搜尋 (大部分使用者不需文字就能解讀出這兩個icon的語意)。左側出現的設定是從原版上 Tab Bar 的「更多…」而來。

Navi

▲Status & Navigation Bar

chance

▲原先 Tab Bar 的「更多」功能轉變在 Navigation 作為設定功能,模糊不清的「眾」按鈕則整合在搜尋建議中

而原設計中有一個模糊不清的「眾」按鍵,其實它的功能是呈現依 “特殊搜尋需求” 的分類。原版本每次要切換類別時,都會出現很炫的旋轉動態效果,這樣的干擾使得切換速度變慢,因此簡化成條列式,並放置於功能中,避免掉多餘且不明確的設計。

search

▲[左-修改版本,右-原版] 將特殊需求的篩選整合進搜尋功能,讓本來模糊不清的「眾」按鈕可以消失,不干擾使用者判斷功能。

3. Banner 與 文章之牽引關係

原版 banner 圖與文章的標題文字等資訊佔據大量空間,其實可讓使用者向上滑動時,將 banner 隱沒到上方(並固定切換分類條),這樣想往下閱讀時,一次能顯示的文章數量就能增加。同時修改時間這類附屬資訊的編排(ex. 2016年5月25日 改為 2016.05.25),讓 banner 顯得更大方,文字閱讀也不會太過擁擠。

move

▲文章上推後,banner 隱沒起來,留下分類與文章標題,搜找資訊上更為便利。

4. 文章類別

原版文章類別非常多,雖然我們對於資訊過多的分類覺得不妥,但在不更改分類項目下,嘗試整合原版的各項功能。例如,我們將原本 Tab Bar 上的「推薦連結」與「我的收藏」放到新設計的文章分類條中。

因為這兩項都是屬於 “文字閱讀 ” 的內容,類似的功能在 Tab Bar 重複出現會顯得雜亂。另外,分類文字下也增加了與文章標籤對應的顏色,讓使用者能夠與這些標籤有所連結。

Tab_cnacel

Artboard 3

▲ 原版本的「推薦連結」與「我的收藏」可以與文章整合,讓出 Tab Bar 的空間,對整體的功能分類及辨識會有直/間接所幫助。ˊ而分類項目加上顏色,則與文章標籤色對應,幫助快速找到想切換的類別。

5-1. Tab Bar

最後,就是對 Tab Bar 的修改。將原本 5 項 Tab 縮減成 3 項,並把不容易理解的「稅」按鍵變為「條碼繳稅」,讓使用者明確知道這是繳稅的功能,也能預期進入後會有什麼樣的功能存在。變為三格後也能讓解說文字加大,更易閱讀。

TabCompare

▲ [左-修改版本,右-原版] 不同功能以不同顏色標註,會發現原先的功能邏輯容易讓使用者混淆。新設計的提案保留除回到首頁的功能,財政地圖與條碼繳稅對欲繳稅之使用者而言,是分別是實體服務及線上服務有關,邏輯類似,故安排於此。

5-2. 條碼繳稅

一進入原版本的 “線上繳稅” 後,會看到兩個條碼繳稅的按鈕,使用者應會感到怪異。但我們將文字調整為 “條碼繳稅” 後,會讓使用者產生預期心理,而知道點擊後會出現什麼(只要將文字微調就能有大大的改變)。再來,新的政令宣導,或許會搭配一些網路或影片宣導。所以我們在這裡新增一項 “使用教學” 的功能,點擊後能開啟網頁連結,以幫助使用者理解如何使用新式繳稅方式。此外,之後要維護這些繳稅的規則,只需要修改網頁端即可。

code

[左-修改版本,右-原版] 修改提案增加使用教學,讓使用者可以了解如何找到,也不至於進入此頁不知如何進行。

總結

如開頭所陳述,移動裝置的普及,讓政府部門意識需發展行動端的服務。但政府與協同的開發團隊在執行時,應該要思考每個平台(iOS / Android)既有的良好規範;順著這些規範設計,是必要的考量。另外,也要觀察使用者的操作習慣,甚至製作一些必要的使用教學。再者,因為平台(iOS / Android)通常會固定進行版本更新,要認知後續開發與維護的不易問題。千萬別草率行事,因為若開發完後,發生容易閃退或無人使用的情形,而最後草草退場。這些花費的成本皆放水流,且花的都是來自納稅人的報稅錢,不是嗎?

後記

.報稅單上,其實有一項 T Wallet 的 app 可以下載,但要搭配硬體設備,而且要如何購得沒有描述,因此就沒使用了。

.稅單上的 QR Code 掃描,原以為可能會對應 “個人專屬” 的繳費資訊,但其實是 “統一” 進入了網頁上的繳稅頁面,並要求認證個人資料。當出現這樣的結果時,我會想像:假使民眾是透過 App 繳納的稅務類別不是非常繁多的情況下,這個 QR / Barcode 的項目直接做成 “連結” 不就好了嗎?實際上政策的限制與發展我甚了解,但拋出這個問題,供大家一起想想。

 


 

cross

本篇系列文章由 Capso team 的設計師 Vic Li 設計大舌頭共同撰寫,若欲轉載請著名出處。

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

其他人也看了這些 ...

訂閱設計大舌頭

隨時關注第一手 UX、UI、科技、設計新知

Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on telegram
Telegram
Share on twitter
Twitter