[译]移动设备上何时何地使用列表缩略图

原作者: Aurora Bedford

原文来自Nielson Norman Group,一个关于用户体验的咨询研究网站

作者条理清晰,把缩略图的使用也说出了许多要注意的细节,译来与大家共勉〜转载请先询问笔者意见并注明出处。

摘要:决定是否要在列表项中显示缩略图,要基于图像相对于与之关联的文本的重要性,和缩略是否会在所有列表项中展示,以及小的缩略图间是否易于区别开来。

一个我们经常从课程的受众和听众那里听到的问题是,要不要在移动设备的设计中把列表加上缩略图;如果加的话,是否要将这些缩略图放在主要文本的左边或右边。不出所料,这是个没有一刀切答案的问题,但总是有指引,来协助我们确定在各种不同情况下的最佳行动方针。

Is the Image Helpful?

图片是否有帮助?

不要以为,只要你有一部分或者甚至所有列表项目的图片可用,你就绝对应该展示它们。

首先要考虑图片是否将帮助用户决定他们应该从列表中选择哪一个项目。更重要的是: 问问你自己,用户是否能够只通过这些图片作为使用时的导航。如果图片完全不能单独存在(要么因为它小到无法区分相关细节,或者是它只是一张通用的股票走势图),那就消除它。

例如,Teavana 移动网站上 (见下图) 给出了各种茶的缩略图,是不太可能帮助用户决定哪些茶能符合他们的口味,因为在这样小尺寸的图片里是很难看到茶叶的的细节和其他成分。你所采用的缩略图所占据的屏幕空间应该用于更好的文本信息,比如品茶的笔记或咖啡因含量— —它们能帮助用户做出信息驱动的导航选择,但这些信息当前仍埋藏在各个详细信息页面上。Teavana的移动网站上茶的缩略图上是没有太大意义的: 用户不可能使用他们得到的视觉信息来选择一种茶,因为在这些视图里这些信息都看起来基本上是一样的。

相反,如果单独的文本也会使用户难以选择适当的项目,那么缩略图也应以某种形式包含在列表中。这是零售业和服务业里最常见到的情况,用户大部分是被美学信息驱动的: 两者间的区别比如说两件衣服,往往通过图片最好解释— —即使是小图片。当然,如果列表内容主要是视觉性的(例如,视频或照片),那么在浏览页面里图片应该绝对优先考虑,如何帮助导航,并保证缩略图够大,或者根据的多少需要显示的关联文本使用一个基于网格的布局。

Placement: Left or Right?

位置:左还是右?

如果你已经决定要包括列表项的缩略图,下一个问题你可能会问应该在哪里放。若要确定放在关联文本左边还是右边的位置,请权衡对比图片和列表项中提供的文本信息。视觉性的信息是用户浏览的列表信息中最重要的一块吗?还是说图片只是辅助工具?

如果图像对于在列表中选择一项是必要条件,将其放在左边 (这指从左到右书写的语言中,如果在从右向左的设计中只需镜像一下这些建议),以帮助用户通过有缩略图的列表快速筛选,而不必看文本。否则,如果图片的重要性次于文本,将它放在说明文本右边的位置。

图片相对关联文本的优先级也应该用来决定缩略图的大小。越不重要的图片可以越小。但是,请记住,如果缩略图太小了,它将不再可识别或者可用 (要缓解此问题,使用裁剪和缩放的组合来减小图像大小,而不是只按比例缩小)。另一方面,太大的缩略图可能会不适当地分散用户注意力,使其注意不到其他有关信息,或导致关联的文本出问题(例如,字体大小可能需要减少到难以辨认的大小或可能需要截断描述——这两者对于用户体验都是很大的危胁)。同时也请记住,较大的图片加载时间也更长——缓慢的加载速度极有可能导致用户的不悦。

(当用户挑选酒店的时候,用户对其地点的美学信息感兴趣,所以酒店的缩略图是有用的,虽然相比其他文本信息,例如价格和酒店评级,就可能显得不那么重要。左图: Tonight酒店的缩略图是足够大,可以辨别细节,但酒店名称被截断而不是换行。右图:Hotels.com给了文本更多的空间,但它显示的缩略图太小了,很难有什么用。)

另一个可以帮助你选择放置缩略图位置的因素是,你是否总是能让所有列表项配上适当的图片。如果你不能保证每个列表项都包含有各自的图像,就把缩略图置于右边,以支持靠文本浏览。这样就能保证文本向左对齐,用户便能够沿着屏幕的左边移动视线,来确定当前页的哪一项是最有趣的。

(左图: 在洛杉矶时报移动网站的底部三个缩略图都太小,无法辨认也无法吸引读者,并且每个故事都必须包含图片,因为它采用图片左对齐的布局方式。右图: 纽约时报移动网站上使用的缩略图的右对齐放置,将允许有遗漏的缩略图。在视觉性信息具有最大影响力的情况下,就应该相应采用全尺寸宽度的图片。)

Conclusion

结论

要确定图像的相对重要性,要进行用户态度研究,比如调查或访谈,深入了解您的用户喜好等。一旦可以定义图像的优先级,就容易决定理想的缩略图位置。

(何时何地在手机上显示列表缩略图的决策树)

像往常一样,请务必使用纸上原型来测试那些潜在的新布局,以便在投入太多的时间和金钱之前,确保你正沿着正确的道路前进。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,718评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,683评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,207评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,755评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,862评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,050评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,136评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,882评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,330评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,651评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,789评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,477评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,135评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,864评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,099评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,598评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,697评论 2 351

推荐阅读更多精彩内容