Shadowlands: Ein Einblick in die überarbeitete Benutzeroberfläche der Charaktererstellung

Mit der Veröffentlichung von Shadowlands haben sich auch neue Möglichkeiten ergeben, die Charaktererstellung zu überarbeiten und zu optimieren. Werft mit Senior UI Designer Jeff Liu einen Blick hinter die Kulissen, um mehr über die Beweggründe hinter diesen Änderungen zu erfahren.

Seid gegrüßt, Bewohner von Azeroth! Mein Name ist Jeff Liu und ich bin Senior UI Designer im Team für die Benutzeroberfläche von World of Warcraft. Ich möchte ein paar Einblicke in die Überarbeitung der Charaktererstellung mit euch teilen, die im Rahmen von Shadowlands veröffentlich wurde. Anlässlich der tollen neuen Anpassungsoptionen, die kürzlich eingeführt wurden, wollen wir den Vorhang zurückziehen und euch zeigen, was es mit den Designentscheidungen zur Benutzeroberfläche auf sich hat, die wir hinter den Kulissen getroffen haben.

Zuvor war ich an der Überarbeitung des Transmogrifikationssystems und des Auktionshauses beteiligt. Die Neugestaltung von alten Benutzeroberflächen ist der Aspekt meiner Arbeit, der mir mit Abstand am besten gefällt. Deshalb habe ich mich unglaublich gefreut, die Charaktererstellung überarbeiten zu können.

Dieses Projekt war Teil der Initiative, das Spielerlebnis für neue Spieler zu verbessern, die auch die Insel des Verbannten im Fokus hatte, da dort die neuen Spieler beginnen. Die Charaktererstellung ist das erste Fenster, mit dem neue Spieler interagieren. Also wollten wir es modernisieren, um einen guten ersten Eindruck zu machen. Das Team für Charakterkunst war bereits dabei, für Shadowlands viele neue Anpassungsoptionen hinzuzufügen, also war es der perfekte Zeitpunkt, um die Benutzeroberfläche zu aktualisieren.

Das neue Layout

Zum Vergleich seht ihr hier, wie die alte Charaktererstellung aussah:

Eines der ersten Dinge, die wir probiert haben, war, das Auswahlmenü für Klassen und Völker aufzuteilen. So würde man dann im ersten Fenster die Klasse auswählen und danach erst das Volk:

Dieses Beispiel zeigt eindrücklich, wie jemand, der einen Nachtelf spielen möchte, wiederholt zum vorherigen Fenster zurückkehren und eine andere Klasse auswählen muss, um alle für Nachtelfen verfügbaren Optionen zu sehen.

Ja, das war ziemlich ungeschickt.

Da das so gar nicht klappen wollte, hätten wir fast das alte Layout behalten und einfach nur die Grafik aktualisiert. Doch als wir kurz vor Schluss noch Ideen gesammelt haben, haben meine Kollegen Crash Reed und Ray Ocampo ein Konzept vorgeschlagen, das die Völker in zwei gegenüberliegende Seiten aufteilt:

Besonders stark an diesem Layout ist die Gegenüberstellung von Horde und Allianz, die sofort den Fraktionskrieg hervorhebt. Uns hat gefallen, wie simpel und frisch dieses Design war, also haben wir Vollgas gegeben!

Immer dem Bauchgefühl folgen

Mit diesem neuen Layout im Hinterkopf habe ich noch mal die Menge an Informationen überdacht, die Spieler in dieser Ansicht erhalten. Das alte Fenster der Charaktererstellung hatte unheimlich viele Informationen in Form von Textbeschreibungen:

Das Problem von zu vielen Informationen (egal wie nützlich) ist, dass sie es Leuten erschweren können, eine eigentlich ganz simple Entscheidung zu treffen.

Wir haben das neue Fenster der Charaktererstellung so entworfen, dass neue Spieler nicht in die sogenannte Paralyse durch Analyse verfallen, bei der sich Spieler aufgrund der Vielfalt an Möglichkeiten nicht zu einer Entscheidung durchringen können. Wir haben den Textanteil stark gekürzt und auf visuelle wie auditive Erklärungen der Völker und Klassen gesetzt. Wir wollten lieber zeigen, wie ein Magier einen Feuerball wirkt, als es wortreich zu beschreiben.

