上周,我请大家参与了一些围绕特定设计模式(电子邮件设置)的群体设计思维活动。这是前提
假设 Web 应用中可能发生三种会触发电子邮件的事件。我们希望允许用户决定在这些事件发生时是否接收电子邮件。
我查看了所有回复,以下是我认为最有趣和最有效的回复。 这不是一份完整的列表。要查看所有回复,请查看原始文章中的 评论线程。
注意:我不关心这些的浏览器兼容性。那是另一个问题。总有一种方法可以使设计生效。这部分应该在找到最佳解决方案后进行。
样式化的切换按钮
它本质上与复选框(开或关)相同,但样式和内置文本可能会使事情更清晰

此示例使用表格布局

以及图标

不要给我发邮件
这些方法后退一步,首先询问用户是否希望完全接收电子邮件。如果他们不希望接收,则无需进行任何单独的选择。最简单的方法如下所示

稍微复杂一点

选择越多,拥有“全选/取消全选”选项就越有意义

或者只提供一个可点击的“永不”选项

查看笔
完成句子
这些设计故意使用冗长的表达方式,迫使用户在更改之前阅读并理解。

拖放
这种强制交互可能会让用户清楚地了解将要发生的事情

选择三个
我说了我会选择三个我认为最有趣和最成功的,所以我决定从不同的类别中选择它们。Blake Pemberton、Frank Spin 和 John。我会发送电子邮件告知访问权限。
大家做得很好。
我喜欢 John 的拖放功能,但我认为左箭头应该自动将所有选项移动到操作框中。就此而言,他可以添加一个右箭头来删除所有选项。在演示中,将选项移动到框中不够“粘性”。似乎有些选项可以停留在半进半出的状态。当我将绿色选项移出框并偏离目标释放时,它会移回框中并变成蓝色。缺陷?最后……当然,这只是意见问题,但 Jay Leno “*确实*很搞笑(而 Falon *不*搞笑)。 ;-) 最终,我最喜欢的是 Frank Spin 的版本,尽管从视觉上我更喜欢 Blake 的版本。将这两个版本结合起来,就可以获得最佳方案!:-)
嗨,Chris,感谢你研究了一些备选方案并讨论了设计选择的影响。恕我直言,原始设计(看起来有点像 MS Outlook 的规则)并不令人满意。我会选择 [http://codepen.io/frankspin/full/1/9],不过需要一个智能的默认值来证明“是”是有价值的——否则“不,谢谢”选项可能会显得过于诱人。
我认为“不要给我发邮件”和切换按钮应该结合起来。使用一个滑动切换按钮来解锁电子邮件通知,并为每个选项提供切换按钮。
嗨,Chris,
感谢这份很棒的奖励。我期待着你的冒险之旅,迫不及待。
我要感谢大家提供的积极反馈和讨论。在这个“比赛”期间,我看到了很多有趣的东西。
喜欢这个网站!
嗨,Chris,
我注意到很多 UI 设计中都使用了绿色表示正面,红色表示负面。虽然这对大多数用户来说都没问题,但对于色盲用户(特别是:全色盲;部分色盲;红色弱视;绿色弱视)来说可能具有挑战性。“或者只提供一个可点击的“永不”选项”依赖于人们能够区分这两种颜色。这会不必要地使颜色盲用户几乎无法使用通知功能。
顺便说一句,你的博客很棒,继续努力。
Rich
喜欢这个比较。一直在处理类似的挑战。感谢你将其整合在一起。
我更喜欢带有绿色行并在末尾带有复选框的选项(…全选/取消全选)。这似乎是最简单、最易于理解、最不容易被误解的。它上面的那个(…稍微复杂一点)是我的第二选择,但为了提高扫描能力,单选按钮应该垂直堆叠而不是水平排列。
其他选项有点难以理解,需要几秒钟才能确定其含义。
看看这些选项在用户测试中的表现会很有趣。