到2017年,扁平化设计主导网页,随之而来的是界面剥去了表明可点击的线索:蓝色下划线链接、凸起按钮和投影让位给幽灵按钮和与正文无法区分的文本。业界凭品味争论权衡——设计师捍卫简洁外观,可用性专家凭经验警告用户迷路,但双方都没有数据。

Nielsen Norman Group进行了受控眼动实验,用测量取代观点。实验选取六个领域(电商、非营利、酒店、旅行、科技和金融)的九个真实页面,每个页面制作两个版本,仅差异在于线索强度。71名普通网络用户,各分配一个版本,需在眼动仪记录注视和耗时的情况下,找到该点击的位置。

弱线索页面付出真实代价:找到目标前用户耗时多22%、注视次数多25%,九对页面中有六对呈现不同注视模式——注意力分散全页,因为没有任何东西看起来像可靠可点击的。在精品珠宝页面,强版本86%用户从区块标题移到“购买珍珠”链接,而弱版本仅50%,其中24人中9人试图点击标题本身。

同样有价值的是扁平化设计成功的案例:三对页面无差异,共同点是信息密度低、布局传统且目标高对比度。该研究未全盘否定扁平化,而是指出其安全适用的条件。其发布引发大量讨论,NN/g随后回应了批评,研究结果多年支持了该公司的扁平化设计指南。

用测量终结品味之争:设计仅点击线索不同的配对页面,通过眼动追踪观察用户找按钮任务

配对页面除了线索强度外所有设计变量保持不变,因此真实页面研究可声称因果而非相关。

注视和任务时间将美学争论转为量化成本,便于利益相关者比较。

采用71人随机分配的组间设计,使差异达到统计显著(p < 0.05)。

通过公开扁平化页面不造成损害的条件,研究给设计师可操作答案而非被忽略的裁决。

公开热图让效果一目了然:弱线索使注意力分散整个页面,这是用户寻找按钮的特征。

当行业凭品味争论时,通过配对比较隔离争议变量并公开数据;争论转变为可解决的问题,并明确适用条件。

该研究成为NN/g最具争议的文章之一:发布次日,Hacker News获354点评分和171条评论,NN/g官方账号指出文章引发“关于扁平化设计的重大争论”,并以公开发布回应批评。研究结果支撑了更广泛的研究计划——后续文章探讨扁平化设计何时有效、长期接触会逐渐降低用户效率,以及修正的扁平化设计美学需什么条件——将一个实验转化为设计师选择视觉风格时的持久参考。

从这里,追溯依据

参考来源

  1. Flat UI Elements Attract Less Attention and Cause Uncertainty nngroup.com
  2. Flat UI Elements Attract Less Attention and Cause Uncertainty — Hacker News discussion news.ycombinator.com