Rhythm design / Design analysis
Readable rhythm-game screens: color, direction and input areas
What does a note's color tell the player, and what does its arrow tell them? Separating hand, direction and timing identifies the information that needs to survive changes to colors and effects. This guide starts with game displays, then examines alternative cues, contrast and pointer-target areas.
Article summary
- Record the action information conveyed by arrows and colors separately.
- Assess contrast against adjacent colors and states for essential UI and graphics.
- Check display size, active area, hand occlusion and actual operation separately.
Beat Saber · Official PC promotional screenshot
Block colors identify the hand or saber; white arrows indicate cutting direction. These are different pieces of action information. A complete assessment also needs the product's settings and accessibility features.
Image credit: Beat Games / Steam · Source page ↗ · Original image ↗
Identify the information needed to act
In this Beat Saber screenshot, block color and the white direction marker work together. Color identifies the hand or saber; the arrow specifies the cutting direction. Separating those roles establishes which information needs to remain available after a setting changes.
Our fictional note requires a hand, direction and input time. If color alone identifies the hand, check that information separately when reducing color. An arrow may still communicate direction. Additional outlines, letters or fixed positions need to supply the same missing action information.
Trace a communication path for hand, direction and timing
Editorial diagram · An information map for a fictional note. When color is reduced, check additional cues corresponding to hand information.
Connections run from action information to multiple display cues and supporting cues, without axes. Hand identity, direction and timing are designed separately.
On smaller screens, scroll the diagram horizontally. Enlarge diagram ↗
Values and sequence shown in the diagram
- Hand: color → candidates such as L/R labels or outlines
- Direction: arrow
- Timing: judgment line and remaining distance
Find information lost after a setting changes
Change color, volume and effects one at a time and record which hand, direction or timing cues become harder to read. An arrow may retain direction information while hand identity still needs another cue. Use the product's guidance to establish which settings and alternatives it provides.
CAT BEAT's Cat's Day combines A/D labels, target images and action instructions. Check whether they communicate the same distinctions. Grayscale is one inspection tool; connect it to observations of actual use by the relevant players.
Questions for finding information loss
| Variable condition | Information that must remain | Evidence to compare |
|---|---|---|
| Color | Hand or target identity | Letters, outlines and fixed positions |
| Reward effects | Next target's direction and timing | Frames of the same pattern |
| Background brightness | Essential graphic boundaries | Adjacent colors, states and measurement conditions |
| Input method | Active target and next cue | CSS regions, coordinates and hand occlusion |
CAT BEAT : Wake the Beat · Development screenshot
The A/D instructions for eating catnip and striking obstacles appear with images and left/right markers. A separate design diagram below distinguishes visible circles from actual active regions.
Image credit: Level Up Today · Source page ↗ · Original image ↗
Set priorities between the next target and feedback effects
Check frames where reward effects or backgrounds overlap the next note's direction, outline or hit line. Compare effect intensity and background brightness separately, holding the pattern and camera fixed.
WCAG's SC 1.4.11 explanation specifies 3:1 contrast for identifying required UI components, states and meaningful graphics against adjacent colors. Measure the relevant boundary against the color beside it. Record colors, states and measurement method, then assess recognition in motion separately.
Related primary sources: W3C WAI · SC1.4.11 Non-text Contrast ↗
Separate visible circles from actual pointer targets
A small note may respond to a tap anywhere on half the screen. A large image may contain only a small active button. Map visible bounds, active bounds and finger occlusion separately to find conflicts between controls and upcoming cues.
The explanation of SC 2.5.8 covers 24×24 CSS px pointer targets and exceptions, including spacing. Read the conditions for equivalent controls, inline content, user agents and essential presentation as well. Assess decorative notes, keyboard tasks and VR targets according to how each is actually controlled.
Related primary sources: W3C WAI · SC2.5.8 Target Size Minimum ↗
Three layers: image, active area and hand occlusion
Editorial diagram · A diagram separating displayed circles, pointer-active areas and occlusion in a hypothetical mobile screen.
Conceptual diagram, not to scale. Solid rectangles=active areas; small circles=displayed targets; translucent ellipses=example occlusion. Check actual sizes in CSS px and on devices.
On smaller screens, scroll the diagram horizontally. Enlarge diagram ↗
Values and sequence shown in the diagram
- Split-screen input and individual buttons have different active regions.
- Read the 24×24 CSS px pointer-target requirement together with its exceptions.
Record setting combinations and input methods
List the available sound, color-assistance, effect and keyboard settings, then check essential information in each combination. Assess static contrast separately from readability during rapid actions.
Display active regions in the development view and compare them with input coordinates, finger occlusion and target spacing. In user sessions, distinguish missing-information errors from the intended timing challenge. Explain how accessibility settings interact with the rules.
Check whether alternative cues communicate the same information
For each action, record the original cue, what remains after a setting change and how players perform. Asking separately about hand, direction and timing keeps the review focused on information conveyed.
The photographs support observation of actual displays; active rectangles and hand-occlusion diagrams are editorial mobile-design models. Keep standards, geometry and user observations together. Assess individual products against their actual applicable scope and test evidence.
Review by action information
| Required action | Original cue | Check after changes |
|---|---|---|
| Select hand | Color, L/R letters and position | Is the same hand selected when color changes? |
| Select direction | Arrow and target shape | Are shape and meaning consistent? |
| Input timing | Distance, judgment line and sound | Which cues remain when muted or effects are reduced? |
| Pointer input | Actual active region | Are occlusion, spacing and repeated operation manageable? |
Sources & scope
Sources reviewed 2026.10.17: the scope, values, adjacent-color requirements and exceptions in both Understanding documents. Hand/direction decomposition and mobile regions are original design models. Actual product settings, active areas, motion recognition and performance by relevant users require separate research and validation records.