NNGroup告诉你时下大热的扁平化设计有哪些弊端?

nngroup-flat-design-comments-00

摘要:那些缺失或只带有微弱视觉信号的可点击的UI元素使得用户花费了过多的时间在页面上用hover或点击的方式去寻找不确定的入口——而这降低了用户的效率并且增加了用户对语境线索及即时操作反馈的依赖。

年轻的成年用户们或许更善于感知那些微妙的可点击线索,但他们并不比其它年龄阶段的用户更喜欢点击不确定的内容。

完全使用扁平化设计的交互界面是指完全放弃使用任何拟物或3D的视觉效果。造成的结果就是,这些交互界面远离了较明确的,如传统上用来表达可点击性般的视觉线索。

超平交互界面的繁荣期自从2013的全盛时期便已开始衰落,越来越多的网页开始使用更温和的扁平化2.0设计——在这些设计中使用了微妙的效果来创造并传达细微的3D空间层级效果。可尽管这种温和设计开始回归,我们仍可以看到扁平化设计的人气在很长的时间内仍然推动了弱点击效果的普遍使用。

 

可点击的信号:在扁平化设计之前及之后

要确定网页的哪里可以点击,用户们需要信号指示:明确的可感知的线索能帮助用户明白如何使用交互界面。蓝色下划线的文字是一种传统的表明可点击的视觉信号例子,即使是少有经验的网页用户都可以明白。

过去在网页设计中使用的过分的拟真设计和现实主义设计是用户普遍能够理解和依赖得明显的(但通常很丑)可点击的信号(例如平滑凸起的按钮或带有内凹阴影显得留空的输入框)。即使这些信号在不同的页面上显得不同,但用户依然可以通过2种假设来确认:

  1. 带有强烈视觉信号的元素是基本可点击的。
  2. 不带有强烈视觉信号的元素是基本不可点击的。

扁平化设计使得设计缺失或只带有微弱视觉信号的可点击元素的方式更为流行。将带有链接的文字样式设计为静态文字即是一个缺失视觉信号设计的例子。幽灵按钮(带有细边框并且没有背景色的文字)则是微弱视觉信号设计的例子——传统可点击信号的更微妙版本。

nngroup-flat-design-comments-01

这个电子商务网站使用了类似的视觉状态来表示所有的文字,却不管这些文本是否是可点击的。

扁平化设计的引入导致了缺失或只带有微弱视觉信号设计的普遍使用,所以现在用户只好与3种可能性不断抗衡:

  • 带有强烈视觉信号的元素是基本可点击的。
  • 那些带有微弱视觉信号的元素有时是可点击的。(视觉效果也许被设计为一种视觉信号,但也有可能是纯粹从美学角度出发而和交互界面毫无关系。)
  • 不带有强烈视觉信号的元素有时是可点击的。(设计师也许是完全忘记视觉信号这件事,也可能是这个元素根本就不可点击。)

nngroup-flat-design-comments-02

 

缺失或只带有微弱视觉信号设计的“污染”效应

这种新的情况正在缓慢地影响用户在网页上对于可点击元素的交互方式,而且我们也开始发现一些证据,可用性测试证明了用户的行为模式正在改变。用户被迫浏览全页面来确认什么是可点击的。他们的操作行为经常被打断,因为需要hover其它的元素来寻找那些动态的可点击信号,或者用实验性的点击来发现潜在的链接。

这种行为类似于“操作制约实验”中的实验室小白鼠行为:如果小白鼠在执行具体的活动后,在随机间距内获得了食物,那么它就会继续保持这种活动想要继续获得食 物。同样的,用户发现有时点击那些没有强烈视觉信号的元素也会有反应时,就好比那只实验室的小白鼠,他们也会继续随机点击直到获得反馈。

即使用户以这种探索方式已经在交互界面上找到了需要的内容,他们依然会强迫自己继续这种随机点击的行为并且将注意力从最主要的目标上转移,却并没有获得任何实际的好处。

用户非常依赖于点击元素之后的反馈。当用户不确定某些元素是否可点击时,他们需要在点击之后获得即刻的安慰。如果在点击和系统的变化之间存在延迟,用户会疑惑该元素到底是否可点击并且可能会放弃操作而转向其他的潜在链接。

通用的反馈例子包括:

  • 色彩变化
  • 在按钮上增加一个“按下”效果
  • 进度指示
  • 状态更新

nngroup-flat-design-comments-03

这个手机界面的页脚上哪些元素是可点击的?哪些不可以?在一次用户测试中,一位试图购买鞋子的用户无法确定哪些是可点击的。他点击了多次顶层菜单 “Shop”,试图回到全部商品的list页面。“我都不知道当我点击Shop的时候,它到底是否work…”只有二级菜单“Men”和 “Women”是链接,但是这两个地方并没有强烈或明确的信号来提示用户存在区别。用户自己就说:“很漂亮的网页,但是如果你没买东西那它就一文不值。”

 

用户更多时候是通过上下文的线索来判断哪里是可点击的

在一个可点击信号非常微弱的环境中,用户会寻找其他的线索来帮助自己判断可能的可交互元素。他们会寻找“间接”线索(借用一个法律术语)——这些线索需要一个推论来描绘出结果,就好比罪案现场留下的指纹。处理上下文线索的行为迫使用户花费更多的时间和精力去理解可用的选项。

这些上下文可点击线索可能包括:

  • 文本元素形式的语言(例如可操作的短语,像: “Buy Now”或 “Find”)
  • 元素的布局(例如页面顶端水平排布的词或短语通常是全局的导航)
  • 周围的元素(例如一个单词本身并非是可点击的,但它会被摆放在类似风格的单词旁边,而那些单词通常是链接,好像:“Contact Us” 和 “Locations”)

