Checkboxes，Switch，Toggle Tokens

Checkboxes，Switch，Toggle Tokens

https://uxmovement.com/forms/10-usability-mistakes-most-designers-make-on-checkboxes/

https://uxmovement.com/buttons/when-to-use-a-switch-or-checkbox/

https://uxmovement.com/forms/why-toggle-tokens-are-a-better-alternative-to-checkboxes/

https://uxmovement.com/buttons/why-toggle-buttons-are-confusing/

 

“No” labels are a no-no

• Checkbox 本身就是 Yes, No 的概念，没必要添加 No

Duplicate items demand double duty

• 重复可以替换成 “按钮”

• 可以省下空间

• 感觉很传统

A bigger target as a check token of gratitude

• Native 的 checkbox 容易被点错，做大一点可以避免

Faster to scan than a laundry list of items

• 往下扫描的速度对左右来的快

No checkmarks when the feeling isn’t mutual

• 文章说很多人并不知道 checkbox and radio 的差别，建议替换

Switch or Checkbox

• Switch 

• 是马上执行的操作，比如开灯，关灯。

• 不需要有 save 按钮，会让混淆用户

• Checkbox 

• 可以在提交前检查

• 可以 multiple

• 批量操作

Toggle Tokens

• Checkbox 有个打钩的框，这很容易被聚焦

• Checkbox 用了很多的高

• Toggle tokens 解决了聚焦和空间问题

• Long text 就不能用 toggle tokens 了，这非常影响扫描和阅读

Why Toggle Buttons Are Confusing

• 左边

• 用户混淆那个是被点击的

• 主色不能代表是已经被点击，我觉得提交按钮也是这颜色，所以用户没办法马上确定

• 右边

• 通过一点点的设计，成功让用户看到那个被点击

• Light shading （光影）

• 粗体 + 颜色

• 深色边框

• 对比

• 浅色 border

• 浅色 label