FAV
You know exactly what you want QWOP's runner to do, and four keys later he is face down on the track.
This is Level 4A of the Visual Language season, and it's the one about interaction. Every screen you build holds a conversation: the user acts, the system answers, and most dashboards hold up their end badly.
Ultrahand in Tears of the Kingdom runs that whole exchange in colour. The plank lights up yellow when it's grabbable, green once you've targeted it, and a glow sits exactly where the weld will land. Aim somewhere invalid and the spot just stays dark, so the wrong build never gets built. No text anywhere.
Into the Breach shows you what your move will do before you commit to it. DOOM makes the target come to you at the moment you need it, which is Fitts's Law, first written down by Paul Fitts in 1954. Vampire Survivors hands you four upgrades instead of twelve (Hick's Law). Super Mario Odyssey plays fluently in seconds because it behaves the way every Mario before it behaved (Jakob's Law, Jakob Nielsen). And Celeste hands difficulty to the player as a dial, while quietly forgiving the messy timing your thumbs actually produce.
I take all of it back to the dashboard: controls that look clickable, empty and error states written in plain words, replies under half a second, and targets big enough to hit.
DASHBOARD APPLICATIONS
• Style every control so it reads as one. A bevel, a shadow, a hover lift, a cursor change, anything. A filter styled as flat text is a feature that doesn't exist for the person looking at it.
• Design the two states you skipped. "No rows match, widen the date range" beats a blank panel, a real sentence beats "Error 400", and options that lead nowhere get greyed out rather than left live.
• Count the choices, then watch the clock. Four filters beat twelve. Anything under half a second still feels instant, and anything a user is working through needs a visible finish line.
CHAPTERS
00:00 QWOP, and a conversation that breaks
01:03 Three levels down, three to go
01:25 Tears of the Kingdom: Ultrahand talks back
02:58 The filter that doesn't look clickable
03:43 Grey out the paths that go nowhere
04:08 Into the Breach: the move preview
05:42 Empty states, error states, and the words in them
06:09 DOOM: the target that comes to you
07:49 Vampire Survivors: four choices, not twelve
08:32 Dock what people reach for
09:01 Half a second, and a visible finish line
09:35 Super Mario Odyssey: fluent in seconds
10:31 Celeste: Assist Mode as a dial
11:42 Coyote time, and forgiving input
12:11 How flat design took the signal away
12:41 Three laws to honour on a dashboard
13:23 Constraint check: 44 by 44
14:31 Hover-only previews leave people out
14:53 The conversation, recapped
15:26 Next: Level 4B, Navigate
RESOURCES & REFERENCES
• QWOP, free in the browser, if you want the cold open playable http://www.foddy.net/Athletics.html
• Justin Ma on why Into the Breach shows you everything, in Game Developer https://www.gamedeveloper.com/game-pl...
• DOOM's glory kill, and the stagger state that hands you the target https://doomwiki.org/wiki/Glory_kill
• Celeste's Assist Mode, every option and its preamble https://celeste.ink/wiki/Assist_Mode
• Clint Lexa on the "assisted" stamp Celeste took off your save file, via Vice https://www.vice.com/en/article/celes...
• Laws of UX: Fitts, Hick, Jakob, Tesler, Postel and the Doherty Threshold https://lawsofux.com/
• WCAG 2.5.5 Target Size, where 44 by 44 comes from https://www.w3.org/WAI/WCAG21/Underst...
• Nielsen's usability heuristics: system status, and errors in plain language https://www.nngroup.com/articles/ten-...
• Game UI Database, for reading states and screens across thousands of games https://www.gameuidatabase.com/
ABOUT FRAMES AND VIZ
Frames and Viz is a monthly series on UX, UI and design principles in video games, and what they actually mean for dataviz and dashboard work. Spinoff of #SecretsOfTheViz.
▶ Watch the full series: • Frames and Viz
▶ Catch #SecretsOfTheViz: • Secrets of the Viz
ABOUT THE HOST
Tableau Visionary and Ambassador. Behind Video Games TUG, #GamesNightViz, #SecretsOfTheViz, and Singapore TUG. 30+ years of dungeons, apocalypses, and forging friendships in games. That's where the dataviz ideas keep coming from. Also loves coffee.
CONNECT
• Tableau Public: https://public.tableau.com/app/profil...
• LinkedIn: / yulouis
• X / Twitter: https://x.com/datavizlouis
• #GamesNightViz: https://gamesnightviz.webflow.io/
• Blog: https://www.datavizlouis.com/
#FramesAndViz #FAV #SecretsOfTheViz #GamesNightViz #DataViz #Tableau #InformationDesign #UXDesign #UIDesign #GameDesign #VisualLanguage #TearsOfTheKingdom #Celeste #DOOM #Accessibility