So bleiben Haustier-Bedienelemente und der Charakter in einer kompakten Spieloberfläche sichtbar

Listen Sie die Informationen und Aktionen auf, die Spielende während des primären Spielablaufs (Core Gameplay Loop) benötigen. Ein sinnvoller erster Entwurf könnte das Haustier, eine primäre Aktion wie Füttern oder Spielen und eine kompakte Anzeige umfassen, die verdeutlicht, ob diese Aktion verfügbar ist. Verschieben Sie Einstellungen, Sammlungen und seltenere Aktionen in ein sekundäres Menü oder ein kurzes Kontextpanel. Dies ist eine Designmethode, keine allgemeingültige Regel: Ein Spiel, dessen zentrale Aufgabe in der Auswahl zwischen mehreren Aktionen besteht, benötigt möglicherweise mehr gleichzeitig sichtbare Bedienelemente.

Weisen Sie dem Charakter einen fest definierten visuellen Bereich zu, bevor Sie die Bedienelemente einpassen. Halten Sie wesentliche Teile seiner Silhouette und Mimik frei und vermeiden Sie es, Schaltflächen oder Beschriftungen darüber zu platzieren. Wenn eine Aktion das direkte Berühren des Haustiers erfordert, lassen Sie diesen Interaktionsbereich frei; befinden sich Bedienelemente über der Spielszene, stellen Sie sicher, dass sie nicht den Teil der Figur verdecken, den Spielende sehen müssen. Die Richtlinien von Apple zu Spielsteuerungen empfehlen, virtuelle Bedienelemente zu reduzieren, wenn stattdessen eine direkte Interaktion mit Spielobjekten möglich ist (Game controls).

Gruppieren Sie häufig genutzte Aktionen dort, wo sie leicht zu erreichen sind, und platzieren Sie sekundäre Aktionen weiter entfernt oder hinter einem Menü. Vermeiden Sie es auf einem Touchscreen, Schaltflächen in dem Bereich zu häufen, in dem die Hand der spielenden Person das Haustier verdeckt. Apple empfiehlt, häufig genutzte Touch-Bedienelemente in Daumennähe und sekundäre Steuerelemente im oberen Bereich des Bildschirms zu platzieren; die Richtlinien raten zudem dazu, die bequeme Erreichbarkeit und Gerätegrenzen zu berücksichtigen. Betrachten Sie diese Empfehlungen als Ausgangspunkte, die auf dem Zielgerät und in der vorgesehenen Bildschirmausrichtung getestet werden sollten, und nicht als starres Layout für jedes Spiel.

Gestalten Sie sichtbare Symbole kompakt, ohne das eigentliche Touch-Ziel entsprechend zu verkleinern. Apple empfiehlt auf seinen Plattformen ein Mindestmaß von 44 × 44 Punkten für häufig genutzte Bedienelemente und 28 × 28 Punkten für weniger wichtige Steuerelemente. Android empfiehlt mindestens 48 × 48 dichteunabhängige Pixel für interaktive Touch-Ziele. Da es sich hierbei um plattformspezifische Maßeinheiten handelt, sollten Sie stets die Maße und Richtlinien der jeweiligen Plattform verwenden, anstatt die Zahlen als austauschbar zu betrachten (Apple game controls, Android accessibility guidance). Lassen Sie genügend Abstand, um versehentliches Antippen zu vermeiden – insbesondere dann, wenn zwei Aktionen unterschiedliche Ergebnisse zur Folge haben.

Ein Haustier kann technisch gesehen auf dem Bildschirm zu sehen sein, aber dennoch leicht übersehen werden, wenn Bedienelemente, Beschriftungen oder dekorative Panels mit ihm konkurrieren. Setzen Sie bei sekundären Oberflächenelementen auf eine zurückhaltende visuelle Gewichtung: kleine Symbole, kurze Beschriftungen und Panels, die nur so viel Platz wie nötig einnehmen. Halten Sie das Gesicht des Charakters und andere wichtige Details bei den wichtigsten Aktionen frei. Wenn sich die Spielszene hinter Texten oder Symbolen ändert, ziehen Sie einen dezenten Hintergrund oder eine Kontur in Betracht, damit die Benutzeroberfläche lesbar bleibt, ohne dass ein großes, undurchsichtiges Panel erforderlich ist.

Überprüfen Sie Texte und Symbole sowohl auf hellen als auch auf dunklen Bildbereichen. Ein Kontrast, der auf einem Hintergrund gut funktioniert, kann unzureichend werden, sobald sich das Haustier bewegt oder sich die Szene ändert. Für Fließtext in normaler Größe sieht der WCAG-Standard des W3C ein Kontrastverhältnis von 4,5:1 vor, für großen Text 3:1. Die WCAG sind zwar Richtlinien für Webinhalte und keine spezifischen Regeln für Spiele, ihre Kontrastschwellenwerte eignen sich jedoch hervorragend zur Überprüfung von UI-Texten auf wechselnden Hintergründen (W3C contrast guidance). Verlassen Sie sich nicht allein auf Farben, um eine nicht verfügbare Aktion zu kennzeichnen; ändern Sie auch Beschriftung, Form oder Zustand gut sichtbar.

