The Power of Video Game HUDs

Mit gerade einmal acht Monaten bis zum
fertigen Spiel konnte Naughty Dog sich

endlich dem User Interface von The Last
of Us widmen.

"Während es für einige der UI-Elemente
grobe Züge gab", erklärt Designerin

Alexandria Neonakis, "so gab es noch kein
fertiges Heads-Up Display und viele

Dinge waren noch nicht final entschieden."

Ich glaube, dass es sich hierbei um einen
guten Beleg dafür handelt, dass das

Nutzerinterface in der Spieleentwicklung
allgemein unterschätzt wird.

Mehr ein störender Nachgedanke, der in
letzter Minute hinzugefügt wird.

Aber wenn Ihr mich fragt, sollte das UI
keinesfalls unterschätzt werden, da es

eine entscheidende Rolle dafür spielt,
wie ein Spiel aussieht und sich anfühlt.

In dieser Episode von Game Maker's Toolkit
widme ich mich der Schnittstelle zwischen

UI und Gamedesign, um herauszufinden, wie
HP-Anzeigen unsere Art zu spielen verändern.

UI kann viele verschiedene Dinge umfassen.

Dazu gehören Lobbies, Inventar, Dialog-
bäume, Crafting, Shop Menüs, etc.

Aber in diesem Video geht es nur um ein
bestimmtes UI: Das Heads-Up Display (HUD).

Das HUD wird über die anderen Gameplay-
Elemente gelegt, wenn Ihr mitten im Spiel

seid. Daher ist die wohl erste Frage:
Welchen Zweck erfüllt ein HUD und welche

Vorteile haben Spieler*innen davon?

Um diese Frage zu beantworten, möchte
ich das HUD in zwei unterschiedliche Teile

aufteilen: Anzeigen und Vorschauen.

Denken wir an HUDs, so denken wir in der
Regel an Anzeigen.

Hierbei geht es darum, Informationen auf-
zunehmen, die andernfalls verborgen

blieben und sie Spieler*innen
zu kommunizieren.

Die Gesundheit einer Spielfigur ist
typischerweise eine Zahl im Code des

Spiels, aber eine Gesundheitsanzeige
kann sie für Spieler*innen lesbar machen.

KI-Verhalten kann ohne visuelle Hilfs-
mittel unlesbar bleiben. Hier kommen

Sichtkegel, Bewegungsreichweite und
Angriffsindikatoren ins Spiel.

Und aufgrund von Kamerabeschränkungen
finden sich relevante Informationen

womöglich außerhalb des Bildes wieder -
zumindest ohne Indikatoren oder Mini-Map.

Anzeigen helfen Spieler*innen dabei, den
aktuellen und zukünftigen Status der

Spielwelt zu verstehen - und daraus
entsprechende Pläne zu entwickeln.

Hier ein Fallbeispiel aus dem süchtig
machenden Deckbuilder Slay the Spire

Früh in der Entwicklung gaben Gegner
keinen Indikator dafür, welche Absicht

sie hatte. Spieler*innen wussten also
nicht, ob sie am Ende des Zuges blocken

oder angreifen sollten und spielten
zufällig.

Um dies zu beheben, fügte Entwickler Mega
Crit Indikatoren hinzu, die die Absicht

der Gegner anzeigen.

Nun können Spieler*innen klügere
Entscheidungen treffen, ihre Hand

richtig ausspielen und Synergien und
Strategien entwickeln.

Das sind also Anzeigen.

Vorschauen auf der anderen Seite zeigen
Spieler*innen, welchen Effekt das Drücken

einer Taste oder Ausführen einer
Aktion hat.

In ihrer einfachsten Form sind das Pop-Ups,
die kontextsensitive Eingaben anzeigen - Ihr

wisst, dass Ihr mit Y die Tür öffnet und
mit X einsteigt oder mit E ins Massengrab hüpft.

Wie bitte?

Öhm.

Aber eine Vorschau kann beispielsweise
auch den Bogen einer Flugbahn vor

dem Wurf einer Granate anzeigen.

