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

posted @ 2021-10-08 01:00  泉油  阅读(145)  评论(0编辑  收藏  举报
Web Design Johor Bahru Malaysia - Stooges