Heute möchte ich dir einen Einblick in ein Augmented Reality Projekt geben, welches wir 2018 für ein Vertriebsteam von Lufthansa Technik umgesetzt haben.

Da das Ganze auch für mich als UI/UX Designer Neuland war, habe ich mir gedacht hier direkt mal eine umfangreiche Case Study daraus zu machen, um dir von meinen ersten Erfahrungen zu berichten und um dir zu erzählen, wie man mit Hilfe von Augmented Reality auch ein wirkliches Problem für Unternehmen lösen kann.

Heute möchte ich dir einen Einblick in ein Augmented Reality Projekt geben, welches wir 2018 für ein Vertriebsteam von Lufthansa Technik umgesetzt haben.

Da das Ganze auch für mich als UI/UX Designer Neuland war, habe ich mir gedacht hier direkt mal eine umfangreiche Case Study daraus zu machen, um dir von meinen ersten Erfahrungen zu berichten und um dir zu erzählen, wie man mit Hilfe von Augmented Reality auch ein wirkliches Problem für Unternehmen lösen kann.

Projekt-Team und Umsetzungszeitraum.

Ich selbst wurde primär als UI/UX Designer in das Projekt geholt und habe zudem mit Matthias zusammen das Konzept und die Strategie der App definiert.

Außerdem hatten wir noch zwei Entwickler, Kevin Detter und Mike Boschanski mit im Boot, die die App letztendlich umgesetzt haben.

Als ein Team von vier Leuten haben wir die Anwendung über einen Zeitraum von drei Monaten geplant, designed und entwickelt. Sie wurde dann im März 2018 zum ersten Mal bei einem Messestand der Lufthansa Technik auf der AEX in Hamburg öffentlich vorgestellt.

Heute dient die App dem Vertriebsteam bei den unterschiedlichsten Akquise-Meetings um ihr Produkt besser vor Kunden veranschaulichen zu können.

iPad mit Startbildschirm einer Augmented Reality App

Augmented Reality: Ein Game-Changer, den man nicht ignorieren kann.

Hintergrund zu einer erweiterten Realität.

Das spannende an AR-Anwendungen ist, dass quasi etwas nicht reales in die echte Welt projiziert bzw. irgendwo platziert werden kann. Sehen oder erleben kann man es anschließend nur, indem man ein Smartphone, Tablet oder ein tragbares Headset bzw. eine AR-Brille benutzt.

Das Potential dadurch ist unvorstellbar groß. Als Benutzer kannst du vollständig in Erlebnisse eintauchen, genauso aber Objekte in einem Raum platzieren, die eigentlich gar nicht da sind. Wenn du also beispielsweise einen neuen Sessel für dein Wohnzimmer kaufen möchtest, könntest du schon vor der Bestellung in realer Größe testen, wie er bei dir Zuhause an einem bestimmten Platz aussieht.

Oder du hältst ein virtuelles Haustier, dass in deiner Wohnung lebt, welches du aber ohne den AR Modus gar nicht sehen kannst. Du kannst das Haustier dann großziehen und füttern oder auch überall hin mitnehmen.

Es gibt also definitiv viele spannende Ideen und Geschäftsbereiche, bei denen das Potential von AR in Zukunft einen Mehrwert liefern kann. In unserem Fall haben wir eine B2B Anwendung erstellt.

Bildschirmaufnahme der fertigen App am Lufthansa Technik Messestand.

Die Herausforderung und Aufgabe bei diesem Projekt.

Bei diesem Auftrag ging es nicht darum, einfach mal eine fancy Funktion in eine App mit einzubauen, nur weil sie gerade am kommen war. Hier ging es um ein ganz klares Problem, dass bei dem Vertriebsteam von Lufthansa Technik auch schon seit längerer Zeit bestand.

Vielleicht sind dir schon mal diese ovalförmigen Antennen auf dem Rumpf eines modernen Passagierflugzeuges aufgefallen. Diese werden dort angebracht, um den Fluggästen in der Kabine Internetzugang zu ermöglichen.

Flugzeug und 3D Antennen Modell für eine AR App

Internet ist ein Thema, das bei Airlines immer mehr in den Vordergrund rückt. Um das aber überhaupt bei vielen Flugzeugen nachträglich zu ermöglichen, ist eine Variante, eine solche Antenne auf dem Rumpf anzubringen. Da dieser Prozess nicht einfach ist, braucht es dafür Spezialisten und genau das bietet das LConnect Team von Lufthansa Technik an.

