UI- und UX-Design

Die Benutzeroberfläche (UI) kombiniert künstlerisches visuelles Design mit kommunikationszentriertem Informationsdesign, um Menüs, Shop-Layouts, Heads-Up-Displays (HUDs) und andere Schnittstellen zu erstellen, mit denen Spieler interagieren. Die Benutzererfahrung (UX) bezieht sich darauf, wie Spieler mit dem Spiel interagieren, wie sie ihre Entscheidungen bekanntgeben und wie sie von einer Entscheidung zur nächsten wechseln. Während UI und UX oft zusammenarbeiten, liegt der Fokus bei UX stärker auf Interaktivität und der Erfahrung des Spielers als auf dem visuellen und informativen Design der UI.

UI

Die UI teilt wesentliche Informationen wie Lebenspunkte, Questziele und Preise mit, die es den Spielern ermöglichen, Entscheidungen zu treffen und das Spiel zu navigieren. Da es oft die Hauptmöglichkeit ist, wie Spiele mit dem Spieler kommunizieren, ist die UI entscheidend für das Erlebnis der Spieler. Schlecht gestaltete UI kann Spieler verwirren und frustrieren und zu schlechter Retention führen, während gut gestaltete UI zu Engagement und Monetarisierung beitragen kann. Effektiv gestaltete UI befolgt die folgenden Prinzipien:

• Priorisierung
• Aufmerksamkeit
• Visuelle Sprache
• Konventionen
• Konsistenz

Priorisierung

Die wichtigste Information zuerst zu teilen, wird als Informationshierarchie bezeichnet. Dies ist besonders entscheidend in Spielen, in denen Spieler häufig sofortige Entscheidungen auf der Grundlage eines eingeschränkten Informationssets treffen. Bei der Priorisierung der UI sollten Sie identifizieren, was für die Erfahrung des Spielers wichtig oder am relevantesten ist, und sicherstellen, dass es sowohl zugänglich als auch leicht zu finden ist. Berücksichtigen Sie diese Fragen:

• Was macht der Spieler in diesem Moment?
• Was ist das Wichtigste, dessen sich der Spieler bewusst sein sollte oder worauf er Zugriff haben sollte?
• Welche Entscheidungen muss der Spieler treffen?
• Welche Informationen benötigt der Spieler, um diese Entscheidungen zu treffen?
• Wie oft wird er in diese Entscheidungen eingreifen?

Wichtige Informationen und Funktionen ändern sich je nach Faktoren wie der Rolle, die der Spieler übernimmt, ihrem Standort in der 3D-Welt und den Gegenständen, die sie halten. Die UI kann so gestaltet werden, dass sie nur das präsentiert, was kontextuell relevant ist – indem sie Schaltflächen und Informationen je nach Nutzen in jedem Kontext austauscht. Dies stellt sicher, dass die Spieler immer das haben, was sie brauchen, ohne die Unordnung von allem, was sie nicht brauchen.

Beispiele

Irrelevante Elemente können Verwirrung und Ablenkung verursachen. Spellbound RPG hat eine klare, minimalistische UI, die besonders für mobile Oberflächen entscheidend ist, da kleine Bildschirme leicht von übermäßigen Schaltflächen, Bildschirmen und Text überwältigt werden können.

In Super Striker League variieren die Spielerinteraktionen je nachdem, ob sie den Ball kontrollieren oder nicht. Ohne den Ball können die Spieler sprinten und tackeln, um die Kontrolle zurückzugewinnen. Sobald sie im Besitz sind, wechseln die Schaltflächen zu Deke und Pass, wodurch die Spieler Gegner ausweichen und den Ball passen können. Durch den Wechsel dieser Schaltflächen bleibt die UI kontextuell nützlich und vermeidet unnötige Ablenkungen.

In The Survival Game, müssen die Spieler sich über ihren Gesundheits- und Hungerstatus bewusst sein und schnellen Zugriff auf ihre Karte, ihr Inventar und ihre Werkzeuge haben. Diese Informationen ermöglichen es ihnen, Entscheidungen zu treffen und Handlungen für das Überleben zu priorisieren. Wenn diese Informationen oder Werkzeuge schwer zu finden oder fehlen, wird das Überleben schwieriger und unnötig frustrierend.

Aufmerksamkeit