Ein Indikator zeigt, wenn Ihr in der Nähe
eines Ansatzes für einen Enterhaken seid.

Ein Lock-On zeigt Euch, welche Gegner Ihr
anvisiert.

Diese Linie hier in XCOM zeigt Euch, wo
genau Eure Einheit lang rennt.

Vorschauen geben Spieler*innen eine
Warnung über die Konsequenzen ihrer

Aktionen, noch bevor sie diese
letztendlich durchführen.

So können Spieler*innen mit dem nötigen
Selbstbewusstsein handeln, statt ins Blaue

zu agieren.
Widmen wir uns nun Shovel Knight.

In der dritten DLC-Kampagne, hat Specter
Knight einen Dash-Schlitzer-Move, der ihn

durch gewisse Objekte schwingen und auf
der anderen Seite empor kommen lässt.

Zunächst hatte Entwickler Yacht Club
Games dies mit einer Veränderung in der

Haltung des Characters kommuniziert. Aber
das reichte nicht aus, um den Kontext, wann

und wo Specter Knight die Aktion einsetzen
und wo er landet, zu erklären.

Letztendlich hat das Team einen einfachen
Indikator hinzugefügt, wenn Ihr in der Nähe

passender Objekte seid. So seht Ihr, dass
der Move auf Knopfdruck funktioniert -

und wisst genau, wohn Euch die Reise führt
und wann Ihr die Taste drücken müsst.

Das Gitter war "die wichtigste Veränderung,
die zum Verstehen des Dash Slashes not-

wendig war", sagt der Entwickler.

Anzeigen und Vorschauen sind also sehr
praktische Werkzeuge, um Spieler*innen

Informationen zum Status des Spiels oder
einen Blick in die Zukunft zu geben.

So können Spieler*innen beruhigt das
nötige Selbstbewusstsein entwickeln - und

spezifische Pläne schmieden. Aber Spiele
verfolgen hunderte von Variablen und eine

UI könnte Spieler*innen alle möglichen
Werte anzeigen.

Ihr könntet zum Beispiel zeigen die Vor-
schau einer Aktion zeigen, ehe sie passiert.

Aber warum zeigen Spiele dann nicht
einfach alle Informationen?

Genau so wie es Vorteile gibt, Spieler*innen
Informationen anzuzeigen, so gibt es auch

Vorteile, diese zu verbergen.

Wenn Ihr das UX-Design betrachtet - UX ist
die Erfahrung und Psychologie hinter einer

UI - dann stoßt Ihr schnell auf den
Begriff "kognitive Belastung".

Das menschliche Gehirn kann nur eine
gewisse Anzahl an Informationen gleich-

zeitig verarbeiten. Je mehr Müll auf Ihr
auf dem Bildschirm abladet, desto

eher wird das Spiel zur Steuererklärung.
Eyetracking offenbart das Flitzen der Augen.

Das UI zurück zu fahren - indem Ihr
Überflüssiges und Beiwerk loswerdet -

kann die kognitive Belastung reduzieren.

Aber es geht nicht nur darum, Dinge zu
entfernen.

Tatsächlich kann ein UI manchmal die
kognitive Last erträglicher machen.

Wenn Ihr Euch erinnern müsstet, wie viele
Kugeln Ihr in dem Trubel abgefeuert habt,

verliert Ihr vielleicht den Überblick, ob
Ihr fünf oder sechs mal gefeuert habt.

Eine Munitionsanzeige ist in diesem Fall
viel effizienter.

Stattdessen geht es also darum, clever
mit dem Layout umzugehen, um sicher zu

gehen, dass die Infos auf dem Bildschirm
relevant und leicht verdaulich sind.

Eine Möglichkeit, dies zu erreichen, ist
eine visuelle Hierarchie.

Hierzu werden Techniken wie Schriftdicke,
Farbe, Größe, Position und Bewegung ein-

gesetzt, um wichtige Elemente hervor
zu heben.

Wenn alles auf dem Screen Euch mit der
gleichen Intensität anschreit, fällt die

Entscheidung schwer, was wirklich
wichtig ist.

