Gutes Game-UI-Design funktioniert am besten, wenn es unsichtbar ist: Der Spieler denkt an das Spiel, nicht an das Menü. HUD, Inventar und Menüs sind die eigentliche Schnittstelle des Spiels; sie müssen in unter einer Sekunde ablesen lassen, wie viel Leben übrig ist, ob die nächste Fähigkeit bereit ist oder welcher Gegenstand ausgerüstet ist. In diesem Artikel gehe ich die Prinzipien für ein lesbares HUD, ein aufgeräumtes Inventar und ein intuitives Menülayout durch — mit Praktiken, die sich im Playtesting immer wieder bewährt haben.
Die Aufgabe des HUD: Informationen vermitteln, ohne das Auge zu ermüden
Das HUD (Heads-Up Display) ist die Ebene, die der Spieler ständig sieht, und verlangt daher die strengste Disziplin. Die Kernregel: Für jedes Element, das dauerhaft auf dem Bildschirm bleibt, musst du erklären können, warum es dort ist. Kannst du das nicht, entferne es. Beim Entwurf eines HUD teile ich Informationen in drei Prioritätsgruppen:
- Lebenswichtig (immer sichtbar): Leben, Mana/Energie, Minikarte oder Zielmarkierung.
- Kontextuell (erscheint bei Bedarf): Schadenszahlen, Interaktionshinweise, Questaktualisierungen.
- Auf Abruf (per Menü/Taste geöffnet): Inventar, Charakterbildschirm, Karte.
Platziere lebenswichtige Informationen in den Bildschirmecken und an festen Stellen, die der Spieler aus dem Muskelgedächtnis kennt. In MMOs und Actionspielen sitzt die Lebensleiste meist oben links oder unten in der Mitte, weil sich Spieler merken, wohin sie schauen müssen. Ihre Position während des Spiels willkürlich zu verschieben, ist der teuerste Lesbarkeitsfehler überhaupt.
Lesbarkeit: Kontrast, Größe und Abstand
Die Lesbarkeit eines HUD-Elements hängt von drei Dingen ab: seinem Kontrast zum Hintergrund, seiner Größe und dem Abstand des Spielers zum Bildschirm. Spielhintergründe ändern sich ständig; ein dezenter Schlagschatten, eine Kontur oder eine halbtransparente Unterlage hinter Text und Symbolen sorgt dafür, dass sie sowohl vor hellem Himmel als auch in einer dunklen Höhle lesbar bleiben.
/* Eine einfache Technik, um HUD-Text auf jedem Hintergrund lesbar zu halten */
.hud-label {
color: #fff;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
/* Alternative: eine halbtransparente Unterlage hinter Symbol/Text */
background: rgba(0, 0, 0, 0.35);
padding: 2px 6px;
border-radius: 4px;
}Farbe sollte niemals allein Information tragen. Rund 8 % der Spieler sind farbenblind; die Regel „rot = Feind, grün = Verbündeter" versagt bei ihnen. Verbinde Farbe immer mit einer Symbolform, einem Zeichen oder einem Positionshinweis. Wenn eine Fähigkeit abklingt, reicht es nicht, ihre Farbe zu verblassen; füge einen umlaufenden grauen Schleier oder die verbleibenden Sekunden darüber hinzu.
Inventar: Raster, Gruppierung und schnelles Scannen
Das Inventar gehört zu den Menüs, in denen Spieler die meiste Zeit verbringen, es muss sich also schnell überblicken lassen. Ein Rasterlayout ist für nahezu jedes Genre der richtige Ausgangspunkt, weil das Auge gleichmäßig verteilte Felder sehr schnell abscannt. Beim Entwurf achte ich auf:
- Einheitliche Zellgröße: Jeder Gegenstand sollte in einem Feld gleicher Größe sitzen; variierende Größen (wie Diablo-artige Gegenstände über mehrere Zellen) bringen ein Tetris-Gefühl, erhöhen aber die Scankosten, also muss es eine bewusste Entscheidung sein.
- Seltenheits-Kodierung: Zeige Seltenheit sowohl über die Rahmenfarbe als auch über einen Schimmer hinter dem Symbol; verlasse dich nicht allein auf Farbe.
- Sortieren und Filtern: Sortieren per Tastendruck nach Typ/Wert/Neuheit ist die meistgewünschte Funktion in einem vollen Inventar.
- Tooltip: Zeige beim Überfahren einen Werte-Vergleich — ein grüner Pfeil, wenn der neue Gegenstand den ausgerüsteten schlägt, ein roter Pfeil, wenn er schlechter ist.
Für Mobile und Gamepad gilt eine zusätzliche Regel: Ohne Cursor muss die Navigation im Raster mit dem Steuerkreuz Sinn ergeben. Hebe die ausgewählte Zelle mit einem klaren Rahmen hervor und lass den Fokus an den Rändern nicht unerwartet „umspringen" — erneut rechts am rechten Rand zu drücken, sollte an Ort und Stelle bleiben, es sei denn, du richtest eine bewusste Schleife ein.
Menülayout: Hierarchie und Navigation
Menüs sind das Skelett des Spiels. Eine gute Menühierarchie lässt den Spieler alles Gesuchte in höchstens zwei oder drei Schritten erreichen. Das Hauptmenü sollte kurz sein: Mehr als fünf oder sechs Einträge wie Spielen, Fortsetzen, Einstellungen, Beenden erzeugen Entscheidungsmüdigkeit. Je tiefer es geht, desto mehr halte ich mich an diese Prinzipien:
- Positionskonsistenz: „Zurück" sollte immer an derselben Stelle und auf derselben Taste liegen (meist B/Kreis am Gamepad).
- Sichtbarer Zustand: Der Spieler sollte stets sehen, in welchem Reiter er ist und woher er kommt; hebe den aktiven Reiter deutlich hervor.
- Sofortige Rückmeldung: Jeder Klick/jede Auswahl sollte mit einem kleinen Ton, Leuchten oder einer Bewegung antworten — ein stummes Menü wirkt „kaputt".
Behandle das Einstellungsmenü mit besonderer Sorgfalt: Auflösung, Audio, Steuerung und Barrierefreiheitsoptionen sollten in logische Gruppen aufgeteilt und beim Ändern vorschaubar sein. Halte die Schaltflächen „Anwenden" und „Zurücksetzen" jederzeit sichtbar.
Rückmeldung und „Juice": die Oberfläche lebendig wirken lassen
Es reicht nicht, dass die Oberfläche korrekt funktioniert; sie muss sich auch richtig anfühlen. Was Designer „Juice" nennen, ist, jede Interaktion mit kleinen Animationen und Geräuschen befriedigend zu machen. Eine Schaltfläche, die beim Drücken leicht schrumpft und zurückfedert, eine Lebensleiste, die beim Leeren kurz eine „Geister"-Leiste hinterlässt, eine Inventarzelle, die beim Aufnehmen eines Gegenstands aufleuchtet — all das sagt dem Spieler „ja, deine Aktion wurde registriert".
Aber hüte dich vor der Übertreibungsfalle. Eine halbe Sekunde Animation auf jeden Übergang zu legen, tötet in einem schnellen Spiel den Fluss. Ein guter Richtwert: Informationstragende Übergänge sollten zwischen 80 und 200 ms dauern, und keine Animation, die den Spieler warten lässt, darf unüberspringbar sein. Lass in Menüs immer einen Weg „Animation überspringen / schneller Übergang" offen.
Barrierefreiheit: mehr Spieler erreichen
Barrierefreiheit ist kein „Extra"; sie ist ein natürlicher Teil guten UI-Designs. Ein paar kostengünstige Maßnahmen mit hohem Nutzen:
- Skalierbare UI-/Schriftgröße: Lass den Spieler HUD- und Menütext vergrößern.
- Farbenblind-freundliche Paletten: Stütze Information zusätzlich auf Form und Position.
- Untertitel und visuelle Tonhinweise: Zeige wichtige Geräusche auch auf dem Bildschirm.
- Neu belegbare Tasten: Hände und Hardware sind bei jedem anders.
Diese Maßnahmen schließen niemanden aus und erhöhen auch den Komfort für „typische" Spieler — kleinen Text vergrößern zu können, hilft allen.
Häufige Fragen
Wie viel Information sollte ein HUD zeigen?
So wenig dauerhafte Information wie möglich. Prüfe jedes Element mit der Frage „Was verliert der Spieler ohne dies?". Lautet die Antwort „nicht viel", mache das Element kontextuell (lass es nur bei Bedarf erscheinen) oder verschiebe es in ein Menü. Alles Nicht-Lebenswichtige ermüdet den Bildschirm.
Mit welchem Werkzeug sollte ich meine Game-UI gestalten?
Für Layout, Fluss und visuelle Erkundung genügt Figma den meisten Teams; du kannst mit Komponenten und Variablen ein UI-Kit aufbauen. Anschließend überträgst du den Entwurf in das UI-System der Engine (Unity UI Toolkit/uGUI, Unreal UMG oder deine eigene Engine). Das Werkzeug ist zweitrangig; die Prinzipien ändern sich nicht.
Wie funktioniert dieselbe UI für Tastatur und Gamepad?
Plane beide Eingabemethoden früh ein. Denke cursorbasierte freie Auswahl und fokusbasierte Navigation (verschiebbare Hervorhebung) zusammen; gib jedem interaktiven Element einen klaren Fokuszustand und stelle sicher, dass es per Gamepad in einer sinnvollen Reihenfolge durchlaufen werden kann.
Brauchst du ein lesbares HUD und aufgeräumte Menüs für dein Spiel? Ich baue dein HUD, Inventar und deinen Menüfluss von Grund auf neu oder überarbeite deine bestehende Oberfläche für ein besseres Spielerlebnis. Kontaktiere mich und lass uns über dein Projekt sprechen.