Natürlich muss das internationale Vertriebsteam diese aufwendige Methode auch irgendwie beim Kunden visualisieren und erklären können. Das Problem dabei war nur, dass die Antenne in Wirklichkeit über zwei Meter lang ist und nicht mal eben so beim Kunden aufgebaut werden kann. Selbst wenn sie ein reales Modell als Beispiel bauen würden, würde das gleichzeitig auch extrem die Kosten nach oben treiben, da der Materialtransport zu weltweit stattfindenden Akquise-Meetings oder Messen sehr aufwendig wäre.

Und letztendlich besteht eine solche Antenne auch nicht nur aus einer Außenschale, sondern genauso aus verschiedenen Strukturen im Innenbereich, die für Kunden nur schwer vorstellbar sind.

Für uns stellte sich also die Frage: Wie können wir mit Hilfe von digitalen Technologien hier eine Lösung schaffen und das komplexe Produkt auf eine verständliche Weise real erlebbar machen?

Flugzeug Illustration mit gelb markierter Antenne

Kunden ermöglichen mit dem Produkt zu interagieren.

Die Parameter, in denen wir uns bewegen mussten.

Die AR-App musste bei der ersten Vorstellung auf der Messe über zwei große iPad Pro funktionieren. Die Platzierung der Antenne sollte in Originalgröße auf einem vor Ort aufgebauten Modell erscheinen, welches die Oberfläche eines Flugzeugs imitierte.

Gleichzeitig war unsere Aufgabe, ein benutzerfreundliches User Interface zu erstellen, welches einfach, schnell und in wenigen Schritten verständlich zu bedienen ist.

Innerhalb der App sollten verschiedene Punkte auf dem Objekt ausgewählt bzw. angetippt werden können, um so erweiterte Informationen über einen bestimmten Bereich zu erfahren.

Auf der Messe war zu jeder Zeit ein Fachmann dabei, der die App und auch das Erlebnis mit betreute.

Nach Veranstaltungsende sollte eine Adaption dieser App mit zum Kunden genommen werden können um sie über ein iPhone oder iPad vor Ort weiter nutzen zu können.

Wie wir ein komplexes B2B Thema digital erlebbar gemacht haben.

Die Konzeptphase.

Für uns war relativ schnell klar, dass wir mit Hilfe von Augmented Reality hier einen großen Mehrwert liefern könnten.

Auf Kundenseite stellte sich dieser Plan allerdings etwas schwieriger heraus und das völlig zu Recht. Die Technologie war einfach noch nicht massentauglich und vieles, was wir versucht haben mündlich zu erklären, konnte sich die Kundenseite einfach nicht ganz so gut vorstellen. Deshalb ging es für uns im ersten Schritt darum, über Beispiele das Potential und die Ideen von AR zu veranschaulichen.

Auch für uns war diese Phase wichtig, da wir dadurch schnell Limits von verschiedenen AR-Frameworks testen konnten.

Zeichnungen auf Papier
Augmented Reality App erste Tests
Blick über die Schulter auf das Layout Programm

Erste Hürden bei der Platzierung unseres Objekts.

Ein Beispiel:

IKEA Places” ist eine App, die dir ermöglicht, Produkte vor dem Kauf bei dir Zuhause in realer Größe zu erleben und zu testen. Die App scannt zuerst für ein paar Sekunden deine Umgebung und danach kannst du ein Möbelstück irgendwo platzieren und dort bleibt es anschließend auch, egal in welche Richtung du dich drehst. Dafür braucht es keinen Marker auf dem Boden. Mittels Apples AR-Kit werden gerade Oberflächen erkannt und sobald du dort dein Objekt ablegst, bleibt es an dieser Stelle und du kannst um es rumgehen und von nahem betrachten.

In unserem Fall hatten wir aber keine gerade Oberfläche. Der obere Teil des Rumpfes eines Flugzeugs ist gewölbt und genauso auch das Modell, auf dem es später auf dem Messestand zum ersten Mal vorgestellt werden sollte.

Deshalb mussten wir mit einem Marker arbeiten und diesen auf das Modell kleben, wo am Ende das Objekt erscheinen sollte. Sobald der Marker also in dem Viewport der iPad Kamera auftauchte, platzierte er dort auch automatisch die Antenne. Das war nicht die optimalste Lösung, da das Objekt immer wieder ausgeblendet und neu platziert werden musste, sobald die Kamera den Bereich mit dem Marker verlassen hat.

