lichess-org/lila

Standardise UX for checkboxes and toggle switches

オープン

#17,396 opened on 2025/04/21

 (20 件のコメント) (0 件のリアクション) (0 人の担当者)Scala (2,661 件のフォーク)batch import
choregood first issueimprovement

Repository metrics

Stars
 (18,196 個のスター)
PR merge metrics
 (平均マージ 2d 18h) (30d で 151 merged PRs)

説明

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

コントリビューターガイド