你也许会问:难道用户们被迫花更多时间去关注界面上的设计元素的语义和布局不是一件好事吗?在我们的课程“Foundations of HIC”中说过, 深加工对于强化记忆比浅层处理更好(换句话说,对上下文语义进行加工比只关注表层的设计,比如文字颜色,要好得多。)然而,深加工会导致较高的认知负荷: 用户必须持续运转工作记忆以负荷那些并不需要的额外信息。这也会增加用户在完成任务时的挫折感和“操作”好难的认知,这些都会导致用户更倾向于想要放弃。 当用户转移他们的注意力去发掘和破解那些不重要的可点击线索时,他们就没有足够的带宽去学习网站的组织架构和你的产品了。

 

年轻的成年用户和可点击信号

有些设计师争论说如果那些年长的用户无法凭直觉使用扁平化设计也ok,因为扁平化设计的目标用户群是年轻人,那些“可以明白”(即可以轻易找到线索并流畅使 用)的人。

如果我们比较那些参加过我们的课程研究(Designing for Millennials)的年轻用户和年长用户的对话,我们发现那些年轻 的用户(年龄段在18-30岁)确实比年长用户更容易发现那些可点击元素,即使那些元素缺失或只有微弱的可点击信号——更具体的说,年轻用户能更快的认出可能的目标。

关于这个现象有许多可能的原因,而某些原因的组合更可能是真的。

  • 年轻用户更能理解微妙的布局线索。
  • 年轻用户更频繁的使用扁平化设计,或者其他探索式的交互界面(比如游戏)。
  • 年轻用户能更好的分辨出那些可被点击的元素,也能更快的学习新的设计方式。

尽管他们在通过那些缺失或只带有微弱提示信号的可点击元素进行导航的方面有更好的能力,年轻用户仍然不喜欢点击那些不确定的元素。

年轻用户更倾向于依赖hover的行为来确定哪些元素是可点击的。当被问到他们是怎么知道网页上哪些部分是可点击的时,一个用户说:“通过 hover … 然后你知道的。事实上我并不确定。有时候你可以做假定。但当链接被加粗的话就很好…如果你以为某个地方是链接,可实际上却不是时,那简直太糟糕了。而且你还得弄明白怎么从另一个方向找到想要的。”

另一个年轻用户对相同的问题反馈到,“我并不知道哪里是链接。我只是试着点击然后祈祷它能起作用。”

即使她在手机上看这张音乐节的时间表,也不能依赖hover之后的状态来判断可点击性,可作为一个成年用户,她还是能正确的猜测到可以轻触那些歌手的名字来获得更多的信息。

nngroup-flat-design-comments-04

 

在不确定点击的世界里创造点击的自信

这里有一条糟糕的消息:Jakob’s Law of the Internet User Experience声称“用户在其他网页上花的时间要比在你的网页上更多”。习得行为和期望会一直跟随用户,所以即使你的网站并没有使用极简主义或扁平化设计,你的用户仍然会被它们曾经遇到过的情形所影响,然后试图去做无用的点击或hover来确认潜在的目标。

还有一条好消息:那些新的行为模式并不是世界末日,那只说明你需要在做设计时仔细考虑。

还有更多好消息:你并不需要使用过去的那种过分鲜艳的现实主义效果来展现可点击性。你可以给你的用户提供一种美丽的、简单的交互界面来帮助他们提升有效行为的完成度和自信心。

  • 我们推荐使用一定量级的视觉信号来展示可点击元素——无论你是否想用传统的那种明确信号例如蓝色链接,或更细微的信号(例如幽灵按钮)。

    不管你选择的是哪种设计美学,请为可点击的元素添加信号。清楚地可点击性可以让用户觉得一切尽在掌握,而且它也可以鼓励用户进行操作,即使他们没有意识到那些是可用的。

  • 对于最主要的元素和特性,请勿把hover作为展示信号的唯一途径。

    合适的时候,可以用hover来展示次要的内容信号。例如,在电子商务型的网页上,当用户hover产品图片时,出现在图片角落里的放大镜icon可以增强用户对于点击就可以放大图片的期望。

  • 如果因为美学考虑你选择放弃明确的视觉信号,那就需要保证提供足够强烈的操作反馈。

    即时的,显而易见的反馈对于易用性而言是必要的,但当用户对于元素是否可 点击不够确定时,这样的设计也会被更多的挑剔。当用户点击了那些不确定的元素,他们会立即寻找反馈信息以安慰自己确实做了正确的选择。

  • 一如既往地,你的决定应该取决于你的用户的特性。

    如果你是为年轻用户做设计,他们也许不需要强烈的可点击信号提示就能把事情弄明白——只是需要做好接受用户认为界面不太可控的苦果。而发现用户对你的交互界面的掌握程度的最佳方式就是用户研究和分析。

  • 小心你的交互界面中的上下文线索。

    不给标题加下划线来表示它不可点击已经不够了。用户会倾向于点击任何没有信号标识的元素,因为你可以想象他们早已适应了那些没有任何信号标识的元素却可点击的状况。

 

结论

不要以为年轻用户就能适应贫乏的用户界面。当用户不确定他们可以点击哪里时,他们会失去对事件的控制感,而这对于需要积极感受的用户体验是非常重要的。他们得放慢速度来确定到底哪些东西对于他们的认知负载是多余且不必要的。

极简主义和扁平化设计的背后动机是将那些丑陋的使人分心的东西抛除在用户界面之外,这样用户就可以专心于内容和用户任务了。可讽刺的是,那些设计样式的误用反而降低了用户的效率,因为用户反而需要更努力的发掘哪些元素是可用的。

 

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部