Trotz einer minimalistischen, priorisierten und kontextualisierten UI benötigen die Spieler möglicherweise weiterhin Hilfe, um das zu finden, was sie brauchen. UI-Designer können verschiedene visuelle Werkzeuge nutzen, um die Aufmerksamkeit der Spieler zu gewinnen und zu steuern, wie zum Beispiel:

• Farbe: Helle Farben ziehen mehr Aufmerksamkeit an als stumpfe. Verwenden Sie lebendige Farben für wichtige Texte, Schaltflächen und andere Elemente, und gedämpfte Farbtöne für weniger bedeutende. Dieser Kontrast erhöht die Sichtbarkeit und reduziert Ablenkungen.
• Größe: Größere Elemente sind auffälliger und werden als wichtiger wahrgenommen als kleinere.
• Raum: Elemente, die von ausreichend negativem Raum oder Padding umgeben sind, sind besonders auffällig.
• Nähe: Gruppierte Elemente implizieren eine Verbindung. Wenn verwandte Funktionen und Elemente nahe beieinander platziert sind, können die Spieler deren Zusammenhang verstehen und sie leichter finden.
• Bewegung: Animierte Elemente ziehen Aufmerksamkeit an. Selbst leichte Bewegungen können ein Element hervortreten lassen, während statische Gegenstücke nicht auffallen. Partikeleffekte, wackelnde Schaltflächen und animierte Pfeile werden oft in Tutorials für die Anleitung verwendet.

Moderation ist bei diesen Werkzeugen der Schlüssel. Übermäßiger Gebrauch von hellen, bewegten Elementen könnte Spieler überfordern und verwirren, anstatt ihnen zu helfen.

Beispiele

In Jailbreak's Season-Pass-UI liegt ein goldgelber Streifen unter den saisonpass-exklusiven Symbolen, der die Aufmerksamkeit auf die Premium-Belohnungen lenkt und sie visuell von den kostenlosen unterscheidet.

In Dragon Adventures, wird der höchsten Wertigkeit eines Münzpakets visuelle Priorität eingeräumt, indem seine Größe erhöht und mit mehr Padding voneinander getrennt wird, um es von kleineren Paketen zu unterscheiden.

In Tower Defense Simulator werden sowohl Größe als auch Nähe verwendet, um Daily Tower Skins von Daily Crates visuell zu gruppieren und zu unterscheiden.

Visuelle Sprache

Neben der Steuerung der Aufmerksamkeit der Spieler auf die wichtigsten Elemente auf dem Bildschirm entwickeln UI-Designer eine visuelle Sprache, um den Spielern zu helfen, zu verstehen, was sie sehen. Eine visuelle Sprache ist eine Reihe von absichtlichen und konsistenten Designentscheidungen, die auf einen Blick Informationen über den Zweck, den Status, die Assoziationen und die Relevanz eines Elements vermitteln. Die Sprache wird aus Werkzeugen wie Form, Farbe und Stil gebildet. Einige Verwendungen der visuellen Sprache umfassen:

Icons

Icons können eine visuelle Identität verwenden, die Bedeutung und Assoziationen vermittelt. Beispielsweise können Icons, die mit spezifischen Statistiken verbunden sind, eine Farbpalette und ähnliche Formen teilen, sodass Spieler ihre Funktion erkennen und verstehen können.

Schaltflächen

Als eine verbreitete Form der Spielereingabe müssen Schaltflächen leicht zu identifizieren sein. Schaltflächen in einem Container unterzubringen, wie z.B. eine Farbe, die den Text oder das Symbol umgibt, hebt sie vom Hintergrund ab und lässt sie interaktiv erscheinen. Das Hinzufügen von Akzenten oder Schatten kann ihre taktile Attraktivität erhöhen, indem es eine 3D-Tiefe suggeriert.

Text

Überschriften und Titel, die bedeutende hochrangige Informationen enthalten, sollten größer und fetter sein als Fließtext. Farben, die sehr lesbar sind und gut mit der Hintergrundfarbe kontrastieren, über die sie angezeigt werden, sollten berücksichtigt werden. Stilistische Entscheidungen wie Farbe und Fettdruck können wichtige Informationen wie Gegenstände, Statistiken oder Fähigkeiten im Spiel hervorheben. Legibility ist bei der Auswahl einer Schriftart von höchster Priorität.

