Entwicklerblog: Layout und Navigation

Das Layout von GigraWars war bis jetzt immer sehr stark an den Vorgänger GalaxyWars angelehnt. Sowohl in der ersten Version, welche 2012 an den Start ging, also auch die aktuelle Version. 

Zum einen gab es immer die Navigation auf der linken Seite, sowie dem eigentlichen Inhalt mittig zentriert in der Form von grau blauen Tabellen.

Das Layout von GalaxyWars von 2008

Das Layout von GigraWars von 2012

Wie man auf den beiden Bildern sehen kann, hat sich in der Zeit nicht viel verändert, sogar die Navigation ist nahezu dieselbe geblieben. Genau aus diesem Rad möchten wir ausbrechen.

Mobile Ansicht

Die erste und schwierigste Entscheidung für uns war, ob wir einen sogenannten Responsive Ansatz wählen oder aktiv zwei Ansichten für das Spiel anbieten. Letzteres gibt es in der aktuellen Version. Zur Erklärung, responsiv bedeutet, dass die Fenstergröße über das Layout entscheidet. Zieht man auf dem Desktop Rechner das Browserfenster klein, so landet man zwangsweise in der Ansicht, welche man auch auf dem Handy hätte.

Wir haben uns für den responsiven Ansatz entschieden, da wir damit die meisten Geräte abdecken können. Die aktuelle mobile Ansicht sorgt vermehrt für Probleme, deren Lösungen sich darum beschränken, das Handy quer zu halten.

Layout

Durch die Wahl des responsiven Ansatzes sowie den fehlenden finanziellen Mitteln für einen Webdesigner haben wir uns für einen schlichten Stil entschieden. Dabei versuchen wir mit Kleinigkeiten, wie angeschrägten Ecken, ein wenig in die Science-Fiction Richtung zu gehen. Genauso möchten wir das Farbschema aus Grau- und Blautönen beibehalten. Insgesamt ist das Layout allerdings etwas dunkler als früher.

Zwei Elemente auf der Übersichtsseite im neuen Layout

Insgesamt soll beim Layout mehr hinterfragt werden, ob immer alles einem stumpfen Tabellenschema folgen muss, da gerade Tabellen auf Smartphones nicht sonderlich gut funktionieren.

Ein Beispiel kann hier die Schiffsfabrik sein, ohne Tabelle können sich die Elemente besser nebeneinander einfügen. Auf der linken Seite im aktuellen Layout nimmt das Formular immer relativ Platz ein.

In der neuen Version ist zudem der Text etwas größer und ermöglicht es so interessierten neuen Spielern, die Texte besser zu lesen. Generell gilt aber bis auf Weiteres, die Layouts können sich noch entsprechend verändern, so werden die Möglichkeit Beschreibungen auszublenden, sowie weitere Funktionen noch folgen.

Zum Schluss noch eine Vorschau auf das Gesamtlayout, um ein Gefühl dafür zu bekommen, wo die Reise hingehen wird. Hier ist genauso zu beachten, dass noch nicht alles vorhanden ist, so fehlen unter anderem die Pfeile für den nächsten und vorherigen Planeten.

Navigation

Wie auf dem letzten Bild zu sehen, hat sich einiges an der Navigation verändert. Wir haben uns angesehen, welche Seiten häufig aufgerufen werden und welche dieser Seiten thematisch zusammengehören.

Ein Beispiel währen hier die Verteidigungsanlagen, diese werden fast nie aufgerufen und benötigen nicht unbedingt einen eigenen Menüpunkt in der Navigation. Aus diesem Grund, gibt es den Menüpunkt "Schiffe/Türme", wenn man diesen anklickt, dann landet man immer erst in der Produktion der Schiffe und erst mit einem weiteren Klick oben auf Verteidigung in einer weiteren Navigation, wird man die Verteidigungsanlagen finden. Der Menüpunkt "Schiffe/Türme" benötigt noch einen passenden Namen, Vorschläge sind auf dem Discord gern gesehen.

Planet

Der Bereich Planet in der Navigation beinhaltet, mit Ausnahme der Flotten, alle Menüpunkte bei welchen der aktuelle Planet relevant ist.

• Übersicht
• Konstruktion
• Forschung
• Schiffe/Türme
• Handel
• Rohstoffe

Universum

Hier geht es um das spielerische Miteinander, wie der Versand der Flotten und die Galaxie-Ansicht.

• Flotten (mit Targetlisten)
• Galaxie

Community

Im Bereich Community geht es wie im Bereich Universum um das Miteinander, allerdings eher auf einer organisatorischen Ebene und weniger mit direkten Auswirkungen auf das Spiel.

• Nachrichten
• Suche
• Allianz
• Highscore
• Discord

Abhängig davon, ob man Teil einer Allianz ist oder nicht, verschwindet der Menüpunkt Allianz aus der Navigation und wird zu einer eigenen Kategorie mit eigenen Punkten. Dazu aber mehr in ein paar Monaten.

Account

Unter Account befinden sich weitere allgemeine Punkte zum eigenen Account.

• Statistik
• Premium
• Einstellungen
• Logout

Abschluss

Abschließend möchte ich noch einmal betonen, dass diese Version des Layouts nicht unbedingt final ist. Wir suchen noch nach einer Möglichkeit, das Layout ein wenig mehr nach Weltraum aussehen zu lassen. Zusätzlich gibt es noch ein bis zwei Menüpunkte, die nicht vorgestellt wurden. Genauso gut kann es auch sein, dass noch Punkte zusammengeführt werden, um die Navigation etwas zu verschlanken.