Dream vs. reality–A Beginner’s Guide to User Interfaces in XR

Five years after the arrival of VR technologies in our technology-centric society, extended realities are still a red-hot topic. The possibilities still seem limitless.

As an experienced digital brand agency, we are always expanding our in-house realities and can assure you that it is far from too late to jump in. Therefore, we would like to share with you some learnings as orientation, inspiration and good practices. Here are our golden rules for designing user interfaces for XR applications.

Learn from conventional media

As a pioneer in an extremely young and at least equally unexplored terrain, one naturally likes to rely on the familiar and one’s own experience from less immersive and more conventional media.

In Dead Space 3, the glowing spine indexes the damage taken, while the weapon displays the remaining ammo via hologram. Image source: dreamdawn.com

Game design is the ideal source of inspiration, as three-dimensional user interfaces have been explored there for decades. Since the days of the first consoles, game designers have been looking for ways to embed their user interfaces into the setting and narrative of their creations to maximize immersion.

While this is not true for all games, role-playing games in particular are based on the principle of immersing the user as much as possible in the virtual world.

Star Citizen not only presents the UI in a believable way, but also makes it visible to other players. Image source: vrnerds.de

Unbelievable interfaces create a disturbing dissonance here, which can quickly lead to the loss of the player’s attention. A central aspect that must also be avoided in XR applications in order to achieve the greatest possible immersion for the user.

Dirt Rally offers only authentic speedometer and cockpit displays for orientation. Image source: uploadvr.com

The solution is the diegetic UI, i.e. a user interface that exploits the spatiality of the application as well as the narrative and the setting in order to provide the user with credible information. This can be, for example, the clock on the protagonist’s arm, to which attention must be paid at regular intervals so as not to miss important events, or the dashboard in the cockpit of a vehicle, which can be used to read off speeds and other parameters.

More about UI in video games in this artikel of Anthony Stonehouse.

Choose the right interface concept

Probably the most important aspect for all design in XR is to always be aware of the aim and nature of the project. For example, a minimalist AR companion for concertgoers does not need to be absolutely immersive. Authenticity may not be the primary focus in such meta-interfaces. In this example, Diegetic UI is not superior to a regular, static interface, but only complicates the user experience unnecessarily.

Overall, user interfaces can be divided into three categories. Static UI, places information as a static overlay over the user’s field of view (this method is most popular with AR apps). In comparison, Spatial UI uses the three-dimensional environment to position the interface, such as a floating menu that curves around the user. Finally, there is Diegetic UI, based on which one does not break with the narrative of the application and the authenticity of the setting, and renders user-relevant information through believable shapes (a working clock on the wall, the display of a virtual smartphone, etc.). Before starting any project, it is therefore particularly relevant to weigh the pros and cons of the different platforms, as well as the different UI methods, and find the most effective solution for this project.

Design cross-platform and in patterns

The biggest challenge of Extended Realities – and also the biggest difference to conventional media – is the diversity of interaction design. The various disciplines could not be more different: While one application is controlled via motion tracking through gestures and hand movements, the next uses exclusively controllers and buttons, whereas another works only via gaze control.

This rich fauna of interaction possibilities requires strong design patterns and pattern libraries, especially for projects across multiple XR platforms, so that the user journey and user experience remain as consistent and user-friendly as possible.

Guide the user – gently and cautiously

Good UI: Clean, crisp and comprehensive. Image source: aixlab.com.

In the same vein, interface density is something to consider. Popups and crowded interfaces are already confusing on two-dimensional media and cause some headaches, but in XR – especially when you are positioned in the middle of the UI – chaotic and crowded UI has a claustrophobic effect.

Therefore, it is recommended to keep your distance first, let the user approach the virtual environment, and only then interact.

Final Thoughts

In any sense, one should not be put off by XR and its associated complexity. As a trailblazer, new aspects are explored every day and the opportunity to pioneer new niches is hardly so close in any other field. Thanks to open source software such as Unity and Blender, the entry threshold is extremely low and even laymen can build prototypes within a very short time. Go explore!

Travel booking in the age of the service economy

Recently we’ve been deepening our design sprint skills whilst working for flyiin, a start up co-founded by Marco. For those who don’t know flyiin yet: with it’s roots in the airline industry, the start up is pushing the boundaries of customer experience in flight booking. During four design sprints we’ve been developing flyiin’s user experience in close corporation with their technical product development team in Budapest. As a designer I was impressed by the positive dynamics of the mutual influence of design and product development. Our common objective is to provide you with a hassle free trip that starts when checking for flights.

Continue reading “Travel booking in the age of the service economy”

Designpraktikum bei think moto – ein Rückblick

1. August bis 15. Januar – wo sind bloß die letzten sechs Monate geblieben?

Für das Praxissemester habe ich den Weg von der Hochschule für Gestaltung Schwäbisch Gmünd nach Berlin zu think moto gefunden, bevor demnächst mein Auslandssemester in Australien startet.

Mein Anspruch an das Praktikum war, Gestaltung aus einer anderen Perspektive als in den ersten vier Semestern im Studiengang Kommunikationsgestaltung zu betrachten. Die digitale Gestaltungsrichtung bei think moto war meine Herausforderung.  Continue reading “Designpraktikum bei think moto – ein Rückblick”

7 questions to: NotAnotherOne

The founders of Gero and makers of the YotaPhone are launching their next big thing: Atmotube – the personal air quality tracking device.

We first met the team of NotAnotherOne in 2013 while working on the generative brand for Gero and were now curious to hear about their new start up and their upcoming Indigogo campaign. CEO and co-founder Vera Kozyr gave us some insights…