Sobald die visuelle Sprache entworfen wurde, kann sie in einem Style Guide dokumentiert werden, einem Regelwerk und Beispielen, die allen Teammitgliedern helfen, zu verstehen, wie die Sprache konsistent im Spiel anzuwenden ist.

Konventionen

Konventionen sind häufig angewandte Designentscheidungen, die in vielen verschiedenen Spielen zu sehen sind. Einige Beispiele sind:

• Ein X-Symbol auf einer Schaltfläche, das das Dialogfeld beim Drücken schließt
• Die Farbe Grau, die auf Schaltflächen angewendet wird, die derzeit nicht verwendbar sind
• Ein Schloss-Symbol, das auf einer Schaltfläche oder Funktion angezeigt wird, um anzuzeigen, dass der Spieler es noch nicht verdient oder freigeschaltet hat

Aufgrund ihrer weit verbreiteten Verwendung sind die Spieler mit solchen Konventionen in der Regel vertraut. Diese Vertrautheit zu nutzen, kann eine Schnittstelle intuitiver machen und den Bedarf an spiel spezifischen Anleitungen verringern. Das Spielen von Spielen innerhalb Ihres Zielgenres kann helfen, Konventionen zu identifizieren, die Spieler möglicherweise erkennen. Ein UI-Designer kann sich für einen einzigartigen Ansatz entscheiden, um besser zu ihrem Spiel zu passen, aber das Wissen über diese Konventionen informiert ihren Entscheidungsprozess.

Konsistenz

Was auch immer Entscheidungen ein UI-Designer trifft, sollten sie konsistent im gesamten Spiel angewendet werden. Konsistenz hilft den Spielern, das Spiel effizienter zu navigieren und Verwirrung und Frustration zu vermeiden.

Hier sind einige Beispiele für UI-Konsistenz in einem Spiel:

• Der "Gesundheit"-Statistik erscheint in allen Texten, den zugehörigen Icons und der Gesundheitsleiste in Grün.
• Jedes Mal, wenn der Dialog eines NPCs einen Gegenstand im Spiel erwähnt, wird er fett hervorgehoben.
• Schließschaltflächen sind immer quadratisch, rot und enthalten ein weißes X, das nur in der oberen rechten Ecke eines Dialogs erscheint.
• Immer wenn ein Spieler sich einen Gegenstand im Shop nicht leisten kann, wird der Preis in Rot angezeigt.

Diese Entscheidungen sind absichtlich, um das Verständnis und die Navigation der Spieler zu erleichtern. Durch die konsistente Anwendung ermöglichen sie den Spielern, verwandte Elemente zu assoziieren, wichtige Gegenstände zu identifizieren, Muskelgedächtnis zu entwickeln, schnelle informierte Entscheidungen zu treffen und mehr Zeit im Spiel zu verbringen.

UX

Das UX-Design bezieht sich darauf, wie Spieler mit dem Spiel interagieren, wie sie ihre Entscheidungen bekanntgeben und wie sie von einer Entscheidung zur nächsten wechseln. Obwohl UX oft Hand in Hand mit der Benutzeroberfläche (UI) arbeitet, konzentriert es sich mehr auf Interaktivität und die Spielerfahrung als auf das visuelle und informative Design der UI.

Spieler verstehen

Ein primäres Ziel des UX-Designers ist es, Interaktionen und Abläufe zu schaffen, die intuitiv, unaufdringlich und bequem für die Spieler in der Nutzung sind. Dieser Prozess beginnt mit dem Verständnis der Spieler selbst, der beabsichtigten Zielgruppe eines Spiels. Bei der Identifizierung der Spieler eines Spiels sollten die folgenden Aspekte berücksichtigt werden:

• Demografie: Demografische Informationen helfen, Designentscheidungen zu informieren, indem sie allgemeine Informationen über eine Spielergruppe enthüllen. Beispielsweise sind jüngere Spieler im Allgemeinen wahrscheinlicher dazu geneigt, auf mobilen oder Tablet-Geräten als auf Personal Computern zu spielen, sodass Spiele, die für dieses Publikum gedacht sind, oft priorisieren, die mobile Benutzererfahrung zu gestalten und zu optimieren.

