en
de

Typografie, Farben in der virtuellen Realität

17 Januar 2017
| |
Lesezeit: 3 Minutes

Dieser Beitrag beleuchtet nun Navigations- und Menustrukturen der Graphic User Interfaces in dem derzeit heissen Thema der Virtual Reality.

Dieser Beitrag geht auf Farbkontraste, Leerräume und Grössen zwischen Buttons, Eigenschaften zur Typografie bei GUI’s ein. Eindrücke dazu bekam ich in einem Augmented, Mixed und Virtual Reality Camp dieses Jahr in Karlsruhe. Die Erkenntnisse sind in Themen unterteilt und werden in separaten Beiträgen als Beitragsreihe wie folgt unterteilt:

  1. Ergonomie in der virtuellen Realität
  2. Objektauswahl und Manipulation in der virtuellen Realität
  3. Typografie und Farben in der virtuellen Realität
  4. Navigation Pattern in der virtuellen Realität

Betrachten wir die unterschiedlichen Apps, so können wir viele gestalterische Fehler in den GUIs und kognitiven Overload feststellen. Goldene Regeln betreffend der Ergonomie können im vorherigen Artikel „Ergonomie in der Virtual Reality“ nachgelesen werden.

 

Basiswissen zur Wirklichkeit

Vieles kann aus der realen Welt hergeleitet werden. So haben wir uns im Camp gefragt: Wie gross sollte der Abstand zu einem GUI sein, um mit einer Gaze Auswahl im Menu gut zu navigieren? Wann ist es gut lesbar? Während dem Prototyping und unserer Recherche stellte sich eine Distanz von 4-5 Meter als optimal heraus. Ein kleinerer Abstand ist auf Dauer für das Auge zu anstrengend. So ist bei der HTC Vive das Menu etwa 4 Meter entfernt und bei der Microsoft Hololens hat der Betrachter die Option, die Fenster (einer projizierten Anwendungen) im Raum frei zu platzieren. Microsoft Hololens empfiehlt für die Platzierung der Hologramme nur 2 m (siehe Microsoft Developer Website). Bedienelemente sind auf Augenhöhe platziert.

Merkpunkte

  • Interaktive Elemente nicht unter 2 m Abstand platzieren
  • Lesbarkeit testen

Mehr zum Thema Ergonomie kann im Beitrag „Ergonomie in der virtuellen Realität“ nachgelesen werden.

 

Buttons

Die Abstände der einzelnen GUI Elemente zueinander, in einem Menu, sollten so gewählt werden, dass der Benutzer mit einer Gaze Interaktion den Button per sofort aktiviert und folglich das Menu verlässt. Zumindest passierte mir das sehr oft in verschiedenen Apps. Der Abstand zwischen zwei sich überragenden Layers sollte nicht gross gewählt werden. Das Verhalten der Buttons ist gleich wie auf Websites (hover, active, selected). Die Platzierung von Bedienelementen sollte unmittelbar am Objekt, auf Augenhöhe, sein.

Merkpunkte

  • Abstand zwischen den Buttons testen
  • Abstand zwischen den Layers nicht zu gross wählen
  • Zustände der Buttons anzeigen
  • Ladezeit bei einer Auswahl testen

 

Typographie Augmented Virtual Reality

Abbildung: Abstand zwischen Auswahlelementen

 

 

Typografie

Bei den Typografie-Richtlinien gelten die gleichen Regeln, wie im Screen- Webdesign und für Apps. Eigenschaften, wie serifenlosen Schrift mit einer ausreichend grossen X-Höhe der Minuskel (Kleinbuchstaben) und einer angemessenen Stationierung, sind Pflicht bei der Auswahl eines Fonts. Natürlich sollten diese Eigenschaften getestet werden, um eine angemessene Lesbarkeit zu garantieren. Bei manchen Anwendungen ist mir aufgefallen, dass oft zu kleine Schriften gewählt wurden und somit die Lesbarkeit auf weniger aufgelösten Displays gelitten hat.

Merkpunkte

  • Serifenlosen Schrift
  • Grosse X-Höhe der Minuskel
  • Haarlinie nicht zu dünn

 

Farben

Vorsicht ist geboten mit leuchtenden und grellen Farben. Versetzen wir uns in die reale Welt, so ist es für Jedermann unangenehm in die Sonne oder in Scheinwerfer zu schauen. Für leuchtende Flächen sollte hier eine geringere Deckkraft (ca. 85 %) gewählt werden. Einen erheblichen Aufwand bekommt man bei der Lichteinstellung in der virtuellen Welt. Das Ausleuchten der Szene im Unity ist mithilfe eines 3D-Spezialisten (Fotografen) wertvoll und wertet die Qualität sehr stark auf.

Merkpunkte

  • Kontrast und Farbigkeit testen
  • 100 % Weiss und grelle Farben vermeiden

 

Fazit

Die Hersteller der jeweiligen Geräte (Microsoft Hololens, HTC Vive, Oculus Rift, Google Daydream) teilen ihre Erkenntnisse nur teilweise auf ihrer eigenen Plattformen. Vieles können Visual Designer aus dem 2D Bereich adaptieren. In Sachen typografische Regeln muss nicht zwingend Neues erfunden werden. Die adaptive Farbgebung in Augmented und Mixed Reality bleiben im jedem Projekt eine Herausforderung. So bleiben hier Cognitiv Walkthrough und weitere Usability Testverfahren nicht aus, um eine angemessene  gebrauchstaugliche Handhabung beurteilen und gewährleisten zu können.

Welche Erkenntnisse hast Du bereits in solchen Projekten gewonnen? Wie bist du vorgegangen? Was können wir von Dir dazulernen? Kommentiere, diskutiere und teile dein Wissen mit uns.

Das war der vorletzte Teil dieser Beitragsreihe. Im letzten Beitrag geht es um Navigation Pattern in der Virtuellen Realität.

 

Quelle und Verzeichnisse

Kommentare (0)

×

Updates

Schreiben Sie sich jetzt ein für unsere zwei-wöchentlichen Updates per E-Mail.

This field is required
This field is required
This field is required

Mich interessiert

Select at least one category
You were signed up successfully.