卡片式设计,并不能支撑所有的设计需求

卡片式设计一直是以强兼容性和“百搭”的形象出现在大众的面前,但是它同样有无法满足用户需求的时候,今天的文章我们就在实战中聊聊这件事。


卡片式设计一直是以强兼容性和“百搭”的形象出现在大众的面前,但是它同样有无法满足用户需求的时候,今天的文章我们就在实战中聊聊这件事。

卡片式设计,并不能支撑所有的设计需求

Material Design的流行让卡片式设计走上神坛,卡片式设计在如今的网页设计中更是随处可见。尤其是那些偏向于大量信息汇总的页面,卡片式设计几乎是不二的选择。

卡片常常被用作信息详情的进入入口

我们的用户体验团队近期负责了好几个重设计的项目。毫无疑问,其中有不少就是借用卡片式设计来实现的。而有意思的地方在于,我们通过这些项目实践发现一些有意思的情况:卡片式设计在一些新闻类的网站,尤其是首页和归档页面,并不是那么适用。

这个截图是源自于Goal.com 的APP,它用的就是卡片式设计。

卡片式设计,并不能支撑所有的设计需求

重设计后的反馈

完成产品的重设计之后,产品的用户通常会即时给予一些负面的信息反馈。之后,你会收到一堆电子邮件,其中许多会提出恢复旧版UI的要求。

我们在发布新版 Goal News 和 Live Scores APP 的时候,就已经预计到了这一点,这两个应用新版发布之后的情况也确实如此。所以,在有了心理准备的情形下,我们也打算听取用户的批评,基于用户反馈给予一定的调整。之后,我们也摸索出一套模式。

在Goal News 发布之后,关于卡片式设计的第一个问题就凸显出来了。有一部分用户开始吐槽每屏展示的内容的数量和方式了:

卡片式设计,并不能支撑所有的设计需求

  • 反馈1:图片太多,得一直翻页。我就想简单快速的看个新闻啊。
  • 反馈2:为了看一眼新闻我得翻过一整张大图啊,而且新闻没法一次加载完……

这些用户反馈是极其重要的。它所关乎的不仅仅是功能,而且还清楚的解释了他们的目标和导致问题的原因。通过这一点,我们确定了普通用户的目标:他们想要快速的浏览,并且简单地了解这些新闻所包含的信息的概况。

那么接下来,我们要研究一下,为什么卡片式设计不能满足用户的要求,达成目标。我们的研究是这么做的:

稍微深挖一下

我们借助 HotJar 来分析了一下我们其他几个网站在滚动翻页过程中的距离和点击次数,发现确实都有类似的问题。Spox.com 的首页最近也进行了重新设计。

卡片式设计,并不能支撑所有的设计需求

旧的首页入上图所示。你可以看到,“Spox TV Playoffs”的banner上方的轮播展示模块吸引了大量的用户点击,占据总点击量的43%,以为单个用户可能在此点击多个内容。

而22% 的用户点击则是来自“Themen des tages”(每日主题)这个列表,而这个列表对应的就是第一个轮播图!重新设计之后,轮播图和列表就彻底分开了:

卡片式设计,并不能支撑所有的设计需求

重新设计之后的结果非常令人置信,“每日主题”这个点击量增加了三倍,达到了总点击数的59%。有趣的地方在于,轮播图+列表的模式其实是有反效果的。删除了图片的模块,它们失去了几乎所有的交互性,现在仅占有总点击数的1%。和之前43%的点击量相比差异巨大。

由此可以推断用户常常是借助轮播图来找寻新闻列表。

移动端模式

为了研究用户在移动端上的行为模式,我们对比了常见列表是UI的网站(左)和采用卡片式设计的移动端网站(中,右),虽然它们并不是同一个站点,但是对比的结果依然非常的具有参考价值。

卡片式设计,并不能支撑所有的设计需求

卡片式设计提升了汉堡图标的使用率

在采用卡片式设计的移动端网站中,汉堡图标的使用频率明显高了很多,我们可以看看这三个网站的数据:

  • 左:Voetbalzon——列表UI——0.48%
  • 中:Spox——卡片式UI——17.43%
  • 右:Goal——卡片式UI——4.93%

