前车之鉴:一个视觉交互设计失败的案例

最近在做产品设计时,遇到了一个非常典型的设计失败案例。这个案例反应了一些老生常谈的问题,我觉得非常有意思。

文章目录[隐藏]

前车之鉴:一个视觉交互设计失败的案例

最近在做产品设计时,遇到了一个非常典型的设计失败案例。这个案例反应了一些老生常谈的问题,我觉得非常有意思。

好看的设计未必好用

我负责的是一款秀场类产品,近期要在移动端中添加一个模块,模块主要的功能是展示主播的录播视频。下面展示一下原型图和效果图的对比。

前车之鉴:一个视觉交互设计失败的案例

前车之鉴:一个视觉交互设计失败的案例

我的原型图中,采用了最简单常用的布局方式,而UI设计师拿到需求以后,觉得这样做实在死板,想做一些和其他竞品的差异化。所以,将视频封面放在了右边,视频标题、主播名称、点赞数放在了左边。当效果图出来时,我第一眼感觉是漂亮,精致,整体效果非常不错。领导看了以后,也觉得视觉效果很棒。于是,效果图一稿便通过审核,步入开发。

然而,在开发完成以后,我看着手机上的测试版,效果并不尽如人意。首先,成品并没有效果图那么漂亮。在仔细对比后才发现,原来效果图漂亮的原因,很大程度上是因为摆放的图片非常漂亮。而实际产品中的主播,并没有那么好看。这导致了看到实际产品后,有较大的落差感。

所以,建议UI设计师在出效果图的时候,尽量摆放产品真实的内容图片。效果图并不需要做得有多漂亮,而是需要在产品开发前,模拟产品的真实样子,保证产品内容在最差的情况时,依然能有良好的视觉体验。

除了视觉落差感以外,我在深度体验产品时感觉到有些别扭。所有该显示的信息都显示出来了,那别扭的问题一定是出现在布局上面。我开始翻看竞品,想寻找问题所在。

拿YY神曲的页面来说,虽然信息比较多,显得有些杂乱,但是并没有别扭的感觉。那为什么信息左右调换位置,就会产生别扭的感觉呢?

前车之鉴:一个视觉交互设计失败的案例

我开始寻找将图片右置的相关产品,比如:今日头条、ZAKER、一点资讯、央视新闻、腾讯新闻等。看完以后,发现采用这种布局方式的,大多是新闻类的APP。

前车之鉴:一个视觉交互设计失败的案例

于是,我第一次开始深入地分析页面布局问题。

首先分析:为什么新闻类的APP的图片要放在右边?

前车之鉴:一个视觉交互设计失败的案例

如上图所示,每条信息的元素有:新闻标题、新闻来源、点击次数、热度以及新闻图片。

那这些元素对于用户来说,优先级是什么样的呢?首先,拿新闻来说,标题的优先级是非常高的,用户判断是否看这个新闻的第一元素通常都是标题。这是很早以前用户阅读报纸时就养成的习惯。基于这个原因,新闻类APP标题的优先级大于图片的优先级是没有问题的。

那现在回过头来再看看我自己的APP,分析一下用户的阅读顺序。

前车之鉴:一个视觉交互设计失败的案例

首先要说的是对于秀场类产品,图片绝对是第一视觉焦点。用户筛选信息,绝不会逐字逐句浏览,而是大脑进行关键信息检索,过滤次要信息。用户“第一视觉区域”是没有问题的,用户第一眼看这个页面肯定是被此区域吸引。接着用户扫视“①版块分类”的标题栏后,下面重点来了。

前车之鉴:一个视觉交互设计失败的案例

用户视线会扫描整块信息条,图片肯定是第一优先级的信息,用户通过图片来判断:

  • 足够吸引,点击进入;
  • 有点吸引,需要查看此视频的其他信息来判断;
  • 完全不吸引,跳转下一条信息。

前车之鉴:一个视觉交互设计失败的案例

抛开第一种情况,当用户觉得此视频封面是自己稍微感兴趣的东西,那么用户需要阅读其他信息来确定自己是否喜欢。此时用户的视线由“②视频封面”跳转到“③视频标题”然后向下扫视其他“④次要信息”。如果在判断此视频自己没兴趣后,用户会继续向下扫视,焦点又会跳到下一条信息的“⑤视频封面”。然后重复以上路径,循环扫视。

最后导致的结果就是:用户以从右往左的一种顺序浏览内容,违反从左往右的阅读习惯。

总结:

其实,在产品设计中,追求创新、追求差异化是非常值得鼓励的事情。但有时候为了寻找差异化,而导致用户使用成本增加是需要产品经理细细斟酌的事情。在某一行业尚未成熟时,创新一款APP是比较简单的,因为行业内并没有一个大致的标准,也没有太多用户习惯的需要注意。但当行业趋于成熟,众多产品涌现时,任何一点点微创新都难能可贵。

在这里还想说一个问题,就是大家在效果图审核时,常常会说:我感觉这个页面有点别扭,我觉得这个交互动画有点不舒服。这到底是为什么呢?这种别扭到底是怎么产生的呢?我想这种别扭一定是视觉或交互传达出的信息有悖于个人的日常感知。如果有一个页面,很多人都觉得别扭的话,那很可能是某个地方设计有问题。也许有些问题是显而易见的,也许有些问题是深层次的问题。如果是深层次问题就需要产品、UI设计师或者交互设计师细致地去寻找问题。存在的问题并不可怕,最可怕的是问题隐藏起来,而产品经理却毫无感知。

 