Und wenn nichts hervor gehoben wird,
bleiben wichtige Infos unbemerkt.

Denkt zum Beispiel an das Pop-Up in
Hitman, das vor dem Übertreten warnt.

Dieser Hinweis ist lebenswichtig, aber in
Hitman 2016 seht Ihr ihn vielleicht nicht.

Da ist er einfach ein Label, das unter der
Minimap am Bildschirmrand erscheint.

In Hitman 2 wurde hier viel verbessert.
Das Label ist jetzt gelb und blinkt

über die Karte, um Eure Aufmerksamkeit
zu erhaschen.

In Hitman 3 ist es noch einmal besser, die
Statusänderung wird durch einen eigenen

Sound begleitet.

Um visuelle Hierarchie besser zu verstehen,
empfiehlt Designer Zach Gage das Prinzip

der "3 Lesungen" - dies sind drei Stufen
visueller Information, nach Wichtigkeit

sortiert. Zach erklärt das am Beispiel
seines eigenen Spiels: SpellTower.

Die erste Lesung nimmt die Spielelemente
auf - die Buchstaben, mit denen Ihr Wörter

bildet. Die zweite Lesung zeigt große,
kritische Regeln fürs Gameplay. Zum

Beispiel Säulen, die kurz davor sind, Euer
Spiel zu beenden und blaue Buchstaben,

die eine ganze Zeile clearen.

Und die dritte Lesung zeigt kleinere,
weniger wichtige Dinge wie Kontext-

regeln. Wie diese Felder, die nur in
längeren Wörtern benutzt werden können.

Entwickler*innen stufen Informationen nach
Wichtigkeit ein und nutzen Design, um die

wichtigsten Elemente hervor zu heben.

Und weil Spiele dynamisch sind, ist es
möglich, dass Informationen zwischen

verschiedenen Lesungen wechseln.

Zach beschreibt Hearthstone als "konstante
Welle von Dingen, die Eure Aufmerksamkeit

in der ersten Lesung suchen und dann in
zweiter und dritter Ebene versinken."

Eine weitere Methode, kognitive Belastung
zu reduzieren ist die Frage: Müssen all

diese UI-Elemente immer angezeigt
werden?

In Castlevania 1 konntet Ihr die Boss-
Gesundheit das ganze Level über sehen.

Warum auch immer...

Heutzutage erscheint die Anzeige, wenn Ihr
den Kampf startet.

Aber das Prinzip lässt sich auch auf jedes
andere UI-Element ausweiten.

In Ghost of Tsushima seht Ihr die Anzeige
Eurer Gesundheit nur, wenn Ihr das Schwert

zieht. Sie ist nur im Kampf relevant -
nicht aber beim Erkunden der Insel.

Okay. Noch ein Grund, das HUD abzulegen
- der immer immer beliebter wird - ist

die Präsentation des Spiels.

Im Bestreben, Spiele cinematischer und
immersiver wirken zu lassen, sollen 2D-

Elemente nicht die 3D-Grafik ruinieren.

Wer aber glaubt, UI muss langweilig aus-
sehen, hat noch nie Persona 5 gespielt.

Musik aus Persona 5

Es geht nicht darum, das HUD komplett
zu verbannen.

All dies sollte nicht auf Kosten von
Klarheit und Verständnis erfolgen.

Stattdessen geht es darum, die Information
auf clevere Weise zu präsentieren.

Wie zuvor können Entwickler*innen Infos
verbergen und nur bei Bedarf zeigen.

Eine andere Lösung ist der diegetische
Einsatz von HUD-Elementen.

Das bedeutet: Die UI existiert physisch in
der Welt des Spiels.

Das beliebteste Beispiel hierfür ist,
natürlich, Dead Space.

Um dieses Survival Horrorspiel immersiver
zu machen, hat Visceral Games das HUD

entfernt und die gleichen Informationen
in die Spielwelt getragen.

Isaac's Gesundheits- und Stasisanzeige
stecken in Röhren und Pegeln im Anzug.