Wenn dauerhaft angezeigte Bedienelemente zu viel Platz beanspruchen, blenden Sie optionale Aktionen erst ein, wenn Spielende ein Menü öffnen oder das Haustier auswählen. Verbergen Sie Aktionen, die im aktuellen Zustand nicht verfügbar sind, und visualisieren Sie Zustandsänderungen eindeutig, sobald ein Steuerelement betätigt wird. Apple empfiehlt ausdrücklich, die Sichtbarkeit virtueller Bedienelemente an den Gameplay-Kontext anzupassen – einschließlich des Ausblendens irrelevanter Steuerelemente und des deutlicheren Hervorhebens aktiver Elemente. Ein bewährtes Muster besteht darin, die Hauptaktion verfügbar zu halten und verwandte Optionen in einem kleinen Menü anzuzeigen, das sich nach der Auswahl wieder schließt.

Halten Sie Zustandsänderungen vorhersehbar. Ein Bedienelement, das genau in dem Moment verschwindet, in dem Spielende es nutzen wollen, sorgt für Verwirrung. Reservieren Sie das Ein- und Ausblenden daher für Aktionen, deren Verfügbarkeit aus dem aktuellen Status klar hervorgeht. Wenn eine Schaltfläche inaktiv wird, zeigen Sie diesen Status an und erklären Sie bei Bedarf kurz, was sich geändert hat. Achten Sie darauf, dass ein sich öffnendes Menü weder das Gesicht des Haustiers noch den Bereich verdeckt, in dem die nächste Eingabe erfolgen muss.

Gestalten Sie Layouts für den nutzbaren Bereich, nicht nur für das äußere Bildschirmrechteck. Notches, Kameraausschnitte, Systemleisten und Gestenbereiche können wichtige Bedienelemente am Bildschirmrand überlagern. Apples Layout-Richtlinien definieren Safe Areas als Bereiche, die sicherstellen, dass Inhalte frei von UI-Elementen und Hardwarerändern des Geräts bleiben. Android empfiehlt ebenfalls, die Abstände für Systemleisten, Gesten und Display-Aussparungen zu berücksichtigen und kritische Steuerelemente nicht in der Nähe von Kameraausschnitten zu platzieren (Apple layout guidance, Android edge-to-edge guidance). Hintergrundgrafiken können bis an den Bildschirmrand reichen, während interaktive Elemente eingerückt bleiben.

Gehen Sie nicht davon aus, dass eine einzige kompakte Anordnung auf jedes Seitenverhältnis passt. Verankern Sie Bedienelemente im nutzbaren Bereich und passen Sie Abstände oder Gruppierungen an, wenn sich die verfügbare Breite ändert. Die Android-Richtlinien für Unity-Spiele empfehlen die Verwendung der Safe-Area-API sowie die Unterstützung verschiedener Displaygrößen und Seitenverhältnisse. Testen Sie Hoch- oder Querformat-Layouts nur dann, wenn das Spiel diese auch unterstützt, und prüfen Sie die Anzeige nach einer Drehung, Fenstergrößenänderung oder dem Auf-/Zuklappen eines faltbaren Geräts erneut, sofern diese Konfigurationen relevant sind (Android guidance for Unity games on large screens).

Ein statisches Mockup kann nicht zeigen, welche Bereiche die Finger der Spielenden während der Nutzung verdecken. Überprüfen Sie die Benutzeroberfläche bei der vorgesehenen physischen Displaygröße und führen Sie die Hauptaktionen durch. Achten Sie dabei auf verdeckte Details der Spielfigur, verfehlte Fingertipps und Bedienelemente, die sich mit Systemfunktionen überschneiden. Wiederholen Sie den Test auf dem kleinsten unterstützten Bildschirm sowie bei einem breiteren oder höheren Seitenverhältnis. Bitten Sie nach Möglichkeit jemanden, der mit dem Layout nicht vertraut ist, die Hauptaufgabe auszuführen, und beobachten Sie, wo die Person hintippt, zögert oder das Haustier aus den Augen verliert.

Nutzen Sie eine kurze Prüfliste für jedes unterstützte Layout:

• Das Haustier bleibt während der Hauptaktion sichtbar, einschließlich seines Gesichts und anderer wesentlicher Details.

• Die primäre Aktion ist gut erreichbar, verfügt über einen eindeutigen Aktivierungsstatus und überlappt kein anderes Ziel.

• Beschriftungen und wichtige Statusanzeigen bleiben auch vor wechselnden Szenenhintergründen lesbar.

• Kein wesentliches Bedienelement liegt unter einer Aussparung, einer Systemleiste oder einem Gestenbereich.

• Das Öffnen eines sekundären Bedienelements verdeckt nicht den Teil des Charakters oder Spielbereichs, der für den nächsten Schritt benötigt wird.

Besteht ein Layout den Test nicht, ändern Sie immer nur ein Detail auf einmal: Entfernen Sie ein Element mit niedriger Priorität, verschieben Sie ein Bedienelement unter Einhaltung der Safe-Area-Abstände an den Rand des Spielbereichs oder blenden Sie sekundäre Aktionen nur bei Bedarf ein. Testen Sie denselben Spielablauf anschließend erneut. So lässt sich leichter feststellen, ob die Änderung das Sichtbarkeitsproblem tatsächlich behoben oder lediglich an eine andere Stelle verlagert hat.

• Apple Developer, Game controls

• Apple Developer, Layout

• Android Developers, Make apps more accessible

• Android Developers, Edge-to-edge design

• Android Developers, Make your Unity game great on all form factors

• W3C Web Accessibility Initiative, Understanding Success Criterion 1.4.3: Contrast (Minimum)