lichess-org/lila

Standardise UX for checkboxes and toggle switches

開放

#17,396 建立於 2025年4月21日

 (20 則留言) (0 個反應) (0 位負責人)Scala (2,661 個分叉)batch import
choregood first issueimprovement

倉庫指標

星標
 (18,196 顆星)
PR 合併指標
 (平均合併 2天 18小時) (30 天內合併 151 個 PR)

描述

Lichess is currently inconsistent in how it treats checkboxes () and toggle switches () for setting options.

Typical scenarios & best practice

  1. Option saves or applies instantly (e.g. Notification settings, chat room display): display as toggle switch
  2. Option requires further interaction (e.g. anywhere that requires users to first 'Submit' or 'Save', such as Advanced Search): display as a checkbox

Nielsen Norman Group hosts a page on best practices which provides more detail. As with everything in UX, there are exceptions. For example, Chess insights are in-keeping with best practices for search user interfaces, and needs no changes

Forms to review & remediate

The below list may not be exhaustive.

  • "Evaluation bars" in studies and broadcasts ScreenshotImage
  • Study and broadcast sharing options ScreenshotImage
  • Arena tournament creation ScreenshotImage
  • Swiss tournament creation ScreenshotImage
  • Simul creation
  • Broadcast creation ScreenshotImage
    • Broadcast round creation/editing ScreenshotImage
  • Study creation
  • Close account (https://lichess.org/account/close) ScreenshotImage
  • Delete account (https://lichess.org/account/delete) ScreenshotImage
  • API access tokens (https://lichess.org/account/oauth/token/create) ScreenshotImage
  • Lobby game filter - consider doing this as a separate PR to other changes, as it is heavily styled ScreenshotImage
  • Team creation, management Screenshot of new team creation - note there may be moreImage
  • Classes Screenshot of new class creation - I could not find any othersImage
  • Coach pages
    • Title verification ScreenshotImage
  • Streamer pages ScreenshotImage
  • Board editor (note this also appears in studies and is space-constrained; consider leaving for a separate PR to other changes) ScreenshotImage
  • Game import (https://lichess.org/paste) ScreenshotImage
  • Advanced search (https://lichess.org/games/search) ScreenshotImage
  • CMS (internal) ScreenshotImage
  • Blog post editor (must have saved a draft first) ScreenshotImage
  • Training (puzzles) - main screen
  • Coordinate training
  • Voice input
  • Analysis menu
  • Notifications
  • In-game preferences (blindfold)
  • Chess insights - making an exception here as the specific layout is common in search user interfaces, and Lichess's patterns are in keeping with it

貢獻者指南