Die meisten neuen Spieler kennen diese Fantasy-Archetypen bereits aus der Popkultur. Es ist allgemein bekannt, dass ein Krieger ein Schwert führt, eine relativ schwere Rüstung trägt und ein Nahkämpfer ist.

Wir haben die Klassen so geordnet, dass neue Spieler schnell eine Klasse finden können, die sie verstehen:

Die ersten drei sind die eindeutigsten und bekanntesten Archetypen. Die nächsten drei sind schon etwas schwerer zu fassen. Zum Beispiel weiß jemand, der sich nicht mit Videospielen auskennt, womöglich nicht, was ein Priester wohl macht. Danach kommen die Hybridklassen, die komplexer sind.

Es ist wichtig zu unterstreichen, dass dieses Design nicht darauf basiert, wie schwer eine Klasse zu spielen ist, sondern wie einfach es ist, die Konzepte hinter diesen Klassen zu verstehen – also ohne zusätzliche Erklärungen zu wissen, was sie macht.

Völker wiederum sind größtenteils eine ästhetische Entscheidung. Wir wollten nicht, dass neue Spieler sich zu viele Gedanken über Volksfähigkeiten machen, also haben wir sie standardmäßig verborgen:

Für uns ist es in Ordnung, wenn neue Spieler nicht beim ersten Versuch einen Charakter erstellen, den sie für immer spielen werden. Im Verlauf des tatsächlichen Spiels erfahren sie viel mehr über Völker und Klassen, als wir je im Fenster der Charaktererstellung erklären könnten.

Wir möchten neue Spieler ermutigen, sich einfach das optisch coolste Volk und ihren bevorzugten Klassenarchetypen auszuwählen und loszulegen!

Taten statt Worte

Nachdem wir den ganzen Text entfernt hatten, wollten wir neue Animationen erschaffen, die das Klassengefühl richtig rüberbringen.

Anfangs haben wir ausprobiert, wie aufwändig diese Animationen sein sollten. Dabei haben wir besonders auf die Dauer geachtet, da sie sich nicht zu lange hinziehen sollten.

Hier seht ihr die ersten Tests von Lead Animator Ian Lang:

Anmerkung: Im letzten Ausschnitt sieht man ein frühes Konzept, das wir ausprobiert hatten. Der Charakter steht auf einem Podest vor einem großen Stoffbanner. Hier seht ihr eine andere Version dieses Konzepts:

Nachdem wir uns auf eine Darstellungsform festgelegt hatten, hat das Animationsteam für jede Klasse eine Sequenz erstellt. Dabei haben sie mit dem Team für Spezialeffekte zusammengearbeitet, um die passenden Effekte für die gezeigten Fähigkeiten zu finden. Als wir damit fertig waren, hat einer unserer Sounddesigner die Animationen passend untermalt.

Ich denke, wir sind uns alle einig, dass die Teams für Animation, Spezialeffekte und Sound großartige Arbeit geleistet haben, um diese Klassen richtig heroisch wirken zu lassen. Die Animationen wurden zum Höhepunkt der neuen Charaktererstellung.

Immer im Fokus

Eines unserer wichtigsten Ziele war es, die Aufmerksamkeit auf das Charaktermodell in der Mitte des Bildschirms zu lenken. Wir wollten, dass Spieler das Gefühl haben, einen Superhelden zu entwerfen. Diese Philosophie liegt vielen Entscheidungen zugrunde, die wir beim Design dieser Ansicht getroffen haben.

Statt des traditionellen Grafikstils von WoW haben wir uns für eine minimalistischere Ästhetik entschieden. Wir haben aufwändige Illustrationen – wie die alten Fraktionsbanner an den Seiten – entfernt, da sie eine optische Ablenkung waren, die dem Charakter die verdiente Aufmerksamkeit nimmt.

Wir haben einen großen Schatten am Bildschirmrand platziert, um dem Charakter einen Rampenlichteffekt zu geben. So haben wir im Prinzip eine Vignette kreiert.