本文由 @臻龙 原创发布于人人都是产品经理 ,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/31374/

(0)
CatherineCatherine
上一篇 2017-06-01 07:37
下一篇 2017-06-01 10:41

相关推荐

  • 人鸡交互 VS 人机交互

    交互就是一名翻译官,一个机器和人类的翻译官。

    2017-05-06
  • SKD独家 | 英国交互设计排名

    同学们自从上次🇺🇸美国交互设计的排名一出打算去英国🇬🇧的小伙伴纷纷表示出英国版的排名👌先以交互的分类来划分一下英国的院校:以HCI为主,偏技术研发的院校有:伦敦大学学院(UCL)Human Computer Interaction(Msc)巴斯大学(Bath)Human Computer Interaction(Msc)以UX为主,偏交互装置、技术应用院校有:伦敦传媒学院(LCC)Interaction Design Communica...

    2018-04-17
  • 浅析设计图表色彩的简单方式

    译者按:对色彩的研究通常要么太过随意缺乏逻辑,要不太过理论化难以理解,这篇文章用非常浅显易懂的方式,讲述了一个专门研究数据可视化的团队探寻图标色彩搭配的历程,给出有力的论证,并得出很棒的结论,非常值得一读。对色盲色弱来不够友好*:原文中问题一的标题是“Low Accessibility”,通常用形容来产品对残障人士的友好度不够,这一点在欧美国家经常作为需要重视的产品硬指标(也是由于他们的色盲色弱发病率比亚洲高很多)。因为在中文里没有简短精准的说法,所以我在写的是“对色盲色弱不够友好”。
    逻辑性较强的人*:原文的写法是“left-brained folks”,直译是左脑型的人。通常左脑型的人被认为逻辑严谨,右脑型的人被认为有艺术天赋。因为这种说法在中文里不是很通用,所以我写的是“逻辑性较强的人”。

    2017-05-01
  • 02案例:用户体验与结婚教练

    02 案例:用户体验与结婚教练来自信息读书00:0017:04用产品经理的视角来看人今天我想讲一个结婚教练的故事。她是我的一个朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。这个结婚教练以前是干什么的呢?她以前是一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何观察和判断一个人。因为...

    微信热点 2018-03-27
  • 网站设计:不如学用简约风格的原则

    极简风格能帮助用户简化操作,兼容性好,载入页面快等等优点,不过虽然看起来简单,我们需要考虑的东西可一点都不少。这一次,就让我们一边学习简约风格的原则,一边将它应用到实际网站制作中去吧。

    2017-05-06
  • 扁平化2.0:扁平化设计以前从未有的6个设计风格

    时至今日,扁平化已不再是流行一时的设计风潮,而是一种美学风格。扁平化大胆的用色,简洁明快的界面风格一度让大家耳目一新,当它对元素效果抛弃的如此彻底之际,它又将效果捡起来,改装成另一番模样,使得扁平化进化为扁平化2.0。

    2017-05-24
  • 【交互设计-UX/UE】数据加载

    数据加载是设计中比较容易忽略并且又比较重要的环节,以一种合适的方式告诉用户正在发生什么,将会发生什么,让用户对于加载后的内容有明确的时间预期,减少用户的等待感,尽可能消除焦躁情绪。 一、6种常见数据加…

    2016-08-03
  • 引导性交互界面怎么设计才能直观有效?

    在任务流程较为复杂的时候,用户容易迷失在流程中,从而放弃任务,导致转化率不尽人意。所以我们在交互界面上需要引导用户。人机交互中不论是文字、图像、色彩、动态效果等,主要是通过视觉反馈信息,所以视觉的引导尤为直观有效。

    2017-05-31
  • Axure案例练习-点评打分效果

    现在,外卖也好,购物也好,打车也好,点评打分是网站常见的用户互动的功能,一般都是1~5分之间评分,分值对应几颗星或者几颗心,当用户点击确定之后打分就完成了。下面我就以大众点评网为例,制作了打分效果。做之前,我们先来分析一下,点评共涉及到6个状态:没有打分的时候、一颗星的时候、二颗星的时候、三颗星的时候、四颗星的时候、五颗星的时候。根据之前的学习,知道点评区域是一个动态面板,这个动态面板有六个状态,当鼠标分别悬停时,切换出不同的状态。我们...

    2018-04-29
  • 《交互设计专题二》——华南理工大学设计学院本科教学汇报展 • 第二回

    《交互设计专题二》《交互设计专题二》课程针对智能化产品设计领域,鼓励设计背景的学生学习基本的软硬件技术,发掘产品需求,提出设计概念,开展设计研究,并亲自动手完成功能样机。经过5周的课程,7组共27名学生,完成了7个不同主题的设计和初步的功能样机实现。《交互设计专题二》只是信息与交互设计实验班的初步尝试,在国内也鲜有既有模式可供借鉴,课程内容、教学方式、设计展开过程、样机实现以及最后的课程设计汇报,都有不成熟的地方。因此,诚邀大家前来参观...

    2018-02-21