• Erfahrungsniveau: Entwickler können sich entscheiden, für Spieler mit wenig oder viel Spielerfahrung oder einem dazwischen zu gestalten. Interaktionen, die erfahrenen Spielern vertraut sind, wie das Tippen einer Zahlentaste zum Ausrüsten eines Gegenstands in einer Werkzeugleiste oder das Drücken von c zum Ducken, sind von unerfahrenen Spielern möglicherweise nicht offensichtlich und benötigen zusätzliche Nachrichten oder Schulungen.

• Genresvertrautheit: Ähnlich dem allgemeinen Erfahrungsniveau spiegelt die Genresvertrautheit das Erfahrungsniveau der Spieler mit einer bestimmten Art von Spiel wider. Spiele, die in beliebten Genres auf Roblox fallen, wie Rollenspiele, Überlebenshorror und Ego-Shooter, haben wahrscheinlich viele potenzielle Spieler, die zuvor ein ähnliches Genre gespielt haben. Spiele in anderen Genres haben möglicherweise weniger erfahrene Spieler, aber diese Erfahrungslücke kann durch Tutorials und Benutzerfreundlichkeit überwunden werden.

• Spielstil: Spieler bevorzugen oft spezifische Arten des Spiels, von Wettbewerb und Belohnungssammeln bis zu Erkundung und Zusammenarbeit. Diese Vorlieben spiegeln sich nicht nur in den Spielmechaniken wider, die die Spieler bevorzugen, sondern beeinflussen auch UX-Entscheidungen. Designer überlegen, welche Interaktionen priorisiert, welche verfeinert und welche den Spielern präsentiert werden sollen. Sie berücksichtigen auch die Denkweise, die die Spieler haben werden, wenn sie mit diesen Interaktionen interagieren, und die Emotionen, die sie hervorrufen wollen.

Nachdem Sie diese Faktoren berücksichtigt und eine Zielspielergruppe (oder Gruppen) ausgewählt haben, lernen Sie sie besser kennen, indem Sie sie treffen, mit ihnen spielen und ihre Ziele und Vorlieben herausfinden, um besser informierte Designentscheidungen zu treffen.

Interaktionen entwerfen

Interaktionen sind Funktionen, die es den Spielern ermöglichen, ihre Entscheidungen in einem Spiel zu erleben und zu kommunizieren. UX-Designer wollen, dass diese Interaktionen intuitiv sind und so wenig Erklärung wie möglich erfordern. Dazu nutzen sie:

• Konventionen
• Metaphern
• Feedback

Konventionen

Konventionen sind UX-Designs und Prinzipien, die den Spielern möglicherweise bereits aus anderen Spielen vertraut sind.

Beispiele für Konventionen sind:

• Die "E"-Näheaufforderung, die Roblox-Entwickler verwenden, um den Spielern zu signalisieren, dass ein Gegenstand interaktiv ist, wenn sie nah genug stehen, damit sie erscheint.
• Die "C"-Taste, die es dem Avatar des Spielers ermöglicht, sich zu ducken, um unter Hindernisse zu schweben oder in enge Räume zu passen.
• Zahlentasten, die Gegenstände aus einer Werkzeugleiste in die Hände des Avatars ausrüsten, damit diese verwendet werden können.
• In Kreise auf dem Boden zu gehen, um sich für ein Match anzumelden.

Konventionen etablieren sich, wenn eine bestimmte Implementierung oder Designentscheidung aufgrund ihrer Benutzerfreundlichkeit populär wird. "C" zum Ducken ist beispielsweise leicht zu merken, weil es der erste Buchstabe des Wortes "ducken" ist und bequem neben WASD liegt, den Tasten, die die Spieler verwenden, um sich zu bewegen. Es ist eine einfache Interaktion, die schnell und unter Druck durchgeführt werden kann, was ideal ist, da das Versuchen zu verstecken oder vor einer bevorstehenden Bedrohung zu fliehen ein häufiges Anwendungsbeispiel für das Ducken ist.

Metaphern

Metaphern beziehen ein abstraktes Konzept in ein vertrauteres ein und schaffen eine Abkürzung zum Verständnis. In diesem Beispiel aus Spellbound Wizard RPG wird der Akt des Zauberwirkens durchgeführt, indem Karten aus einem Deck gezogen werden. Die deckbasierte UI/UX verankert den abstrakten Akt des Zauberwirkens, der keinen realen Ausdruck hat, in etwas, mit dem die Spieler leichter in Verbindung treten und schneller verstehen können.

