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 die Spieler interagieren. Die Benutzererfahrung (UX) bezieht sich darauf, wie Spieler mit dem Spiel interagieren, wie sie ihre Entscheidungen bekannt geben 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 wichtige Informationen wie Trefferpunkte, Questziele und Preise mit, die es den Spielern ermöglichen, Entscheidungen zu treffen und sich im Spiel zurechtzufinden. Da sie oft die primäre Möglichkeit ist, wie Spiele mit dem Spieler kommunizieren, ist die UI entscheidend für die Erfahrung der Spieler. Schlecht gestaltete UI kann die Spieler verwirren und frustrieren und zu einer schlechten Bindung führen, während fachmännisch gestaltete UI zu Engagement und Monetarisierung beitragen kann. Effektiv gestaltete UI verwendet die folgenden Prinzipien:

• Priorisierung
• Aufmerksamkeit
• Visuelle Sprache
• Konventionen
• Konsistenz

Priorisierung

Die wichtigste Information zuerst zu teilen, wird als Hierarchie der Informationen bezeichnet. Dies ist besonders wichtig in Spielen, in denen die Spieler häufig sofortige Entscheidungen auf der Grundlage eines eingeschränkten Informationssatzes treffen. Bei der Priorisierung der UI sollten Sie identifizieren, was für die Erfahrung des Spielers wesentlich 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 oder auf das er zugreifen sollte?
• Welche Entscheidungen muss er treffen?
• Welche Informationen benötigt er, um diese Entscheidungen zu treffen?
• Wie häufig wird er diese Entscheidungen treffen?

Wichtige Informationen und Funktionen ändern sich je nach Faktoren wie der Rolle, die der Spieler einnimmt, seinem Standort in der 3D-Welt und den Gegenständen, die er hält. Die UI kann so gestaltet werden, dass sie nur das präsentiert, was kontextuell wichtig ist – indem die Schaltflächen und Informationen je nach Nützlichkeit in jedem Kontext ausgetauscht werden. 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 saubere, minimalistische UI, die besonders wichtig für mobile Schnittstellen ist, da kleine Bildschirme leicht mit übermäßigen Schaltflächen, Bildschirmen und Text überfordert werden können.

In Super Striker League variieren die Spielerinteraktionen je nachdem, ob sie den Ball kontrollieren. 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, was es den Spielern ermöglicht, Gegner zu umgehen und den Ball zu passen. Durch das Wechseln dieser Schaltflächen bleibt die UI kontextuell nützlich und vermeidet unnötige Ablenkungen.

In The Survival Game, müssen die Spieler sich ihres 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 nicht vorhanden sind, 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 mehrere visuelle Werkzeuge verwenden, um die Aufmerksamkeit der Spieler zu erfassen und zu lenken, wie zum Beispiel:

• Farbe: Helle Farben ziehen mehr Aufmerksamkeit auf sich als matte. Verwenden Sie lebendige Farbtöne für wichtige Texte, Schaltflächen und andere Elemente und gedämpfte Farbtöne für weniger bedeutende. Dieser Kontrast verbessert 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 Polsterung umgeben sind, sind auffällig.
• Nähe: Gruppierte Elemente implizieren eine Verbindung. Durch das Platzieren verwandter Funktionen und Gegenstände in der Nähe zueinander können die Spieler deren Zusammenhang verstehen und sie leichter finden.
• Bewegung: Animierte Elemente ziehen Aufmerksamkeit auf sich. Selbst leichte Bewegungen können ein Element hervorheben, während statische Gegenstücke. Partikeleffekte, wackelnde Schaltflächen und animierte Pfeile werden häufig in Tutorials zur Anleitung verwendet.

Mäßigung ist der Schlüssel bei diesen Werkzeugen. Übermäßiger Einsatz von hellen, beweglichen Elementen könnte die Spieler überwältigen und verwirren, anstatt ihnen zu helfen.

Beispiele

In Jailbreak's Season-Pass-UI liegt ein Streifen aus goldenem Gelb 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 Münzbündel durch Vergrößerung und mehr Polsterung visuelle Priorität eingeräumt, um es von kleineren Bündeln 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 Lenkung 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 bewussten und konsistenten Designentscheidungen, die auf einen Blick Informationen über den Zweck, den Status, die Assoziationen und die Relevanz eines Elements bereitstellen. Die Sprache wird aus Werkzeugen wie Form, Farbe und Stil aufgebaut. Einige der Verwendungen für visuelle Sprache umfassen:

