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

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

文章目录[隐藏]

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

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

好看的设计未必好用

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

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

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

我的原型图中,采用了最简单常用的布局方式,而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

相关推荐

  • 最重要的用户体验设计细节恰恰是被忽视的地方

      编者按 : 本杰明·布兰德尔(Benjamin Brandall)是 Process Street 的内容设计师。 我算不上是一个优秀的设计师,事实上我的设计水平还比较糟糕。不过我对设计的理念很感兴趣。我读过和写过很多关于 客户成…

    2015-11-30
  • 如何设计一个素材列表

    最近在设计一个新的拍摄玩法,用户点击拍摄后,首先会进入一个素材列表页,选择对应的素材后进入拍摄页面开始拍摄。经过一个版本上线后收到的定性和定量的用户数据反馈都显示,在素材列表页的选择阶段,用户的流失率较高,用户对于素材选择行为的目的性明显不足。

    2017-04-29
  • 三个维度解析一个产品的交互设计

    作者:飞起就是一jio链接:http://www.jianshu.com/p/ad13cebe513b本文以“微信首页”为例,用三个维度系统地解析一个产品的交互设计的方方面面首先我们来做个互动,请各位看官打开自己的微信,然后看到你的微信首页…

    2017-08-04
  • 【招聘】阿里、腾讯、网易、百度、亚马逊、德勤、滴滴、京东、华兴资本、去哪儿、蚂蚁金服、特斯拉等

    上海|携程+实习携程运营实习生工作内容 一周内入职1、携程app微领队社交功能“结伴”、“旅友圈”运营(删违规帖+内容运营)2、旅途聚会物料负责、寄送、整理3、旅途聚会新产品冷启动4、聚会产品上货至其他平台(搬砖+运营)5、公用区图片库等内容整理6、大型活动报名信息收集+统计(不定期,非日常)7、临时日常行政工作协助加分项1、熟练excel、ppt、word,书面表达佳2、足够耐心、细心,强责任心3、有办公室实习经验4、可来携程坐班至少...

    2018-04-08
  • Sketch book 各种材质产品手绘表现-别人家的手绘本,拿走、收藏... [更新]

    ▲点击关注最不可思议干货今天给大家共享一波Sketch book 各种材质产品手绘表现...拿走、收藏...手绘飙车活动进行时,点击按钮加入...手绘零基础▼点击看>此方法,让零基础小伙伴们透视准确率达到98%...津美优设2017暑期1期课程|格物造型.第5天: 线稿基础-借体推敲Ⅱ点击看>此方法,让零基础小伙伴们形态推演能力爆棚!造型推敲、设计发散!津美优设2017暑期1期课程|格物造型课程.第6天:借体推敲Ⅲ点击看>此方法让零基础...

    2018-03-23
  • 交互设计之搜索框设计

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Younger NowMiley Cyrus - Younger Now- 期待你的关注和收藏 -耳朵们要好好收藏原文:Behance作者OTT UI  |  编辑:程琳琳在交互设计中,各个不同的场景需要不同的搜索框设计。搜索框一种常见的交互插件,用于精准提取海量信息中的准确内容。搜索框几乎存在所有的网站和App中,尤其是海量内容为导向的产品之中,例如音乐库、电商类网站,做好搜索...

    2018-02-12
  • 看过英国院校的交互设计之后,你还想报国内的同专业吗?

    今天我们来聊一聊交英国的互设计专业。随着网络和新技术的发展,人们越来越重视交互的体验,许多公司、网站、APP都开始注意到交互设计在品牌的创建、客户回头率、客户满意度等方面的影响,交互设计师也越来越受到重视。因此,许多同学在高考填报志愿时,会选择交互设计专业。国内开设交互设计专业的院校较少,即便有,也是和工业设计剪不断理还乱,分为实体产品和互联网产品两种方向。国内交互专业普遍存在的问题是,学校教的知识过于浅显泛泛,教学内容与行业需求脱节。...

    2018-02-26
  • 什么是用户体验设计,用户体验设计标准是什么?

    我理解的用户体验,是让用户付出最小成本满足需求。用户体验无法用一个通用方法整体衡量,只能在理解产品全貌的前提下评测分解属性。我仅结合搜索领域经验提供些参考。个人对用户体验的目标是,做到“自然”。用户体验设计是什么?用户体验(User Experience,简称UE)设计 是用户在使用产品或服务过程中建立起来的一种纯主观的感受。用户体验产生于客户与你的品牌、公司、组织所发生的一切互动。这些互动的对象包含了你的产品、官网、帮助中心、广告、微...

    2018-03-20
  • 无障碍的交互设计,需要做到这7点

    先从字面上来理解何为“无障碍”。生活中许多场所中,除了供给正常人使用的区域外,还有一些针对工作人员、特殊人员(残障人士、老弱病残、孕妇等)的无障碍通道/设施,比如:机场、地铁、厕所、展会等。无障碍设施/通道是能够兼容普通人员和特殊人员共同使用的,且相对来说使用起来更为便捷、直接、且省时省力。-交互中的无障碍需要考虑到哪两方面?-那么交互中的无障碍又有哪几层含义呢?从常规的使用人群来看,首先要满足普通人群使用。其次,当一个优秀产品具有一定...

    2018-03-31
  • 微信Axure原型练习和资源分享

    “我根本没把你放在眼里。”“因为你一直在我心里。”▼这是咸冬日的第叁篇文章这两天业余时间学习了axure的基本功能,做了一个简单的微信原型练练手,教程分享给大家。首先需要准备基本素材,可以从我的源文件中获取。1.设置手机主页和home热键用例。2.拖入内联框架(w273*h482),设置从不显示和隐藏边框,并链接到主页。3.设置主页交互:1)主页内拖入动态面板“内容区”(273X396),并增加4个menu状态(微信、通讯录、发现、我;...

    2018-03-10