en
de

Navigation Pattern in der virtuellen Realität

24 Januar 2017
| |
Lesezeit: 5 Minutes

Betrachten wir die unterschiedlichen Head-mounted display, so können wir Trends im Navigationsdesign und den GUIs feststellen. 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

 

Zwei grundsätzliche Trends haben sich in der virtuellen Welt als Navigationskonzepte parallel entwickelt. Einerseits gibt es viele Apps, welche den skeuomorphism Ansatz wählen, andererseits wird das bewährte Flat-Design aus der 2D Welt in die 3D Welt übertragen. Beide Ansätze haben ihre Vor- und Nachteile.

Skeuomorphism

Natural User Interfaces (HTC Vive Labor) sind intuitiv, global verständlich und wenn sie gut gemacht sind, entsprechen diese einem natürlichen Mapping. Metaphern, wie etwa ein Fotoalbum, sind geeignete Navigationskonzepte für Online Shops oder Galerien.

Flat-Design

Der Ansatz von Flat Design bei GUI’s für die Navigation und innerhalb einer Applikation ist weit verbreitet. Eine Übersicht etablierter Flat Design Konzepte aus dem AR & VR konnte ich bei unserer Recherche finden.

Mobile Screen Design

Im Zusammenhang mit 360° Videos und Bildmaterialien wird folgendes Konzept verwendet: Der Nutzer öffnet das App auf dem Device, wählt ein Video aus und platziert anschliessend das Device in einer VR-Brille. In diesem Zeitabschnitt wird die Ladezeit des Videos überbrückt. Der Benutzer ist mit der Interaktion auf dem Device vertraut und erhält meistens noch eine Anweisung, wie er das Device in der VR-Brille platzieren soll.

Vorteile Nachteile
Wartezeit wird übergangen Lange Wartezeiten bei schlechter Verbindung
Benutzer weiss, wie man es verwenden muss / soll
Keine schlechte GUI Lösung

 

Mobile Screen Augmented Virtual Reality

Abbildung: Die Ladezeit kann genutzt werden

 

Flat Menu – Not scalable

Ein platziertes GUI bietet dem Benutzer einen Fixpunkt innerhalb der VR-Welt. In diesem Beitrag unterscheide ich das Flat Menu in “nicht scrollbares” und “scrollbares” GUI. Betrachten wir ein nicht scrollbares Flat Menu, so ist meist ein statischer Inhalt gegeben und sind keine Hierarchie möglich. Als Betrachter überblickt man den gesamten Inhalt der Anwendung.

Vorteile Nachteile
Easy-to-explore Position des GUI ist fix
Überblick des gesamten Inhalts Kein Scrollen möglich
Menu ist inhaltlich nicht skalierbar
Keine Hierarchie

 

Flat Menu Augmented Virtual Reality

Abbildung: Statisches Graphic User Interface

 

Curved-Screen

Ist das GUI um den Nutzer herum als Kurve platziert, so hat dies den Nachteil, dass der Grossteil des Inhaltes nicht im Blickfeld liegt. Je nachdem wie weit diese Kurve um den Betrachter herum platziert ist, ist es mühsam wenn der Betrachter seinen Kopf in einem grossen Winkel hin und her schwenken muss, um zu navigieren. Übelkeit und Schwindel können die Folgen sein. Dieses Pattern findet Anwendung bei Stores oder Bibliotheken. Ein ergonomischer Aspekt ist der Abstand zur Leinwand. Dieser sollte möglichst um den Betrachter gleich gross sein. Siehe dazu mein Artikel Ergonomie in der virtuellen Realität.

Vorteile Nachteile
Für Stores geeignet Nicht alles ist sichtbar
Grossteil des Menüs ist nicht im Blickfeld (man muss sich drehen > Folgen: Übelkeit, Schwindel)
Bei viel Inhalt muss man lange Scrollen

 

Content View Menu Perspective Augmented Virtual Reality

 

Curved Screen Menu AugmentedVirtual Reality

Abbildungen: Der Abstand zum Menu sollte konsistent sein

 

Flat Menu – scalable

Bei einem scrollbaren Flat Menu wird der Umgang mit verschachtelten Inhalten eine weitere Herausforderung. Einige Arten von scrollbaren Flat Menu Designs werden dabei verwendet.

Card flipping

Dieses Pattern eignet sich gut bei verschiedenen Inhalten in einer App. Die Rubriken sind in einer Art Karussell angeordnet und wechseln bei Auswahl in den Vordergrund. Die inaktiven Elemente im Hintergrund zeigen durch ein grosses Bild oder einem Titel den Inhalt an. Zusätzlich hilft eine Scroll-Bar unterhalb des Hauptziels an, wie viele Elemente sich verbergen. Der Nachteil bei viel Inhalt ist, dass der Betrachter sich lange durch den Inhalt zu scrollen muss.

Vorteile Nachteile
Für Stores geeignet Nicht alles ist sichtbar
Bei viel Inhalt muss man lange Scrollen
Hierarchien sind bedingt möglich

 

Card Flipper Menu Augmented Virtual Reality

Abbildung: Card Flipper

 

Card Roller (horizontale Trommel)

Hierarchien können mit diesem Pattern untergebracht werden. Eine horizontale Trommel zeigt im Vordergrund, wie oben im Card Flipper, eine Rubrik an. Innerhalb dieser kann der Betrachter sich vertiefen. Auch hier ist nicht der gesamte Inhalt sichtbar und bei viel Inhalt wird das Scrollen zur Qual.

Vorteile Nachteile
Hierarchie möglich Nicht alles ist sichtbar
Bei viel Inhalt muss man lange Scrollen

 

Card Roller Menu Augmented Virtual Reality

Abbildung: Card Roller

 

Hovercast (GUI)

Nebenbei entwickeln sich weitere GUI Konzepte. Ein Beispiel ist der Leap Controller. Dieses Hand controlled menu interface erkennt die Hände und projiziert darauf ein GUI. Aus meiner Sict steckt dieses Interaktionskonzept stark in den Entwicklerschuhen und konnte ich bei meiner Recherche nicht in Form einer markttauglichen Endkunden-Anwendung wiederfinden. Dennoch ein interessanter und zukunftsträchtiger Ansatz für eine Navigation. Ein ähnlicher Ansatz findet sich bei Google Tilt Brush wieder, jedoch mit Controllern.

 

 

Das folgende Video veranschaulicht das Werkzeug in Google Tilt Brush

Video: Werkzeug zeigt die Anwendung, Quelle: https://www.tiltbrush.com/static/videos/features-ui_v03.mp4

Fazit

Ich hoffe ihr konntet euch Nützliches und Informatives aus den Beiträgen entnehmen. Meine Learnings zu diesen Themen sind unfassbar ausschlussreich und mit vielen Aha-Effekten verknüpft. Habt ihr ähnliche Erfahrungen in Projekten gemacht? Habe ich etwas ausgelassen? Für Inputs und weitere Quellen, Verweise zu ähnlichen Blogbeiträgen und neuen Erkenntnissen zum Thema der (Software) Ergonomie bin ich dankbar. In diesem Sinn, danke das Du reingeschaut hast und viel Freude beim Modellieren und Evaluieren von Prototypen in solchen Projekten. Es bleibt viel zu tun.

Ein grosses Dankeschön an Ines Lindner, Daniel Schindler und allen Kollegen aus der Fokusgruppe für diese wertvollen Tage in Karlsruhe.

Quellen 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.

Erhalten Sie regelmäßige Updates zu neuen Blogartikeln

Jetzt anmelden

Oder möchten Sie eine Projektanfrage mit uns besprechen? Kontakt aufnehmen »