专栏名称: 交互设计学堂
系统学习交互知识,就找老D。干货分享、在线培训、行知书院三大版块帮你提升自己。 最新资讯-全是干货还有老D点评,每天推送; 交互培训-在线课程帮助小伙伴进入交互行业,只要3个月; 行知书院-老D帮小伙伴们解读经典设计书籍,都是“硬”知识。
目录
相关文章推荐
ZaomeDesign  ·  混凝土灵感好物: 【坡屋顶建筑】水泥纸巾盒 ·  16 小时前  
龙视新闻联播  ·  文化中国行 |葫芦技“承”龙江美 ·  昨天  
龙视新闻联播  ·  文化中国行 |葫芦技“承”龙江美 ·  昨天  
设计上海  ·  PSA新展预告|阿尔瓦罗·西扎的档案 ·  昨天  
设计上海  ·  FotileStyle方诗得: ... ·  昨天  
设计上海  ·  东韵西形,织就希望:Wendy ... ·  昨天  
51好读  ›  专栏  ›  交互设计学堂

UI交互体验:管理用户危险操作的9种手段

交互设计学堂  · 公众号  · 设计  · 2024-11-17 21:30

正文

请到「今天看啥」查看全文




(5)  描述具体的行动召唤按钮


比如,“删除文章”、“支付97美元”、“继续当前交易”、“发送消息”等,这要比通用文案“是/确认”更明确!特别是包含受影响的项目名称或具体金额。



避免使用通用文案,描述应该尽量具体


02 增强版模态对话框


尽管模态对话框能预防误操作,但是如果增加一些额外操作,效果更好。


典型的设计是要求用户键入一些特殊内容(比如项目名称),才能激活行动召唤按钮。



convertkit.com 的特殊确认,要求用户键盘输入 DO IT,才会执行危险操作。


专业提示:请注意,上图例子中的确认按钮放在了取消按钮的左侧。这是根据格式塔心理学中的“贴近原则”,保证输入框和按钮更贴近(虽然只有一个输入框)。



resend.com 的特殊确认,要求用户键盘输入 DELETE,才执行删除数据。


▼加强版模态对话框的最佳实践:


(1) 对话框标题说明了操作


比如,图中的“Delete API Key”。


(2) 加粗目标项目名称


比如,图中的“Onboarding”是具体的 API Key 的名称。


(3) 警示色强调危害


比如,图中“This can not undone”的红色字体。


(4)  要求用户执行额外确认


比如,图中要求用户键入 DELETE


(5) 明确的行动召唤按钮


比如,图中“Delete API Key”按钮,使用了警示色,并且避免了“确认”或“删除”这样的通用文案。


请注意,Resend 也把主要按钮放在了取消按钮的左侧。


专业提示:虽然《按钮不应该置灰》,但在“加强版确认对话框”中可以例外(比如上面两个例子)。


03 输入密码的对话框


除了键入特殊文本,还可以要求用户输入密码:


  • OTP (一次性密码/验证码)

  • PIN (个人密码)

  • 2FA (双重身份认证)


此时,甚至可以去掉行动召唤按钮,直接提交确认。



银行系统要求提供密码确认操作


▼无障碍隐患


输入4~6位数字组成的简单验证码,去掉提交按钮是否影响无障碍使用,一直存在争议。


虽然作者不是信息无障碍专家,但是他觉得去掉提交按钮,并不算重大缺陷。


首先,输入验证码属于中间步骤,界面载入就自动聚焦第一位数字输入框,完全依赖键盘的残障人士可以按下Tab切换到下一个输入框。


最关键的是,由于验证码只有很少的4~6位,在末尾输入后立即提交校验,即便提醒错误,也是可以接受的。


一方面,如果大家非常在意信息无障碍设计,那么必然会涌现出更好的辅助残障技术(译注:作者的意思是不要纠结于输入框);另一方面,去掉按钮自动提交,简化了操作,即便极少数情况下出现错误,也允许重新输入。


04 专属的“危险操作区”


应该为最危险的操作集中管理,可以称其为“危险操作区”交互模式。


Github 专门开辟的危险操作区


危险操作区可以拥有独立界面,或者放在设置/个人中心的底部。该区域包含一个或多个操作,并且通常与模态对话框等方法配合使用;如果系统中包含大量危险操作,建议设置独立界面来管理它们。


Plausible.io 设置的危险操作区独立界面


▼何时使用危险操作区?


使用危险操作区对不可逆、丢失数据、极有可能造成灾难性后果的操作进行分组管理,通常包括账户自毁、数据擦除、身份变更等可以影响权限或数据读写的操作。







请到「今天看啥」查看全文