lichess-org/lila

Standardise UX for checkboxes and toggle switches

Open

#17,396 opened on Apr 21, 2025

View on GitHub
 (20 comments) (0 reactions) (0 assignees)Scala (18,196 stars) (2,661 forks)batch import
choregood first issueimprovement

Description

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

Contributor guide

Tech stack
scalahtmlcssjavascript
Domain
frontendaccessibilitydesign
Issue type
refactor
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ScalaHTMLCSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Review the listed forms in the lila codebase, locate the HTML templates (likely in ScalaTags or Twirl), and ensure that toggle switches are used for instant save options and checkboxes for forms requiring submission. Follow the guidelines from the linked Nielsen Norman Group article. The issue includes screenshots for each form to compare against.