Der Vorteil davon war allerdings, dass wir zu 100% sichergehen konnten, wo die Nutzer das Objekt letztendlich betrachten würden und deshalb konnte der Messestand auch drum herum gebaut werden. Uns liefen also nicht ständig Menschen durch das Sichtfeld und durch die virtuelle Antenne.

Um den Marker zu testen und um erste Versuche an einer gewölbten Oberfläche zu machen, bauten wir uns kurzerhand ein eigenes kleineres Modell aus Holz, welches im Büro aufgestellt wurde.

Blick über die Schulter auf eine Augmented Reality App mit Marker
Selbstgebauter Tisch um den Marker und die AR App an einer gewölbten Oberfläche im Büro zu testen.

Da ich als UI/UX Designer in diesem Projekt war, kann ich hier jetzt nicht genauer auf die Programmierung und Umsetzung der App eingehen. Aber gerade für mich als Designer gab es ebenso viele neue Aufgaben und Erfahrungen, von denen ich dir jetzt gerne ein paar Eindrücke geben möchte.

Das UX Design der Augmented Reality App.

Vorschau auf mehrere User Interface Designs der App

Der allgemeine Ablauf, wie die App funktionieren sollte:

  • Du startest die App.
  • Der Suchvorgang nach dem Marker fängt automatisch an.
  • Sobald der Marker gefunden wurde, wird auch das Objekt platziert.
  • Der User kann sich durch vier verschiedene Ebenen des Objekts vor und zurück schalten. Dabei wird jeweils die aktive Ebene animiert ausgetauscht.
  • Auf jeder Ebene werden Info-Symbole platziert. Diese kann der User antippen, um so weitere Informationen über einen Bereich zu erfahren (in einem Overlay).
  • Der User kann über ein Dropdown zwischen zwei verschiedenen Flugzeug-Modellen wählen, wodurch eine andere Antenne (ein anderes Objekt) geladen wird.

Über eine Fünf-Finger-Geste konnte wir zudem ein verstecktes Menü aufrufen, um darüber Einstellungen an der App vorzunehmen (Entwicklermodus).

Die Grundlagen von gutem User Experience Design für Augmented Reality.

1. Das User Interface auf das Einfachste reduzieren.

Das besondere an einer Augmented Reality App ist, dass du eigentlich konstant die reale Welt durch das Kamerabild auf deinem Tablet oder Smartphone siehst. Das heisst, je mehr UI-Elemente du auf dem Bildschirm platzierst, desto mehr verdeckst du möglicherweise auch  das Objekt, um das es im Kern geht. Deshalb habe ich zuerst mit verschiedenen Button und Menüs rum experimentiert, die sich auf und zu klappen lassen. Dafür erstellte ich einen ersten Prototypen, um das Erlebnis direkt in echt auf dem Gerät und mit dem Team zu testen.

Erster klickbarer Prototyp der direkt am Anfang für einen Testlauf entstanden ist. Auch wenn auf den ersten Blick ein guter Ansatz dabei war, musste er für unsere Bedürfnisse noch weiter reduziert und optimiert werden.

Da wir durch unseren definierten Ablauf schon ziemlich genau wussten, was an Funktionen und Informationen auf dem Screen zu sehen sein musste, habe ich angefangen, die Elemente auf das nötigste zu reduzieren.

Ich dachte zuerst daran, dem User auch klar zu visualisieren, auf welcher Ebene er sich gerade befindet und wie viele noch vor und nach ihm kommen. Dieses Element nahm aber zu viel Platz ein und deshalb platzierte ich statt der langen Schrittabfolge eine einfache Textinformation genau dort, wo der User auch die Ebenen vor und zurück schalten konnte.

Layout Optimierungen

Letzter klickbarer Prototyp vor der Programmierung.

Als zusätzliches Element überlegte ich mir eine Möglichkeit, die Info-Symbole auf dem virtuellen Objekt ein und ausblenden zu können. Da man gerade in einem Augmented Reality Modus öfters mal ziemlich nah an das Objekt ran geht, können darüberliegende Symbole teilweise störend wirken. Das Sales-Team konnte so dem Kunden vergrößert etwas genauer an einer bestimmten Stelle erklären, ohne, dass ein Symbol diese Stelle verdeckt oder anschneidet.

Übersicht App User Interface Elemente
App User Interface Elemente.

