“按钮”的状态和交互混淆

按钮有两个属性：

1、说明。当前的属性状态文本，可预见的点击处理后果。

2、动作。处理点击用户交互。

思维模型：

比如：我们常见的“提交注册”、“点击删除”、“保存草稿”。“提交注册”明确的告诉用户：点击后，程序会提交注册表单的内容进行注册；“点击删除”点击后，将对所显示的内容进行删除——这个是大家共同的思维模型。

反面案例：

但是我们也常常看到一些将状态识别和处理交互结合在一起的按钮，有图有真相

例一、说明属性和操作行为混淆。

如右图. 这是一个国际知名杀毒软件的开关切换按钮，“打开”是个按钮。

你说他现在是开启还是关闭？你点击“打开”按钮会有什么后果？是点击打开，还是当前已经打开？

处理：一个按钮的说明属性和操作处理行为需要完整的具备，不能既是状态又是操作行为。两者需要有不可替代性。比如这里修改为：已关闭，点击打开 或者 已开启，点击关闭（状态，操作说明）就非常明了了。

……………………………………………………………………….

例二、说明属性和用户心智模型的不一致。

这个图大家都见习惯了可能，但是每次使用的时候都还是需要思考一下，或者看看下面的列表是不是已经是预见的处理结果。

问题根本在于：价格的低到高排列、向上箭头、显示屏物理界面低到高存在混淆。我们把按钮箭头的从低到高和信用从低到高，显示屏商品列表从低到高三者没法统一起来。

处理：直接使用文字，或者用横向的图示说明。如”价格高到底”  、 “信用<”、 ““。另外直接使用文字需要避免上面第一个案例的问题。

价值

用正确的说明属性可以提高用户思考成本和避免误操作带来的后果，以及直接经济成本（比如淘宝淘宝的商品排序页面如果改为横向图示，可以大量减少页面排序刷新操作）。转自半桶水-蒋建平的博客