DevBlog: User Interface

Zitat von Anno-Union/Bastian

Hi Annoholiker, mein Name ist Khajag Jabaghchourian und ich bin einer der UI Designer verantwortlich für Anno 1800’s User Interface. Als ich dem UI Team von Ubisoft Blue Byte vor knapp sechs Monaten hinzustoß, kam ich gerade rechtzeitig für unsere große Überarbeitung des User Interface.

Während der letzten Episode unseres AnnoCast hatte ich die Freude mit Euch über dessen Style und die Funktionalität zu reden aber auch zu erläutern, warum das Interface für Strategiespiele wie Anno besonders wichtig und auch trickreich in der Entwicklung ist. Wir haben dazu einiges an Feedback aus unseren Communities bekommen – eine hervorragende Möglichkeit um Euch alle auf einen Blick über die Schulter eines UI Designers einzuladen.

Was bedeuted UI und UX eigentlich?

Ich wette das die meisten von Euch mit dem Begriff User Interface, oder kurz UI, vertraut sind. Was erst einmal ein recht simplen Anschein macht, ist in der Gestaltung ein gut durchdachter und recht komplizierter Designprozess. Das UI ist, um es simpel auszudrücken, immerhin das Erste, mit dem ein Spieler in Anno 1800 interagiert. Es besteht aus allen Interface Elementen eines Spiels, also zum Beispiel Buttons, Menüs, Informationsfenster und Boxen.

In Eurem Kopf malt Ihr Euch eventuell schon ein Bild aus verschiedensten bunten Boxen und Icons aus. Diese visuelle Ebene, die wie ein Fensterrahmen über dem eigentlichen Gameplay sitzt, beherbergt alle Informationen die ein Spieler benötigt, um zu verstehen was im Spiel geschieht und es Euch somit zu ermöglichen, mit dem Spiel über Euren Input zu kommunizieren.

Man kann also durchaus sagen, dass Euch durch das UI ermöglicht mit dem Spiel zu kommunizieren, da es die Codesprache für den Spieler übersetzt und wiederum die Eingabe der Tastatur in verständliche Befehle für die Software umwandelt.

Besonders Management Spiele, wie Anno, müssen dem Spieler eine große Flut an Informationen auf einfache und verständliche Art zugänglich machen. Diese User Experience (UX) stellt dabei die einfache Nutzbarkeit und Verständlichkeit des UI sicher. Wir achten bei der UX darauf, dass alle Informationen schnell und einfach zu lesen ist, damit der Spieler wiederum im Spiel Befehle und Aufgaben mit den wenigsten Umwegen und dem minimalsten Aufwand durchführen kann. Ruft Euch einfach mal das Anno Baumenü ins Gedächtnis, welches Euch ermöglichen soll, komplexe Produktionsketten aus verschiedensten Gebäuden mit so wenig Klicks und Aufwand (Interaktionen) wie möglich zu errichten.

Wir wollen das Ihr Euch auf das eigentliche Spielen konzentrieren könnt, ohne Euch dabei mit lästigen Suchspielen durch dutzende Fenster zu belästigen, um herauszufinden, welche Gebäude eigentlich mit welcher Produktionskette verbunden sind. Das UX Design dient hierbei als Blaupause, welche die verschiedenen Schritte zum Erreichen des Ziels definiert, während das UI alle visuellen Elemente beinhaltet die Euch auf Eurer Reise begleiten.

Warum ist das UI/UX Design denn so besonders wichtig in Anno?

Für ein komplexes Strategiespiel wie Anno 1800 ist ein gutes UI und UX Design entscheidender Faktor um eine gute Spielerfahrung zu gewährleisten. Während Einheiten wie Schiffe ihre Befehle direkt vom Spieler erhalten, passieren die meisten Interaktionen zwischen dem Spieler und dem UI. In einem typischen Action Spiel finden die meisten Interaktionen mit der Welt durch die direkte Eingabe von Befehlen an den Spielercharakter statt. Hier reagiert der Spielercharakter auf einfache Eingabe durch das Gamepad oder die Tastatur, um zB. auf einen simplen Knopfdruck einen Zauber zu wirken. In einem UI gesteuerten Spiel wie Anno würde dies bedeuten, dass verschiedene UI Elemente auf dem Screen dargestellt werden um dann auf einen Klick diese Aktion auszuführen.

Aber es ist die unglaubliche Komplexität der Wirtschaft und des Städtebaus das wir alle so an Anno lieben, richtig?

Eine der großen Herausforderungen ist eine einfache Lösung dafür zu finden, all die komplexen Spielinformationen auf eine verständliche Art dem Spieler zu vermitteln.

Nehmen wir mal die Handelsrouten als Beispiel: Laden -> Entladen -> Listen mit unzähligen Items und Waren -> Inseln -> Schiffe -> manuelle Routenpunkte und das war nur ein Bruchteil der Informationen. Ohne funktionales Design würden komplexe Strategiespiele den Spieler einfach mit Informationen überwältigen.