Die Platzierung von UI-Elementen bei einer Augmented Reality App.

Während des Gestaltungsprozesses habe ich mir immer vor Augen gehalten, wie der User letztendlich sein Gerät in den Händen hält und wo dementsprechend die wichtigsten Elemente platziert werden müssen.

Als Beispiel: Der User hält zu Beginn das Tablet mit zwei Händen und muss dementsprechend die Navigations-Elemente in Daumen-Nähe haben, um sie einerseits leichter zu erreichen, aber auch, um die App mit nur einer Hand bedienen zu können.

Demzufolge sieht die Platzierung der Elemente vielleicht etwas willkürlich aus, folgt aber zwei wichtigen Regeln:

  • Die UI-Elemente dürfen keine wichtigen Stellen im AR-Modus verdecken.
  • Während des AR-Modus wird das Tablet in der Hand gehalten. Deshalb müssen sich die wichtigen Navigations-Elemente in greifbarer Nähe im rechten und linken mittleren Bereich befinden.

Sicherstellen, dass das User Interface in so vielen Szenarien wie möglich funktioniert.

Die Sichtbarkeit von Elementen auf unterschiedlichen Hintergründen.

Eine Herausforderung gerade beim Design der App war die Farbwahl der Elemente.

Das Kamerabild ist während dem Augmented Reality Modus ständig aktiv. Das bedeutet für mich als Designer, dass ich keinerlei Kontrolle darüber habe, was die Kamera eigentlich zeigt. Es gibt also keine Garantie dafür, ob der Hintergrund hell oder dunkel ist, und deshalb ist es wichtig, sicherzustellen, dass die Designs in so vielen Szenarien wie möglich funktionieren.

Würde ich mich also für zum Beispiel einen weißen Button entscheiden, laufe ich in Gefahr, dass dieser nur schwer zu erkennen ist, sobald der User das virtuelle Objekte auf einem weißen Tisch betrachten möchte. Wähle ich einen dunkleren Ton, kann genau das gleiche Problem auftreten.

Die UI-Elemente müssen sich also auf eine zusätzliche Weise vom Hintergrund abheben. Das funktioniert gut über Schattierungen, aber auch mit dem Blur-Effekt, der ebenfalls öfters unter Apples iOS oder MacOS System vorkommt.

Durch einen Blur-Effekt konnte ich sicherstellen, dass die User Interface Elemente in allen Szenarien funktionieren und sich genügend vom Hintergrund abehen.

Mit Hilfe von digitalen Technologien Prozesse vereinfachen.

Das Ergebnis.

Bei diesem Projekt ging es um ein ganz klares Problem, dass bei dem Vertriebsteam von Lufthansa Technik auch schon seit längerer Zeit bestand. Und genau deswegen konnten wir hier am Ende auch einen wirklichen Mehrwert liefern, indem wir dem Kunden mit Hilfe von digitalen Technologien seinen Prozess extrem vereinfacht haben.

Am Ende wurde deutlich, wie mächtig und hilfreich eine AR Anwendung auch im B2B Markt sein kann.

In Zukunft wird es für Unternehmen kein Problem mehr sein, einen komplexen Aufbau oder ihre großen Maschinen anhand eines realen virtuellen Objekts erklären zu können. Sie können quasi in deiner Hosentasche überall hin mitgenommen werden und beim Kunden innerhalb von Sekunden überzeugen.

Augmented Reality Marker
Augmented Reality App in Aktion am Messestand

Augmented Reality wird in Zukunft eine wertvolle Ergänzung für viele Unternehmen sein.

Mit diesem Projekt hatte ich zum ersten Mal die Möglichkeit, eine reale AR Anwendung mit zu gestalten und mich näher mit dieser Technologie und ihrer Umgebung auseinanderzusetzen.

Ich sehe hier wirklich eine Veränderung kommen und eine extrem gute Nische um Unternehmen in Zukunft Lösungen zu bauen.

Auch für Designer öffnet sich mit Augmented und Virtuell Reality ein neuer Bereich mit genauso neuen Herausforderungen. Wir können nicht mehr länger nur in bestimmten Bildschirm-Größen denken. Was wir für Augmented Reality gestalten wird viel flexibler werden. Wir müssen Ideen in 360° denken und viel mehr mit Tiefe arbeiten.

