{"id":9177,"date":"2018-06-07T00:00:00","date_gmt":"2018-06-06T22:00:00","guid":{"rendered":"http:\/\/staging.anno-union.com\/devblog-user-interface\/"},"modified":"2021-04-26T12:48:23","modified_gmt":"2021-04-26T10:48:23","slug":"devblog-user-interface","status":"publish","type":"post","link":"https:\/\/www.anno-union.com\/de\/devblog-user-interface\/","title":{"rendered":"DevBlog: User Interface"},"content":{"rendered":"

[vc_row][vc_column width=”1\/12″][\/vc_column][vc_column width=”4\/6″][vc_column_text]Hi Annoholiker, mein Name ist Khajag Jabaghchourian und ich bin einer der UI Designer verantwortlich f\u00fcr Anno 1800\u2019s User Interface. Als ich dem UI Team von Ubisoft Blue Byte vor knapp sechs Monaten hinzusto\u00df, kam ich gerade rechtzeitig f\u00fcr unsere gro\u00dfe \u00dcberarbeitung des User Interface.
\nW\u00e4hrend der letzten Episode unseres AnnoCast hatte ich die Freude mit Euch \u00fcber dessen Style und die Funktionalit\u00e4t zu reden aber auch zu erl\u00e4utern, warum das Interface f\u00fcr Strategiespiele wie Anno besonders wichtig und auch trickreich in der Entwicklung ist. Wir haben dazu einiges an Feedback aus unseren Communities bekommen \u2013 eine hervorragende M\u00f6glichkeit um Euch alle auf einen Blick \u00fcber die Schulter eines UI Designers einzuladen.<\/p>\n

Was bedeuted UI und UX eigentlich?
\n<\/strong>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\u00fccken, immerhin das Erste, mit dem ein Spieler in Anno 1800 interagiert. Es besteht aus allen Interface Elementen eines Spiels, also zum Beispiel Buttons, Men\u00fcs, Informationsfenster und Boxen.
\nIn Eurem Kopf malt Ihr Euch eventuell schon ein Bild aus verschiedensten bunten Boxen und Icons aus. Diese visuelle Ebene, die wie ein Fensterrahmen \u00fcber dem eigentlichen Gameplay sitzt, beherbergt alle Informationen die ein Spieler ben\u00f6tigt, um zu verstehen was im Spiel geschieht und es Euch somit zu erm\u00f6glichen, mit dem Spiel \u00fcber Euren Input zu kommunizieren.
\nMan kann also durchaus sagen, dass Euch durch das UI erm\u00f6glicht mit dem Spiel zu kommunizieren, da es die Codesprache f\u00fcr den Spieler \u00fcbersetzt und wiederum die Eingabe der Tastatur in verst\u00e4ndliche Befehle f\u00fcr die Software umwandelt.<\/p>\n

Besonders Management Spiele, wie Anno, m\u00fcssen dem Spieler eine gro\u00dfe Flut an Informationen auf einfache und verst\u00e4ndliche Art zug\u00e4nglich machen. Diese User Experience (UX) stellt dabei die einfache Nutzbarkeit und Verst\u00e4ndlichkeit 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\u00fchren kann. Ruft Euch einfach mal das Anno Baumen\u00fc ins Ged\u00e4chtnis, welches Euch erm\u00f6glichen soll, komplexe Produktionsketten aus verschiedensten Geb\u00e4uden mit so wenig Klicks und Aufwand (Interaktionen) wie m\u00f6glich zu errichten.
\nWir wollen das Ihr Euch auf das eigentliche Spielen konzentrieren k\u00f6nnt, ohne Euch dabei mit l\u00e4stigen Suchspielen durch dutzende Fenster zu bel\u00e4stigen, um herauszufinden, welche Geb\u00e4ude eigentlich mit welcher Produktionskette verbunden sind. Das UX Design dient hierbei als Blaupause, welche die verschiedenen Schritte zum Erreichen des Ziels definiert, w\u00e4hrend das UI alle visuellen Elemente beinhaltet die Euch auf Eurer Reise begleiten.<\/p>\n

Warum ist das UI\/UX Design denn so besonders wichtig in Anno?
\n<\/strong>F\u00fcr ein komplexes Strategiespiel wie Anno 1800 ist ein gutes UI und UX Design entscheidender Faktor um eine gute Spielerfahrung zu gew\u00e4hrleisten. W\u00e4hrend 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\u00fcrde dies bedeuten, dass verschiedene UI Elemente auf dem Screen dargestellt werden um dann auf einen Klick diese Aktion auszuf\u00fchren.<\/p>\n

Aber es ist die unglaubliche Komplexit\u00e4t der Wirtschaft und des St\u00e4dtebaus das wir alle so an Anno lieben, richtig?\"\"Eine der gro\u00dfen Herausforderungen ist eine einfache L\u00f6sung daf\u00fcr zu finden, all die komplexen Spielinformationen auf eine verst\u00e4ndliche Art dem Spieler zu vermitteln.<\/p>\n

Nehmen wir mal die Handelsrouten als Beispiel: Laden -> Entladen -> Listen mit unz\u00e4hligen Items und Waren -> Inseln -> Schiffe -> manuelle Routenpunkte und das war nur ein Bruchteil der Informationen. \u00a0Ohne funktionales Design w\u00fcrden komplexe Strategiespiele den Spieler einfach mit Informationen \u00fcberw\u00e4ltigen.<\/p>\n

Um dieses Ziel zu erreichen, m\u00fcssen wir h\u00e4ufig die Funktionalit\u00e4t des Designs \u00fcber den k\u00fcnstlerischen Anspruch stellen. Indem unsere Form der Funktion folgt, k\u00f6nnen wir den kognitiven und physikalischen Arbeitsaufwand f\u00fcr den Spieler reduzieren.<\/p>\n

Das Anno 1800 UI Design<\/strong>
\nF\u00fcr Anno 1800 haben wir uns f\u00fcr ein klares Design entschieden, dass nur eine kleine Anzahl an Ornamenten, Materialien und Texturen verwendet. Mit der Funktionalit\u00e4t im Fokus zielten wir auf einen zeitgem\u00e4\u00dfen und definierten Look im Einklang mit unserem \u201eIndustrielle Revolution\u201c Hintergrund. Wir wollen die Augen des Spielers nicht \u00fcberladen und schnellen Zugang zu allen wichtigen Informationen erm\u00f6glichen. Wenn wir zu viele visuelle Elemente nutzen, w\u00fcrde das UI in den Wettbewerb mit dem Spiel um die Aufmerksamkeit des Spielers treten; solche Ablenkungen sch\u00e4digen sehr schnell dem Spielgef\u00fchl.
\nWas die Farbwahl angeht, haben wir uns f\u00fcr dunklere Farben f\u00fcr das HUD (Heads-Up-Display) entschieden. Da das HUD jederzeit im Spiel pr\u00e4sent ist, w\u00fcrden zu grelle Farben oder Kontraste schnell das Auge erm\u00fcden und weiterhin zu viel Aufmerksamkeit vom Spielgeschehen ziehen.
\nF\u00fcr Pop-up Informationen und Meldungen haben wir uns jedoch f\u00fcr hellere Farben entschieden, damit der Spieler sofort auf das auftauchende Fenster aufmerksam wird.<\/p>\n

Jetzt geht es an das Eingemachte: Der Schaffungsprozess
\n<\/strong>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 \u00fcber die Spiellogik, welche wir dem Spieler vermitteln sollen. Wir diskutieren dann im Team was hierbei die wichtigsten Informationen f\u00fcr 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\u00fcsst Ihr in der Lage sein, alle Informationen \u00fcber Schiffe, Routen, Waren, Inseln und manuelle Wegpunkte in einem Fenster sehen zu k\u00f6nnen.<\/p>\n

Im n\u00e4chsten 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 \u00fcber die Funktionalit\u00e4t und den Verlauf der Men\u00fcs, was uns erlaubt Prototypen zu bauen, in denen wir die UX testen k\u00f6nnen.
\n\"\"Sollten unsere Wireframes die gew\u00fcnschten Ergebnisse erzielen, k\u00f6nnen wir uns den visuellen Elementen des UI zuwenden. Hierf\u00fcr 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\u00dferdem eigene Icon Designer, welche f\u00fcr uns die n\u00f6tigen Icons herstellen, welche wir f\u00fcr unser User Interface ben\u00f6tigen. Das kann etwas so simples wie ein Button sein oder komplexe Elemente wie der Countdown f\u00fcr die Touristenf\u00e4hren, welche Ihr im letzten Stream sehen konntet.<\/p>\n

F\u00fcr das Erstellen der Mockups bis hin zu den fertigen Elementen nutzen wir Programme wie Adobe Illustrator und Photoshop sowie Adobe After Effects f\u00fcr die Animationen.<\/p>\n

Sobald wir also einen funktionalen Wireframe haben, ausgestattet mit allen Boxen und visuellen Elementen, ist es Zeit f\u00fcr die Implementierung ins Spiel!
\nZuerst werden die technischen Voraussetzungen mit unseren Programmierern abgesprochen. Die Programmierer bauen dann einen ein Skelett, dass quasi als Unterbau f\u00fcr unser UI dienen soll. Im letzten Schritt vollziehen wir die letzten \u00c4nderungen an dem UI und ziehen es dann auf das Skelett, um es im Spiel nutzbar zu machen.<\/p>\n

\n