Fiktives GUI-Konzept – Teil 1

Prolog

Wenn es jemanden gegeben hat, der mein grafisches Ästhetikempfinden schon früh geprägt hat, dann ist das – neben Syd Mead, über den ich hier auch schon geschrieben habe –  Michael Okuda.

640px-Building_okudagrams

Michael Okuda mit Kontrollpanel der Enterprise

Der aus Hawaii stammende Kommunikationsdesigner war ab 1986 für die grafische Darstellung der Computerinterfaces der Enterprise in der damals neu aufgelegten Serie ‚Star Trek – The Next Generation‘ und alle späteren Star-Trek-Serien verantworlich. Wo es in der Star-Trek-Originalserie (und vielen anderen SF-Serien) bei bunt blinkenden Lichtern und Computerbenutzeroberflächen ohne nachvollziehbaren Funktionen blieb, kreierte Okuda ein Interface, welches der visuellen Rezeption der technisch geschulten Zuschauer entgegenkam. Sein Design der Knöpfe- und Reglerlosen Benutzeroberflächen des sog. LCARS waren für eine Science-Fiction-Serie in dem Sinne neuartig, als dass sie durch ihre Klarheit und Struktur Plausibilität simulierten und der Szenerie in der Serie technische Glaubwürdigkeit verliehen. Das Design dieser Touchscreenoberflächen wurde daher auch als Okudagramme bekannt und erfreuen sich bis heute großer Beliebtheit.

Mein Projekt

Warum erzähle ich das? Ich habe seit längerem im Rahmen eines Projektes (von so ausufernden Dimensionen, dass es eines eigenen Blogs oder Wikis würdig wäre) begonnen, mir über die Darstellung von Informationen innerhalb ein grafischen Benutzeroberfläche Gedanken zu machen, soz. als Unterprojekt. Ich benutze dieses Blog daher zum einen, um die Konzeption zu dokumentieren und so auch für Außenstehende nachvollziehbar zu machen. Gleichzeitig erhoffe ich mir durch das Niederschreiben meine konzeptionelle Herangehensweise inhaltlich für mich persönlich zu ordnen und idealerweise dadurch auf neue Ideen zu kommen.

Ich nehme Michael Okudas Arbeit als Ausgangspunkt, weil ich bei der Entwicklung meines eigenen Intefacekonzepts die essentielle Idee einer fiktiven grafischen Benutzeroberfläche aus dem Science-Fiction-Bereich, welche simulierte Funktionalität mit ansprechender Gestaltung verbindet, im Hinterkopf behalten und es auf dieser Ebene ausarbeiten möchte.

Der Ergebnis meines Layouts soll sein, dass ich die Gestaltung, wenn diese ausgereift ist, einerseits als interaktive, animierte Grafik mit funktionsfähigen Schaltflächen benutzen und andererseits auch im Druck auf Papier als dekoratives Element, welches Text und Bild unterstützt, einsetzen kann.

1. Gestaltungsraster

Normalerweise sind Gestaltungsraster auf die rechteckige Hoch- und Querformate der Bildschirme und Druckvorlagen (meist in DIN-Formaten) angepasst, bestehen daher ausschließlich aus horizontalen und vertikalen Linien. Ich gehe zur Vorbereitung der Gestaltung der Einfachheit halber auch vom rechteckigen DIN A4 im Querformat aus, also 297 x 210 mm.

Im meinem Grundlayout unterteilen die horizontalen und vertikalen Linien die Hauptfläche in 5 x 5 Rechtecke. Hinzu kommen die diagonalen Linien, welche jeweils 45° nach links und rechts geneigt das Raster zusätzlich unterteilen.

Grid_01

Die vier vertikalen Linien sind gleichmäßig über die Breite der Arbeitsfläche verteilt, die oberste und unterste horizontale Hilfslinie orientiert sich jeweils in ihrer Position an den Schnittpunkten der diagonalen mit den vertikalen Linien. Die restlichen vier Horizontallinien werden ebenfalls in gleichmäßigen Abständen ausgerichtet. Daraus ergibt sich eine Gitterstruktur mit einem sich wiederholenden Muster aus Drei- bis Sechsecken, die später als einzelne Gestaltungselemente wie Text und Bildkästen, sowie Schaltflächen dienen. Um es flexibel zu halten, können bei Bedarf die Kacheln in der gewünschten Form zusammengefasst werden.

2. Grundlayout

Durch das jetzige Raster ergeben sich oben und unten zwei schmalere Balken. Diese werden im Layout später als Menüleisten verwendet, in denen kontextabhängige Optionen aufgeführt werden.

Grid_02

Mein Konzept der visuellen Darstellung sieht vor, dass ein aktiver Menüpunkt in der Leiste mit der jeweiligen dazugehörigen Text- oder Bildkomponente auf der Hauptfläche über die dazwischenliegenden Kacheln verbunden ist. Das nächste Bild zeigt dies schematisch:

Grid_03

Um die Systematik weiter auszuführen, ist es wahrscheinlich notwendig, dies an einem konkreteren Beispiel zu tun, welches ich schon vorbereitet hatte. Das nächste Bild zeigt einen möglichen Screen in Anwendung, genauer gesagt zeigt es beispielhaft einen Scan einer Planetenoberfläche.

Grid_04

An diesem Beispiel sieht man auch bereits die Anwendung von Farbcodierungen für unterschiedliche Aktionen und Subroutinen, die auf der Oberfläche dargestellt werden.

Da hierzu aber noch die genauere Ausarbeitung fehlt, werde ich die Vorstellung des bisherigen Konzepts an dieser Stelle beenden. Im Teil 2 geht es dann um die Funktionen, deren Farbcodes und Darstellung auf der Oberfläche, ihre Platzierung und Varianten.

Kommentar verfassen