Wie sieht also beispielsweise ein Browser in Zukunft in AR aus? Wie unterscheiden sich UI-Elemente zu denen am Bildschirm? Diesen Fragen nachzugehen, finde ich persönlich richtig spannend und ich freu mich jetzt schon, auch abseits von Kundenaufträgen tiefer in diese Thematik einzutauchen.

Augmented Reality App Layout auf dem iPad
Augmented Reality App Layout auf dem iPad
Augmented Reality: Was ich als UI/UX Designer von meinem ersten Projekt gelernt habe
  • Dieser Beitrag enthält eine Podcastfolge!

    Diese Kannst du direkt auf Patreon oder in einer Podcast App deiner Wahl anhören.

  • Dieser Beitrag enthält ein Video!

    Das Video wird dir auf Patreon freigeschalten.

Diesen Beitrag als Podcast hören

Projekt-Team und Umsetzungszeitraum.

Ich selbst wurde primär als UI/UX Designer in das Projekt geholt und habe zudem mit Matthias zusammen das Konzept und die Strategie der App definiert.

Außerdem hatten wir noch zwei Entwickler, Kevin Detter und Mike Boschanski mit im Boot, die die App letztendlich umgesetzt haben.

Als ein Team von vier Leuten haben wir die Anwendung über einen Zeitraum von drei Monaten geplant, designed und entwickelt. Sie wurde dann im März 2018 zum ersten Mal bei einem Messestand der Lufthansa Technik auf der AEX in Hamburg öffentlich vorgestellt.

Heute dient die App dem Vertriebsteam bei den unterschiedlichsten Akquise-Meetings um ihr Produkt besser vor Kunden veranschaulichen zu können.

iPad mit Startbildschirm einer Augmented Reality App

Augmented Reality: Ein Game-Changer, den man nicht ignorieren kann.

Hintergrund zu einer erweiterten Realität.

Das spannende an AR-Anwendungen ist, dass quasi etwas nicht reales in die echte Welt projiziert bzw. irgendwo platziert werden kann. Sehen oder erleben kann man es anschließend nur, indem man ein Smartphone, Tablet oder ein tragbares Headset bzw. eine AR-Brille benutzt.

Das Potential dadurch ist unvorstellbar groß. Als Benutzer kannst du vollständig in Erlebnisse eintauchen, genauso aber Objekte in einem Raum platzieren, die eigentlich gar nicht da sind. Wenn du also beispielsweise einen neuen Sessel für dein Wohnzimmer kaufen möchtest, könntest du schon vor der Bestellung in realer Größe testen, wie er bei dir Zuhause an einem bestimmten Platz aussieht.

Oder du hältst ein virtuelles Haustier, dass in deiner Wohnung lebt, welches du aber ohne den AR Modus gar nicht sehen kannst. Du kannst das Haustier dann großziehen und füttern oder auch überall hin mitnehmen.

Es gibt also definitiv viele spannende Ideen und Geschäftsbereiche, bei denen das Potential von AR in Zukunft einen Mehrwert liefern kann. In unserem Fall haben wir eine B2B Anwendung erstellt.

Bildschirmaufnahme der fertigen App am Lufthansa Technik Messestand.

Die Herausforderung und Aufgabe bei diesem Projekt.

Bei diesem Auftrag ging es nicht darum, einfach mal eine fancy Funktion in eine App mit einzubauen, nur weil sie gerade am kommen war. Hier ging es um ein ganz klares Problem, dass bei dem Vertriebsteam von Lufthansa Technik auch schon seit längerer Zeit bestand.

Vielleicht sind dir schon mal diese ovalförmigen Antennen auf dem Rumpf eines modernen Passagierflugzeuges aufgefallen. Diese werden dort angebracht, um den Fluggästen in der Kabine Internetzugang zu ermöglichen.

Flugzeug und 3D Antennen Modell für eine AR App

Internet ist ein Thema, das bei Airlines immer mehr in den Vordergrund rückt. Um das aber überhaupt bei vielen Flugzeugen nachträglich zu ermöglichen, ist eine Variante, eine solche Antenne auf dem Rumpf anzubringen. Da dieser Prozess nicht einfach ist, braucht es dafür Spezialisten und genau das bietet das LConnect Team von Lufthansa Technik an.

