Luismi Bello --:-- · MAD
← Work / 03 / 04 Game UX study / FFXIV Online · fictional rework

A better default HUD

A heuristic teardown of Final Fantasy XIV's information-dense HUD — and a calmer, more efficient layout.

Role
Solo UX/UI designer
Type
Fictional · self-initiated
Year
2022
Methods
Benchmark · Heuristics · Redesign
Focus
Hotbar overload, quest legibility, class swapping
Improving FFXIV's HUD — original work
01 — Problem

Too much HUD, too little signal.

The briefOut of combat

FFXIV's HUD is famously dense. Twelve hotbars. Six log windows. Every element movable. In combat it's a marvel of optimisation — until you need to actually change something mid-fight.

I focused on three elements that directly affect how players perform in combat: customising skill hotbars for cleaner ability management, swapping classes without breaking flow, and tracking quests and missions without losing situational awareness. These aren't quality-of-life edge cases — they're the decisions that shape every encounter, and the stock UI makes each one harder than it needs to be.

Original HUD — annotated
  • 01HUD elements — 14 visible · zero priority
  • 02Hotbars — up to 12, fully customisable
  • 03Quest log — anywhere the player drops it
  • 04Class swap — buried in main menu
02 — Benchmark

Seven MMOs, five patterns.

Best practicesMulti-title study

I tore down the out-of-combat HUDs of seven MMOs — Guild Wars 2, FFXV, WoW, Diablo III, The Elder Scrolls Online, Lost Ark, and FFXIV itself — looking for repeated patterns that solved the legibility problem.

Benchmark — slide 1
Benchmark — slide 2
Benchmark — slide 3
  • 01Show the quest list at the top-right. Players use peripheral vision to retrieve mission info; a fixed anchor wins over a flexible position.
  • 02Add a class-swap shortcut on screen. Surface the most strategic interaction — hiding it in a menu hides the gameplay.
  • 03Cluster quests & duties together. Reduce the cost of deciding "what to do next" — proximity is the cheapest pattern there is.
  • 04Keep keyboard shortcuts visible. Discoverability for the swap mechanic; one keystroke beats a menu dive.
  • 05Replace hotbars with immutable rows. Three rows, hot-swapped with CTRL+1/2/3. Less customisation, more focus.
03 — Redesign

A calmer screen.

TreatmentBefore · after

The new HUD trades twelve hotbars for three immutable skill rows hot-swapped with CTRL+1/2/3. The quest list permanently lives at the top-right. A class-swap shortcut appears, finally, on screen.

The cost: less customisation. The gain: a screen a new player can read in three seconds.

Redesign overview
Before — original HUD
Before — original HUD14 elements · scattered hierarchy
After — redesigned HUD
After — redesigned HUD8 elements · clear top-right and bottom-row hierarchy
AQuest log anywhereQuest & duty list — pinned top-right
BClass swap buried in menuOn-screen shortcut · CTRL+Tab
C12 customisable hotbars3 immutable skill rows · CTRL+1/2/3
DParameter bars scatteredSingle panel · bottom-left
EMini-map driftsAnchored bottom-right
04 — Takeaway

What I took with me.

Reflection

Game UX taught me to read every pixel. Every glyph on a HUD is competing for attention, and the designer's job is to spend that attention deliberately — same instinct I bring to the chat surface inside Concierge today.

Letting power-users customise everything is generous. Pretending the default doesn't matter is a design choice that quietly costs you everyone else.

© 2026 — Luis Miguel Bello García Senior Product Designer, AI contact@luismi.design
Next — 04 / 04 Tears of the Kingdom upgrade flow