设计师,你把“OK”放左边根本就不OK 呀!
i黑马 i黑马

设计师,你把“OK”放左边根本就不OK 呀!

设计对话框的时候,设计师很常碰到的问题就是“ok”跟“取消”两个按钮要怎么摆。

“ok”钮是完成使用者动作的最关键;“取消”也同样重要,因为可以刚刚的动作复原,回到原来的页面,防止犯错。根据上述的功能,要怎么决定它们摆放的顺序才是最好的呢?到底谁在左边谁在右边?

照惯例嘛,好不好?

很多人都觉得就照惯例来吧,但真的可以吗?

惯例无法解决这个问题。其实要大家遵照惯例设计顺序,是因为要让使用者有一致的体验;一致的体验在设计界是个满热门的词,也可能导致一种盲点,蒙蔽大家深刻思考使用者真正碰到的问题。如果大家都不明白惯例从何而来,那又如何知道遵守这??惯例有什么好处?如果这个惯例对使用者并没有好处要怎么办呢?

当然我们有一些设计惯例是被广泛使用的,但这里的重点是UI设计师不应该被限制住,必须要能更深入看待问题,了解设计背后的理由。

视觉份量、标示很重要,如同顺序

要让按钮更明显的话,可以加强文字的视觉份量(例如使用加粗的文字),或者使用特别的标示(例如颜色)。而针对这两项传统来说,大家觉得比“顺序”重要许多;可是视觉份量与标示虽然重要,如果忽略了顺序,设计就不完整。

“ OK “应该放在右边

要仔细分析这个问题,其实需要先看设计师们常有的假设是否站得住脚。

有些设计师相信把第一顺位的“确认”钮放在左边,也就是在第二顺位的“取消”前面对使用者是比较好的,因为这样比较先看到“确认”,可以花比较少时间按。听起来也许有道理,但不能忽略使用者在决定要按什么钮之前,会先把所有的选项看过。

这代表大部分的使用者不会盲目的只按在左边的(第一顺位)按钮,而不注意到在左边的(第二顺位)按钮。在视觉上,很明显就是一个在左边,一个在右边。然后他们就会把眼睛移回到左边的按钮然后按下去,这样一来,就有三次的眼球动作。

当“ok ”放在左边,视觉方向比较复杂。

OK 按钮放在右边,视觉方向就一致了。

比较“ok”放在左边跟右边的效果:若把“ok”放右边,就只有两个视觉定点与一种视觉方向,视觉流动的速度就快许多。但如果放在左边,会让使用者比较比较容易按,但的确就会造成三个视觉定点,两个视觉方向。所以把“ok”放在右边的确会让使用者的速度快很多。

经验的ATAE匹配设计要求

当使用者按“取消”的时候,他们不会预期有什么动作,只是会回到原来的页面而已。

所以,“取消”按钮就像是“上一页”一样;但当使用者按了“ok”,就会期待接下来会如同按钮上说的,把他们带到下一个页面。所以“ok”就像是“下一步”一样。

把“上一页”放在左边,“下一步”放在右边,其实也配合了使用者的心智模式,是他们可以预期的动作。把使用者带到下一步的按钮放在右边,到上一步的在左边,这种顺序有逻辑的原因就是它符合使用者的左到右阅读习惯,右边代表的是向前,而左边代表的是后退。

下图的“ok ”钮把使用者带往“下一步”,而取消就是回到原来的视窗。

提供使用者更流畅的流程:放在右下的按钮相当于是结束区

放在右下角的按钮会让使用者比较好按,是因为这遵守了Gutenberg diagram,也就是下面图片所展示的“阅读重力(reading gravity)”流向。

在Gutenberg diagram里面,放在右下的按钮相当于是结束区,也就是使用者视觉浏览方向的最后一站,放在这个位置能让使用者了解最后一件要做的事是什么。

这不仅改进了视觉方向的复杂度,也改善了使用流程。使用者浏览的时候不用再跳过“ok钮”,因为在视觉的最后一站就会刚好看到它,所以就可以立刻按下去,进到下一步。

下图这种对话框就比较方便浏览,因为视线会直接停留在“ok ”钮

要分开还是一起?

还有个设计师常常思考的问题是:要把两个都放在右下角,还是一个放左下,一个放右下?

当你把两个按钮各放在两边角落时,也同样能与“上一页”“下一步”的使用习惯配对。但是,因为“ok”与“取消”按钮并不完全是像“上一页”“下一步”那样的流程钮,所以这样做并没有必要,而且坏处可能比好处多。

下图这样的摆放造成过大的视觉距离,让人难以比较两个按钮。但在某些状况中,我们需要衡量按这些钮会发生什么事情是。

如果要执行的是重要的动作,而且无法修改,那把“取消”跟“ok”放在一起是很重要的。

在这个情况里,“取消”按钮就像是“上一步”,但比“上一步”更重要,因为那更是一个“安全钮”,可以防止任何不理想的改变。如果把“取消”分开放在左下,会造成的危险是使用者可能会忽略“取消”这个选项,因为与“ok”隔得太远。把两个按钮放在一起可以让使用者一次看到有两个按钮。这就能让他们更有效率的比较两个按钮,一眼就看出要采取什么行动??。

结论:放哪里很重要

这种对话框经常被使用,尤其是在有重要讯息需要使用者详细阅读的时候,或是在需要执行重要动作的时候。在这种情况下,放置按钮的顺序将会影响使用者会采取什么动作。正确的顺序摆位能让资讯更清楚。当资讯够清楚,就可以防止使用者因为按错钮而造成严重错误。


本文由“TechOrange与“i黑马”联合出品,原文地址:http://techorange.com/2012/09/18/is-that-ok/文章由TechOrange 撰写。如果在阅读过程中遇到什么问题,请联系post@chuangyejia.com ,期待您宝贵的意见和建议!

\

i黑马也诚邀第三方媒体入驻“开放实验室”,合作联系:@老雅痞

赞(...)
文章评论
匿名用户
发布