时间: 2021-07-30 10:26:16 人气: 14 评论: 0
作为设计师,虽然我们都喜欢最新的流行趋势,额外的白色空间和大图像,但对于新闻和数据,列表式是更好地解决基本的用户目标的方法。
随着Material Design的流行,卡**式UI已经成为现代web设计的一部分。尤其是在你在提供一个汇总归档信息的界面时。
卡**是提供详细信息的入口。——来源:Google Material Design
我们的用户体验设计团队最近重新设计基于卡**的模式。本文将进行简单地总结,你**明显得得到更多的信息。然而,当涉及到新闻,尤其是家庭和归档的页面时,**发现我们远远**过了使用这种模式。
基于卡**式UI设计的app截图
在重新设计后,经常用户群**有及时的负面反应。紧随其后的是大量的投诉和电子邮件,要求你撤回到旧的UI界面。
我们计划重新设计Goal News 和Live Scores这两款app,这两个app都没有受到变化的影响。所以考虑到这一点,我们要对策略进行一些改变。听从批评,然后建立共同的模式。
我们第一次接触卡**问题是在Goal News发布之后 – 见图。屏幕上可以看见少量的抱怨的文章。例如:
用户关于卡**得反馈截图
太多的图**而且需要不停地滚动。我只是想快速的浏览新闻。
为了看所有的新闻我必须滚动大图。而且不能够一次查看加载的新闻。
从用户的反馈得到:反馈是很重要的。这不仅仅是抱怨一个性能,而是花时间解释引起的问题。通过这个我们确定了一个共同的用户目标,需要快速阅读,只得到最新新闻的概述就够了。
进一步需要研究一下现在问什么没有实现这一目标。下面是我们得一些研究。
通过使用HotJar分析其他网站上的点击和滚动距离,我们注意到类似的问题。Spox.com的主页最近被重新设计,新的设计侧重于新闻列表,从其他的分离开来。
Spox.com – 重新设计
旧主页如上所示。 您可以在“Spox电视季后赛”横幅上方的小图**上看到大量的可点击事件。 这些点击**使导航轮播。 他们在此页面上的被点击次数为43%。 这可能**吸引大量点击,因为单个用户可能在同一**话期间点击多个卡。
22%的总点击次数是通过“Themen des tages”的列表。 这个列表实际上只出现在第一个轮播项目! 于是通过分离“Themen des tages”重新设计和旋转木马导航的方法来解决这个问题,如下:
Spox.com – 重新设计
结果令人难以置信,“Themen des tages”的点击次数增加了三倍,达到了点击总数的59%。
有趣的是,旋转木马导航的列表方法有相反的效果。 通过删除图像,我们几乎失去了与该区域的所有交互。 现在只占总点击次数的1%。 与以前相比有巨大的差异,其中43%的点击在导航转**。
这可能表示用户正在使用导航,以找到刚刚消失的新闻列表。 记住它只出现在第一张幻灯**,这个导航启用了自动播放。
当我们研究在移动设备上的行为时, 我们访问了一个基于列表的UI网站(下面,左)和两个基于卡**的UI网站(下面,中,右)。 我们承认存在偏见,我们不是像上面做的比较同一个网站 ,但仍能总结出一些结论。
移动单击并滚动地图。来自:HotJar
比较菜单图标的使用。我们可以看到一个基于卡**式的网站的更大的用途。统计数据的分析如下:
这可能是因为用户对有限的可见标题**感到不耐烦,并且已经诉诸使用菜单来找到与其需要相匹配的内容。
在Goal(最右边)上使用卡**鼓励用户向下滚动页面。这不是常见的,因为每个卡**相比于Voetbalzone(最左边)占用高出38%的高度。虽然用户滚动更多,他们仍然看到较少的内容,比较左侧网站少了3篇文章。
很明显,列表的好处是你可以在视图中放更多的新闻文章,从而更快地扫描标题。为了理解这种差异,我们需要研究基于卡的设计所需的额外空间。我们已将研究扩展到竞争对手的新闻网站。将3个依靠卡**式的网站与3个喜欢列表的网站进行比较。
只考虑主页,我们已经看了2种情况。一是在折叠,二是向下滚动到“最好”的位置 – 最可能是新闻标题的地方。为了使测试公平:
首先让我们来看看折叠效果:
折叠效果。 顶行是卡**式网站。 底部是列表式网站。
下面是“最好的”案例 – 你可以看到最多的新闻。
最好的位置看到最多的新闻。 顶行是卡**式。 底部是列表式。
分析这些结果表明,通过使用列表,您可以将新闻的数量增加一倍。 当比较最坏的情况和最好的情况,OneFootball(卡**式)最多只能放6篇文章的标题。 其中Voetbalzone(列表式)在类似位置有19个标题。
我相信我们不是唯一来解决这个问题的人。 例如,Google已经对其搜索结果页进行AB测试。
Google搜索的AB测试。
Google的搜索结果可能**更加丰富多彩,但每页提供的信息较少。——来自:GreenBot
什么时候适合使用列表? Material Design建议的是列表是“可快速扫描”,适合显示类似的重复的内容。
当用户不直接比较图像或文本时,不推荐使用卡**式。新闻网站的用户经常想比较新闻标题,特别是在首页上以获得对当前故事的概述并决定对哪些文章再进一步探索。
Google Material Design团队的一些关于卡**式的建议。
这两种模式都有各自明显的好处。 这不奇怪的是,列表式更紧凑,因此你可以看到更多的新闻文章,更容易的浏览标题。
虽然卡**式有更大的影响。 图**是抓住用户的注意。 附加信息如摘录和标签,也可以出现在卡上。 在用户提交请求之前给他们更多的信息。
作为设计师,虽然我们都喜欢最新的流行趋势,额外的白色空间和大图像,但对于新闻和数据,列表式是更好地解决基本的用户目标的方法。 快速的浏览以查找相关内容。希望你**从我们的错误中学习,在设计下一个主页或归档页面时打破严格的卡**模式。
原文作者:@rob_gill
原文地址:https://medium.theuxblog.com/when-card-ui-design-doesnt-work-f4343118d108#.limrgjzid
译者:厉嗣傲
译文地址:http://www.ui.cn/detail/193772.html
本文由 @厉嗣傲 授权发布于人人都是产品经理,未经作者许可,禁止转载。