Feedback

Die Kommunikation vom Spiel an den Spieler wird als Feedback bezeichnet. Feedback hilft den Spielern zu verstehen, dass eine Handlung, die sie vorgenommen haben, erfolgreich war. Es kann helfen, zu lernen, wie das Spiel funktioniert, und eine zusätzliche Schicht der Verfeinerung hinzufügen, die ein Feature befriedigender macht. Einige Beispiele für Feedback sind:

• Ein Feind, der seine "Treffer"-Reaktionsanimation abspielt, um anzuzeigen, dass er Schaden von der Waffe des Spielers genommen hat
• Eine Schaltfläche, die ihre Farbe ändert, um den Hover-, gedrückten und losgelassenen (ausgewählten) Zustand anzuzeigen
• Ein "Kassenregister"-Effekt, der beim Abschluss eines Kaufs ertönt
• Ein Fortschrittsbalken, der sich füllt, während der Spieler Questziele erfüllt

Wenn Feedback fehlt oder unzureichend ist, wissen die Spieler möglicherweise nicht, was sie erreicht haben, verstehen nicht, ob die Effekte gut oder schlecht waren oder wissen nicht einmal, ob das Feature, das sie verwenden, korrekt funktioniert oder Fehler aufweist.

Flows entwerfen

Für einen Spieler sind oft mehrere Interaktionen erforderlich, um ein Ziel zu erreichen. UX-Designer beschäftigen sich damit, wie die Spieler von einer Aktion oder UI-Anzeige oder Entscheidung zur nächsten navigieren, und stellen sicher, dass diese Wege logisch und bequem sind.

Zum Beispiel muss ein Spieler, um einen Gegenstand an einem Avatar in Berry Avenue RP auszustatten:

• Den Avatar-Button finden und drücken
• Eine Gegenstandskategorie auswählen (Gesicht, Kopf, Hals usw.)
• Nach einem interessanten Gegenstand scrollen
• Auf den Gegenstand tippen, um ihn an ihrem Avatar auszurüsten
• Den Fertig-Button finden und drücken, um die Avatar-Anpassung zu beenden

Diese Schritte zusammen stellen den Avatar-Anpassungs-Flow dar. Dieser Flow ist einfach und geradlinig, mit so wenigen Schritten wie möglich, die erforderlich sind, um einen Gegenstand auszurüsten. Da die Spieler nicht viele Aktionen durchführen oder zu viel darüber nachdenken müssen, was sie tun müssen, ist dieser Flow niedrig in Reibung, einem Maß für den Aufwand, der erforderlich ist, um ein Ziel zu erreichen.

Effiziente, reibungsarme Flows zu gestalten erfordert sorgfältige Überlegung der Anwendungsfälle. Diese Anwendungsfälle können als Ziele der Spieler ausgedrückt werden, wie z.B.:

• Die Möglichkeit, einen Avatar schnell zu modifizieren
• Gegenstände während der Modifikation leicht zu finden
• Gegenstände vor der Auswahl vorzuschauen
• Einfache Entfernung von Gegenständen nach der Auswahl

Diese Ziele leiten dann das UI- und UX-Design des Features:

• Spieler haben über einen prominenten Button auf dem HUD Zugriff auf die Avatar-Anpassungsfunktion und können sofort beginnen, Gegenstände auszurüsten
• Tabs sortieren die Gegenstände in praktische Kategorien, und das Suchfeld ermöglicht es den Spielern, direkt nach Gegenständen zu suchen
• Gegenstände werden sofort am Avatar angezeigt
• Spieler können den Gegenstand entfernen, indem sie erneut darauf tippen, um ihn abzuwählen, oder indem sie darauf in der Liste der ausgestatteten Gegenstände tippen

Designer können dann beginnen, die UI zu layouten und die Schritte zu planen, die die Spieler unternehmen werden, um das Ziel, ihren Avatar zu modifizieren, zu erreichen. Dieser Prozess kann durch den Einsatz eines Flussdiagramms unterstützt werden, das die Aktionen der Spieler visuell darstellt, während sie durch die UI navigieren. Diese Diagramme können helfen, übersehene Schritte, Schmerzpunkte, bei denen die Schritte unklar oder unpraktisch sind, und übermäßige Reibung zu identifizieren.