当卡片式UI不再流行,列表式UI将是王牌

作为设计师,虽然我们都喜欢最新的流行趋势,额外的白色空间和大图像,但对于新闻和数据,列表式是更好地解决基本的用户目标的方法。卡片是提供详细信息的入口。——来源:Google Material DesignGoogle的搜索结果可能会更加丰富多彩,但每页提供的信息较少。——来自:GreenBot


作为设计师,虽然我们都喜欢最新的流行趋势,额外的白色空间和大图像,但对于新闻和数据,列表式是更好地解决基本的用户目标的方法。

当卡片式UI不再流行,列表式UI将是王牌

随着Material Design的流行,卡片式UI已经成为现代web设计的一部分。尤其是在你在提供一个汇总归档信息的界面时。

卡片是提供详细信息的入口。——来源:Google Material Design

我们的用户体验设计团队最近重新设计基于卡片的模式。本文将进行简单地总结,你会明显得得到更多的信息。然而,当涉及到新闻,尤其是家庭和归档的页面时,会发现我们远远超过了使用这种模式。

当卡片式UI不再流行,列表式UI将是王牌

基于卡片式UI设计的app截图

文章排版设计的反馈

在重新设计后,经常用户群会有及时的负面反应。紧随其后的是大量的投诉和电子邮件,要求你撤回到旧的UI界面。

我们计划重新设计Goal News 和Live Scores这两款app,这两个app都没有受到变化的影响。所以考虑到这一点,我们要对策略进行一些改变。听从批评,然后建立共同的模式。

我们第一次接触卡片问题是在Goal News发布之后 – 见图。屏幕上可以看见少量的抱怨的文章。例如:

当卡片式UI不再流行,列表式UI将是王牌

用户关于卡片得反馈截图

太多的图片而且需要不停地滚动。我只是想快速的浏览新闻。

为了看所有的新闻我必须滚动大图。而且不能够一次查看加载的新闻。

从用户的反馈得到:反馈是很重要的。这不仅仅是抱怨一个性能,而是花时间解释引起的问题。通过这个我们确定了一个共同的用户目标,需要快速阅读,只得到最新新闻的概述就够了。

进一步需要研究一下现在问什么没有实现这一目标。下面是我们得一些研究。

更深入的挖掘

通过使用HotJar分析其他网站上的点击和滚动距离,我们注意到类似的问题。Spox.com的主页最近被重新设计,新的设计侧重于新闻列表,从其他的分离开来。

当卡片式UI不再流行,列表式UI将是王牌

Spox.com – 重新设计

旧主页如上所示。 您可以在“Spox电视季后赛”横幅上方的小图片上看到大量的可点击事件。 这些点击会使导航轮播。 他们在此页面上的被点击次数为43%。 这可能会吸引大量点击,因为单个用户可能在同一会话期间点击多个卡。

22%的总点击次数是通过“Themen des tages”的列表。 这个列表实际上只出现在第一个轮播项目! 于是通过分离“Themen des tages”重新设计和旋转木马导航的方法来解决这个问题,如下:

当卡片式UI不再流行,列表式UI将是王牌

Spox.com – 重新设计

结果令人难以置信,“Themen des tages”的点击次数增加了三倍,达到了点击总数的59%。

有趣的是,旋转木马导航的列表方法有相反的效果。 通过删除图像,我们几乎失去了与该区域的所有交互。 现在只占总点击次数的1%。 与以前相比有巨大的差异,其中43%的点击在导航转盘。

这可能表示用户正在使用导航,以找到刚刚消失的新闻列表。 记住它只出现在第一张幻灯片,这个导航启用了自动播放。

移动模式

当我们研究在移动设备上的行为时, 我们访问了一个基于列表的UI网站(下面,左)和两个基于卡片的UI网站(下面,中,右)。 我们承认存在偏见,我们不是像上面做的比较同一个网站 ,但仍能总结出一些结论。

当卡片式UI不再流行,列表式UI将是王牌

移动单击并滚动地图。来自:HotJar

卡片式增加了汉堡菜单的使用

比较菜单图标的使用。我们可以看到一个基于卡片式的网站的更大的用途。统计数据的分析如下:

  • :Voetbalzone – 0.48% – 列表UI
  • :Spox – 17.43% – 卡片UI
  • :Goal – 4.93% – 卡片UI