Die geladene Munition einer Waffe lässt
sich an der Waffe selbst ablesen.

Selbst das Inventar ist als holografische
Projektion in die Welt eingebunden.

Effektive Beispiele dafür sehen wir auch
in anderen Spielen. In Metroid Prime ist

das HUD wie in jedem anderen Shooter, aber
es ist Teil von Samus' Visier. Es kann

zittern und eindampfen, wodurch Ihr Euch
stärker in der Rolle fühlt und eine

Verbindung zur Figur aufbaut.

Aber es geht nicht nur um Stil und
Präsentation.

Diese Informationen diegetisch zu machen,
kann zu interessanten Folgen im Spiel

führen. In Alien Isolation kann man ein
Gadget halten, um Bewegungen zu orten.

Es funktioniert ähnlich wie die Minimap in
Call of Duty, aber ist ein physisches

Werkzeug. Ihr müsst Euch also entscheiden,
ob Ihr die Informationen sehen wollt oder

lieber eine Waffe halten möchtet.

Beides gleichzeitig geht nicht.

Ein diegetisches HUD umfasst nicht nur
Gesundheit und Munition, sondern kann

auch clever in die Spielwelt integriert
werden.

Denn wenn Ihr mit der Idee weiter herum
spinnt, können auch Elemente, die wir

nicht zur UI zählen, die gleichen Infos
darstellen.

Ihr braucht etwa keine Gesundheitsanzeige
in Wreckfest, um zu sehen, dass Euer Auto

es bald hinter sich hat - Ihr seht es am
Auto selbst.

Und braucht Ihr wirklich einen Indikator
in Breath of the Wild, um zu sehen, dass

Link kalt ist?

Wir sehen Anfänge davon schon in Super
Mario Bros. Marios Gesundheit zeigt sich

an der Größe seines Sprites.

Ein weiterer Grund, das HUD absichtlich
zurück zu halten, ist es, Spiele weniger

lesbar zu machen.

In The Last of Us Teil II rufen die ersten
menschlichen Gegner ihre Absichten in

die Welt hinaus und erlauben Euch, deren
Pläne genau abzuschätzen und drum herum

zu planen.

Später im Spiel stoßt Ihr auf eine neue
Fraktion, die ausschließlich mit harschen

Pfiffen miteinander reden.

Pfeifen
Pfeiltreffer, Ellie schreit

Diese Pfiffe sind absichtlich so
gestaltet, dass Spieler*innen sie nicht

verstehen. Ich fand diese Feinde daher
viel einschüchternder und schwerer -

zum größten Teil, weil mir Informationen
fehlten.

Die Informationen, die wir als
Spieler*innen haben, verändern unser

Verhalten.

Die Entwickler*innen von Reigns kamen zu
diesem Schluss als sie ihr von Tinder

inspiriertes Spiel machten.

Zuerst zeigte das Spiel die exakten Zahlen
all Eurer Werte und wie Entscheidungen

diese beeinflussen.

Beim Testen aber wollten Spieler*innen
nur noch Werte optimieren - und

ignorierten den Text.

Nachdem das UI nur noch vage Werte zeigte,
lasen die Spieler*innen wieder die Story

und handelten eher auf emotionaler Ebene -
statt auf analytischer.

Ich denke, das zeigt, Entwickler*innen
müssen das HUD nicht ganz entfernen,

sollten aber die Präzision ihres HUDs ab-
wägen.

Möchtet Ihr, dass die Gesundheit eine
genaue Zahl ist, eine Anzeige oder ein

Klecks mitten im Bild?

Es kommt wirklich darauf an, was
Spieler*innen mit den Infos anfangen

sollen. Sind es exakte Rechenoperationen
oder sollen sie nur kurz in Deckung?

Bei Vorschauen für die HUD-Elemente, über
die ich rede...je weiter es in die Zukunft

geht, je präziser die Information, desto
spezifischere Pläne könnt ihr machen.

Wie in Mark of the Ninja, wo das Spiel
Euch genau anzeigt, was passiert, wenn Ihr

dieses Messer in diese Lampe werft.