Natürlich muss das internationale Vertriebsteam diese aufwendige Methode auch irgendwie beim Kunden visualisieren und erklären können. Das Problem dabei war nur, dass die Antenne in Wirklichkeit über zwei Meter lang ist und nicht mal eben so beim Kunden aufgebaut werden kann. Selbst wenn sie ein reales Modell als Beispiel bauen würden, würde das gleichzeitig auch extrem die Kosten nach oben treiben, da der Materialtransport zu weltweit stattfindenden Akquise-Meetings oder Messen sehr aufwendig wäre.

Und letztendlich besteht eine solche Antenne auch nicht nur aus einer Außenschale, sondern genauso aus verschiedenen Strukturen im Innenbereich, die für Kunden nur schwer vorstellbar sind.

Für uns stellte sich also die Frage: Wie können wir mit Hilfe von digitalen Technologien hier eine Lösung schaffen und das komplexe Produkt auf eine verständliche Weise real erlebbar machen?

Flugzeug Illustration mit gelb markierter Antenne

Kunden ermöglichen mit dem Produkt zu interagieren.

Die Parameter, in denen wir uns bewegen mussten.

Die AR-App musste bei der ersten Vorstellung auf der Messe über zwei große iPad Pro funktionieren. Die Platzierung der Antenne sollte in Originalgröße auf einem vor Ort aufgebauten Modell erscheinen, welches die Oberfläche eines Flugzeugs imitierte.

Gleichzeitig war unsere Aufgabe, ein benutzerfreundliches User Interface zu erstellen, welches einfach, schnell und in wenigen Schritten verständlich zu bedienen ist.

Innerhalb der App sollten verschiedene Punkte auf dem Objekt ausgewählt bzw. angetippt werden können, um so erweiterte Informationen über einen bestimmten Bereich zu erfahren.

Auf der Messe war zu jeder Zeit ein Fachmann dabei, der die App und auch das Erlebnis mit betreute.

Nach Veranstaltungsende sollte eine Adaption dieser App mit zum Kunden genommen werden können um sie über ein iPhone oder iPad vor Ort weiter nutzen zu können.

Wie wir ein komplexes B2B Thema digital erlebbar gemacht haben.

Die Konzeptphase.

Für uns war relativ schnell klar, dass wir mit Hilfe von Augmented Reality hier einen großen Mehrwert liefern könnten.

Auf Kundenseite stellte sich dieser Plan allerdings etwas schwieriger heraus und das völlig zu Recht. Die Technologie war einfach noch nicht massentauglich und vieles, was wir versucht haben mündlich zu erklären, konnte sich die Kundenseite einfach nicht ganz so gut vorstellen. Deshalb ging es für uns im ersten Schritt darum, über Beispiele das Potential und die Ideen von AR zu veranschaulichen.

Auch für uns war diese Phase wichtig, da wir dadurch schnell Limits von verschiedenen AR-Frameworks testen konnten.

Zeichnungen auf Papier
Augmented Reality App erste Tests
Blick über die Schulter auf das Layout Programm

Erste Hürden bei der Platzierung unseres Objekts.

Ein Beispiel:

IKEA Places” ist eine App, die dir ermöglicht, Produkte vor dem Kauf bei dir Zuhause in realer Größe zu erleben und zu testen. Die App scannt zuerst für ein paar Sekunden deine Umgebung und danach kannst du ein Möbelstück irgendwo platzieren und dort bleibt es anschließend auch, egal in welche Richtung du dich drehst. Dafür braucht es keinen Marker auf dem Boden. Mittels Apples AR-Kit werden gerade Oberflächen erkannt und sobald du dort dein Objekt ablegst, bleibt es an dieser Stelle und du kannst um es rumgehen und von nahem betrachten.

In unserem Fall hatten wir aber keine gerade Oberfläche. Der obere Teil des Rumpfes eines Flugzeugs ist gewölbt und genauso auch das Modell, auf dem es später auf dem Messestand zum ersten Mal vorgestellt werden sollte.

Deshalb mussten wir mit einem Marker arbeiten und diesen auf das Modell kleben, wo am Ende das Objekt erscheinen sollte. Sobald der Marker also in dem Viewport der iPad Kamera auftauchte, platzierte er dort auch automatisch die Antenne. Das war nicht die optimalste Lösung, da das Objekt immer wieder ausgeblendet und neu platziert werden musste, sobald die Kamera den Bereich mit dem Marker verlassen hat.

Der Vorteil davon war allerdings, dass wir zu 100% sichergehen konnten, wo die Nutzer das Objekt letztendlich betrachten würden und deshalb konnte der Messestand auch drum herum gebaut werden. Uns liefen also nicht ständig Menschen durch das Sichtfeld und durch die virtuelle Antenne.