Symbole

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

Schaltflächen

Als eine verbreitete Form der Eingabe durch den Spieler 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, unterscheidet sie vom Hintergrund und lässt sie interaktiv erscheinen. Das Hinzufügen von Highlights oder Schatten kann ihre taktile Anziehungskraft erhöhen, indem es 3D-Tiefe suggeriert.

Text

Überschriften und Titel, die bedeutende Informationen auf hoher Ebene enthalten, sollten größer und fetter sein als Fließtext. Farben, die sehr gut lesbar sind und gut gegen die Hintergrundfarbe, über die sie angezeigt werden, kontrastieren, sollten berücksichtigt werden. Stilistische Entscheidungen wie Farbe und Fettdruck können wichtige Informationen wie In-Game-Items, Statistiken oder Fähigkeiten hervorheben. Legibilität sollte immer bei der Auswahl einer Schriftart priorisiert werden.

Sobald die visuelle Sprache entworfen wurde, kann sie in einem Style Guide dokumentiert werden, einer Reihe von Regeln und Beispielen, die allen im Team helfen, die Sprache konsistent im gesamten Spiel anzuwenden.

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 den Dialog schließt, wenn es gedrückt wird
• Die Farbe Grau, die auf Schaltflächen angewendet wird, die derzeit nicht verwendbar sind
• Ein Schloss-Symbol, das eine Schaltfläche oder Funktion überlagert, um anzuzeigen, dass der Spieler es noch nicht verdient oder freigeschaltet hat

Aufgrund ihrer weit verbreiteten Verwendung sind die Spieler in der Regel mit solchen Konventionen vertraut. Diese Vertrautheit zu nutzen, kann eine Schnittstelle intuitiver machen und die Notwendigkeit für spielespezifische Anweisungen 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 seinem Spiel zu passen, aber das Wissen um diese Konventionen informiert ihren Entscheidungsprozess.

Konsistenz

Egal welche Entscheidungen ein UI-Designer trifft, sie sollten diese konsequent im gesamten Spiel anwenden. Konsistenz hilft den Spielern, sich effizient im Spiel zurechtzufinden und Verwirrung und Frustration zu vermeiden.

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

• Die "Gesundheit"-Statistik erscheint in allen Texten, verwandten Symbolen und der Gesundheitsanzeige in grün.
• Jedes Mal, wenn der NPC-Dialog ein In-Game-Item erwähnt, wird es fett hervorgehoben.
• Schließen-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 und zielen darauf ab, das Verständnis und die Navigation der Spieler zu erleichtern. Durch die konsequente Anwendung ermöglichen sie es 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 bekannt geben 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, unauffällig und bequem für die Spieler zu verwenden sind. Dieser Prozess beginnt mit dem Verständnis der Spieler selbst, der beabsichtigten Zielgruppe für ein Spiel. Bei der Identifizierung der Spieler eines Spiels sollten Sie Folgendes berücksichtigen:

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

• Erfahrungsgrad: Entwickler können sich entscheiden, für Spieler mit wenig Spielerfahrung, einer erheblichen Menge oder irgendwo dazwischen zu entwerfen. Interaktionen, die erfahrenen Spielern vertraut sind, wie das Drücken einer Zahlentaste, um einen Gegenstand in einer Werkzeugleiste auszurüsten, oder das Drücken von c, um sich zu ducken, sind möglicherweise nicht offensichtlich für unerfahrene Spieler und erfordern zusätzliche Nachrichten oder Schulungen.

• Genre-Vertrautheit: Ähnlich wie beim allgemeinen Erfahrungsgrad spiegelt die Genre-Vertrautheit das Erfahrungsniveau der Spieler mit einem bestimmten Spieltyp wider. Spiele, die in beliebten Genres auf Roblox fallen, wie Rollenspiel, Survival-Horror 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 Spielarten, die von Wettbewerb und Sammeln von Erfolgen bis hin zu Erkundung und Zusammenarbeit reichen. Diese Vorlieben spiegeln sich nicht nur in den Spielmechaniken wider, die die Spieler bevorzugen, sondern beeinflussen auch die UX-Entscheidungen. Designer berücksichtigen, 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 möchten.

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

