en
de

Erfahrungsbericht: Rapid UX Prototyping für Microsoft HoloLens

19 Juni 2017
| |
Lesezeit: 4 Minutes

Vor einigen Monaten wurde ich gefragt, wie sich auf der HoloLens ohne Programmierkenntnisse eigene GUI-Entwürfe, Ideen und deren visuellen Aspekte anschauen lasse. Gern möchte ich meine Erfahrungen in diesem Beitrag teilen.

Als Visual Designer für ein Microsoft-HoloLens-Projekt stellten sich mir mehrere Fragen: Wie garantiere ich in einem Hologramm die Lesbarkeit? In welchem Abstand zum Betrachter sollte das Hologramm (Dialogfeld) erscheinen? Ganz zu schweigen von der Farbwirkung (additive Farben) im Kontext. Welche technischen Hürden muss ich bei der Microsoft HoloLens noch beachten? Die Lösung ist eine Mixtur aus physischen Prototypen und einer Hand voll Testproofs. Der Vorgang eines Testproofs wird in der Druckindustrie vor jeder Auflage standartmässig angewendet. Dabei handelt es sich um einen ersten sogenannten Andruck. Der Fokus liegt auf Farbigkeit, Linienstärken und Farbbalance. Dabei wird das Auflagenpapier für das Endprodukt verwendet, um die Qualität beurteilen zu können. Es gibt natürlich unterschiedliche Ausprägungen eines Testproofs. Ähnlich wie bei einem Software-Prototypen untersucht man lediglich wenige Aspekte.

Physische Prototypen

Mithilfe physischer Prototypen lassen sich nach meiner Erfahrung in allen drei Bereichen Augmented, Mixed und Virtual Reality Prototypen erstellen um auch kleinere Szenarien zu testen. Dazu braucht es lediglich Papier, Pappe, Buntstifte sowie ein Hauch Phantasie und Kreativität.

Mixed & Augmented Reality Prototyping: High-Level Wireframe für eine Microsoft-HoloLens-App. (Zühlke)

Mixed & Augmented Reality Prototyping: High-Level Wireframe für eine Microsoft-HoloLens-App. (Zühlke)

Virtual Reality Prototyping: High-Level-Wireframe zeigt Bedienelemente für eine Google-Cardboard-App. (Zühlke)

Virtual Reality Prototyping: High-Level-Wireframe zeigt Bedienelemente für eine Google-Cardboard-App. (Zühlke)

Testproof

Nachdem in Sessions mit physischen Prototypen, Sketches und Benchmarking von bestehenden App genügend Erkenntnisse für die Dialoggestaltung zusammengetragen waren, erstellte ich erste Testproofs.

Screen Designs für ein Hologramm: Visual Designs für ein RGB-Hologramm im Adobe Illustrator. (Zühlke)

Screen Designs für ein Hologramm: Visual Designs für ein RGB-Hologramm im Adobe Illustrator. (Zühlke)

Mit einem Testproof lassen sich folgende GUI-Aspekte überprüfen:

  • Farben (Transparenz, Sättigung)
  • Schrift (Spationierung, Zeilenabstand, Linienstärke)
  • Grafische Objekte (Interaktive Elemente, Symbole, Grafiken, Linien)

3D Tool: Unity

Mit wenig Aufwand ist es selbst als Designer möglich, kleine Elemente im Unity zu erstellen. Hier ein Beispiel, um einen 3D-Effekt zu testen um diesen den Entwicklern zu präsentieren.

3D-Element in Unity: Detaildesign einer Komponente. (Zühlke)

3D-Element in Unity: Detaildesign einer Komponente. (Zühlke)

Eigenes GUI auf einer Microsoft HoloLens ansehen

Hat man ein GUI-Design entworfen, will man es baldmöglichst auf der HoloLens selber ansehen. Nichts einfacher als das: Der Trick ist, seinen Screen als Bilddatei (nicht interaktiv) auf einen FTP-Server zu laden und diese anschliessend über den Edge Browser auf der Microsoft HoloLens ansehen. Auf diese Weise ist jeder in der Lage, visuelle Aspekte von Mock-Ups, Wireframes oder High-Fidelity-Screens für Hologramme zu testen.

Learnings

Was habe ich dabei gelernt und worauf sollte man achten?

  • Microsoft HoloLens: Ich rate jedem Designer, vorab selbst in die Mixed-Reality-Welt abzutauchen. Legt dabei den Fokus auf Design Pattern, Interaktion und Visual Design. Um Apps zu installieren, sind Adminrechte notwendig. Die Developer-Website von Microsoft beinhaltet derzeit (immer noch) wenige Angaben zu diesem Fragen (Schriftgrösse, Verhalten usw).
  • Schriftwahl: Oftmals sind Schriften durch ein Corporate-Design-Manual vorgegeben und dürfen daher nicht durch andere ersetzt werden. Wenn jedoch noch nichts definiert ist, empfehle ich dringend, eine Schrift zu verwenden, die für Screens konzipiert wurde und nicht aus dem Druckbereich stammt. Meine Empfehlung ist die Roboto von Google. Beide Schriften wurden in diesem Jahrhundert als Schrift für Monitore und digitale Displays entworfen.
  • Grafikprogramm: Es bleibt jedem selbst überlassen, welche Software er für das Erstellen der Testproofs verwendet. Als Adobe Senior  verwende ich natürlich Adobe Illustrator. Mein Tipp: Exportiert die Bilder mit einer Auflösung von nur 72 dpi. Als Hintergrundfarbe unbedingt ein reines RGB (0-0-0) Schwarz verwenden. Somit wird der Hintergrund in der Microsoft HoloLens transparent dargestellt.
  • FTP-Zugang: Sobald die  Bilder (Testproofs) auf dem FTP-Server liegen, lassen sie sich über den Edge Browser in der Microsoft HoloLens anzeigen. Beim Betrachten der Screens kann das Team die oben genannten Aspekte beurteilen und bei Bedarf innert weniger Minuten eigenständig Änderungen vornehmen.

Fazit

Das beschriebene Vorgehen hat sich bei mir bereits in zwei Projekten bewährt, bei denen ich innert eines Tages erste Entwürfe für ein Designkonzept und dessen GUI auf der Microsoft HoloLens erarbeitet habe. Hast Du dieses Problem als Designer auch schon erlebt? Wie bist Du vorgegangen? Sag etwas zu deinen best practices. Schreib mir oder kommentiere diesen Beitrag.

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.