Don’t make me think—多按钮共存设计

honghu2

Don’t make me think—多按钮共存设计

以前在一个web体系的设计中，和另外一个设计师会商，“保留”和“取缔”按钮该怎样设计。我的概念是，保留是比取缔更经常使用的按钮，也是用户的重要目标（用户不会为了取缔来利用表单），以是在视觉上，保留按钮应当比取缔按钮更夺目，如许更易被用户先看到，从而提高用户的效力。

下图：Google-analytics体系中，Apply以按钮的情势表示，cancel以链接情势表示

厥后可巧看到Luke Wroblewski写的“Primary & Secondary Actions in Web Forms”这篇文章。作者把“提交”、“保留”，花姬“继续”如许的按钮界说为重要动作。由于它们是用户操作表单的重要目标，而“取缔”、“重置”、“撤消”如许的按钮界说为次要动作，由于这些动作不是操作表单的重要目标，而且它们的点击结果是负面的。

作者一共设计了6种视觉情势，并经由过程眼动仪来测试哪一种表示最佳。成果有点出乎我的料想，视觉上不区别重要动作和次要动作的设计方案，用户完成表单的速率最快。但即使如斯，作者依然建议采纳视觉提醒更较着的方案：“按钮+链接”。



想更进一步会商下，为甚么会有这个问题。依照don’t make me think的说法，在没有选择的环境下，用户更易快速地做出决议。或不该该说是决议，由于原本就不必要用户去果断。没有过剩的按钮吸引注重力，也没有过剩的按钮可以点，用户不假思考地就完成为了操作。好比当“下一步”按钮自力呈现时，用户常常点得很愉悦。

下图：自力呈现的“下一步”



可是当按钮成对或多个呈现时，问题就来了，用户必需看完所有的按钮文字，才能做出果断，这无疑是设计师不肯意看到的。以是会在按钮上做一些指导，客户端比力常见的做法就是把最经常使用的按钮或重要操作的按钮设为核心状况。

下图：opera阅读器退出时的弹出对话框，Exit被设为核心按钮



而网页端由于不存在按钮核心状况，以是必要经由过程此外法子来实现一样的结果。常见的拉开视觉条理的几个手腕有：

1.按钮的排序

Windows体系上重要操作都是放在左边，用户的阅读次序也是从左边起头，以是左边的按钮最轻易先被用户看到。

2.按钮的巨细

通常为指按钮的是非。可以经由过程加长文字，或直接加长按钮的手腕来拉开视觉条理。如许的按钮更易先被用户的视野捕获到。

下图：“上一页”按钮只有一个箭头，而“下一页”按钮为文字加箭头



下图：“肯定”按钮比“取缔”按钮更长



3.按钮的色彩质感

经由过程给按钮添加色彩或质感，以仿照客户端核心按钮的表示。

下图：wordpress将“publish”按钮报酬地设为高亮



在Google analytics如许的web体系中，因为采纳的是体系默许样式的按钮，以是它选择把次要操作以链接的情势展示，从而拉开视觉条理。如许的设计在“登录”，“注册”中也很常见。

下图：谷歌帐号的登录



最后再多说一句，表彰下opera的设计。Opera的弹出框，让像我如许的用户，只看按钮就可以快速做出果断，而不消阅读对话框主体文字。若是我必要更快做出果断，只看核心按钮便可以了。

比拟之下，大大都软件的按钮上仅仅写着“肯定”，“取缔”；我必需浏览按钮之上的大段文字，才敢按下此中一个。不但逼迫我选择，还逼迫我浏览…

下图：三个按钮上很清晰的写了然动作



总结一下适才所说：

1.若是可能，尽可能只给用户一个按钮。2.当必要显现多个按钮，而且它们之间存在重要动作和次要动作的瓜葛时，经由过程拉开视觉条理的法子给用户更好的指导。3.按钮的文字应当引发设计师足够的器重，承当更首要的脚色，帮忙用户快速做出果断。

来历：