Wir haben auch die Elemente der Benutzeroberfläche so positioniert, dass die Augen dorthin gelenkt werden, wo man hinschauen soll.

Zu guter Letzt verschwimmt der Hintergrund, wenn die Kamera im Anpassungsmodus hereinzoomt. Das lässt den Charakter herausstechen und lenkt den Fokus auf seine Merkmale.

Neue Spieler

Neue Spieler sehen eine etwas andere Version der Charaktererstellung als erfahrene Spieler. Ich wollte ihnen eine simplere, aufgeräumtere Erfahrung bieten.

So werden nur die Hauptvölker samt Namen unter den Porträts angezeigt.

Dann gibt es noch ein paar subtilere Unterschiede.

Der erste Charakter, den man als erfahrener Spieler sieht, ist eine rein zufällige Kombination aus Volk und Klasse. Neue Spieler sehen als ersten Charakter immer einen Menschen- oder Orckrieger (mit zufälligem Geschlecht). Auch hier geht es um die Idee, neuen Spielern den Einstieg zu erleichtern, indem man ihnen etwas zeigt, das sie bereits kennen.

Auch zufällig generierte Charaktere sind bei neuen Spielern ein bisschen anders. Da das ihr erster Einstieg in das Universum von Warcraft sein könnte, war es mir wichtig, dass jedes Volk leicht erkennbar ist. Daher haben wir bei zufällig generierten Charakteren Optionen deaktiviert, die das Gesicht verdecken – wie Tätowierungen, Kriegsbemalung und Kopfbedeckungen.

Aber keine Sorge: Sobald Spieler im Anpassungsmodus sind, können sie diese Optionen frei auswählen.

Abschließend sehen neue Spieler einen Hinweis auf dem Anpassungsbildschirm:

Aus Nutzertests haben wir gelernt, dass manche neuen Spieler nervös werden, wenn es daran geht, ihren Charakter zu finalisieren. Aber das ist auch völlig nachvollziehbar, oder? Wenn man davon ausgeht, dass man den Charakter danach nicht mehr anpassen kann, nimmt man sich viel Zeit, um alles perfekt zu machen. Dieser Hinweis gibt ihnen Selbstvertrauen und ermutigt sie, schneller ins Spiel einzutauchen.

Charakteranpassung

Apropos Charakteranpassung, schauen wir uns doch ein paar frühe Modelle dieser Ansicht an. Hier seht ihr, wie sich das Design auf Basis des alten Layouts weiterentwickelt hat:

Irgendwann habe ich mit einem freiförmigeren Layout experimentiert, bei dem die Optionen sich nicht in Kästchen befanden:

Zwar sah uns das schlussendlich zu überladen aus, aber dafür mochten wir die Offenheit des Designs. Also habe ich es mit ein paar früheren Versionen kombiniert, bei denen wir die Optionen in Kategorien eingeteilt hatten:

Jetzt nähern wir uns allmählich dem finalen Layout an!

Die Optionsauswahl

Euch wird sicher aufgefallen sein, dass die Optionen beim letzten Modell durch Schieberegler eingestellt werden. Diese Bedienelemente für die Benutzeroberfläche wurden während der Entwicklung oft überarbeitet.

Beim alten Layout gab es große Vorschauporträts auf der rechten Seite. Wenn ihr euch hier diese Beispiele ansehet, merkt ihr vielleicht, dass die Unterschiede zwischen den unterschiedlichen Gesichtsoptionen nur schwer zu erkennen sind:

Außerdem sind sie nicht sonderlich skalierbar und stehen unserem Ziel entgegen, den Charakter in der Mitte in den Fokus zu rücken.

Also haben wir nach Bedienelementen für die Benutzeroberfläche gesucht, die diese Porträts ersetzen können.

Ich wollte keine Mischung aus verschiedenen Bedienelementen (wie Kontrollkästchen, Schaltflächen und Farbwählern), da das den Bildschirm zu überladen und schwer erfassbar machen würde. Ich wollte ein einzelnes Bedienelement, das bei allen Optionsarten funktioniert.

Am wichtigsten war allerdings, Spielern zu ermöglichen, schnell zwischen zwei beliebigen Optionen zu wechseln, um sie miteinander zu vergleichen.

