生活中的界面设计|报税篇

前言

随着科技进步,我们越来越依赖技术来处理生活大小事务,同时也因为自动化服务的普及,界面友善度成为近期最受关注的一环。

不过,许多生活上必需接触的界面,却在传达设计上,让使用者产生错愕。

身为设计师,面对问题并解决是我们的天命!这次文章的主题就是探索生活中遇到的介面传达问题,同时提出可能的解决方式。

五月是报税的时节,同时也产生许多民众的困扰。报税的方式由过去亲自跑一趟国税局,演进到推出各种不同的便民服务,如:安装软体,透过凭证报税外,还有便利商店代收…等。目前,人手一台智慧型手机已成趋势,或许新一代的族群在面对报税议题时,马上会猜想可能有对应的手机应用程式 ( 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 项,并把不容易理解的「税」按键变为「条码缴税」,让使用者明确知道这是缴税的功能,也能预期进入后会有什么样的功能存在。变为三格后也能让解说文字加大,更易阅读。

Tab

Compare

▲ [左-修改版本,右-原版]  不同功能以不同颜色标注,会发现原先的功能逻辑容易让使用者混淆。新设计的提案保留除回到首页的功能,财政地图与条码缴税对欲缴税之使用者而言,是分别是实体服务及线上服务有关,逻辑类似,故安排于此。

5-2. 条码缴税

一进入原版本的 “线上缴税” 后,会看到两个条码缴税的按钮,使用者应会感到怪异。但 我们将文字调整为 “条码缴税” 后,会让使用者产生预期心理,而知道点击后会出现什么(只要将文字微调就能有大大的改变)。再来,新的政令宣导,或许会搭配一些网路或影片宣导。所以我们 在这里新增一项 “使用教学” 的功能,点击后能开启网页连结,以帮助使用者理解如何使用新式缴税方式。此外,之后要维护这些缴税的规则,只需要修改网页端即可。

code

▲ [左-修改版本,右-原版] 修改提案增加使用教学,让使用者可以了解如何找到,也不至于进入此页不知如何进行。

总结

如开头所陈述,移动装置的普及,让政府部门意识需发展行动端的服务。但政府与协同的开发团队在执行时,应该要思考每个平台(iOS / Android)既有的良好规范;顺 著这些规范设计,是必要的考量。另外,也要观察使用者的操作习惯,甚至制作一些必要的使用教学。再者,因为平台(iOS / Android)通常会固定进行版本更新,要认知后续开发与维护的不易问题。千万别草率行事,因为若开发完后,发生容易闪退或无人使用的情形,而最后草草 退场。这些花费的成本皆放水流,且花的都是来自纳税人的报税钱,不是吗?

后记

报税单上,其实有一项 T Wallet 的 app 可以下载,但要搭配硬体设备,而且要如何购得没有描述,因此就没使用了。

税单上的 QR Code 扫描,原以为可能会对应 “个人专属” 的缴费资讯,但其实是 “统一” 进入了网页上的缴税页面,并要求认证个人料。当出现这样的结果时,我会想像:假使民众是透过 App 缴纳的税务类别不是非常繁多的情况下,这个 QR / Barcode 的项目直接做成“连结” 不就好了吗?实际上政策的限制与发展我甚了解,但抛出这个问题,供大家一起想想。

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部