Interaktionen gestalten

Interaktionen sind Funktionen, die es den Spielern ermöglichen, ihre Entscheidungen in einem Spiel zu erleben und zu kommunizieren. UX-Designer möchten, 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, mit denen die Spieler möglicherweise bereits aus anderen Spielen vertraut sind.

Beispiele für Konventionen sind:

• Die "E"-Proximitätsaufforderung, 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, damit er unter Hindernissen hindurchgehen oder in enge Räume passen kann.
• Zahlentasten, die Gegenstände aus einer Werkzeugleiste in die Hände des Avatars ausrüsten, damit sie verwendet werden können.
• In Kreise auf dem Boden zu gehen, um sich für ein Match anzumelden.

Konventionen werden etabliert, wenn eine bestimmte Implementierung oder Designentscheidung aufgrund ihrer Benutzerfreundlichkeit an Popularität gewinnt. "C" zum Ducken ist beispielsweise leicht zu merken, da es der erste Buchstabe des Wortes "ducken" ist und bequem neben WASD, den Tasten, die die Spieler zur Navigation verwenden, liegt. Es ist eine einfache Interaktion, die schnell und unter Druck ausgeführt werden kann, was ideal ist, da das Versuchen, sich vor einer drohenden Bedrohung zu verstecken oder zu fliehen, ein häufiges Anwendungsbeispiel für das Ducken ist.

Metaphern

Metaphern beziehen ein abstraktes Konzept auf ein vertrauteres, wodurch ein Abkürzungsweg zum Verständnis geschaffen wird. In diesem Beispiel aus Spellbound Wizard RPG wird der Akt des Zauberns von Magie durch das Ziehen von Karten aus einem Deck durchgeführt. Die deckbasierte UI/UX verankert den abstrakten Akt des Zauberns, der keinen realen Ausdruck hat, in etwas, mit dem die Spieler leichter in Beziehung treten und schneller verstehen können.

Feedback

Die Kommunikation vom Spiel zum Spieler wird als Feedback bezeichnet. Feedback hilft den Spielern zu verstehen, dass sie eine Aktion durchgeführt haben. Es kann dazu beitragen, zu lernen, wie das Spiel funktioniert, und eine zusätzliche Schicht von Politur hinzufügen, die eine Funktion befriedigender macht. Einige Beispiele für Feedback sind:

• Ein Feind, der seine "Treffer"-Reaktionsanimation abspielt, um anzuzeigen, dass er durch die Waffe des Spielers Schaden genommen hat
• Eine Schaltfläche, die die Farbe ändert, um den Hover-, gedrückten und freigegebenen (ausgewählten) Zustand anzuzeigen
• Ein Kassenregister-"Kling!"-Soundeffekt, der abgespielt wird, wenn der Spieler einen Kauf abschließt
• Ein Fortschrittsbalken, der sich füllt, während der Spieler Questziele abschließt

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

Abläufe gestalten

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

Um beispielsweise einen Gegenstand an einem Avatar in Berry Avenue RP auszurüsten, muss ein Spieler:

• Den Avatar-Button finden und antippen
• Eine Gegenstandskategorie auswählen (Gesicht, Kopf, Hals usw.)
• Scrollen, um einen interessanten Gegenstand zu finden
• Auf den Gegenstand tippen, um ihn an seinem Avatar auszurüsten
• Den Fertig-Button finden und antippen, um die Avatar-Anpassung zu beenden

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

Die Gestaltung effizienter, reibungsarmer Abläufe erfordert sorgfältige Überlegung der Anwendungsfälle. Diese Anwendungsfälle können als Spielerziele ausgedrückt werden, wie zum Beispiel:

• Schnell einen Avatar modifizieren zu können
• Gegenstände leicht zu finden, während man modifiziert
• Gegenstände vor der Auswahl anzuzeigen
• Einfache Entfernung von Gegenständen nach der Auswahl

Diese Ziele leiten dann das UI- und UX-Design der Funktion:

• Spieler greifen über einen auffälligen Button auf die Avatar-Anpassungsfunktion zu und können sofort beginnen, Gegenstände an ihren Avataren 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 ausgerüsteten 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 der Modifizierung ihrer Avatare zu erreichen. Dieser Prozess kann durch die Verwendung 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, an denen die Schritte unklar oder unbequem sind, und übermäßige Reibung zu identifizieren.