Loading...
Loading...
Compare original and translation side by side
User has unstable phone number?
├── YES → See: Authentication Without Stable Phones
└── NO → Standard auth OK
User may lose internet mid-task?
├── YES → See: Offline-First Design
└── NO → Standard web patterns OK
User may be on shared/public device?
├── YES → See: Shared Device Privacy
└── NO → Standard session management OK
Form is complex or emotionally difficult?
├── YES → See: Trauma-Informed Forms
└── NO → Standard form patterns OK
User has history of system trauma?
├── YES → Apply ALL trauma-informed patterns
└── UNKNOWN → Assume YES for civic/legal/benefits apps用户使用不稳定手机号?
├── 是 → 参考:无需稳定手机号的认证方案
└── 否 → 标准认证方案可行
用户可能在任务中途失去网络?
├── 是 → 参考:优先离线设计
└── 否 → 标准网页模式可行
用户可能使用共享/公共设备?
├── 是 → 参考:共享设备隐私保护
└── 否 → 标准会话管理可行
表单复杂或情绪难度高?
├── 是 → 参考:创伤知情表单设计
└── 否 → 标准表单模式可行
用户有系统创伤史?
├── 是 → 应用所有创伤知情模式
└── 未知 → 公民/法律/福利类应用默认按「是」处理| Need | Pattern | Implementation |
|---|---|---|
| Primary auth | Email-first | Email is identifier, phone optional |
| 2FA | Multiple pathways | Email OR backup codes OR case worker verification |
| Recovery | Printable codes | One-time codes that can be written down |
| Bypass | Trusted intermediary | Case managers verify via org email |
| Essential access | No-signup mode | Core features work without account |
| 需求 | 模式 | 实现方式 |
|---|---|---|
| 主认证 | 优先邮箱 | 邮箱作为身份标识,手机号为可选项 |
| 双因素认证 | 多路径选择 | 邮箱 或 备份码 或 个案工作者验证 |
| 账号恢复 | 可打印验证码 | 可手写记录的一次性验证码 |
| 绕过机制 | 可信中介 | 个案经理通过机构邮箱验证 |
| 核心访问 | 无需注册模式 | 核心功能无需账号即可使用 |
□ Email is primary identifier (phone optional)
□ Backup codes can be printed/written
□ Case worker recovery pathway exists
□ Core features work without login
□ Sessions are not device-locked
□ Phone number changes don't lock accounts
□ "Forgot password" has non-SMS option□ 邮箱作为主身份标识(手机号可选)
□ 备份码可打印/手写记录
□ 存在个案工作者恢复路径
□ 核心功能无需登录即可使用
□ 会话不与设备绑定
□ 手机号变更不会锁定账号
□ 「忘记密码」提供非短信选项| Need | Pattern | Implementation |
|---|---|---|
| Data persistence | Local-first | Save to localStorage/IndexedDB immediately |
| Form state | Auto-save | Save every field change, not just on submit |
| Submission | Background sync | Queue actions, sync when connection returns |
| UI feedback | Optimistic updates | Update UI immediately, sync in background |
| Progress | Resume anywhere | Let users pick up exactly where they left off |
| Status | Visible sync state | "Saved locally" / "Syncing..." / "Up to date" |
| Degradation | Graceful offline | Core features work without network |
| 需求 | 模式 | 实现方式 |
|---|---|---|
| 数据持久化 | 优先本地存储 | 立即保存至localStorage/IndexedDB |
| 表单状态 | 自动保存 | 每次字段变更都保存,而非仅提交时保存 |
| 提交机制 | 后台同步 | 队列化操作,恢复连接时同步 |
| UI反馈 | 乐观更新 | 立即更新UI,后台同步数据 |
| 进度续接 | 任意位置恢复 | 允许用户从上次中断处继续 |
| 状态提示 | 可见的同步状态 | 「已本地保存」/「同步中...」/「已更新」 |
| 降级处理 | 优雅离线 | 核心功能无需网络即可使用 |
□ PWA with service worker caching
□ All form data saves to localStorage on every change
□ Clear sync status indicator visible
□ Offline mode tested (airplane mode)
□ Background sync when connection returns
□ No data loss on connection drop (verified)
□ Multi-step flows don't timeout
□ Minimal asset downloads (text-first views available)□ 带服务工作者缓存的PWA
□ 所有表单数据在每次变更时保存至localStorage
□ 清晰的同步状态指示器可见
□ 已测试离线模式(飞行模式)
□ 恢复连接时自动后台同步
□ 断连时无数据丢失(已验证)
□ 多步骤流程不会超时
□ 最小化资源下载(提供纯文本视图)// Save form state on every change
function useAutoSave(key: string, data: any) {
useEffect(() => {
localStorage.setItem(key, JSON.stringify({
data,
savedAt: new Date().toISOString(),
synced: false
}));
}, [key, data]);
// Return saved data on mount
return useMemo(() => {
const saved = localStorage.getItem(key);
return saved ? JSON.parse(saved).data : null;
}, [key]);
}// Save form state on every change
function useAutoSave(key: string, data: any) {
useEffect(() => {
localStorage.setItem(key, JSON.stringify({
data,
savedAt: new Date().toISOString(),
synced: false
}));
}, [key, data]);
// Return saved data on mount
return useMemo(() => {
const saved = localStorage.getItem(key);
return saved ? JSON.parse(saved).data : null;
}, [key]);
}| Need | Pattern | Implementation |
|---|---|---|
| Default state | Privacy mode ON | Don't auto-save sensitive info |
| Logout | Prominent button | Make it obvious, not buried in menu |
| Timeout | Warning + auto-logout | "5 min left. Continue?" |
| Forms | No autofill default | Disable browser autofill on sensitive fields |
| Mode toggle | "Public computer?" | One-click extra privacy mode |
| Cookies | Session-only option | Clear on browser close |
| 需求 | 模式 | 实现方式 |
|---|---|---|
| 默认状态 | 隐私模式开启 | 不自动保存敏感信息 |
| 登出 | 显眼按钮 | 位置明显,而非隐藏在菜单中 |
| 超时 | 警告+自动登出 | 「剩余5分钟,是否继续?」 |
| 表单 | 默认关闭自动填充 | 敏感字段禁用浏览器自动填充 |
| 模式切换 | 「公共电脑?」 | 一键开启额外隐私模式 |
| Cookie | 仅会话选项 | 浏览器关闭时清除 |
□ "Remember me" is UNCHECKED by default
□ Logout button visible on every page
□ Session timeout with save-progress warning
□ Sensitive fields have autocomplete="off"
□ Incognito mode suggested in UI for public computers
□ No cached personal data after logout
□ "Working on a shared computer?" toggle available□ 「记住我」默认未勾选
□ 登出按钮在每个页面都可见
□ 会话超时带进度保存警告
□ 敏感字段设置autocomplete="off"
□ UI中建议公共电脑使用隐身模式
□ 登出后无缓存个人数据
□ 提供「使用共享电脑?」切换选项| Need | Pattern | Implementation |
|---|---|---|
| Length | Chunked progress | Break into short sections, save each |
| Language | Plain language | 6th-8th grade reading level |
| Complexity | One question/page | For difficult topics |
| Progress | Clear indicators | "Step 2 of 5" always visible |
| Validation | Forgiving input | Auto-format, accept variations |
| Defaults | Smart prefill | Pre-fill what you can infer |
| Help | Inline, not hidden | Help text visible, not in modals |
| Flow | Skip and return | Never force-block on optional fields |
| 需求 | 模式 | 实现方式 |
|---|---|---|
| 长度 | 分块进度 | 拆分为短章节,每章保存 |
| 语言 | 简明语言 | 6-8年级阅读水平 |
| 复杂度 | 一页一题 | 针对困难主题 |
| 进度 | 清晰指示器 | 始终显示「第2步/共5步」 |
| 验证 | 宽容输入 | 自动格式化,接受多种格式 |
| 默认值 | 智能预填充 | 预填充可推断的信息 |
| 帮助 | 内嵌显示,不隐藏 | 帮助文本可见,而非在模态框中 |
| 流程 | 跳过并返回 | 绝不强制阻塞可选字段 |
✅ Calm palette:
- Success: Soft green (#4a9d9e), not aggressive lime
- Warning: Warm amber (#d4a03a), not alarming yellow
- Error: Muted terracotta (#c97a5d), not aggressive red
- Background: Cream/warm neutrals
❌ Avoid:
- Aggressive red for errors
- High-contrast warning colors
- Flashing or pulsing elements
- Visual "alarm" states✅ 舒缓配色:
- 成功:柔和绿色 (#4a9d9e),而非刺眼的亮绿
- 警告:暖琥珀色 (#d4a03a),而非警示黄
- 错误:哑光赤陶色 (#c97a5d),而非刺眼红色
- 背景:奶油色/暖中性色
❌ 避免:
- 用刺眼红色表示错误
- 高对比度警告色
- 闪烁或脉动元素
- 视觉「警报」状态□ No form longer than 5 fields per page
□ Progress indicator on all multi-step flows
□ Help text inline, not in tooltips/modals
□ Forgiving validation (formats automatically)
□ No required fields that aren't truly required
□ "Skip for now" on optional sections
□ Calm color palette (no aggressive reds)
□ Person-first language throughout
□ Clear "what happens next" on every screen□ 每页表单字段不超过5个
□ 所有多步骤流程都有进度指示器
□ 帮助文本内嵌显示,而非工具提示/模态框
□ 宽容的验证(自动格式化)
□ 无非必要的必填字段
□ 可选章节提供「暂时跳过」选项
□ 舒缓配色(无刺眼红色)
□ 全程使用以人为本的语言
□ 每个页面都清晰说明「下一步」| Need | Pattern | Implementation |
|---|---|---|
| Eligibility | Checker first | Show if qualified BEFORE collecting info |
| Documents | Multiple upload methods | Email, fax, mail, in-person, photo |
| Location | Auto-detection | Don't make them figure out jurisdiction |
| Records | Lookup tools | Help them find their own case numbers |
| Terms | Plain language | Define every legal term |
| Timeline | Explicit expectations | "Most cases take 60-90 days" |
| Fees | Waiver prominent | Fee waiver should be default path |
| 需求 | 模式 | 实现方式 |
|---|---|---|
| 资格判定 | 先做资格检查 | 收集信息前先显示是否符合资格 |
| 文件上传 | 多种上传方式 | 邮件、传真、邮寄、线下提交、照片 |
| 位置定位 | 自动检测 | 不让用户自行判断司法管辖区 |
| 记录查询 | 查询工具 | 帮助用户查找自己的案件编号 |
| 术语解释 | 简明语言 | 为每个法律术语提供定义 |
| 时间线 | 明确预期 | 「大多数案件需要60-90天」 |
| 费用 | 突出费用减免 | 费用减免应为默认路径 |
□ Eligibility checker before signup/info collection
□ Case number lookup tool or "I don't know" option
□ County auto-detected from address
□ Document upload alternatives (not just scan)
□ Legal terms have inline definitions
□ Expected timeline stated clearly
□ Fee waiver is default, not hidden option
□ "Not eligible" includes explanation WHY□ 注册/收集信息前先进行资格检查
□ 提供案件编号查询工具或「我不知道」选项
□ 根据地址自动检测所在县
□ 提供文件上传替代方案(不仅限于扫描)
□ 法律术语配有内嵌定义
□ 明确说明预期时间线
□ 费用减免为默认选项,而非隐藏选项
□ 「不符合资格」时包含原因解释AUTHENTICATION
□ Can user sign up with just email?
□ Is there a non-SMS account recovery option?
□ Do core features work without login?
OFFLINE/INTERMITTENT
□ Does form data survive connection loss?
□ Is there visible "saved" indicator?
□ Can user resume exactly where they left off?
SHARED DEVICES
□ Is "remember me" unchecked by default?
□ Is logout button prominent?
□ Does session timeout with warning?
FORMS
□ Is reading level ≤8th grade?
□ Are there ≤5 fields per page?
□ Is help text inline (not hidden)?
□ Are required fields truly required?
TONE
□ Is language person-first?
□ Are timelines explicit?
□ Is error messaging non-blaming?
□ Are colors calm (no aggressive red)?
LEGAL/EXPUNGEMENT SPECIFIC
□ Is eligibility checked first?
□ Are fee waivers prominent?
□ Is "I don't know my case number" handled?认证环节
□ 用户能否仅用邮箱注册?
□ 是否有非短信的账号恢复选项?
□ 核心功能无需登录即可使用?
离线/间歇性访问
□ 表单数据在断连后是否保留?
□ 是否有可见的「已保存」指示器?
□ 用户能否从上次中断处继续?
共享设备
□ 「记住我」默认未勾选?
□ 登出按钮是否显眼?
□ 会话是否带警告超时?
表单设计
□ 阅读水平≤8年级?
□ 每页字段≤5个?
□ 帮助文本内嵌显示(不隐藏)?
□ 必填字段是否真正必要?
语气表达
□ 是否使用以人为本的语言?
□ 时间线是否明确?
□ 错误提示是否无指责性?
□ 是否使用舒缓配色(无刺眼红色)?
法律/消除犯罪记录专属
□ 是否先进行资格检查?
□ 费用减免是否突出显示?
□ 是否处理「我不知道我的案件编号」的情况?/references/authentication-patterns.md/references/offline-first-patterns.md/references/trauma-informed-language.md/references/code-for-america-learnings.md/references/authentication-patterns.md/references/offline-first-patterns.md/references/trauma-informed-language.md/references/code-for-america-learnings.md