Alt-F4 #17 – Interface Design Philosophie 11.12.2020
übersetzt von Nanogamer7, dexteritas, lektoriert von marceljoint, EDLEXUS
In der dieswöchigen Ausgabe von Alt-F4 nimmt Therenas eine Seite aus dem FFF Buch und erzählt uns über den Entwicklungsprozess des nächsten großen Updates seiner Mod, Factory Planner, wobei er in etwas philosophische Gedanken über Interface Design eintaucht. Und Dr_Doof teilt ein gemütliches kleines Weihnachtsevent mit uns, welches von der Red Circuit Mannschaft organisiert ist.
Interface Design Überlegungen Therenas
In den letzten paar Monaten habe ich an einem großen Redesign meiner Factory Planner Mod gearbeitet, und dachte mir, es wäre interessant, einige meiner Überlegungen über das Design zu teilen, die mit eingeflossen sind. Ich werde mich auf die interessantesten Teile des Hauptinterface konzentrieren, da sie den komplexesten Teil des Redesign darstellen und die meiste Planung und Überlegung erfordert haben.
Falls dir die Mod nicht bekannt ist, ist das kein Problem. Ich werde auch auf meine generelle Herangehensweise eingehen, welche auch auf andere Situationen zutrifft; die Mod ist nur die Lupe, durch die ich diese Gedanken fokussiere. Du musst auch kein Designer sein, um ihnen zu folgen (ich bin keiner); gutes Design sollte für jeden, der es sieht, offensichtlich sein.
Übersicht
Also, werfen wir doch mal einen Blick darauf! Die linke Seite dieser Vergleiche zeigt immer die aktuelle Version, während auf der rechten Seite das neue und bessere Design abgebildet ist. Als erstes will ich dir einen Überblick geben, um dich einmal an die Modifikation zu gewöhnen.
Wieso sieht aber die alte Version so flach aus? Der Hauptgrund dafür ist, dass das Design von den Zeiten von Factorio 0.16 abstammt, vor der Interface Design Revolution von 0.17. Das heißt, sie wurde in einer Zeit designt, in der die Factorio UI noch ziemlich anders ausgeschaut hat, und die Werkzeuge, die Modder zur Verfügung hatten, waren wesentlich limitierter als die heutigen. Trotzdem hab ich mich mit dem zurechtgefunden, was ich hatte, und meiner Meinung nach ist das Interface von einer Nutzungsperspektive ziemlich gut geworden, auch wenn es visuell nicht ganz so schön war.
Den adleräugigen unter euch ist vielleicht aufgefallen, dass die erste Version der Mod für Factorio 0.17, und nicht 0.16 veröffentlicht wurde. Was ist dann meine Ausrede, nicht alles vor dem Release auf die neuen visuellen Standards zu aktualisieren? Ich muss priorisieren, mit was ich meine Zeit verwende, und das Hinzufügen von fehlenden Must-have Features (wie Module und Effektverteiler) war wichtiger als das Interface umzustrukturieren.
Diese Logik blieb wahr für eine lange Zeit; es gab immer etwas, das ich zuvor verbessern musste. Alles ist ein Kompromiss (vor allem beim Design, wie wir gleich sehen werden!), und erst vor ein paar Monaten lohnte sich dieses Redesign für mich. Ein relevanter Faktor ist, dass die Aufgabe sehr viel Arbeit erforderte, ein komplettes Überdenken des Interface, und neu Schreiben von tausenden Zeilen an kompliziertem Code war notwendig. Sicherlich nichts, was du an einem Sonntagnachmittag zusammenpfuschen willst.
Bevor wir ins Detail gehen, möchte ich ein bisschen Terminologie klären. Das Wort Design hat mehrere verschiedene Bedeutungen, je nach Kontext. In diesem Artikel möchte ich das Design nicht im visuellen Sinne besprechen; ich möchte mehr oder weniger Wubes visuellen Stil imitieren, nur in ein paar wenigen Punkten variierend. Das ist wesentlich sparsamer, da ich einfach deren harte Arbeit wiederverwenden kann, und es macht auch mehr Sinn, es ähnlich zum Basisspiel zu gestallten, damit es besser zusammen passt. Die Bedeutung von Design, in die ich aber schon eingehen will, ist über das Layout und die Interaktionen, die ich überlegen musste.
Aktionsknöpfe
Die rot-markierten Knöpfe erlauben es dir, verschiedene Aktionen über die aktuell ausgewählte Subfabrik durchzuführen, jene, dessen Knopf Gelb markiert ist. Ein Problem mit dem alten Design ist, dass diese Knöpfe ziemlich Platz verbrauchen und viel leeren Platz in der Mitte verschwenden. Durch die Umwandlung von Text- in Icon-Schaltflächen wird ihre Größe deutlich reduziert und sie können über die (ebenfalls umgewandelte) Liste der Unterfabriken verschoben werden, wodurch viel Platz frei wird, der es den übrigen Elementen erlaubt, nach oben zu rücken und mehr Platz für Rezeptzeilen zu schaffen.
So weit, so gut. Die Icon-basierten Knöpfe schauen meiner Meinung nach auch hübscher aus, da sie besser in die Factorio Ästhetik passen. Alle nebeneinander über der Liste an Subfabriken zu haben macht es zusätzlich eindeutiger, zu welchem Teil des Interface sie zugehören. Hübsch. Trotzdem gibt es einige Nutzungsherausforderungen (Kompromisse), die von dieser Änderung hinzugefügt werden, was der Grund ist, weshalb ich das alte Design so lange behalten hab.
Der offensichtlichste ist, dass Icons fast nie intuitiver als Textbeschriftungen sind; Icons haben immer Raum zur Interpretation. Spieler, die neu zur Mod sind, müssen zuerst die Knöpfe erkunden, darüber gehen und die Beschriftung lesen, um zu lernen, was jeder Knopf macht. Die Farbe des ‘Hinzufügen’ und ‘Löschen’ Knopf helfen hierbei ein bisschen, denn sie spiegeln das Vanilla-Interface.
Der weniger offensichtlichere Grund ist sehr interessant für mich. Es gibt einen Aktionsknopf, der im alten Design ziemlich heraussticht. Es ist der Erste, welcher explizit ‘Neue Subfabrik’ sagt, während die anderen nur implizieren, dass die Aktion mit einer Subfabrik zu tun hat. Kein großes Problem, wirst du vielleicht denken, oder vielleicht ein Versehen beim Designen vom Interface; es wäre logischer und konsistenter, es für jeden Knopf wegzulassen. Es hinzuzufügen hat aber einen unterbewussten Effekt auf den Nutzer: Er merkt sich, dass das, was er zusammenbaut, eine Subfabrik genannt wird. Nirgendwo sonst wird dieser Name verwendet, und trotzdem weiß jeder Nutzer der Mod, was eine Subfabrik ist, weil der Knopf es impliziert. Das erlaubt es mir, diese Terminologie frei überall anders in Beschreibungen und Beschriftungen zu verwenden, ohne sie jedes Mal zu erklären, was sehr mächtig ist. So eine geteilte Sprache zu bauen ist meiner Meinung nach wichtig, sowohl bei der Verwendung des Interfaces, als auch für die Kommunikation zwischen Entwickler und Spieler über Bugs und Features.
Dieses Beispiel im speziellen zeigt die auftretenden Kompromisse beim Design ziemlich gut, finde ich. Wenn ich aber zwei Absätze lang erklären kann, warum das alte Interface besser ist, wieso würde ich es ändern wollen? Naja, es ist ein Kompromiss. Ich habe mein Urteilsvermögen verwendet, um zu entscheiden, dass trotz mancher schlechterer Sachen das Endresultat als Summe besser ist. Es ist wichtig zu beachten, dass man diese Änderungen nicht in Isolation betrachten kann. Einen Teil leicht schlechter zu machen ist ein guter Kompromiss, wenn es einem anderen Teil, wie den Subfabriken (siehe unten), erlaubt wesentlich besser zu werden.
Subfabrik-Knöpfe
Die Subfabriken-Knöpfe. Oh, die Subfabriken-Knöpfe. Sie erlauben es dir die verschiedenen Subfabriken, die du definiert hast, auszuwählen. Sie haben viele Kopfschmerzen über die letzten zwei Jahre bereitet, und ich bin froh, sie endlich loszuwerden. Sie blieben seit Beginn visuell unverändert, und obwohl die Implementierung ein paar Mal verändert wurde, waren sie immer ein gigantischer Haufen an Hacks. Auch wenn das nicht direkt mit dem Design zu tun hat, muss ich meinen Schmerz ein bisschen teilen, und ich glaube, es ist interessant genug, einen Blick hinter die Vorhänge zu bekommen, wie so ein Hack zustande kommt.
Dir fällt eventuell auf, dass die alten Knöpfe eine nichtproportionale Schriftart verwenden. Sie sind die einzigen Knöpfe im gesamten Interface, die das tun, und es war keine Design-Entscheidung meinerseits, sondern eine Notwendigkeit. Die Art, in der ich sie in das Interface integriert hab, warf Probleme auf, die ziemlich kreativere Behelfslösungen erforderten.
Das signifikanteste Problem ist, dass ich wissen musste, wann eine neue Zeile anfangen muss, weil die erste voll war. Factorio bietet keinen Weg, das automatisch zu tun. Also musste ich wissen, wie breit jeder Knopf war. Das war nicht trivial, da deren Länge von dem Subfabriknamen abhängt, gewählt vom Nutzer. Das Spiel sagt es mir nicht, also musste ich mir das selbst ausrechnen.
Mein erster, naiver Versuch war, eine proportionale Schriftart zu verwenden. Ich habe dummerweise die Pixelbreite jedes einzelnen Buchstaben, der in der Schriftart vorkam, bestimmt. Dann hab ich dynamisch die Breite aller einzelnen Buchstaben für jeden Buchstaben berechnet. Hätte ich damals über Unterschneidung gewusst, hätte ich das erst nicht probiert. Schau dir den Wikipediaartikel dazu für mehr Details an, aber kurzgefasst wird die Distanz zwischen zwei Buchstaben dynamisch angepasst, damit der Text für uns „richtig“ ausschaut, wie du hier sehen kannst. Das heißt, dass es ziemlich unpraktisch ist, die Breite von Knöpfen mit einer proportionalen Schrift vorherzusagen; die Idee war also umsonst.
Bestimmt das zu berechnen, bin ich zu einer nichtproportionalen Schriftart gewechselt, welche nicht dieses Unterschneidungsproblem hat; jeder Buchstabe nimmt jedes Mal immer genau gleich viel Platz ein, garantiert. Das ist, was ich brauchte, und nach etlichem Herumprobieren gelang es mir die Breite aller Knöpfe genau zu berechnen und meine sehr unübersichtliche Liste an Subfabriken möglich zu machen. Im Nachhinein hätte ich nach einem alternativem Design suchen sollen, anstatt in dieses Chaos einzutauchen. Die Lektion hier ist, dass es manchmal besser ist, ein Design zu verwerfen, sollte sich die Implementation als zu kompliziert und/oder dumm erweisen.
Die Überlegungen für das Redesignen der Subfabrikenliste waren recht einfach: Ich musste einiges an Platz sparen. Die alten Knöpfe verbrauchten ziemlich viel davon, vor allem wenn du genug Subfabriken hast, um eine zweite Reihe auszufüllen. Sie in eine vertikale Liste zu ändern würde alle der obigen technischen Probleme auf einmal lösen, und gleichzeitig wäre es auch ein einfach natürlicheres Layout. Das GUI Element, in dem sie sich befinden, heißt immerhin listbox.
Ich möchte jetzt darauf eingehen, warum mehr vertikaler Platz ein zentrales Ziel dieses Redesigns war. Ich habe es vorher erwähnt, und es gibt einige Argumente dafür. Als erstes sind die Rezeptreihen der Hauptinhalt, den du sehen und mit dem du interagieren wirst, also macht es Sinn, so viel vom Bildschirm wie möglich damit auszufüllen. Alle anderen Teile des Interface, und vor allem die Liste and Subfabriken sind nachrangig.
Ein weiterer Grund die Subfabrikenliste zu überarbeiten, hat mit der Optimierung für Bildschirmformate zu tun. Moderne Bildschirme sind 16:9 oder noch breiter, das heißt, dass sie breiter als hoch sind, und dadurch vertikaler Platz teurer als horizontaler ist. Wenn du Sachen so verschieben kannst, dass sie mehr horizontalen Platz als vertikalen verwenden, ist das fast immer ein effizienterer Nutzen deiner Bildfläche. In diesem Falle zahlt sich das besonders aus, da Rezeptreihen nicht wirklich die ganze Breite des Fensters brauchen, und in den meisten Fällen sowieso horizontalen Platz verschwenden. Daher bekommen wir mehr vertikalen Platz, ohne irgendwas zu verlieren, indem wir etwas der übrigen horizontalen Fläche aufgeben, was offensichtlich ein guter Kompromiss ist.
Gegenstandsboxen
Als letztes möchte ich noch einen Blick auf Gegenstandboxen werfen, welche das Infopanel auf der linke Seite des alten Design beinhalten. Sie geben eine Übersicht über den Netto Ein- und Ausgang deiner Subfabrik, und das Infopanel zeigt einige zusätzliche Informationen und Funktionen. Die alte Lösung war sehr elegant, aber zeigte sich teils als inflexibel. Wieder einmal nimmt sie viel vertikalen Platz ein, welcher, wie du bereits weißt, teuer ist.
Der erste Streitpunkt bezüglich Flexibilität ist die fixierte Höhe aller vier Teile; sie mussten wegen der Art, in der das Layout funktioniert, alle die selbe Größe haben. Wie wir im Bildschirmfoto sehen können, sind die Boxen mit den Gegenständen bei weitem nicht voll, viel Platz verschwendend, nur weil das Infopanel eine bestimmte Größe haben muss. Im neuen Design ist es dem Interface frei, die Boxen zu verkleinern, wenn es keinen Grund gibt, größere zu haben. Das macht (du hast es erraten) vertikalen Platz frei, was wir mögen. Ich hab auch die Breite der individuellen Boxen variabel gemacht, wodurch die Zutatenbox doppelt so groß wie ihre Geschwister sein kann, wenn sie mehr Gegenstände zeigt, was Sinn ergibt, weil du meistens mehr Zutaten als Produkte oder Nebenprodukte hast.
Der andere Punkt bezüglich Flexibilität ist der Inhalt des Infopanels. Im alten Design hat seine Größe direkt bestimmt, wie groß die Gegenstandsboxen waren und dadurch wie viel vertikalen Platz sie verbrauchten. Das hieß, irgendetwas dazu hinzuzufügen würde heißen, eine ganze Reihe an Inhalt zu verschwenden. Ich habe mich zu vier Zeilen im Infopanel entschlossen, weil das alles war, wofür ich Platz hatte. Das neue Design erlaubt es mir so viele Zeilen zum Infopanel hinzuzufügen, wie ich will, weil das verringern der Subfabrikenliste nicht so ein großer Nachteil ist.
Zusammenfassung
Wie dir vielleicht schon aufgefallen ist, waren die wichtigsten Ziele für diese Redesign Flexibilität und vertikaler Platz. Ich hab einige Veränderungen gemacht, um das zu erreichen, öfters mit größeren Kompromissen, welche vorsichtig balanciert werden mussten. Aber manchmal triffst du auf die perfekte Änderung, die einfach in allen Aspekten funktioniert, was sich toll anfühlt. Ich hoffe du fandst diesen Blick auf die Entscheidungen, die man beachten muss, wenn man ein Interface designt, spannend.
Du kannst Factory Planner im Modportal anschauen (das Update mit diesen Änderungen wird später heute veröffentlicht), und meinem Discord-Server beitreten, wenn du plaudern willst. Ich rede immer gerne über solche Themen. Und, ein großes Lob an Raiguard, welcher ein bisschen ein Wegbereiter für post-0.17 visuelles Design ist. Er half mir mit den neuen Designelementen komfortabel zu werden, und zerpflückte vorsichtig meine ersten Versuche, was sehr hilfreich war. Das war seine ursprüngliche Idee, wie das neu gestaltete Interface ausschauen könnte, was sich in mein aktuelles Design verwandelt hat. Warum ich diese Änderungen gemacht habe, ist aber ein ganzes eigens Thema.
Weihnachtsmann-Fabrik – Red Circuit Event (Rote Schaltkreise Event) Dr_Doof
Red Circuit hat es sich zur Aufgabe gemacht, Geschenke für den Weihnachtsmann zu kreieren! Sie laden dich ein, an ihrem Factorio Santa Factory-Event diesen Samstag, dem 12. Dezember um 12 Uhr UTC (= 13:00 Uhr MEZ) teilzunehmen. Factorio wird leicht modifiziert, damit ihr das Wintergefühl spürt, und die Science Packs werden durch Geschenke für den Weihnachtsmann ersetzt. Wir freuen uns euch dort anzutreffen!
Der Countdown ist vorbei
‘Swar der 12. Dezember, als auf unsrem ganzen Schiff
nicht ein Computer funktionierte, nicht einmal ein Griff.
Das Team von Red Circuit war ganz gemütlich im Discord
Mit Hoffnung, schließt dich uns an und springst mit an Bord!
Als vom Schiff her ertönte großer Krach,
sprangen alle von Bord, denn alles brach.
Und wir sahen fremden Schnee, so weiß wie ein Schwan
dazwischen funkelnd: Kupfer, Kohle und Uran!
Eine Fabrik zu bau’n im kalten Winterland
wäre mit deiner Hilfe wirklich sehr brillant!
Komm’ zu uns an diesem Tag um 13 Uhr MEZ
bau’ eine Fabrik, zu sehen für die Welt, so adrett!’Twas the 12th of December when all through our ship
Not a computer was working, not even a blip.
The Red Circuit team was all snug in Discord
With hopes you join us and bring more aboard!
When from the ship there came a loud crash
All jumped off board for it was all smash
We looked all around to see alien snow
With copper, and coal, and uranium all aglow!
A factory to build in the cold winter land
With your help it could be amazingly grand!
Come join us this day at 12 UTC
And build a factory for the whole world to see!— Dr_Doof
Beitragen
Wie immer suchen wir nach Leuten, die zu Alt-F4 beitragen wollen, sei es mit einem Artikel oder durch Hilfe bei Übersetzungen. Wenn du etwas Interessantes im Kopf hast, das du mit der Community in einer eleganten Art teilen möchtest, hier kannst du das tun. Falls du dir unsicher bist, beantworten wir gerne Fragen zu Inhalt und Struktur. Falls das nach etwas klingt, woran du interessiert bist, tritt unserem Discord bei um es nicht zu verpassen!