Continue reading “7 questions to: NotAnotherOne”

Neue Unterstützung kehrt ein!

Wir freuen uns sehr über Dorothée, die uns in den nächsten sechs Monaten als Praktikantin im Bereich Visual und UX Design tatkräftig unter die Arme greift.

Doro studierte Kommunikationsdesign an der HTW Berlin und ist Mit­grün­de­rin/Mitglied bei „sehen und ernten“, einem studentischen Designnetzwerk. Auch in ihrer Freizeit überlegt sie sich am liebsten Lösungen und Konzepte für nachhaltige Produkte. Bei think moto möchte sie sich mehr über Konzeption und UX Design aneignen. Während ihrer Bachelorarbeit ist sie auf das Buch „Branded Interactions“ von Marco Spies gestoßen. Das Buch hat sie so sehr beeindruckt, dass sie bei think moto Erfahrungen sammeln möchte.

Continue reading “Neue Unterstützung kehrt ein!”

7 Questions to: Vigour – Part 1 of our series on promising startups

Today we start a new series on brandnewthinking.de: From now on we will introduce interesting startups and speak with them about the role of design and brand management during the founding phase.

Our first startup is Vigour, a company for innovative multiscreen video services. Their product Vigour video helps media companies offer a new kind of video experience — without the usual boundaries of TV, tablet or smartphone. Their white label interface solution merges the screens of any combination of devices into a fluid multiscreen experience and makes them behave like a single interface. Continue reading “7 Questions to: Vigour – Part 1 of our series on promising startups”

Die smarte Art der Markenkommunikation: sayHEY Messenger für simyo

Kürzlich launchte simyo seinen Messaging Service sayHEY, bei dessen Entwicklung besonderes Augenmerk auf Komfort und sichere Verschlüsselung gelegt wurde. Dadurch trifft der neue Service den Nerv der Zeit: Komfortables Messaging über alle Geräte und an alle Kontakte bei garantierter Datensicherheit.

Gemeinsam mit simyo haben wir einen Dienst entwickelt, der – als Teil des simyo Marken-Ökosystems – das Selbstverständnis der Mobilfunkmarke erfahrbar macht: Menschen die wesentlichen Innovationen der mobilen Kommunikation einfach, komfortabel und sicher zugänglich zu machen.

Der Verzicht auf ein starkes simyo-Branding kommuniziert dabei nicht nur die Offenheit des Dienstes für alle Nutzer (auch Nicht-Kunden), sondern zeigt auch die Souveränität von simyo die eigene Marke bewusst zurückzunehmen. Wir unterstützten simyo bei der Entwicklung dieses innovativen Messaging-Dienstes von den markenstrategischen Grundlagen, über die Entwicklung des Markennamens und des visuellen Erscheinungsbildes, über die Grundparameter der User Experience, die Landingpage, bis zu Kommunikationskonzepten und verschiedenen Kommunikationsmitteln.

Für sayHEY kam uns zugute, dass wir 2012 bereits die Neupositionierung von simyo entwickelt und vielfältige Anwendungen gestaltet hatten. Dadurch konnten wir für sayHEY eine Marke entwickeln, die die Grundwerte von simyo transportiert – also immer auf Augenhöhe kommuniziert und näher an den Menschen ist – und diese trotzdem aus ihrer eigenen Sicht interpretiert. sayHEY ist gleichermaßen nur ein Teil von simyo, und auch viel mehr.

Starthilfe für Start-Ups? Branding!

Die Herausforderungen und Aufgaben von Start-Ups sind endlos: das Budget und die Mittel sind knapp, das Zeitfenster für den Launch wird von Tag zu Tag kleiner, bereits gewonnene Investoren wollen bei Laune gehalten und neue Investoren überzeugt werden und schließlich soll das eigentliche Produkt ja auch möglichst bald das Licht der Welt erblicken… Warum sollte man als Start-Up seine Ressourcen dann gerade für Branding einsetzen? Ist es nicht wichtiger alle Ressourcen in die Produktentwicklung zu stecken? Und wenn schon Marketing, dann doch eher um die Bekanntheit zu erhöhen und den Traffic auf die eigene Website zu lenken, oder?

Nein. Branding ist schlicht elementar für Start-Ups und die am meisten unterschätzte Disziplin im Start-Up „Zehnkampf”. Continue reading “Starthilfe für Start-Ups? Branding!”

Slideshare: Responsive Web Design

Responsive Design ist heute allgemeiner Standard. Dabei fehlt vielen Teams aus Konzeptern, Designern, Entwicklern und Projektmanagement noch der ideale Prozess schnell zum finalen Design für die verschiedenen Screengrößen zu gelangen und dem Kunden eine Vorstellung der fertigen flexiblen und dynamischen Webseite zu vermitteln.

Im think moto Sommerworkshop sind wir dem idealen Prozess für uns und andere Teams auf die Spur gegangen. Jordi hat in seiner Keynote einen guten Überblick über die Elemente von Responsive Web Design gegeben und den Unterschied zum Adaptive Design aufgezeigt. Er zeigt auch ein Beispiel für einen Responsive Design Prozess, der “mobile first” und einen iterativen und agilen Ansatz bietet. Hier findet ihr seine Keynote zu Responsive Web Design.

Our mid-year trend report for 2013 now online in english

Some time ago we published our mid-year trend report for 2013 on our blog in German. Knowing that we are increasingly having more international followers, we translated the report into English. Further more we published both reports as a presentation on slide share. Enjoy reading it and feel free to share if you want.
Continue reading “Our mid-year trend report for 2013 now online in english”

We minimize and compensate our CO2 consumption.

Cookie Consent with Real Cookie Banner