这一批讲的全是「界面怎么跟用户说话」——什么时候打断、用多大动静打断、说得清不清楚、说错了怎么收场。一条暗线贯穿全篇,就是 Nielsen 十大可用性启发式里的两条:#1 系统状态可见性(让用户随时知道发生了什么:加载/排队/出错/没数据)和 #9 帮助用户识别·诊断·从错误中恢复(出问题时说人话、说清怎么解决)。详见 NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估)。
一条贯穿决策原则:打扰用户是有成本的。每弹一个框、每标一个红、每发一条短信,都在花用户的注意力。所以核心问题永远是「这次打断值不值」——值(防住了严重错误、给了真有用的状态)就打,不值(只是想要邮箱、想推 App、规则太松想偷懒)就别打。
全文六块:① 对话框与中断分级(确认 · 模态/非模态 · 弹窗 10 坑) → ② 错误信息(写法 · 可见性 · 敌意反例) → ③ 加载与进度(进度指示器 · 骨架屏 · 虚拟排队) → ④ 提示与微反馈(工具提示 · 信息提示 · 事务通知 · 反馈请求) → ⑤ 空状态 → ⑥ 数据呈现(图表选择 · 表单降认知负担)。
一、对话框与中断分级:确认 · 模态/非模态 · 弹窗
这三篇是同一根光谱上的不同刻度:确认对话框是"该不该拦一下"、模态/非模态是"拦的时候要不要冻住整个界面"、弹窗是"现实里大家把这套用烂了的 10 种姿势"。先建立两个术语:
- 模态 Modal:盖在主内容之上、把背景禁用的窗口。用户必须先处理它才能回到主任务(像每天早上 7 点跑到你面前要饭吃的猫)。
- 非模态 Nonmodal:同样浮在内容上,但不冻结背景,用户可以一边看它一边继续干活(像耐心趴在餐桌旁等饭掉的猫)。
- 灯箱 Lightbox:把背景变暗的那种,多为模态但不绝对。
1. 确认对话框 Confirmation Dialogs(8 条指南)
心法:确认框的本质是「故意打断你,逼你复核一个决定」。这个打断只有在防住了严重错误时才划算;否则就是骚扰。最大的失败模式是——用户被问烦了,养成无脑点「是」的肌肉记忆,真正重要的警告也照点不误(就是「狼来了」)。
| # | 指南 | 怎么做 / 反例 |
|---|---|---|
| 1 | 只给严重后果的操作用 | 不可撤销或代价大的操作(删重要数据、产生大额费用、银行大额支付)。即便如此,能给「撤销」就给「撤销」降低焦虑 |
| 2 | 别给常规操作用 | 太频繁的确认让用户麻木,削弱真正警告的效力(「狼来了」) |
| 3 | 说清后果,别泛泛而问 | 反例:「您确定要这样做吗?」。正例:「您将永久删除以下文件:XXX.pdf」 |
| 4 | 用说明性按钮代替是/否 | 按钮写明动作:「删除文件」「保留文件」,而不是模糊的「是/否」 |
| 5 | 渐进披露提供更多信息 | 复杂操作用「了解更多」按钮折叠细节,主框保持简洁(Microsoft Word 即此做法,避免普通用户信息过载) |
| 6 | 别默认选「是」 | 默认「是」会诱发误操作;最好不设默认,或把「否」设为默认 |
| 7 | 高风险操作要求非标准确认 | MailChimp 删邮件列表要用户手输 DELETE 之类的词,防自动化/无脑点。仅用于极端重要的操作,别滥用 |
| 8 | 允许跳过未来的常规确认 | 不严重但有影响的操作,给「以后不再提示」复选框(Word 的文件转换确认框就有) |
任务分析定制化:设计前先评估两件事——①操作出错的严重性;②操作的频率。比如银行可按用户支付习惯个性化:只在金额超出日常范围时才弹确认,既减干扰又保大额安全。
2. 模态 vs 非模态对话框:7 个用/不用场景
模态的 5 个固有缺点(所以非关键任务别用模态):① 强制立即响应;② 打断工作流(用户要花额外时间找回上下文);③ 增加认知负担、可能遗忘原任务细节;④ 增加额外任务(读懂内容+做决策);⑤ 遮挡背景重要信息。
| 该用模态(打断划算) | 该避免模态(打断不划算) |
|---|---|
| 1 重要警告/防关键错误 — PowerPoint 提示保存未保存内容;Gmail 检测到忘记附件 | 5 与任务无关的信息 — GoodHousekeeping 进站 3 秒内全屏照片盖掉邮件列表请求,信息对用户无价值;Wayfair 用模态请你「邀请朋友到收藏板」,非必要还增成本 |
| 2 请求继续流程所必需的关键信息 — Etsy 收藏商品时要求登录 | 6 关键流程中(如结账) — 早期 Walmart 结账中弹登录,分散注意/引发不安 |
| 3 把复杂流程拆成简单步骤 — 但步骤多时必须显示进度保持动力 | 7 决策需要查被遮挡的信息时 — Frontier Airlines 让你买附加服务却没给决策所需信息 |
| 4 请求能显著减少用户工作量的信息 — Zillow 联系房产代理时问「是否已有代理」 |
非模态的取舍:非关键任务优先非模态(Gmail 写邮件时可同时查别的信息)。但要小心:Meowbox 桌面版右下角是可轻松关掉的限时非模态,移动版却退化成无法关闭的全屏模态——同一提示在小屏上变成了强制中断。
3. 弹窗 10 大问题趋势 Popups(逐条配替代方案)
「弹窗(overlay/popup)」是浮在内容上的窗,模态/非模态/灯箱都算。几十年研究反复证明:人普遍讨厌弹窗,关键操作里频繁遇到会直接弃任务。
| # | 问题趋势(反例) | 替代方案 |
|---|---|---|
| 1 | 页面内容加载前就弹(用户还没尝到价值就被打断;Google 对移动端这种「妨碍内容访问」降搜索排名) | 等弹窗内容与情境相关再弹;先给价值再索取(互惠原则);法律要求的除外(Cookie 同意、年龄验证——赫芬顿邮报因要用位置数据有义务征求同意,可接受) |
| 2 | 登录后立即弹(打断用户的下一步任务) | 给时间让用户先完成任务;用工具提示/小型非模态在恰当时机介绍新功能(Gmail 在用户已开始清理收件箱后才用不显眼的非模态引入新功能) |
| 3 | 互动前就索取邮箱(用户怀疑会收垃圾邮件) | 挑用户最愿意给的时机(看完一篇博文、浏览促销时),屏幕角落轻量非模态 + 给吸引人的奖励(MarkManson.net 在读完文末才弹,还送免费电子书) |
| 4 | 用户没做任何有意义操作前请反馈(被秒关,且不会再主动找反馈入口) | 关键任务完成后再请(BlueJeans 会议结束后才请,反馈更切实) |
| 5 | 关键任务中打断请反馈(美联航在「拿登机牌」过程中正中央弹模态) | 任务后再请,或给静态非侵入入口——雀巢放页脚反馈链接;英国航空所有页面右侧常驻「反馈」按钮 |
| 6 | 连续弹多个弹窗(显得杂乱、让人疲惫;Lulus 结账末同时弹多种反馈) | 一次只显一个;更好是把关键信息直接放页面里(Canva 用顶部视觉独特的内容模块代替弹窗) |
| 7 | 跳转外站/子域前弹模态(HSBC 招聘流程多层模态让用户对申请流程印象变差) | 减少站间跳转;用不显眼提示(链接上的工具提示)——Eli Lilly 用信息提示告知「你将前往别的网站」帮用户记住路径 |
| 8 | 用模态打断内容访问(CNN 移动端刚进文章就弹订阅,用户来是读内容不是订阅) | 让用户立刻看内容;用顶部易关横幅代替(Conde Nast Traveller 在导航下放微妙可关横幅) |
| 9 | 用模态展示 GDPR/Cookie 通知(用户已习惯秒关弹窗,重要隐私信息传达无效) | 用页面底部/侧边的非模态 + 透明语言说清数据怎么用(NNgroup.com 自己即此做法;Reddit 虽用了小非模态但语言太模糊) |
| 10 | 推 App 下载却不说具体好处(Wayfair 通用模态让用户觉得换渠道要重来一遍、无实际好处) | 用顶部/底部横幅 + 说清下载好处(Macy's 底部非模态带激励 + 展示 App 用户评分) |
二、错误信息:写法 · 可见性 · 敌意反例
这块三篇互相咬合:Error-Message Guidelines 是总纲(可见性/沟通/效率三类),How to Increase Visibility 是把其中「可见性」单独放大讲透,Hostile Patterns 是从反面收口(过度的错误预防/恢复设计反而伤人)。全部挂在启发式 #5 错误预防 和 #9 帮助识别诊断恢复错误 上。
1. Error-Message Guidelines:三类共 12 条
可见性指南(Visibility) — 让错误被看见:
- 错误信息靠近错误来源(放在出错的界面元素旁,降认知负担)。反例:Instagram 错误信息离 URL 输入框远、样式低调难注意。
- 用明显、冗余、可访问的指示器:粗体+高对比+红色;动画可引导注意;遵循无障碍标准——别只靠颜色或动画表示错误。正例:亚马逊用边框高亮+图标+红字三重手段;CafePress 用动画横幅提醒空白定制字段。
- 按错误影响调样式:轻微问题用横幅/标签,严重问题用模态要求解决。正例:Kohl's 用非传统红色通知可能的运输延误,避免用户困扰。
- 别过早显示错误:用户还没完成操作时别报错;易错场景用实时反馈。正例:CLEAR 实时提示密码要求;反例:德州车辆注册页用户一点输入框就报「空字段」。
沟通指南(Communication) — 说人话、不责备:
- 用人性化语言,藏起技术代码/缩写(404 页常因「技术代码」难懂)。
- 简洁准确描述问题,别只说「发生错误」,也别过度技术化。反例:Disneyworld 无搜索结果时用双关语掩盖问题、没说清原因。
- 给建设性建议(怎么解决)。正例:电商「缺货」应给预计到货时间或订阅通知;Target 提示「需消费更多享当天送货」而不责备用户。
- 语气积极、不怪用户:避开「无效」「非法」等责备词,把问题归因于系统而非用户;慎用幽默(频繁出现会烦)。反例:National Geographic Kids 对未成年用户缺乏解释性错误信息。
效率指南(Efficiency) — 帮用户少走弯路:
- 防范常见错误(现代邮件应用检测「忘加附件」)。
- 保留用户输入(出错别清空让人重填;Instagram 退出时给「保存草稿」选项)。
- 降低纠错成本(城市与邮编不匹配时给可选城市按钮);简明教育用户系统怎么工作 + 超链接到详细文档。正例:Vistaprint 说明可打印区外的文字会怎样;反例:Zazzle 有打印区指南却没警告文字会被截断。
极端故障下用新颖缓解:无可挽回的故障(服务器过载)可用创意降负面体验——ChatGPT 停机时给教育内容;Twitter「失败鲸 Fail Whale」用幽默传达中断、成了知名符号。
2. How to Increase the Visibility of Error Messages(4 准则,可见性的展开)
- 靠近来源:错误信息离错误本身太远用户看不到、也难理解关联(必填项错误应显示在字段附近,而非页面顶部)。
- 显著 + 冗余 + 可访问:红色因易引起注意常用于错误;冗余=高亮字段+文字说明+图标(感叹号);可访问=对色盲及视障用户也清晰(别只靠颜色)。
- 按严重度设计样式:关键错误(表单提交失败)用红色突出;非关键信息(「因天气配送可能延迟」)用普通文本,别用红色免得用户误以为操作失败。
- 别过早显示:适合实时提示的——创建复杂密码时实时显示哪些要求已满足;不适合的——输入电话号码时别没填完就提示「数字不足」(用户通常清楚位数)。
3. Hostile Patterns in Error Messages(敌意模式,2 条反面铁律)
「过度激进的错误预防/恢复设计,等于趴在用户肩膀上喊『你错了!』——既无益又招人烦。设计是为了帮用户,不是责备用户。」
铁律 1:避免过早的错误提示(Avoid Premature Error Messages) — 用户还没填完、甚至还没犯错就报错。反例集:
- LG 结账邮编:刚输数字就提示格式错,直到满 5 位才消失。
- Labcorp 支付门户邮箱:输入第一个字符就弹「无效电子邮件地址」。
- Sorel 出生日期:还没输完就提示「请输入有效日期」。
- Hilton(Conradnewyork.com)姓氏字段:一点击字段就红框 + 「请输入姓氏」(应只在用户跳过该字段并尝试提交时才显示)。
- Xpress-pay 金额字段:用户还没交互就显示「金额不能为空」+ 多个冗余标识(红框、感叹号图标)。
- 改进:错误提示应在完成字段输入或移到下一字段后才显示;预先用占位符/注释说明格式限制(而非边试边纠错);必填字段只用星号或「必填」文字标记,别堆冗余提示。
铁律 2:错误样式只留给真正的错误(Reserve Error Styling for Errors Only) — 红字、警告图标、黄底用在非错误信息上,会让用户误以为犯了错、打断任务流。反例/正例:
- 反例 HR 系统:「没有附件可显示」这种普通状态信息被设计成黄底+警告图标,显得比实际重要。
- 反例 Thrift Books 结账:「请确保地址正确,提交后不可更改」用红字+警告图标,让人误以为有错。
- 正例 Amazon Glow:通话失败用黄色图标提示「通话失败」——这是真问题,适当吸引注意。
- 正例 PayPal 移动应用:非错误通知用灰底 + 信息图标(圆圈内小写 i),避免视觉混淆。
- 收口:非关键提示用温和颜色 + 信息图标,把侵入性的红/黄警告样式留给真正需要打断工作流的关键错误。
三、加载与进度:进度指示器 · 骨架屏 · 虚拟排队
主题都是启发式 #1 系统状态可见性:系统在忙时,要让用户确信「它在工作、没崩、还要多久」。三篇按等待时长和场景分工。
1. 进度指示器 Progress Indicators(按时长选类型)
为什么要反馈:系统不及时反馈,用户会不安——怀疑命令没被接收、怀疑系统崩了,于是重复点击或弃任务。即便不能加快,显示反馈本身就改善体验。响应超过 10 秒应给预估完成时间,帮用户规划等待。(现实类比:打电话给加州 DMV——等待音乐告知通话未断、给「15-20 分钟」预估、给回拨选项不用守着电话。)
进度指示器的 4 个作用:① 确认系统在工作;② 视觉分散缓解无聊;③ 给用户「正在进行」的等待理由;④ 占用部分注意力、降低对时间流逝的感知。
| 类型 | 适用 | 说明 |
|---|---|---|
| 循环动画指示器(spinner) | 2-10 秒 | 提示「在工作」但不显剩余时间(United/Evernote/Facebook 的旋转图)。>10 秒不适用(无进度信息易弃任务);可加「加载中…」文字 |
| 百分比完成指示器(进度条) | >10 秒 | 显已完成/剩余(Expensify、WeTransfer)。多步任务可显「第 3 步,共 5 步」;避免最后一段突然变慢让人挫败 |
| 静态指示器 | 不推荐 | 只有「加载中…」无动态反馈,用户无法判断是否崩了 |
| 「不要再次点击」警告 | 错误做法 | 不该靠警告防重复点击;正确做法是显示清晰反馈确认操作已被接收 |
总建议:2-9 秒→循环动画;10 秒以上→百分比条。儿童/游戏场景的加载动画/小游戏要确保不遮挡主进度信息、简单有趣且与主任务相关。
2. 骨架屏 Skeleton Screens(整页占位)
定义:页面加载时用灰框模拟布局占位,给用户「页面长什么样」的视觉预期,降低对长加载的感知。通常用于整页加载。
三种类型:
- 静态内容/图像骨架屏(最常见):灰框模拟布局,粗线代表标题、细线代表描述、卡片顺序显示结构(Headspace)。
- 动画骨架屏:渐变/闪烁动画进一步减轻等待感(DoorDash 的水平闪烁)。
- 框架式骨架屏(不推荐):只显头部和底部框架、没有内容占位框,几乎空白,用户会误以为页面加载失败(NBC)。
好处:① 避免空白页被误判为加载出错,提升留存;② 「逐步填充」缩短等待感知;③ 让用户加载中逐步构建页面结构的心理模型,降认知负担。
骨架屏 vs 进度条 vs 加载动画(怎么选):
- 按时长:2-10 秒→骨架屏或加载动画均可;>10 秒→进度条更合适(给具体等待时间)。
- <1 秒的快页面不要用——快速闪过的加载屏反而让人觉得「跟不上」。
- 过程类操作(下载/上传/文件转换)用进度条而非骨架屏,进度更清晰。
- 避免框架式骨架屏。骨架屏适合整页,加载动画适合单模块(视频/卡片)。注意:骨架屏只是缓解中等等待焦虑的工具,不能替代性能优化。
3. 虚拟排队 Virtual Queues(13 实践)
「虚拟队列(Virtual Queue)」=用排队工具管理在线(高流量网站防服务器崩、抢票)和线下(餐厅/景点/DMV 等位,疫情后兴起)的等待。高层原则:以用户为中心管理等待、让人感到时间被尊重、消除意外退出、允许等待时干别的。
| 阶段 | # | 实践要点 |
|---|---|---|
| 进队前/刚进队 | 1 | 解释队列目的和必要性(虚拟队列对部分用户陌生;某税务门户显示「目前有 1937 人在你前面」) |
| 2 | 说清如何进入队列,多渠道通知+入口处标识(特拉华 DMV 让访客在车内扫码加入) | |
| 3 | 解释队列关闭原因(因时间或容量满而关闭时明确告知;迪士尼 WEB SLINGERS 状态变「不登船」但没说原因——应给原因) | |
| 4 | 说明何时开放、允许提前准备(迪士尼明确「早上 7:00 开放」、可提前确认同行人员;Ticketmaster 用「等候室」在开放前容纳访客、自动进队无需刷新) | |
| 5 | 进队前解释所有要求(要带什么、要不要先填文件;别等进队后才说,否则用户可能因不达标而失去位置) | |
| 排队中 | 6 | 清楚指明等待细节,状态追踪器至少含其一:前面有多少人 / 预估等待时间(以易懂格式;火山湾给可穿戴设备倒计时分钟数;移动端可在锁屏显示实时活动,如 Uber/Lyft) |
| 7 | 自动刷新队列状态(无需手动刷新——手动刷新可能丢位置;告知会自动刷新 + 加「上次刷新时间」时间戳让用户确信队列活着;Aldi 即此做法) | |
| 8 | 允许设置队列通知(让用户离开干别的、轮到时回来;提供多渠道:短信/邮件/推送) | |
| 9 | 明确退出页面会怎样(有的离开不丢位置,有的要保持页面打开;Hunkemöller 告知可关页面不丢位,Harvey Nichols 告知离开会丢位) | |
| 10 | 让重新进入队列变容易(主页/落地页放一键重回入口) | |
| 11 | 提前为「轮到你」做准备(迪士尼确认屏有「下一步是什么?」、收到通知后 1 小时内到入口;环球影城告知「必须在下午 4:13 前轮到」;大学选课限 30 分钟完成) | |
| 12 | 等待中通知重要进展(别让人排到了才发现要的东西没了;球鞋销售实时更新某些尺码可用性) | |
| 13 | 娱乐访客但不干扰主任务(可放简单游戏/媒体,尤其要求停留在页面的队列;但保持主进度指示器可见、用简单相关媒体、过渡要清晰——儿童网站研究表明临时游戏/视频可能引起困惑) |
四、提示与微反馈:工具提示 · 信息提示 · 事务通知 · 反馈请求
这块是「轻量的、补充性的沟通」。共同心法:它们是补充,不是主信息;关键信息永远放在界面里,别藏进提示。
1. 工具提示 Tooltip(桌面悬停触发)
定义:用户与某元素交互时出现的简短信息框,通过鼠标悬停或键盘悬停触发,附在活动元素(图标/链接/按钮)上提供上下文。用户触发、不适用于触屏——触屏用弹出提示(Popup Tip)代替。
| 工具提示 Tooltip | 弹出提示 Popup Tip |
|---|---|
| 桌面端 | 所有设备 |
| 悬停触发(鼠标/键盘) | 触摸/点击触发 |
| 离开互动区即消失 | 点击关闭或点别处才消失 |
| 配对:图标、文本链接、按钮 | 配对:带「?」或「i」的图标 |
5 条指南:① 别把关键信息放工具提示(Amtrak 把密码要求放进去——填表必需的应直接显示;FedEx 正例:用工具提示解释「为何需要你的邮箱」);② 简短有帮助(别重复显而易见的;Sprint 的「Add New Line」按钮配同字工具提示纯属冗余;Alibaba 正例:给未标注的摄像头图标解释「以图搜图」);③ 同时支持鼠标和键盘悬停(McDonald's 只支持鼠标,键盘用户访问不了;Wikipedia 两者都支持);④ 多元素相邻时用箭头指示关联(PowerPoint 多图标相邻无箭头难判断关联;Witeboard 用箭头);⑤ 全站保持一致(工具提示本身难发现,Business Insider 只给部分图标配,体验不一致;Todoist 给所有主图标一致配备)。其它:给未标注图标配描述性工具提示;保证与背景足够对比;别遮挡关联内容。自检问题:提示里的信息对完成任务至关重要吗?是→直接显示在页面;否→工具提示作补充。
2. 信息提示 Info Tips(为什么常常很糟)
信息提示=元素旁的额外说明,点/悬停 i 或 ? 图标看到。内容应是「看了更好,不看也能完成」的补充信息。i 图标=「这里有更多说明」(用户主动想了解);? 图标=「我需要帮助」。但位置比图标本身更重要——紧挨某控件时两者都会被理解成「解释这个控件」。两种呈现:桌面悬停 tooltip / 移动点击 popup tip,本质相同。
信息提示常被当「补丁」用来掩盖不清晰的标签、为了界面「干净」把重要信息藏起来。三大坑:
- 坑 1:浪费用户时间 — 每次点开都有成本,内容若是营销话术/重复界面已有信息/解释显而易见的事,就消耗注意力、削弱信任。反例:Doodle 「Schedule 1:1」旁点开是「最快让两人见面的方式」(空话);State.gov「出生城市」旁点开只说「填写你的出生城市」(等于没说);打印机纸张设置点开只说「从下面选一个你喜欢的纸张」(用户想知道 Satin/Glossy 区别却没给)。
- 坑 2:隐藏关键的任务辅助信息 — 使用规则、限制、字符数要求、复杂选择说明不该藏进去(用户需反复对照)。反例:Find a Grave 把 Yes/No/Maybe 三选项含义藏进信息提示;USPS 字符限制藏进去,用户填完提交才发现超限要重填(=故意让用户犯错)。正例:Microsoft Test and Learn 把不同输出类型的解释直接展示在界面,边看选项边看说明。
- 坑 3:打断任务流 — 用户只想瞄一眼解释就关掉,但有的设计弹大窗遮屏或跳到另一页。反例:Capital One 点开支付选项提示后整个界面都变了,看不到刚才的选项只能靠记忆;GSA.gov「出行首末日」弹大窗遮住表格;Nextdoor 登录验证点 ? 直接跳到长说明页,要的信息埋在一堆文字里。
- 结论:信息提示的正确角色=在不打断流程的前提下,提供即时、补充、可缺省的说明;不该藏关键信息、不该替代清晰文案、不该侵入式出现。
3. 事务通知 Transactional Notifications(短信 vs 推送)
「事务通知(Transactional Notification)」=围绕现有订单(送达通知)或用户与公司关系(服务条款更新)的通知,区别于营销通知。基于两项日记研究。
与邮件的相似点:① 清晰主题行概括内容(Uber「评价您的行程」直接;Wish 把公司名当标题=冗余无意义);② 细节简洁易读(eBay 安全提醒因简洁受好评、带直达个人资料链接);③ 提供必要的全部信息(Best Buy 短信订单确认含送货日期/地址/如何改地址/如何退订;反例 Zara 状态变更邮件没说哪个订单受影响、含哪些商品;可可奶茶取餐通知提了订单号但用户难确定指哪单)。
与邮件的差异(更受限、要更简洁):推送通知通常只显 50-240 字符;短信主要纯文本、关键信息要放前面;用户快速浏览易忽略冗长消息。所以只包括关键信息(公司名、订单摘要、状态变化),非紧急信息(退货政策)走邮件。及时性要求更高:用户认为延迟 30 分钟的送达通知不可接受,但客服邮件 30 分钟自动回复可接受。只用于紧急内容(尤其短信;Capital One 短信因涉财务且时效敏感、列了商家名和金额而恰当)。文化因素:中国用户习惯用手机号作身份识别、短信更普遍,西方用户多用邮件。
短信 vs 推送怎么选:
- 短信留给关键、时效敏感信息:订单详情(物品/送达时间地点)、需稍后参考的信息(提货码)、重要状态变化(送达时间改/订单取消)、紧急信息(预订提醒/账户更新)、需快速反馈(确认交易/双因素验证)。短信容量更大、不易被误删、适合无 App 的用户、信号差时更稳。
- 推送适合非紧急信息:提示返回 App 查看(条款更改/购物车提醒)、非紧急状态变化(发货通知)。推送能带用户进入 App 特定页面,适合引导后续行动,且不像频繁短信那样招人烦。
- 允许从特定渠道退订:邮件给清晰退订按钮、短信末尾附「回复 STOP 退订」(Allay 每条短信都含退订说明)、App 允许自定义通知频率和类型。
4. 用户反馈请求 User-Feedback Requests(5 条)
反馈通常在用户与产品交互中或结束后收集,归入「客户之声 VOC(Voice of Customer)」项目。
- 先完成任务,再请求反馈(Task, Then Ask):别在用户刚进页面/没做任何操作时弹反馈窗(失去参考性且招反感)。反例:Shark 在启动扫地机器人时就弹反馈窗,导致负面反馈;Xfinity 让用户「完成后回来填」结果用户关浏览器忘了;United Healthcare 弹窗打断「找医疗服务提供者」主任务。正例:西南航空在完成关键任务后请求,位置恰当不遮重要信息,且具体(针对「取消」提问),意外关闭还留反馈标签。
- 减少频繁的邮件(Ease the Eager Emails):别每次互动后都发邮件(一用户 4 天收到 5 封反馈邮件)。在关键时刻请,尽量用用户所在渠道(App 内通知)。Shipt 用推送请求购物/订单反馈优于邮件,但别一次显示多个(先购物者评分、再 App 反馈)。
- 保持调查简短(Keep Surveys Short):理想 <1 分钟完成、4-5 个问题,别打断主任务。反例:Calendly 在故障排除中弹 2 分钟反馈、KLM 在办登机手续时弹 2 分钟(时机和长度都不对)。正例:CD Baby 4 个问题约 30 秒完成。
- 提供灵活的反馈形式(Offer Flexible Feedback Formats):混用评分/选择题/开放式问题,开放式字段放末尾且可选。反例:宜家以开放式问题开场(应先封闭式)。正例:Mint 用点赞/点踩 + 可选 500 字符字段;Sonos 用端点明确标注的 10 分制量表(可再加开放式字段)。
- 致谢并激励(Appreciate and Incentivize):说明反馈用途、表达感谢,可给奖励(积分/折扣)。Starbucks 订单后请反馈 + 抽奖赢礼品卡;Embrace Pet Insurance 客服电话后请反馈、允许用「送午餐」奖励客服。反馈分析:定期整理找共性问题,预算/时间有限时可作替代性的用户研究。
五、空状态 Empty States(3 个目标)
「空状态(Empty State)」=内容为空的容器/页面(没收藏、没最近项、未配置提醒、工作区未填充、搜索无结果)。默认做法是「保持空白直到用户配置完」——省开发时间,但常导致困惑、并浪费了提升可用性和可学习性的机会。复杂应用在初次使用/导入时尤其常见。
别把空状态当事后细节。设计精良的空状态有 3 个目标:
- 传达系统状态(Communicate System Status):完全空白会让用户疑惑「是真没内容,还是出错了,还是仍在加载?」。加一条简短消息(如「所选时间范围内无记录可显示」)就能提高状态可见性、增强信心。避免误导性状态消息:有的应用加载中先显「无记录」、加载完才出内容——用户可能因此不信任、甚至在加载完前就离开。
- 提供学习提示(Provide Learning Cues):面板为空时顺便解释功能怎么用(类似「拉出式揭示 Pull Revelation」——帮助仅在用户交互时出现,不打断)。DataDog 空收藏夹显示「将您的收藏标记为星号以在此处列出」;Microsoft Power BI 无近期项目时解释内容如何添加到此区。
- 提供关键任务的直接路径(Direct Pathways for Key Tasks):不只说「能做什么」,还给「怎么做」的入口。反例:某应用空状态只说「发送请求以查看详情」却没说怎么做、去哪找。正例:空状态警报面板给「Create」按钮 + 「Learn more」链接;Loggly 给两条入门路径(添加日志源 / 用演示数据探索)。
小结要点:避免完全空白;提供学习提示;提供关键任务捷径(链接/按钮);处理中用进度指示器;无数据时给简短系统状态消息。
六、数据呈现:图表选择 · 表单降认知负担
1. 图表选择 Choosing Chart Types(以上下文为先)
本文只讲解释性数据可视化(Explanatory Data Visualization)——向团队/利益相关者/客户传达发现。不涵盖信息图表(讲故事的综合展示)和仪表板(实时监控)。
优秀图表的 3 个 C:① Context 上下文(给数据背景);② Clutter-free 无杂乱(保持整洁);③ Contrast 对比(突出重点)。本文聚焦 Context。
为什么 Context 第一:数字离开上下文毫无意义——只说「结账完成率 24%」没价值,补上「去年仅 17%」才有意义。UX 常见对比:同一数据点不同时期(改版前后的完成时间)、类似产品/功能/用户群对比(自家 vs 竞品、不同页面模板、不同用户群行为)。比较数值还需懂基本实验设计和统计(置信区间、统计显著性)。
选图类型(三种常用):
| 图表 | 适用 | 要点 / 反例 |
|---|---|---|
| 柱状图 Bar | 大多数 UX 比较场景(直观易懂) | 单一柱:改版前后转化率差;配对柱:对比不同用户群(消费者 vs 设计师)在改版前后表现,按用户群分组便于快速比较;水平柱:标签长时更好(避免垂直/对角文字难读,如任务名「查找 5 月 12 日的账单」);堆积柱(成功/失败/需帮助比例)不建议——各部分起点不同难比较 |
| 折线图 Line | 展示时间趋势 | 如 5 年 CSAT(客户满意度)趋势;应在时间轴标注具体数据点位置增加清晰度 |
| 散点图 Scatter | 展示两变量间关系 | 如功能的使用频率(y:30 天内人均使用次数)vs 覆盖范围(x:使用该功能的账户占比),可用来主张优先做最受欢迎的 3 个功能 |
要避免的图表(要求用户评估角度/面积/体积,信息处理负担高,仅确有必要时用):饼图、气泡图、马赛克图、单位图/华夫饼图、桑基图/树状图、堆积面积图。
2. 表单降认知负担 4 原则 Few Guesses, More Success
表单每个字段都要用户「解读问题→查信息→按正确格式填」,都在增认知负担;负担过大就出错、疲惫、弃填。四原则:Structure 结构 / Transparency 透明 / Clarity 清晰 / Support 辅助。(与表单/输入主题有重叠,详 NNGroup 交互模式·表单与输入控件(19 个模式 · 表单校验/复选框/日期/步进器/参数控件/列表框vs下拉/开关/拆分按钮/取消vs关闭/链接标签/无密码登录/向导/拖放/加速器/计算器测验);这里只收主干,因它把「错误提示该怎么显示」收得很全,与本篇错误信息一节互补。)
Structure 结构:分组相关字段(Coinbase 把姓名/生日/地址等放一起);创建视觉层级(用间距/排版/容器——Stripe 用间距、HoneyBook 用容器、Quicken 用字号字重颜色区分标题/标签/提示/错误);合理排序问题(熟悉性→优先级→依赖性→复杂度→敏感性;ZIP 码在前可自动填城市和州);用单栏布局(完成率优于多栏;反例 Discover Bank 多栏+占位符标签易漏字段);用渐进式展示(长表单分页+顶部进度条,Visible 即此做法;但别用滚轮选择器选生日)。
Transparency 透明:填写前传达表单要求(所需信息+耗时,尤其复杂/多页/不能存进度的表单——Zillow 设置房租支付前先列文档清单);标注必填字段(Klaviyo 用红星标必填 + 文字标「可选」);显示清晰进度指示器(Google Analytics 显「第 3 步,共 5 步」)。
Clarity 清晰:用简洁语言(「主诉」换成「就诊原因」;整体难度维持 6-8 年级水平);用正面措辞(反例 Udemy 用「勾选以拒绝促销邮件」+ 勾选自动取消上方框,徒增混淆);避免双重提问(Double-Barreled)(「网站是否有帮助且易于导航?」逼用户对两件事给一个答案,应拆成两问);提供上下文与示例(Dyson 说明序列号位置和格式);遵循表单控件惯例(反例 Squarespace 单选按钮用对勾+整行高亮、破坏惯例);匹配字段长度与内容长度(反例 NAIC 所有字段等长,「电话」「城市」过长破坏认知一致性)。
Support 辅助:避免使用占位符(Placeholder)——输入时消失逼用户靠短期记忆、低对比浅灰难读、易被误认为预填值;应把标签和帮助文字放输入框外、保持框为空(反例 Stripe 用灰色占位符);施加合理限制(SoFi 限制转账不超过余额);实时、明确显示错误提示——避免过早验证(完成输入移到下一字段后再显示)、谨慎用实时验证(只在确需即时反馈如密码要求、或防严重错误时);错误提示直接显示在出错字段旁(反例 Urban Outfitters 把优惠码错误放页面顶部离字段太远);错误提示要有指导性而非只指出问题(Etsy 用户名不可用时还建议多个可用名)。
源自 NNGroup Topics / Design Patterns - 设计模式(反馈与对话框子集,15 个模式;另含 1 篇 Hostile Patterns 重复稿已合并)。相关:可用性启发式十大原则见 NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估);Apple 平台的反馈/模态/通知对应做法见 Apple HIG 交互模式 Patterns(25 个流程模式 · 上手/输入/反馈/媒体/系统协作);表单与输入模式见 NNGroup 交互模式·表单与输入控件(19 个模式 · 表单校验/复选框/日期/步进器/参数控件/列表框vs下拉/开关/拆分按钮/取消vs关闭/链接标签/无密码登录/向导/拖放/加速器/计算器测验);弹窗/覆盖层在移动端的退化见 NNGroup 交互模式·覆盖层·滚动·移动与响应式(13 个模式 · 覆盖层误关/底部弹窗/教学蒙层/无限滚动替代/滚动位置保存/滚动渐隐/滚动劫持/Cookie权限/移动权限请求/移动引导/响应式断点/移动优先弊端/任务切换)。图片/原档保留在 sources。
来源与关联资料
- NNGroup 交互模式·表单与输入控件(19 个模式 · 表单校验/复选框/日期/步进器/参数控件/列表框vs下拉/开关/拆分按钮/取消vs关闭/链接标签/无密码登录/向导/拖放/加速器/计算器测验)
- NNGroup 交互模式·覆盖层·滚动·移动与响应式(13 个模式 · 覆盖层误关/底部弹窗/教学蒙层/无限滚动替代/滚动位置保存/滚动渐隐/滚动劫持/Cookie权限/移动权限请求/移动引导/响应式断点/移动优先弊端/任务切换)
- NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估)
- Apple HIG 交互模式 Patterns(25 个流程模式 · 上手/输入/反馈/媒体/系统协作)