16/10/28

自动轮播图:糟透了的设计

我大学隔壁床的室友有一种洁癖,电脑系统一个月至少重装一次,因为觉得稍微用久一点系统里就会不知不觉多出许多看不见的垃圾文件;买了iPhone后也经常重置手机,手机里的应用只有五六个,作为一个宅男,甚至有时候微信都不会装,但却花钱买了个类似CCleaner的清理手机的软件,仍然每隔一段时间重置一次手机。其实我也类似,但是比较克(lan)制(san),没有那么极端。

现在我手机里装了两百多个App,因为想着要做产品设计,不能搞得像个功能机一样,而且下载App的成本低,逛一次App Store随便点几下就又下了几个。当然常用的最多也就十来个。

尽管如此,这两百多个App就像喉咙里的梗,一解开手机就会咯噔一下。我期待着什么时候能够有一种更完美的设计,就像浏览器一样,既包含所有又只有一个,这样心里可能舒服些。

我想这就是我成为果粉的理由。今天苹果发新mac,变轻变薄性能变强,这是逃不掉的我必须欢迎的点;然后是接口变为四个Type-C,很好,终于可以把用处不到的thunderbolt2接口干掉了,唯一遗憾但是没有了MagSafe,磁吸的感觉情感化体验真的非常好啊,看到网上有不少人说没有USB接口没有SD卡槽没有HDMI接口多么遗憾,但是你想想,一个笔记本,为什么要给其他的外设那么多选择?笔记本的使用场景变化性那么大,百分之九十有百分之九十的接口是空的,留着配相么?如果在家或者公司,Type-C的扩展坞比thunderbolt2的扩展坞便宜了百分之九十不止吧,我觉得四个也多了,两个管够;iPhone取消3.5mm耳机接口也深得我心,首先手机不谈音质,其次线很烦人。虽然说的很像洗地,但对有电子洁癖的用户来说,这确实是心声。

下面这篇译文来自Nielsen Normal Group,开始是看到了腾讯ISUX一篇关于轮播图的文章,突然让我意识到,对啊,为什么以前我自然而然地就用上了这种交互方式,却从来没考虑过一下?然后找到了这篇比较短的文章看,顺便翻译下来。以下开始译文。

++译文++

最近在英国做一个可用性测试实验的时候,我们交给用户一个任务:去看看看西门子有没有在做洗衣机促销活动。

很快,用户就登陆了西门子家电的英国官网:

你猜发生了什么?用户能完成这个任务吗?官网主页上最大的一块地方用着最大的字体写着:买西门子家电立减100英镑。旁边还放着一张有洗衣机的图片。这太明显不过了。而且,右侧靠边的地方同样也写着促销的信息。

尽管如此,用户依然没能完成这个任务。她一次又一次访问主页,仔细寻找每一句话,最后还是放弃了,认为西门子并没有什么特殊的优惠活动。(她最后说:除非我很有钱,要不然我不会选择西门子家电的)

小促销盒子:被忽略

我们很轻易地就忽略了右边的促销信息区域。甚至不需要专门做一个测试就知道,大部分用户会忽略掉这些信息,因为三个原因:

  • 最重要的:旗帜盲点(banner blindness)。这些促销信息看起来太像广告了,用户直接就跳过不去看它。
  • 位置在最右边,许多用户根本注意不到。大多数用户的注意力集中在网页左边。
  • 最后,文字描述不太容易理解(user-repelling)。就算用户确实看到了(虽然不太可能),也几乎不会有人会点击它。对,这是有一个大大的“100英镑”,但对应写的是“奖励,生活,方式”(Rewarding.Life.Style)。除了西门子营养部门的人,至少99%的人都会觉得这什么也没说(content-free content)。(就算我从来没说过写文章的准则是必须要有意义,但我觉得这不言自明,作为一个经常被写作折磨的人,你们可以看看我的讨论:Taglines

巨大的轮播式手风琴(Accordion)设计:被忽略

正如上面的截图,页面上的大盒子区域有两个特点:它的风格太不正式(让它容易被忽略);它看起来太像一个banner了。

然而,最致命的,而在这幅静态图片里却看不出来的是:

  • 这个盒子看起来像一个手风琴,但是它却是一个轮播图。它每5秒会自动跳到下一张图片。

完了。只有当用户真正需要的时候,手风琴和轮播图才应该自动播放图片,否则,它应该保持不动,让用户好好地阅读上面的信息,而不是像抽地毯一样把用户的注意力带走。正如我们的用户说的:我根本没时间去读上面的东西,跑得太TM快了。

自动播放造成了许多可用性上的问题:

  • 移动的元素通常难以点击到,特别是对一些操作能力比较差的用户来说。
  • 文化程度较低的用户没有足够的时间去阅读上面的信息,图片就切换了。
  • 跨语言用户阅读起来更是慢,因为不是他们习惯的语言,所以那些简短的词句就更难以理解。
  • 用户点击他们想要的项目的可能性变得非常低,因为轮播图只能同时显示一张;在西门子官网这个例子里,只有20%的时间会显示促销信息。
  • 界面上不听话就动来动去的东西,这就是会让用户心烦。

更重要的,因为它在动,用户自然而然就会觉得那肯定是广告,所以更容易忽略它。

在我的例子里,用户一开始在页面顶部的时候没有看到100英镑的促销,然后她往下滑,在剩下的时间里就再也没有去看过上面那个大盒子了。

不明所以的文字描述让这个未达预期的大盒子进一步丧失了可用性。在这个手风琴设计中,不明所以的“Rewarding.Life.Style”是用来给鼠标点击查看对应促销信息的。

尽管没有价值的文字通常不过是一种浪费,只是几乎没有用户会去阅读它而已,但是把它用作链接文字就实在是一种更大的灾难了。意义清晰的文字是导航最重要的决定性因素之一:人们只有(a)明白那个链接文字的意思(b)才知道点击会前往哪一个页面。

这个例子中的设计在方方面面都有缺陷,最重要的一个大概就是它让不该动的东西动起来。想想还有些难过:额外的钱居然花在了搭建这个不仅无益而且有害的设计上,还不如用简单的内容和形式去传达公司想传达的信息呢。

++原文信息++

Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility
by JAKOB NIELSEN

相关文章

评论 (0)

还没有任何评论

发表评论 Leave a comment :