Aber wenn Ihr die Zukünftigkeit der Infos
weiter reduziert und weniger genau macht,

zwingt Ihr Spieler*innen zum Lernen und
verinnerlichen der Spielmechanik.

Denkt zum Beispiel an Peggle.

Standardmäßig zeigt der Schussanzeiger,
wohin der Ball geht.. bis zum ersten

Treffer. Ihr müsst also das Abprall-
verhalten danach im Kopf kalkulieren.

Das ist Teil der Lernkurve.

Es gibt einen Weg, die Vorschau in die
Zukunft auszuweiten - als Power-Up.

Was wiederum zeigt, wie nützlich diese
Information sein kann.

Übrigens: Wusstet Ihr, dass es ein Patent
auf Peggles Gameplay gibt?

Aber das ist ein andere Thema für
den Kanal...

Weil die UI so wertvoll ist, kann sie
mit Schwierigkeitsgraden oder Assist-Modi

verbunden werden. Rennspiele zeigen im
einfachen Modus oft eine optimale Fahrbahn

an, die in höheren Schwierigkeitsgraden
entfällt.

UI kann auch genutzt werden, um die
Schwierigkeit zwischen Modi oder im Laufe

des Abenteuers anzupassen. Wie jedes
andere Spielelement auch.

Das alles zeigt ganz gut, dass die UI
einen starken Einfluss auf ein Spiel hat.

Richtig genutzt, kann eine UI die Ziele
des Gamedesigns unterstützen.

Aber.. geht das auch andersherum?

Nicht Gamedesign, dass UI beeinflusst -
UI, die das Gamedesign verändert.

Als letztes Fallbeispiel nehmen wir die
deterministische Taktik in Into the Breach

Das Spiel zeigt Euch, was jeder Gegner
tut, gleichzeitig, auf beengtem Gitter.

Das Resultat ist ein komplexes Netz aus
Pfeilen und Symbolen, mit denen Ihr ein

akkurates Bild über die Pläne der
Gegner bekommt.

Aber Entwickler Subset Games musste einige
Gegnertypen und Waffen entfernen, damit

das so funktioniert - sie waren einfach zu
schwierig anzuzeigen.

Waffen mit einer langen Kette aus Ursache
und Wirkung oder Angriffe mit großem

Wirkungsbereich.

Co-Entwickler Justin Ma "Wir haben immer
Klarheit vor coole Ideen gestellt. Das war

unser Prinzip im Gamedesign."

Und das ist nicht zum ersten Mal passiert.

Der einzige Grund, warum in Hearthstone
nur sieben Minions gleichzeitig auf dem

Feld sind, sind die Einschränkungen des
Screens.

Selbst Heldenfähigkeiten wurden geopfert,
weil siezu schwierig anzuzeigen waren.

Wenn etwas am Ende den Spieler*innen nicht
deutlich genug angezeigt werden kann, dann

sollte die Mechanik überdacht oder ver-
einfacht werden.

UI ist aber kein Pflaster, um kaputte
Spielmechanik zu fixen. Deswegen sollte

das HUD zusammen mit allem anderen ent-
wickelt werden. Nicht erst am Ende.

Denn wie alles Andere in der Spiele-
entwicklung, sollte UI nicht willkürlich

gemacht werden oder "weil die anderen
Spiele es auch so machen".

Die UI sollte klar durchdacht sein und
eine Intention verfolgen.

Schreibt doch in die Kommentare, in
welchen Spielen Ihr die UI besonders mögt.

Zeit für Indie-Empfehlungen!

Das hier ist Room to Grow - ein Puzzler,
in dem ein Kaktus wächst, um andere

Pflanzen ins Ziel zu kicken.

Das Spiel wird schnell komplexer, während
Ihr Euch gegen die Wände presst, um Euren

Stachelkörper zu bewegen. Und dann kommen
noch mehr Mechaniken hinzu.

Es ist ein wohl durchdachtes Indie-Spiel
mit viel Charme und einige fiesen Meta-

Herausforderungen.

Es ist jetzt auf Steam erhältlich.