可能是用户不耐烦可见性有限的标题,常常借助菜单寻求更符合它们需求的内容。

卡片需要更多的翻页滚动

最右边的网站一直在鼓励用户向下滚动翻页,其实这种情况并不正常,因为这个网站的卡片式设计使得每块内容的高度要比最左侧的列表式UI的内容模块高出38%,虽然用户滚动的更多,但是他们看到的内容其实依然偏少。

视野中的文章数

很明显,同等大小的界面中,列表式UI 其实会让你的视野中的文章数更多,用户快速扫视下,能够获取更多的内容。为了理解这种差异,我们需要仔细研究一下卡片式UI当中,空间都被什么占用了。我们将自己的网站同我们的竞争者的网站进行对比,让3个卡片式设计的网站和3个基于列表的网站进行对比。

测试过程中,我们只对比首页,并且只测试两种情形:1、页面被滚动到顶端,2、页面被滚动到最合适的位置(视野中新闻标题最多的情况下)。为了让这个测试更加公平,我们还做了如下设定:

  • 只计算标题100%可以被看到的新闻
  • 采用的13英寸Macbook来浏览,浏览器页面最大化
  • 使用相同的Chrome浏览器来测试
  • 浏览器显示比例为100%,不缩放
  • 开启广告屏蔽

下面是页面都处于顶端时候的显示状况:

卡片式设计,并不能支撑所有的设计需求

下面是页面处于最佳可视位置时的显示状况:

卡片式设计,并不能支撑所有的设计需求

通过对比和分析,我们可以确知,列表式的界面所能显示的新闻数量是卡片式设计的两倍,显示最少的 OneFootball 一页仅能显示6篇新闻,而Voetbalzone 则多达19条。

卡片式设计,并不能支撑所有的设计需求

其他的列表式UI和卡片式UI的对比

我想,我们并不是唯一在意这个问题的设计团队,实际上谷歌已经做过类似的AB测试了。

卡片式设计,并不能支撑所有的设计需求

Google 搜索的AB测试

“卡片式设计下的Google 搜索结果看起来会更加丰富多彩,但是每页提供的信息更少。”

来自Material Design 的建议

实际上,Material Design 的设计规范中也考虑到这种情况,规范中建议设计需要“快速扫视”的内容的时候采用列表式UI,它适合展示是类似的、重复的内容。

当用户并不需要“对文本和图片直接进行对比”的时候,并不推荐使用卡片式UI。新闻类网站上图片和文字都不少,用户需要对比内容选取更感兴趣的内容来浏览,同时也需要密集的信息展示来尽可能快地多看内容。这样一来,参考 Material Design的建议,用列表式UI更合理。

卡片式设计,并不能支撑所有的设计需求

结论

严格意义上来说,两种UI模式都各有优势,这并不奇怪。

卡片式设计目前具有更强的影响力,图片也非常抓人眼球,但是列表式UI更加紧凑,更加便于用户快速浏览信息。另一方面,卡片式设计可以承载多种多样的内容和元素,比如摘要、标签,它们能够让内容更加丰富,拥有不同的纵深。

作为设计师,我们都喜欢新趋势,但是同样也需要灵活的选择更合理的方案,不迷信流行趋势。

 

原文作者:Rob Gill

原文地址:medium

译者:@陈子木

译文来自:优设

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

(0)
CatherineCatherine
上一篇 2017-05-13 18:04
下一篇 2017-05-13 20:24

