内页编辑《About Face:交互设计精髓》一书中有提到一种错误的编辑方式:
“......很多程序一个地方用于输出,另一个地方用于输入,把它们看成是两个独立的过程。用户的认识模型很难理解这种差异。”
同时,《About Face :交互设计精髓》的作者也总结了一条简单的规则:
在哪里输出,就要允许在哪里输入。就是让界面能够直接响应用户的操作一一“直截了当”。
为了说明这条规则,我们将探讨一些产品的交互模式,采用这些模式有助于界面更直接地响应用户操作。
单字段行内编辑
如果你是一次使用“语雀”,你是否知道左上方标题可以“编辑”?如果你知道,问问自己是怎么知道的,是否来自之前的经验(心智模型)。如果使用者没有这方面的心智模型,应该怎么办?
在看看“钉钉”个人信息中“昵称”你是否知道可编辑,如果知道,问问自己是怎么知道的?
以上两个案例,相信看这篇文章的同学应该都知道怎么编辑,这是因为我们心智模型都被培养过。
唐纳德·诺曼在《设计心理学》一书中的解释:心智模型是存在于用户头脑中对一个产品应具有的概念和行为的知识。这种知识可能来源于用户以前使用类似产品沉淀下来的经验,或者是用户根据使用该产品要达到的目标而对产品概念和行为的一种期望。
语雀这样做不知道是不是做过用户调研,因为用语雀的人几乎都是互联网相关行业的人,这些人群的特点就是学习适应能力特别强且用户心智模型有被培养。
钉钉为什么没有这么做,可能是因为钉钉的用户人群并不只是互联网人群,还有很多制造业和传统行业的用户,这些人群的心智模型没有被培养。
结合以上案例,我们在设计单字段编辑功能时,一定要考虑一个问题:用户怎么才能发现这个功能?
通常我们会采用三种交互方式:
其中2、3是需要鼠标停在标题上之后,可编辑提示才会出现。
因此,是否能被发现取决于用户的鼠标是否悬停在了标题上,并且是否会注意到。
为了让功能更容易被发现,可以将提示直接放在页面中。例如图中1,可以在标题旁边放一个图标或文字按钮,单击即可触发编辑。
有了这个随时可见的效果后,编辑功能就更容易被注意到了。
不过,图标或文字按钮在有些场景下会影响页面视觉平衡及干扰问题,如果功能及其提示在页面中的数量过多,可能会影响操作效率。
这个时候就需要我们设计师去寻找平衡点,我们可以与产品探讨一下这个地方“易读性”和“易编辑性”那个更重要。例如:“易读性”重要,则应该在用户