Um den Marker zu testen und um erste Versuche an einer gewölbten Oberfläche zu machen, bauten wir uns kurzerhand ein eigenes kleineres Modell aus Holz, welches im Büro aufgestellt wurde.

Blick über die Schulter auf eine Augmented Reality App mit Marker
Selbstgebauter Tisch um den Marker und die AR App an einer gewölbten Oberfläche im Büro zu testen.

Da ich als UI/UX Designer in diesem Projekt war, kann ich hier jetzt nicht genauer auf die Programmierung und Umsetzung der App eingehen. Aber gerade für mich als Designer gab es ebenso viele neue Aufgaben und Erfahrungen, von denen ich dir jetzt gerne ein paar Eindrücke geben möchte.

Das UX Design der Augmented Reality App.

Vorschau auf mehrere User Interface Designs der App

Der allgemeine Ablauf, wie die App funktionieren sollte:

  • Du startest die App.
  • Der Suchvorgang nach dem Marker fängt automatisch an.
  • Sobald der Marker gefunden wurde, wird auch das Objekt platziert.
  • Der User kann sich durch vier verschiedene Ebenen des Objekts vor und zurück schalten. Dabei wird jeweils die aktive Ebene animiert ausgetauscht.
  • Auf jeder Ebene werden Info-Symbole platziert. Diese kann der User antippen, um so weitere Informationen über einen Bereich zu erfahren (in einem Overlay).
  • Der User kann über ein Dropdown zwischen zwei verschiedenen Flugzeug-Modellen wählen, wodurch eine andere Antenne (ein anderes Objekt) geladen wird.

Über eine Fünf-Finger-Geste konnte wir zudem ein verstecktes Menü aufrufen, um darüber Einstellungen an der App vorzunehmen (Entwicklermodus).

Die Grundlagen von gutem User Experience Design für Augmented Reality.

1. Das User Interface auf das Einfachste reduzieren.

Das besondere an einer Augmented Reality App ist, dass du eigentlich konstant die reale Welt durch das Kamerabild auf deinem Tablet oder Smartphone siehst. Das heisst, je mehr UI-Elemente du auf dem Bildschirm platzierst, desto mehr verdeckst du möglicherweise auch  das Objekt, um das es im Kern geht. Deshalb habe ich zuerst mit verschiedenen Button und Menüs rum experimentiert, die sich auf und zu klappen lassen. Dafür erstellte ich einen ersten Prototypen, um das Erlebnis direkt in echt auf dem Gerät und mit dem Team zu testen.

Erster klickbarer Prototyp der direkt am Anfang für einen Testlauf entstanden ist. Auch wenn auf den ersten Blick ein guter Ansatz dabei war, musste er für unsere Bedürfnisse noch weiter reduziert und optimiert werden.

Da wir durch unseren definierten Ablauf schon ziemlich genau wussten, was an Funktionen und Informationen auf dem Screen zu sehen sein musste, habe ich angefangen, die Elemente auf das nötigste zu reduzieren.

Ich dachte zuerst daran, dem User auch klar zu visualisieren, auf welcher Ebene er sich gerade befindet und wie viele noch vor und nach ihm kommen. Dieses Element nahm aber zu viel Platz ein und deshalb platzierte ich statt der langen Schrittabfolge eine einfache Textinformation genau dort, wo der User auch die Ebenen vor und zurück schalten konnte.

Layout Optimierungen

Letzter klickbarer Prototyp vor der Programmierung.

Als zusätzliches Element überlegte ich mir eine Möglichkeit, die Info-Symbole auf dem virtuellen Objekt ein und ausblenden zu können. Da man gerade in einem Augmented Reality Modus öfters mal ziemlich nah an das Objekt ran geht, können darüberliegende Symbole teilweise störend wirken. Das Sales-Team konnte so dem Kunden vergrößert etwas genauer an einer bestimmten Stelle erklären, ohne, dass ein Symbol diese Stelle verdeckt oder anschneidet.

Übersicht App User Interface Elemente
App User Interface Elemente.

Die Platzierung von UI-Elementen bei einer Augmented Reality App.

Während des Gestaltungsprozesses habe ich mir immer vor Augen gehalten, wie der User letztendlich sein Gerät in den Händen hält und wo dementsprechend die wichtigsten Elemente platziert werden müssen.