相关推荐

  • 超出预期的才叫用户体验

    什么是用户体验?我认为,用户体验其实就是一种心理感觉。拿最简单的吃饭这件事来打一个比方。我在饭店,吃饭付账,这个过程叫作体验吗?肯定谈不上。用户体验,肯定是特殊的,肯定是不正常的,肯定是在你的预期之外的。超出预期才形成用户体验如果做跟别人一样的东西,那这些功能并不叫体验。很多人在抄袭别人产品的时候,经常说某某公司做了什么功能,老板说照着做一个,但是你想没想过,如果做得跟别人一样,是没有机会的。当年我们做的是免费杀毒。当时所有其他品牌的杀...

    2018-04-08
  • 用户体验设计师必须知道的52个科技术语

    原文链接:https://uxplanet.org/60-tech-terms-you-need-to-know-as-a-ux-designer-a01166074ae1通俗易懂的A-Z科技术语列表在刚开始用户体验设计师的工作时,我如同离了水的鱼一样。我所知道的科技术语很贫乏。在会议中我总是能听见这些词汇,但是完全不知道是什么意思。然后我回到自己的办公桌前,偷偷摸摸的开始查我刚才听到的是什么,并希望没有人发现!一段时间后,我发现很多对...

    2018-04-09
  • 案例分析|一次消灭产品文档的实践探索

    作者:Dougee全文共 2120 字 5 图,阅读需要 5 分钟———— / BEGIN / ————在刚入职眼前这一份工作的时候,CTO就对产品组提出了新的要求:以后不用再另外输出产品文档,直接在原型上标注就可以了,而且以后要输出动态原型。先介绍一下我本人的情况:产品经验2年,对于Axure的交互设计有一定实践经验,但从来没有想过把动态的原型与产品说明结合来表达需求。对于CTO的决定,我想了一下,大概是出于以下三点原因:太多文件数量...

    2018-03-27
  • 交互设计初体验(iUED)

    对于一个初入交互设计行业或者即将和我们一起在交互行业并肩作战的你是不是有种不知所措的感觉呢?其实这是一个很正常的现象,造成这个现象的原因一方面是交互设计师在实际工作中的产出物一般是线框图、流程图、信…

    2017-08-02
  • 交互设计师高级:兴趣、场景推荐核心算法之‘多维空间的两个向量夹角的余弦公式’

    不知道大家有没有关注过你手里的APP,那么它在不停升级中变得越来越懂你,越来越知道你的喜好,举例先:网易云音乐的推荐、今日头条的新闻推荐,他们都是你使用越长时间使用频率越多对你兴趣越准确的判断从而推荐给…

    交互设计 2015-08-31
  • 移动端体验设计6大禁

    我们一开始为什么去安装应用程序?是为了使我们的生活更方便。但当一个应用无法满足这一要求时,用户肯定就会离它而去。一个应用的成功是受多种因素影响的,其中整体移动用户体验是最重要的影响因素。绝佳的用户体验是一个应用程序成功的关键。

    2017-05-17
  • 交互设计技巧:创造好的用户体验(1)(翻译)

    点击上方「人人都是产品经理」立即关注一个好的用户界面具有较高的转化率和易用性。换句话说,它既能满足商业用途也便于使用。以下是我们发现的一些想法清单。译者:@谢尔鱼 译文地址:http://goodui.org/翻译并授…

    2017-08-01
  • 雪糕游戏(南京上海)聘:运营/商务/主策/主美/原画/程序等

    (点击上方“GameLook”↑↑↑↑↑↑,订阅微信)公司简介:南京雪糕网络科技有限公司(简称雪糕游戏)是一家集研发、运营、发行为一体的新锐游戏公司。自2015年成立至今,自主研发了《全民神仙》、《行侠仗义五千年》、《童话大乱斗》、《西游记口袋版》等产品;IOS联运了涵盖三国、武侠、魔幻、神话等题材产品,游戏多次在App Store上榜,凭借精准的IOS流量整合能力、优秀的产品运营能力,雪糕游戏IOS联运产品月收入稳定在千万级水平,也为...

    2018-04-08
  • Apple Watch应用设计案例-QQ空间

    一、初期方案 设计初期,我们希望能够挖掘一些用户在手机端常用的点进行延伸,如:访客、礼物、动态。包括配色和图形设计也延伸了手机端的设计风格。 二、竞品分析 我们对Instagram和Twitter进行了研究,整体上是手…

    2015-07-15
  • 网易考拉海购APP产品体验报告(可下载)

    干货分享:网易考拉海购APP产品体验报告,33张幻灯片解析产品体验

    2016-08-23