1. Toasts are bad UX (maxschmitt.me)
Toast通知的糟糕用户体验
核心问题
Toast通知总出现在远离用户注意力的位置,导致交互体验不连贯。以YouTube的“保存”功能为例:
- 用户点击右侧的“保存”按钮
- 弹出模态窗口显示在屏幕中央
- Toast通知却出现在屏幕左下角
其他问题:
- Toast出现有延迟且无加载指示
- 操作多个选项时,需等待前一个Toast消失才能看到新确认
- Toast中的“撤销”按钮不必要,用户可直接重新勾选
解决方案:避免使用Toast
YouTube“保存”功能的改进方案:
- 将播放列表直接显示在按钮下方,而非弹出模态窗口
- 勾选/取消勾选时显示加载指示器
- 加载指示器消失即表示操作完成
- 无需Toast通知!
其他场景示例
1. 确认添加/移除操作
Gmail归档邮件时:
- 使用Toast显示确认信息
- 但邮件从列表消失已表明操作成功
- 注意: 需考虑撤销功能和键盘快捷键场景下Toast的反馈作用
2. 确认复制操作
复制内容到剪贴板后:
- 显示Toast确认信息
- 但复制按钮本身已提供确认状态
- Toast完全多余
更糟的情况
没有Toast比糟糕的Toast更糟糕。如果缺乏时间设计更好的反馈机制,使用Toast至少比完全没有反馈要好。
作者的替代方案(Cakedesk应用)
Cakedesk是一款离线优先、免订阅的发票应用,作者在发送邮件功能中避免了Toast:
- 未发送发票在列表中有“发送”按钮
- 发送时保持模态窗口打开,提交按钮显示发送状态
- 发送成功后,邮件动画移出屏幕
- 列表中的“发送”按钮变为“已支付”复选框
- 用户还可通过上下文菜单确认邮件已发送状态