Als Beispiel: Der User hält zu Beginn das Tablet mit zwei Händen und muss dementsprechend die Navigations-Elemente in Daumen-Nähe haben, um sie einerseits leichter zu erreichen, aber auch, um die App mit nur einer Hand bedienen zu können.

Demzufolge sieht die Platzierung der Elemente vielleicht etwas willkürlich aus, folgt aber zwei wichtigen Regeln:

  • Die UI-Elemente dürfen keine wichtigen Stellen im AR-Modus verdecken.
  • Während des AR-Modus wird das Tablet in der Hand gehalten. Deshalb müssen sich die wichtigen Navigations-Elemente in greifbarer Nähe im rechten und linken mittleren Bereich befinden.

Sicherstellen, dass das User Interface in so vielen Szenarien wie möglich funktioniert.

Die Sichtbarkeit von Elementen auf unterschiedlichen Hintergründen.

Eine Herausforderung gerade beim Design der App war die Farbwahl der Elemente.

Das Kamerabild ist während dem Augmented Reality Modus ständig aktiv. Das bedeutet für mich als Designer, dass ich keinerlei Kontrolle darüber habe, was die Kamera eigentlich zeigt. Es gibt also keine Garantie dafür, ob der Hintergrund hell oder dunkel ist, und deshalb ist es wichtig, sicherzustellen, dass die Designs in so vielen Szenarien wie möglich funktionieren.

Würde ich mich also für zum Beispiel einen weißen Button entscheiden, laufe ich in Gefahr, dass dieser nur schwer zu erkennen ist, sobald der User das virtuelle Objekte auf einem weißen Tisch betrachten möchte. Wähle ich einen dunkleren Ton, kann genau das gleiche Problem auftreten.

Die UI-Elemente müssen sich also auf eine zusätzliche Weise vom Hintergrund abheben. Das funktioniert gut über Schattierungen, aber auch mit dem Blur-Effekt, der ebenfalls öfters unter Apples iOS oder MacOS System vorkommt.

Durch einen Blur-Effekt konnte ich sicherstellen, dass die User Interface Elemente in allen Szenarien funktionieren und sich genügend vom Hintergrund abehen.

Mit Hilfe von digitalen Technologien Prozesse vereinfachen.

Das Ergebnis.

Bei diesem Projekt ging es um ein ganz klares Problem, dass bei dem Vertriebsteam von Lufthansa Technik auch schon seit längerer Zeit bestand. Und genau deswegen konnten wir hier am Ende auch einen wirklichen Mehrwert liefern, indem wir dem Kunden mit Hilfe von digitalen Technologien seinen Prozess extrem vereinfacht haben.

Am Ende wurde deutlich, wie mächtig und hilfreich eine AR Anwendung auch im B2B Markt sein kann.

In Zukunft wird es für Unternehmen kein Problem mehr sein, einen komplexen Aufbau oder ihre großen Maschinen anhand eines realen virtuellen Objekts erklären zu können. Sie können quasi in deiner Hosentasche überall hin mitgenommen werden und beim Kunden innerhalb von Sekunden überzeugen.

Augmented Reality Marker
Augmented Reality App in Aktion am Messestand

Augmented Reality wird in Zukunft eine wertvolle Ergänzung für viele Unternehmen sein.

Mit diesem Projekt hatte ich zum ersten Mal die Möglichkeit, eine reale AR Anwendung mit zu gestalten und mich näher mit dieser Technologie und ihrer Umgebung auseinanderzusetzen.

Ich sehe hier wirklich eine Veränderung kommen und eine extrem gute Nische um Unternehmen in Zukunft Lösungen zu bauen.

Auch für Designer öffnet sich mit Augmented und Virtuell Reality ein neuer Bereich mit genauso neuen Herausforderungen. Wir können nicht mehr länger nur in bestimmten Bildschirm-Größen denken. Was wir für Augmented Reality gestalten wird viel flexibler werden. Wir müssen Ideen in 360° denken und viel mehr mit Tiefe arbeiten.

Wie sieht also beispielsweise ein Browser in Zukunft in AR aus? Wie unterscheiden sich UI-Elemente zu denen am Bildschirm? Diesen Fragen nachzugehen, finde ich persönlich richtig spannend und ich freu mich jetzt schon, auch abseits von Kundenaufträgen tiefer in diese Thematik einzutauchen.

Augmented Reality App Layout auf dem iPad
Augmented Reality App Layout auf dem iPad