E5.10.1stepper progress设计研究

步骤条表达总量与当前位置

别名: 步骤条 · wizard progress · 第几步共几步

概念解释

步骤条(stepper)把一段线性流程画成「一共几步、现在第几步」。它给的是任务尺度和当前位置,不是分类树上的祖先,也不是浏览历史。开户、结账、报销这些必须按序做完的流程靠它回答两个问题:还要干多久,以及这一屏在整段里叫什么。

机制

线性任务没有自然地标,人会用「还剩多少」决定要不要现在做完、要不要先去找材料。总量把未知长度变成可估计的工作;当前位置把这一屏钉在序列里,避免把第 4 步的问题误当成已经结束。数字(3/5)和命名步骤(「收货地址」)一起工作:数字估时,名称防走错。只有圆点没有名称时,人知道还没完,但不知道这一步在要求什么;只有名称没有总量时,不知道后面还有没有坑。

步骤条还承诺顺序。看见 1–2–3–4 会预期不能跳过未完成的前面,以及后面的内容依赖于前面的答案。这个承诺若只是装饰——实际可以乱序、或总量与真实表单不符——人会按错误的节奏准备材料,在最后一步才发现还要填一块没出现过的内容。

怎么研究

时长估计与完成意愿:同一流程,比较有总量、只有当前名、完全没有步骤条三种,测量「还要多久」的估计误差、中途放弃率、以及是否带齐这一步所需材料。自变量是总量是否可见、步骤是否命名。因变量是估计误差、放弃点落在哪一步、事后能否按顺序复述流程。

注意实验室里被试知道这是测试任务,完成意愿会被抬高;真实的流失更常发生在总量突然显得很长的那一步。

边界

只有两步的流程,步骤条的信息量很小,标题就够。真正的非线性任务(可以任意顺序填的设置)画成步骤条会造假顺序。后台保存草稿的长流程需要总量,但也要能离开,步骤条不能暗示「必须一次做完」。进度若按字段数而不是按用户感知的阶段切,第 1 步可能实际占了八成时间,总量会骗人。

怎么落地

  • 步骤条同时给出总量和当前名称;当前步在条上可辨,且与页标题一致。
  • 按用户感知的阶段切步(「身份 / 地址 / 确认」),不要按内部表单分页或接口次数切。
  • 总量在进入流程时就可见,不要等做完一步才告诉人还有四步。
  • 验证:遮住正文只留步骤条,让人说出共几步、现在哪一步、这一步叫什么。再说出「还要多久」;若完全无法估计,总量就没起作用。走查切分是否与实际耗时大致同量级。

延伸

  • 同组E5.10.2 已完成步骤是否可返回需明确 · E5.10.3 步骤数变化会破坏预期
  • 相邻E5.05 面包屑 · E5.06 分页
  • 站内检索stepper · wizard progress · task remaining

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E5.10.1