Visual hierarchy and readability

Visual hierarchy is the order in which a viewer notices things: what they see first, second and last. Readability is how quickly and reliably they can tell what they are looking at. In a painting these are matters of taste. In a game they decide whether the player spots the enemy, finds the exit or walks past the item they need.

The core idea is that contrast attracts attention, so spend it on what matters and keep everything else calm.

#Three tiers

A simple way to plan hierarchy is to sort everything in a view into three tiers:

1. Primary: what the player must read now. Characters and enemies, the exit, the objective, interactive objects.
2. Secondary: what helps them understand the space. Landmarks, cover, paths, the shape of the room.
3. Tertiary: what makes it believable. Surface detail, clutter, background buildings, sky.

Piaskiewicz describes the top of this ladder in composition terms: the dominant is "the focal point of the composition, it can't merge with the rest of the scene's objects", supported by a weaker counterpoint (Game Developer: Composition in Level Design). The focal point page covers that top tier; this page covers the whole ladder.

The tiers echo the primary, secondary and tertiary forms idea from sculpting (primary, secondary and tertiary forms), applied to a whole scene instead of one object.

#Tools for emphasis

Every tool below works by contrast with what surrounds it. Piaskiewicz's list of visual weight is a good summary: heavy elements have "Large scale, detailed, dark color, intensive color, heavy contrast"; light ones have "Small scale, stark appearance, light color, soft color, light contrast" (Game Developer: Composition in Level Design).

Players respond to the same list. The Level Design Book's wayfinding guidelines, drawn from Half-Life 2, include: "Players focus on contrast (in color, shape, lighting, and movement.)" (The Level Design Book: Wayfinding).

#Readability as a gameplay requirement

Studios that make competitive games treat readability as a rule, not a preference.

Moby Francke, co-author of the Team Fortress 2 paper (Mitchell et al. 2007), described VALORANT's goal in an interview: "We're not trying to make the most beautiful game ever, we're trying to make an accessible game that everybody can play" (Inverse: "We're not trying to make the most beautiful…).

#Hierarchy in story-driven games

Narrative games share the same toolkit but have more room for mood. Naughty Dog lighting artist Gabe Betancourt describes using light to "entice players to pay attention to an object, location, or help with puzzle", and to decide "where to guide or distract players", while "making sure enemies and cover in an area remain distinct" (80 Level: Learning Lighting for Video Games). John Sweeney, art director on The Last of Us Part II, describes art direction helping designers "find solutions to things like composition and shape reads" (Cook & Becker: Art directing The Last of Us Part II).

The Level Design Book suggests a hierarchy for lighting exits: "Big important exits should have more important looking lighting" (The Level Design Book: Lighting). This applies visual hierarchy to navigation.

#Detail budget

Hierarchy fails most often because detail is spread evenly. Every prop, decal and trim adds a little contrast, and together they turn into noise that hides the primary tier. Treat detail like a budget: cluster it near focal points and along the critical path, and leave large calm areas elsewhere. The composition page has a well-known guideline on the ratio.

Andrew Lund III found this in his winter street scene: "My composition had no clear focus" (80 Level: Winter Street Scene: Environment Production…). He made the arched door the primary focal point, treated an alley and a tunnel as secondary interest, and used snow mounds, vertex painting, boot tracks and a door left slightly open to lead the eye to the entrance (80 Level: Winter Street Scene: Environment Production…). The fix was reorganising existing contrast, not adding more of it.

#Using more than one cue

A hierarchy built on a single cue is fragile. Colour cues fail for colour-blind players; Microsoft's guidelines require critical information to use "at least one additional signifier such as shape, pattern, iconography, or text labels" (Microsoft Learn: Xbox Accessibility Guideline 103). Build the primary tier from two or three cues at once: light and value and shape, for example.

#How to test hierarchy

1. Two-second test. Show a screenshot for two seconds and ask what people noticed, in order. Compare with your three tiers.
2. Greyscale and squint. If the primary tier disappears, it relied on colour.
3. Character test. Place a character (or enemy) model in front of every common background in the space and check it stays readable.
4. Thumbnail test. At 200 px wide, only the primary and secondary tiers should still read.
5. Playtest. Watch where players look and go. See playtesting spaces and telemetry and heatmaps.

#Related pages

focal point · composition · value · colour for environments · light and shadow · silhouette · leading lines · wayfinding · set dressing and art passes · art fatigue

#Further reading and watching