Die ersten paar Entwürfe konnten dieser Anforderung nicht gerecht werden. Es war sehr umständlich, zwischen Optionen zu navigieren, die weit voneinander entfernt waren.

Mit Schiebereglern konnte man zwar schnell umherspringen, aber nicht präzise. Schieberegler werden normalerweise auch dafür verwendet, sich zwischen zwei Extremen zu bewegen (wie klein und groß). Das war bei den meisten Optionen aber nicht der Fall.

Letztendlich habe ich die mehrspaltige Dropdown-Liste entwickelt, die all unsere Ziele erfüllen konnte:

1. Man kann schnell zwischen zwei beliebigen Optionen springen.
2. Man kann alle Optionen gleichzeitig sehen.
3. Es handelt sich um ein einzelnes, vielfältiges Bedienelement der Benutzeroberfläche, das sich sowohl bei Namen als auch bei Farben verwenden lässt. In manchen Fällen mischen wir sogar beides in derselben Dropdown-Liste.
4. Der Fokus bleibt beim Charakter in der Mitte.
5. Und das vielleicht coolste Feature: Man erhält eine Vorschau der Optionen in Echtzeit, wenn man mit der Maus über sie fährt.

Hinweis: Ich bin ein riesiger Overwatch-Fan. Wie viele Overwatch-Referenzen könnt ihr bei den Optionsnamen finden?

Die Kategoriesymbole

Alle Anpassungsoptionen befinden sich in einer von drei Kategorien. Hier seht ihr, wie die Kategorien und ihre Symbole sich entwickelt haben:

Ursprünglich hatte ich fünf Kategorien geplant, aber nachdem ich das im Spiel getestet hatte, hat sich das wieder geändert.

Ich fand es etwas ungeschickt, die Haaroptionen in der zweiten Kategorie zu haben, da man oft die Frisur als erstes ändert. Also habe ich sie in die erste Kategorie mit den Gesichtsoptionen verschoben.

Bei den meisten Völkern gibt es nicht viele Optionen für Körper und Tätowierungen, also habe ich diese beiden Kategorien auch kombiniert. Und so sind wir letztendlich bei drei Kategorien gelandet.

Barbiersessel

Vielleicht erinnert ihr euch, dass sich die Benutzeroberfläche des Barbiersessels völlig von der Charaktererstellung unterschied. Mit der Überarbeitung fanden wir es sinnvoll, für beide diese Anpassungsfenster dieselbe Benutzeroberfläche zu nutzen.

Manche Barbiersessel waren zu dunkel, da die Beleuchtung auf der Umgebung basierte. In manchen Fällen hat das auch die Farbwahrnehmung beeinträchtigt. Zum Beispiel konnte ein Grünton gelb aussehen.

Das Künstlerteam hat dieses Problem gelöst, indem es den Charakter in ein komplett neutrales Licht hüllt, wenn der Barbiersessel aktiviert wird. So erhaltet ihr eine gut beleuchtete und farbechte Ansicht.

Neuerdings kann man beim Barbiersessel auch das Geschlecht des Charakters ändern. Hier ist ein Video des allerersten Geschlechtstauschs, aufgenommen vom Entwickler, der die Funktion implementiert hat.

Fehler

Im Laufe des Projekts mussten wir auch einige Grafikfehler ausbügeln:

Ihr könnt dem QA-Team dafür danken, euch diesen Albtraum erspart zu haben!

Bis zum nächsten Mal

Die Überarbeitung der Charaktererstellung war nur durch die Zusammenarbeit von Charaktergestaltern, Animatoren, Produzenten, Testanalytikern, Sounddesignern, UX-Forschern und Ingenieuren möglich (deren bereits veröffentlichten Artikel zu dem Thema findet ihr hier!). Wir hoffen, dass wir eine flexible, moderne Benutzeroberfläche geschaffen haben, die in den kommenden Jahren Millionen von Charaktere zum Leben erwecken wird.

Ich hoffe, euch hat dieser Einblick in die Überarbeitung der Charaktererstellung gefallen. Danke fürs Lesen!

Jeff Liu
Senior UI Designer, World of Warcraft