这可能是因为用户对有限的可见标题会感到不耐烦,并且已经诉诸使用菜单来找到与其需要相匹配的内容。

卡片式增加了滚动的深度

在Goal(最右边)上使用卡片鼓励用户向下滚动页面。这不是常见的,因为每个卡片相比于Voetbalzone(最左边)占用高出38%的高度。虽然用户滚动更多,他们仍然看到较少的内容,比较左侧网站少了3篇文章。

可阅读的文章数

很明显,列表的好处是你可以在视图中放更多的新闻文章,从而更快地扫描标题。为了理解这种差异,我们需要研究基于卡的设计所需的额外空间。我们已将研究扩展到竞争对手的新闻网站。将3个依靠卡片式的网站与3个喜欢列表的网站进行比较。

只考虑主页,我们已经看了2种情况。一是在折叠,二是向下滚动到“最好”的位置 – 最可能是新闻标题的地方。为了使测试公平:

  • 只计算标题100%可见的新闻报道
  • 确保浏览器设置为最大宽度/高度为Macbook 13″
  • 使用相同的浏览器:Google Chrome
  • 缩放级别设置为100%。
  • 屏蔽广告,因为广告横幅的高度可能有所不同

首先让我们来看看折叠效果:

当卡片式UI不再流行,列表式UI将是王牌

折叠效果。 顶行是卡片式网站。 底部是列表式网站。

下面是“最好的”案例 – 你可以看到最多的新闻。

当卡片式UI不再流行,列表式UI将是王牌

最好的位置看到最多的新闻。 顶行是卡片式。 底部是列表式。

分析这些结果表明,通过使用列表,您可以将新闻的数量增加一倍。 当比较最坏的情况和最好的情况,OneFootball(卡片式)最多只能放6篇文章的标题。 其中Voetbalzone(列表式)在类似位置有19个标题。

当卡片式UI不再流行,列表式UI将是王牌

列表与卡片的其他示例

我相信我们不是唯一来解决这个问题的人。 例如,Google已经对其搜索结果页进行AB测试。

当卡片式UI不再流行,列表式UI将是王牌

Google搜索的AB测试。

Google的搜索结果可能会更加丰富多彩,但每页提供的信息较少。——来自:GreenBot

Material Design的建议

什么时候适合使用列表? Material Design建议的是列表是“可快速扫描”,适合显示类似的重复的内容。
当用户不直接比较图像或文本时,不推荐使用卡片式。新闻网站的用户经常想比较新闻标题,特别是在首页上以获得对当前故事的概述并决定对哪些文章再进一步探索。

当卡片式UI不再流行,列表式UI将是王牌

Google Material Design团队的一些关于卡片式的建议。

总结

这两种模式都有各自明显的好处。 这不奇怪的是,列表式更紧凑,因此你可以看到更多的新闻文章,更容易的浏览标题。

虽然卡片式有更大的影响。 图片是抓住用户的注意。 附加信息如摘录和标签,也可以出现在卡上。 在用户提交请求之前给他们更多的信息。

作为设计师,虽然我们都喜欢最新的流行趋势,额外的白色空间和大图像,但对于新闻和数据,列表式是更好地解决基本的用户目标的方法。 快速的浏览以查找相关内容。希望你会从我们的错误中学习,在设计下一个主页或归档页面时打破严格的卡片模式。

 

原文作者:@rob_gill

原文地址:https://medium.theuxblog.com/when-card-ui-design-doesnt-work-f4343118d108#.limrgjzid

译者:厉嗣傲

译文地址:http://www.ui.cn/detail/193772.html

本文由 @厉嗣傲 授权发布于人人都是产品经理,未经作者许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-13 11:44
下一篇 2017-05-13 13:56