Um dieses Ziel zu erreichen, müssen wir häufig die Funktionalität des Designs über den künstlerischen Anspruch stellen. Indem unsere Form der Funktion folgt, können wir den kognitiven und physikalischen Arbeitsaufwand für den Spieler reduzieren.

Das Anno 1800 UI Design

Für Anno 1800 haben wir uns für ein klares Design entschieden, dass nur eine kleine Anzahl an Ornamenten, Materialien und Texturen verwendet. Mit der Funktionalität im Fokus zielten wir auf einen zeitgemäßen und definierten Look im Einklang mit unserem „Industrielle Revolution“ Hintergrund. Wir wollen die Augen des Spielers nicht überladen und schnellen Zugang zu allen wichtigen Informationen ermöglichen. Wenn wir zu viele visuelle Elemente nutzen, würde das UI in den Wettbewerb mit dem Spiel um die Aufmerksamkeit des Spielers treten; solche Ablenkungen schädigen sehr schnell dem Spielgefühl.

Was die Farbwahl angeht, haben wir uns für dunklere Farben für das HUD (Heads-Up-Display) entschieden. Da das HUD jederzeit im Spiel präsent ist, würden zu grelle Farben oder Kontraste schnell das Auge ermüden und weiterhin zu viel Aufmerksamkeit vom Spielgeschehen ziehen.

Für Pop-up Informationen und Meldungen haben wir uns jedoch für hellere Farben entschieden, damit der Spieler sofort auf das auftauchende Fenster aufmerksam wird.

Jetzt geht es an das Eingemachte: Der Schaffungsprozess

Soweit so gut, aber wie designen wir eigentlich die UX und bauen dann das UI? Wenn wir an einem neuen UI Element arbeiten, versorgt uns zu aller erst Game Design mit allen wichtigen Spielinformationen und Details über die Spiellogik, welche wir dem Spieler vermitteln sollen. Wir diskutieren dann im Team was hierbei die wichtigsten Informationen für den Spieler sind und welche Befehle er dem Spiel mit dem Interface Element geben soll. Die Handelsrouten sind hier wieder ein gutes Beispiel, denn hier müsst Ihr in der Lage sein, alle Informationen über Schiffe, Routen, Waren, Inseln und manuelle Wegpunkte in einem Fenster sehen zu können.

Im nächsten Schritt schnappen wir uns sein paar Stifte und Papier und fangen damit an, die sogenannten Wireframes zu skizieren. Die Wireframes dienen al seine Art Konstruktionsplan und beinhalten alle Informationen über die Funktionalität und den Verlauf der Menüs, was uns erlaubt Prototypen zu bauen, in denen wir die UX testen können.

Sollten unsere Wireframes die gewünschten Ergebnisse erzielen, können wir uns den visuellen Elementen des UI zuwenden. Hierfür erstellen wir Mock-Ups, definieren Text und Farbauswahl sowie die Formen die wir benutzen wollen. Concept Art von unserem Art Team dient hierbei als Inspiration und kreative Richtlinie. Unser UI Team hat außerdem eigene Icon Designer, welche für uns die nötigen Icons herstellen, welche wir für unser User Interface benötigen. Das kann etwas so simples wie ein Button sein oder komplexe Elemente wie der Countdown für die Touristenfähren, welche Ihr im letzten Stream sehen konntet.

Für das Erstellen der Mockups bis hin zu den fertigen Elementen nutzen wir Programme wie Adobe Illustrator und Photoshop sowie Adobe After Effects für die Animationen.

Sobald wir also einen funktionalen Wireframe haben, ausgestattet mit allen Boxen und visuellen Elementen, ist es Zeit für die Implementierung ins Spiel!

Zuerst werden die technischen Voraussetzungen mit unseren Programmierern abgesprochen. Die Programmierer bauen dann einen ein Skelett, dass quasi als Unterbau für unser UI dienen soll. Im letzten Schritt vollziehen wir die letzten Änderungen an dem UI und ziehen es dann auf das Skelett, um es im Spiel nutzbar zu machen.

Hier geht es zum Video: https://www.anno-union.com/devblog-user-interface/

Ein langer Weg von Skizze bis fertiger UI

Wir hoffen das wir Euch einen guten Einblick in Anno’s UI/UX Design geben konnten und warum es so wichtige für Strategiespiele ist. Bis zur Veröffentlichung des Spiels werden wir weiter an unserem Interface arbeiten und es ständig verbessern. Leider bekommen wir selten Feedback von Spielern, da das UI etwas ist das viele Spieler als gegeben erachten aber selten im Detail diskutieren.

Und hier benötigen wir die Hilfe der Anno Union: Wir würden gerne Feedback über den momentanen Stand der UI bekommen, wie es Euch im Stream und in diesem DevBlog präsentiert wurde. Gefällt Euch die visuelle Richtung, die wir eingeschlagen haben? Gibt es Interface Elemente die Euch in alten Anno Teilen besonders gefallen haben? Was ist Euch an dem UI in Anno 1800 besonders wichtig?

Wir sind gespannt auf Eure Kommentare!

Alles anzeigen