Der Tellerrand der Realität –
Wie wird XR gestaltet? Fokus auf grafische Bedienoberflächen
Im ersten Beitrag unserer Blogserie „Der Tellerrand der Realität“ haben wir die verschiedenen „Extended Reality“ (XR) Technologien und Varianten kennen gelernt. Der Eine oder Andere hat womöglich schon erste Ideen bekommen, was sich so alles mit den XR-Technologien umsetzten ließe. Doch auf was müssen wir bei der Umsetzung von XR-Anwendungen achten?
Grafische User Interfaces in XR & MR
Für die Darstellung von XR Applikationen über Tablets und Smartphones kann bei der Gestaltung auf bereits bekannte Tools zugegriffen werden. Bei der Gestaltung von holografischen Anwendungen ist das nicht der Fall.
Die Gestaltung für MR ist ein eigenständiges Erlebnis und Bedarf anderer Denkweisen wie die Gestaltung von Bedienoberflächen für sogenannte „On-Screen“ Anwendungen. Doch wie gestalten wir grafische Oberflächen für MR?
Microsoft selbst behauptet, dass Mixed-Reality-Anwendungen einzigartig sind und dass es daher harte Arbeit ist, gute MR Erlebnisse zu entwerfen und umzusetzen. Der Schlüssel zum Erfolg sind hier eindeutig ausgiebige Testschleifen und Iterationen in der Gestaltungs- sowie Entwicklungsphase. Durch solche Iterationsschleifen gibt es auch Erfahrungswerte, was bei der Gestaltung von grafischen User-Interfaces für MR Anwendungen zu beachten gilt.
„Logik bringt dich von A nach Z. Vorstellungskraft bringt dich überall hin“
Albert Einstein.
Bevor es um die Gestaltung von MR-Erlebnissen und Hologrammen geht: Was ist eigentlich ein Hologramm?
Ein Hologramm ist eine technische Projektion eines Objektes, welche völlig frei im Raum zu schweben scheint. Dabei kann man sich um die Projektion bewegen und diese von allen Seiten betrachten.
Aspekte in der Gestaltung von XR-Anwendungen
Da Hologramme im Zusammenhang mit einem dreidimensionalen Raum dargestellt werden, benötigen diese vollkommen andere UX/UI Überlegungen wie On-Screen Anwendungen und stellen somit eine absolut neue Herausforderung an UX/UI Designer dar. Die Platzierung der Interface Elemente und deren Größe im Raum muss gut durchdacht werden, um vom Betrachtenden als „natürlich“ wahrgenommen zu werden. Auch bei der Verwendung von Transparenzen und Farben ist bei holografischen UI Elementen auf die Positionierung im Raum zu achten, damit die Elemente im Setting nicht untergehen.
Copyright: Microsoft
Die Anwendung von Farben
Die Verwendung von Farben ist eine der wichtigen Komponenten, die bei der Gestaltung von MR Anwendungen beachtete werden muss. Dadurch, dass Hologramme aus Licht bestehen, basieren sie auf einer additiven Farbdarstellung. Das bedeutet, dass weiße Flächen das meiste Licht wiedergeben und somit am hellsten sind. Schwarze Flächen bekommen hingegen kein Licht und werden auf Datenbrillen transparent gerendert. Das heißt so viel wie, dass alles Schwarze unsichtbar wird.
Dennoch sollten wir vorsichtig mit dem Umgang von weißen Flächen umgehen. Reines weiß sollte für große Flächen vermieden werden. Helle Farben auf großen Flächen blenden und ermüden unsere Augen. Daher sollte bei hellen Flächen eher auf ein leichtes Grau zurückgegriffen werden. Generell empfiehlt sich für größere Flächen und Hintergründe der Einsatz von dunklen Farben. Für das menschliche Auge sind diese natürlicher und angenehmer anzusehen.
Sollen Hologramme in besonders lebhaften und unordentlichen Umgebungen platziert werden wie zum Beispiel in einer Produktionshalle, sollte für wichtige Elemente helle Farben verwendet werden, um den Kontrast in unterschiedlichen Lichtsituationen aufrecht zu erhalten. Weißer Text auf dunklem Hintergrund erweist somit einen besseren Dienst wie schwarzer Text auf weißem Hintergrund.
Farben werden in Hologrammen leicht transparent dargestellt und sehen in der Nutzungsumgebung weniger lebhaft und kräftig aus als in Design Entwürfen auf dem PC-Bildschirm. Dennoch sollte der Einsatz, insbesonders von Signalfarben, gut überdacht sein und im Sinne der Kommunikation von notwendigen Informationen eingesetzt werden.
Copyright: Microsoft
Beim Erstellen von dunklen Hintergründen, muss beachtet werden, dass schwarze Bereiche bei Hologrammen transparent dargestellt werden.
Copyright: Microsoft
Typografie und Holografische UI
Für die Verwendung von Schrift gelten bei MR-Anwendungen dieselben Regeln wie in allen anderen gestalterischen Bereichen. Text sowohl in der physischen als auch in der virtuellen Welt muss lesbar und leserlich sein. Microsoft empfiehl, bei Schriftgrößen unter 42pt die Schriftschnitte „light“ und „semi-light“ zu meiden, da die vertikalen Linien der Schrift zu dünn ausfallen würden, was zu einem Flackern der Schrift und dies wiederum zur Beeinträchtigung der Leserlichkeit führen würde.
Copyright: Microsoft
Animationen in XR – ein fast notwendiges muss
Bei XR sind Animationen mehr als nur ein nettes Feature in der Anwendung. Mit Hilfe kleiner und aussagekräftiger Animationen können Informationen über das Verhalten von Bedienelementen kommuniziert werden oder dazu verwendet werden, die Aufmerksamkeit des Anwenders auf das Wesentliche zu lenken. Zum Beispiel kann so auf ein Bedienelement außerhalb des Sichtfeldes hingewiesen werden, das Öffnen und Schließen von Menüpunkten mit kleinen Animationen versehen werden oder der Status von aktivierten Elementen verständlicher kommuniziert werden.
Wie wir sehen, ist das Entwerfen von 3D Erlebnissen weitaus mehr als reines Grafikdesign. Es vereint die unterschiedlichen Disziplinen des UX-Designs und neben der Erstellung von Grafik appelliert es an Know-how aus den Bereichen des Storytellings, Produktdesign, Sounddesign und der Bühnengestaltung.
Ausblick – das gibt es im nächsten Teil zu lesen:
In diesem zweiten Teil unserer Blogserie legten wir den Fokus auf grafischen Oberflächen und was bei deren Gestaltung zu beachten gilt. Im nächsten Teil unserer Blogserie „Der Tellerrand der Realität“ tauchen wir in die Themen Storytelling, UX und Ergonomie ein.
Artikel verfasst von
Katerina Sedlackova UX/UI Design
7. April 2021