相关推荐

  • 关于交互设计师的工作内容,这篇讲得最全面!

    交互设计师的工作,并不仅仅是输出设计方案,我们需要参与前期的需求讨论、后期开发、测试验收等等产品设计与实现的多个环节。本篇将介绍我目前参与交互设计的工作流程以及各个阶段的工作职责。

    2017-05-18
  • 线框仔,你知道交互设计在未来会多火?

    对你而言,它可能还是未知数。这是康石石撰写本文的首要初衷,我们先看看大多数人如何看待交互设计这一专业:1.交互设计师是做APP的2.交互设计师是给APP动效的3.交互设计师都月薪上万,且薪资上涨空间高,酬劳丰厚。其它就不清楚了。。。以下康石石引用《女神进化论》创始人--寺主人在知乎关于交互设计师目前生存现状的一段描述,供大家了解行业目前基本情况:月薪<10k俗称“线框仔”,出没于小...

    2018-04-17
  • 经验分享丨赶集App中秋节的皮肤设计

    随着移动互联网的迅猛发展,同一款产品,使用移动端的用户远超PC端,为了更好的提升APP的用户体验,情感化设计也得到了越来越多的关注,通过它来唤起用户共鸣,带给用户愉悦的心情。

    2017-04-30
  • UED 戊戌狗年第一波招聘已送达!

    14载,我们初心不变,依然要做行业最有力的的发声者。从一张纸到一串电波,媒介在变,我们的眼光始终如一大家都在说AI是未来,然而在这里,我们依然需要你无可代替的头脑。WE ARE HIRING这次招聘我们为什么要做这次公开招聘?信息爆炸,百家争鸣,越是瞬息万变,媒体的价值愈发凸显。我们不会随便说满意,而是希望在诸多嘈杂的背景声中,发出属于新时代建筑媒体人独到的观点,让关于建筑的解读,走进公众的视野;我们希望以全新的面貌去呈现UED对于中国...

    2018-02-28
  • 百度金融用户体验中心负责人 曲佳:设计师求职七宗罪

    继上个周五 19:00 腾讯互娱游戏平台部设计总监陈维的第一节课《如何通关 UI 设计师的游戏副本》后,昨晚百度金融用户体验中心负责人曲佳联合团队的设计经理孔敏,给知群的用户们带来了「七大公司设计师面试官授课合集」的第二节课《设计师求职七宗罪》,在分享的最后环节,也给出了目前百度金融尚未对外大规模公开的招聘信息(最近有跳槽意向的设计师们抓紧时间上车)。曲佳:百度金融设计架构师,百度金融用户体验中心-百度 FDC ( Baidu Fina...

    2018-04-04
  • JD Watch V1.0设计思考

    近年来可穿戴设备渐渐进入人们的视线,京东JDC也为给用户一个完整的体验加入到了探索的队伍中来。 ·全新的平台 谷歌与苹果的Watch设计理念基本相同,两个平台下我们面临相同的问题。如何体现Watch平台自身重情景、…

    2015-06-11
  • 一“平”到底

    随着 IOS8 的更新,以及更多 APPLE 产品的出现,扁平化设计已经成为了 UI 类设计的大方向。抛开扁平大战拟物的观点,让我们看看扁平设计之路应该如何越走越远。正好因为这个风格的流行,花瓣上也积累了非常多设计师朋友们的 素材 ,来看看他们都收藏了哪些精致好素材吧。

    2015-01-04
  • 一次虚拟项目练习:支付宝到位-Redesign

    大家好,其实,我是一个视觉设计师。嗯,没错,因为对交互设计的兴趣使然,这次我想在此放一篇交互设计类的文章,以总结我这段时间的思考与设计过程,仅供交流。请多多指教。

    2017-05-11
  • 做用户体验设计最难的是「平衡」

    做用户体验设计最难的是什么?「平衡」是我一贯以来的答案。在实际工作中,需要我们平衡的因素有很多,比如商业目标与体验目标的平衡、理性思维与感性思维的平衡、追求极致与关注全局的平衡、发散创新与克制专注的平衡、符合习惯与突破常规的平衡……一个好的用户体验设计师能够综合考虑到绝大部分情况,作出最适合当下产品的设计思考与决策,而不是理想化地沿着一个方向走到底。

    2017-05-08
  • 由爱奇艺视频弹幕引发的思考

    弹幕一词最早用于军事领域,指代对某一区域进行密集火力攻击。2006年,日本视频分享网站Niconico首次尝试在视频画面上实时显示用户评论。由于评论在屏幕上快速飘过的形态类似飞行中的子弹,因此它被形象地称为“弹幕”。
    被称为“A站”的AcFun最早在2007年上线,是国内首个推出弹幕视频的网站。与Niconico相似,早期的AcFun同样聚焦动漫和游戏内容。2009年,哔哩哔哩(Bilibili,又被称为“B站”,最初站名为Mikufans)成立,其目标是为用户提供一个稳定的弹幕视频分享站点。

    2017-06-04