前段时间我在京东买到坏芒果了,要申请售后。作为一个界面设计师我居然点错了按钮。Excuse me?我眼睛是不是不太行了?
找了几个人问,有的说不会误点,有的说页面确实有迷惑。但他们都是带着我提出的问题去看页面,不是真实场景下用户的反馈。这里的“问题”是基于我这个用户认知下的,实际上有没有问题得看京东这个页面的用户行为数据。
那就以我这个用户的角度,从设计层分析一下到底为什么会点错吧。初步认为,问题主要在于点线面关系,包括字号大小、颜色、视觉层级、组合等。
说到这个想起了几年前的一个项目。当时我们用字号和颜色都很谨慎,但产品说我们字号太多,大小不一显得整个页面很乱。我们核对了之后发现字号也不多呀。后来才明白“字号多”只是他们的感受,即使字号少,颜色、层级和组合多的话,也会造成视觉上的“字号多”。
A:我每次都点击横线上“请您描述问题并上传收到商品照片”这句话填内容,然后发现这里不是给我填内容的
B:我不知道退款要填多少东西,什么是一定要填的
C:提交的时候出错了,说是没写描述,又要回头去写
用户只会告诉你遇到的问题和使用感受,毕竟他们也不知道哪里出了错。所以对于用户提出的问题,我们得先发散,再归因。
1. 发散问题
以问题为中心进行放射性发散,连接相关点,组成问题的图谱。尽可能提出更多的疑问点,从多方面考虑,找出关联性较大的因素。
问题 1:漏填
为什么不给出必填提示呢?
不同的申请原因,注释分别是什么?
全部的申请原因都要写描述吗,存在可以不写的情况吗(比如七天无理由)?
全部的申请原因都要上传凭证吗?
如果申请原因不同,填写描述的提示会不同吗?
说明一下,刚开始出现问题的页面是优鲜赔,我还没截图已经进行完赔付了,所以分析用的是退货界面的选项,内容大致一样,样式也一样。
分析之后发现:
1)必填提示很重要。
除了质量问题外,其他所有原因都需要填写描述文字,不然就无法提交。基于这一点,我认为给予必填提示*号是很重要的,淘宝的退货页面也会有必填提示。
2)选项之间可能有交叉或者重复,分类不明。
比如七天无理由一定要写理由;大小/颜色/型号不合适没写明需要寄回附件赠品;其他问题务必上传有效凭证,但在提交时不约束这个条件。
这些问题其实是产品层面要解决的问题。第一个问题好解决,增加必填条件约束就可以。第二个问题相对麻烦一点,需要对售后原因重新进行分析和归类,重新写规则。由于第二个问题对解决本次问题的价值不大,不用花心思在这上面。
问题 2:误点
为什么横线上更像是可以输入文字呢?跟字号颜色有没有关系?
怎么体现申请原因和描述问题的从属关系呢?
注释的内容可以直接放在描述文字输入框内吗?怎么结合?
页面的框架存在问题吗?卡片和分割线的规范是什么?
这种左右选项结构的组件形式是影响因素吗?
分析之后发现:
1)页面的框架不规范,各卡片之间的距离没有一致,层级也有问题。
一般来说,出现卡片距离不一致有几种情况:设计师特意设计;开发实现页面的代码问题。但从这个页面上来说不太需要设计不一样的卡片间距。如果项目时间允许,在设计走查的时候发现问题一定要提出让开发解决。
2)文字的颜色让人分不清主次从属。
这一点在下面有更详细的分析,先不在这讨论。
2. 收拢归因
经过对页面的观察和分析,我们可以把问题聚焦在以下几个点上。
3. 竞品分析大法
找到原因之后,比较有效快捷的方法就是进行竞品分析,看看别人怎么做。根据上面聚焦到的四个问题点,我们带着目的去做竞品分析。
观察淘宝和京东,我们可以发现:
1)淘宝有必填提示,京东没有;
2)淘宝的输入框比背景色浅,京东的输入框和背景色一致;
3)淘宝的描述作为补充项另起一个模块,京东的描述和申请原因在同一模块。
最后一点关于字体的,分析项比较多:
通过上图,我们可以发现,淘宝的颜色层级有 3 级,而京东的颜色层级有 6 级。将两个界面中的组件元素用色块来表示,淘宝有明确的视觉引导,而京东由于标题与注释颜色比较接近、标题与选项对比相差太大、模块缺乏统一性,造成了主次不清晰的问题。
我们再次看看京东的界面。从视觉体现上来说,选项使用了最深的黑色,确实能够吸引用户的目光,让用户知道哪里要选,但却弱化了标题和补充项的视觉。在退货退款页面,用户是带着目的去操作的,他们需要完整走完流程,完成申请,因此需要填什么类型的信息、怎么顺利完成流程就很重要。就像你到银行柜台办理转账的时候,你会希望银行能够按顺序告诉你每一步要做什么吧:取号、去单据区填单、到柜台办理。如果你一进去保安叫你准备好身份证、转账的相关信息,到了柜台发现还要填单,是不是体验感很差呢?
经过一轮竞品分析后,我们得出了相应的解决方案:
1)统一页面结构
卡片间距保持一致;输入框颜色略浅于背景色。
2)文字视觉关系调整
文字颜色精简到 3 种;标题颜色与选项颜色一致,用字体粗细区分;申请原因的注释与输入框提示语结合。
3)准确引导操作
给予必填提示。
这是调整前后的对比图:
从整体的视觉上来看,设计规范是与原本几乎保持一致的,更多的是细节的调整。但是我们的目的不是把界面做得多好看,而是低成本有效地解决问题,也就是要综合考虑时间成本和开发成本。
文末,想说说我看到的一些现状。遇到问题的时候,有的设计师会无意识改掉原型字段、增删功能、改变运营方案...如果不改,他们就觉得自己做不了或者做不好设计稿。以前我也会有同样的问题,原因有可能是不够理解产品结构、思维受限、没有考虑时间成本和开发成本...现在除非逻辑有误、状态有缺失,我才会跟产品商量原型的问题。一般都尽量从设计层面解决问题。
网上很多改版的作品,会从产品层面、运营层面去分析,这点是挺好的,多思考才有多种方法。但是不代表平时做设计的时候我们要改掉产品和运营的内容(除非有特殊情况),这些需要和相关的同事商量评估。
有时候能用最低成本从设计层面解决问题,也是一种能力。
欢迎关注作者微信公众号:「牙线y2x」
复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。
发评论!每天赢奖品
点击 登录 后,在评论区留言,系统会随机派送奖品
2012年成立至今,是国内备受欢迎的设计师平台,提供奖品赞助 联系我们
MJ版AIGC绘画原理
已累计诞生 594 位幸运星
发表评论 已发布6条
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