Author: Mira Kropatsch

Im Rahmen meiner Bachelorarbeit habe ich Richtlinien der Fachliteratur mit Fokus auf Content-Strategien und Interfacedesign-Richtlinien erklärt und zusammengefasst. Ziel war es, diese für das Redesign der Schloss-Schule Website anzuwenden. Durch dieses Projekt weiß ich alles Nötige über das Unternehmen und die Ansprüche, um die Website ins Dreidimensionale zu übertragen.  Ich möchte kurz wiederholen, was für Punkte ich bei der Bachelorarbeit herausgearbeitet habe und dann darauf eingehen, was meine Ideen sind.

Da ich bei der Masterarbeit nicht das ganze Thema behandeln kann, ist das Ziel dieser Übung herauszufinden auf welchen Aspekt ich mich genauer fokussieren möchte.

Startseite

Der Besucher sollte auf der Startseite sofort erkennen, von wem die Seite ist. Dazu ist es wichtig, das Corporate Design des Unternehmens zu verwenden. Vor allem das Logo, der Name und Farben spielen hier eine große Rolle.

Wichtig ist auch, was der Besucher als Erstes sieht. Die Startseite bestimmt den ersten Eindruck und bleibt oft die einzige Chance, um Vertrauen und Glaubhaftigkeit zu etablieren. Sie gibt die Persönlichkeit der ganzen Website vor.  Hier sollte der User sofort entnehmen können, worum es auf dieser Seite geht und was man hier machen kann.

Meine Idee ist es, viel mit Fotomaterial zu arbeiten. Und zum Beispiel durch verschieden Ebenen einen Parallaxe Effekt zu schaffen. Zusätzlich soll mit 360 Grad Fotos, vor allem vom Ambiente gearbeitet werden, da dieses das Unternehmen besonders macht.

Man befindet sich auf einem Feld in dem Pastell gelb der Website. Ich möchte die Elemente der Collagen-Grafiken, der Website, wiederverwenden. Zentral zu sehen, soll der Schloss-Türbogen sein, in dem man in den Schlosshof sieht. Geht man durch den Torbogen, betritt man den zentralen Teil der Website. Aus dem Bogen sprudelt das Leben heraus. Wichtig ist generell, dass viele Menschen in den Grafiken sieht, weil das Schloss von deren Lebendigkeit lebt.

Links vom Bogen soll eine Grasinsel sein, darauf sieht man Leute in gemütlichen Situationen. Am Tisch lernenden, im Gras liegend, am Lagerfeuer sitzend. Mit dem Satz: „Dieses Schloss ist auch dein Schloss – Sei im Schloss zu Hause – genieße den Freiraum und alles, was das Schloss zu bieten hat.“

Rechts vom Bogen ist eine Grasinsel mit Szenen aus den Kursen. Über diese Insel schwebt der Spruch „Kurse mit Herz & Verstand – Miteinander auf Augenhöhe“.

Pathwaypage

Geht man durch den Torbogen, gelangt man in den Innenhof des Schlosses. Von hier aus gelangt man zu den „Unterseiten“/ verschiedenen Informationen.

Jede Unterseite soll in einen eigenen Raum des Schlosses sein.
Wäre aber ganz viele Tür/ Portale als Menüpunkte, wäre das schnell zu unübersichtlich.
Ich würde einen Tisch/Altar machen, auf dem mehrere Gegenstände liegen, die für die wichtigsten Menüpunkte steht. Man „öffnet“ die Seite, indem man einen Gegenstand hochhebt und sich vor einem eine Vorschau öffnet. Bestätigt man, wird man in den Raum teleportiert.

Einer der wichtigsten Seiten ist die Kursübersicht mit der Detailseite zu den einzelnen Kursen. Als metaphorischer Gegenstand würde sehr gut ein Samen passen, der vielleicht fantasievoll aussehen kann.

Der Raum ist einer der Kursräume: der Rittersaal. Vor sich hat man eine Ebene mit der Liste der Kurse. Links daneben eine Voransicht des Kurses, die ein großes Foto und einen kurzen Text.  Bestätigt man, öffnet sich eine Eben mit allen Informationen. Jeder Text soll die Option haben, dass man sich ihn vorlesen lassen kann.

Geschichte des Schlosses: Raum mit Fotos an den Wänden.

Verpflegung und Entspannung:  Diese Seite soll das schöne Ambiente der Schule zeigen. Da es 360 Grad Aufnahmen gibt vom Schloss, würde ich hier den Besucher zu den wichtigsten Räumen teleportieren/ziehen, mit kurzen erläuterten Text.

Sinnhaftigkeit

Damit das ganze einen Sinn hat, muss man davon ausgehen, dass mehrere Leute ein VR-Brille besitzen. Die Website kann auch ohne benutzt werden, verliert aber dadurch viel vom Erlebnis. Ich finde das die Website Sinn macht für Leute, die die Schloss-Schule noch nicht kennen und dadurch einen sofortigen Einblick bekommen ins Unternehmen. Für Leute, die nur auf die Website gehen, um einen weiteren Kurs zu buchen, hat es keinen wirklichen Mehrwert.

Was die Umsetzung angeht, habe ich das Gefühl, dass es quasi unleistbar wäre, weil der Aufwand zur Umsetzung so groß ist. Wahrscheinlich braucht es ein 3D-Website-Baukastensystem, mit dem man zukünftige Websites erstellt.

Mehrere Räume vs. eine Bühne
VR wird auf Websites oft für virtuelle Showrooms bzw. Museum eingesetzt. Dieses sehr klassische Konzept möchte ich zwar nicht ausschließen, aber eher davon wegkommen. Hingegen gefällt mir gut, dass man eine Bühne hat, auf der man den Inhalt präsentiert. Dadurch erspart man sich Wayfinding durch mehrere Räume, das architektonische Gestaltung derselbigen, der User kann virtuell und in echt an einem Fleck bleiben (keine motion sickness). Viel wichtiger, ich finde ich es eine interessantere Art der Präsentation, weil ich nicht etwas aus der echten Welt direkt ins virtuelle übersetzen möchte, beispielsweise einen echten Showroom durch einen virtuellen ersetzen, sondern nach einem neuen Weg suche, wie sich die Inhalte in dreidimensionalen Raum darstellen lassen. Hier hat mich die Seite von pluto.app sehr beeindruckt, mit einer Plattform vor sich, mit mehreren Objekten, und jedes gibt anderen Inhalt preis, wenn man mit dem Objekt interagiert.  

Rolle von Videos und Fotos
Auf vielen Websites, beispielsweise von Vredestein-experience-centre, finden sind zahlreiche Videos. Dies finde ich interessant, da dieses „zweidimensionales Medium“ für mich durchaus Platz hat, ich aber nur sparsam als Inhalt einsetzen würde, da eine dreidimensionale Welt nicht der richtige Rahmen ist.

Konkreter Inhalt vs. Überladung/Verirrung
Was für mich die meisten Websites nicht getan haben ist, konkreten Inhalt zu vermitteln.  Hier ist für mich ein sehr kritischer Punkt: wie viel Inhalt man durch die virtuellen Objekte statt Text vermitteln. Natürlich bleibt Text ein Teil, aber längere Texte sind für mich in dieser Umgebung eher störend. Bestmöglich sollte man Text reduziert – zugunsten der User, die nicht gerne viel lesen.

Dreidimensionale Websites vs. Website mit 3D-Objekten
Wenn man nach dreidimensionale Websites sucht, findet man viel Websites, die3D-Objekt integriert haben, die sich beispielsweise durch Scrollen drehen – diese Variante möchte ich nicht behandeln.

Zusätzliche Anreize

• Was mir gut gefällt ist, Gamification einzubauen, beispielsweise die Suche nach versteckten Objekten mit Belohnungen.
• Der Raum muss zu 100 % die Persönlichkeit der Firma widerspiegeln.
• Hybrid: Startseite virtueller Raum durch scrollen kommt man auf einer „herkömmlichen Website.“

https://www.artisansdidees.com/en

Artisans d’Idees, ist eine internationale Agentur mit Expertise in den Bereichen Innovation, Produktion und digitale Erlebnisse. Auch ihre Website ist ein Erlebnis. Man sieht einen Wirbel, der sich durch eine Landschaft bewegt. Man kann sich mit dem Wirbel leicht rechts und links bewegen. Durch Klicken verändert sich die Lichtverhältnisse und man sieht Slogans, mit Visionen, die Artisans d’Idees erfüllen kann, wie: Awaken your curiosity, magnify talents, illuminate tomorrow with your ideas. Danach kommt man in eine neue Landschaft.

Man kann bei jeder Szene nach unten scrollen und kommt zu einer kurzen Beschreibung von Artisans d’Idees. Auch hier kann man der Wirbel steuern, der den Text erleuchtet.

Ich finde, es ist eine wunderschöne Website, und da sie Erlebnisse verkaufen ist es auch gut, dass sie ihre Kompetenzen in dem Bereich zeigen und in den Vordergrund stellen. Für Firmen in anderen Bereichen könnte man den Besucher durch die Geschichte, das Gebäude, das Team oder ein Stimmungsbild ziehen. Was ich mitnehme ist, dass man ein Element hat, das einen durch die ganze Seite führt und alles zusammenbringt.

https://www.charlottetilbury.com/uk/virtual-store#/skincare

Charlotte Tilbury, eine Marke für Make-up und Hautpflegeprodukte, hat einen dreidimensionalen virtuellen Shop geschaffen. Dieser ist einfache gehalten, schafft aber, im Gegensatz zu einem Nachbau einen normalen Handels-Store, einen eigenen Charakter und Erlebnis.

Umgeben von Sternen befinden sich mehre runde Plattformen wie Inseln, die untereinander verbunden sind. Auf den meisten Inseln sind, mehre Produkte zu einer Linie präsentiert und im Hintergrund Videos und Fotos dazu. Jedes Produkt kann angeklickt werden und es öffnet sich im Vordergrund Produktinformationen. Man bewegt sich zwischen den Inseln, indem man auf eine klickt. Je mehr Inseln, desto schwieriger wird diese Navigation, da sich die Inseln zu verdecken zu beginnen. Wie bei allen VR Websites, die ich bis jetzt gesehen habe, habe ich das Gefühl, dass man nur relativ wenig Information/Produkte präsentieren kann, ohne dass es überladen/überfordernd wird, wie ein Dschungel aus Produkten. Was mir fehlt, ist etwas zu zoomen, da man Produkte und Fotos relativ klein sieht

Auf ein paar Inseln gibt es auch ein Telefon, mit einer Sprechblase darüber, in der steht: Call Charlotte. Tut man das sieht man ein Video von Charlotte, die Gründerin und Namens Geberin, wie sie etwas zum Produkt erzählt. Durch die Bezeichnung „Call Charlotte“ hat man das Gefühl, mit ihr in Kontakt zu treten, auch wenn ich dann persönlich enttäuscht war, dass man nur ein kurzes Werbevideo sieht und das Thema von einem Telefongespräch nicht aufgegriffen wird. Ich hätte wenigstens, dass das Video als Videochats mit ihr präsentieren können.

Ich denke das die persönliche Note von Charlotte eine große Rolle spielt, vielleicht hätte man sie direkter und noch persönlicher in die Website hineinbringen können. Beispielsweise das sie einen am anfangs willkommen heißt oder als Avatar auf der Website.

Eine Insel bewirbt die Funktionen „Shop With Friends“. Es ermöglicht einem, bis zu vier Personen in einem Video-Chat hinzuzufügen, um gemeinsam durch das virtuelle Einkaufserlebnis stöbern. Diese Funktion haben sie hinzugefügt, als sie als Feedback erhalten haben, dass Kunden während Zoom-Anrufen mit ihren Freunden in den VR-Store gingen. Auf einer anderen Insel wird persönliche Onlineberatung beworben, mit Stylisten trainiert von Charlotte. Auch dieses Feature wirkt sehr exklusiv.  

Vredestein-experience-centre

https://vredestein-experience.com/

Vredestein hat ein digitales experience-centre geschaffen, das Gäste frei erkunden können, um mehr über das Produkt zu erfahren.

Das Setting ist ein großzügiges futuristisches Gebäude, durch die Einrichtung und anderen Attrappen-Menschen, die herumstehen, fühlt es sich an wie ein Museum. Man startet in der großen Eingangshalle und kann sich um die eigene Achse drehen. Von hier führen zwei Gänge weg, mit jeweils mehreren Interessenschwerpunkten. Es schwer die Punkte zu vergleichen, weil man sich drehen muss, zum nächsten und in der Zwischenzeit schon wieder vergessen hat, was die anderen waren. Gezeigt werden die Themen mit einem Schriftzug und immer das gleiche Icon. Ich würde es gut finden, wenn man eine optische Unterstützung hätte um die Themen zu unterscheiden, wie eigen Icons/ Hologramm.

Klickt man auf einen Interessensschwerpunkt, fliegt man durch den Gang zum entsprechenden Raum. Mein Kritikpunkt ist, dass sich alle Räume sehr ähnlich schauen, und dadurch verunsichert ist, ob man hier nicht schon war/ auf das falsche geklickt hat. Zusätzlich sind in fast jeden Raum nur Videos, die sich als Werbeclips entpuppen. Das einzige Highlight ist das Modell des Autoreifens, dass man sich genauer anschauen kann.

Zusammenfassend würde ich sagen, dass das ganze experience-centre zwar optisch viel hergibt, aber gefühlt fehlt es an inhaltlicher Substanz. Man staunt eher über die Architektur, die Videos selber wirken von ihrer Machart, an diesem Ort, eher fehl am Platz.

Um mich mit dem Medium vertraut zu machen, möchte ich an eigener Hand erfahren, wie es ist VR zu benutzen. Dazu habe ich eine Oculus VR Ausrüstung besorgt und möchte eine Reihe von Websites und Apps ausprobieren, um mir vor Augen zu führen, welche gestalterische Notwendigkeiten dieses Medium mit sich bringt.

Pluto

https://www.pluto.app/

Als Erstes habe ich mir die Website von Pluto angeschaut. Es handelt sich um ein Unternehmen, das mithilfe von Extended Reality neue Kommunikationskanäle schafft. Die Website hat zwei Versionen: Einen für den die normale Webbenutzung und eine für VR.

VR-Version

Man befindet sich in einer Kuppel umgeben von Sternen. Vor sich hat man eine Plattform, auf der mehre abstrakte Objekte liegen. Was hier mitnehme, ist das der Hauptinhalt direkt vor einem ist und man sich nicht herumdrehen muss, um alle Informationen zu bekommen. So gibt es zwar weniger zu entdecken, aber man kann auf einem Fleck sitzen.

Mir gefällt das Grundprinzip sehr gut: Man hat mehrere Objekte vor sich liegen. Hebt man eines der Objekte auf, erscheint oberhalb ein schwarzes Textfeld mit der dazugehörigen Information. Wenn man fertig ist, den Text zu lesen, kann man das Objekt einfach fallenlassen oder wegwerfen und es fliegt zurück an seinen Platz.

Es macht Spaß, die Objekte von allen Seiten zu betrachten. Sie sind aber wenig Interaktiv, bis auf ein Objekt wo man eine Lila Blase schütteln kann. Ich finde, das könnte man noch Verbesserern, um mit der Art der Interaktion gleichzeitig die Information auf einer anderen Ebene zu vermitteln. Da die Objekte sehr abstrakt sind, muss man sie erst hochheben, um zu erfahren, was dahintersteckt. Das einzig konkrete ist ein Block auf dem „Join us“ draufsteht.
Hilfreich wäre zu Beginn auch ein Hinweis, wie ein aufblinken, um zu wissen, dass man mit den Objekten interagieren kann.

Für mich persönlich hat die Website zu wenig konkrete Information und wirkt eher wie die erste Landing-Page, da hauptsächlich die USPs aufgezählt werden. Man hat keine konkrete Vorstellung, wie der Service von Pluto aussieht.

Fortbewegung in VR – Locomotion

Als „Locomotion“ bezeichnet man im Kontext von Virtual Reality, die Fortbewegung des Users in der virtuellen Welt.   Um den User die Navigation zu ermöglichen, gibt es folgende Möglichkeiten:

• Die Übertragung der physischen Bewegungen des Users auf die des Avatars, mithilfe von zusätzlicher Ausrüstung wie beispielsweise Omnidirektionale Laufbänder.

• Eine weitere Variante ist, dass man sich frei im Raum bewegen kann und die Bewegungen durch Tracking Equipment, wie externe Infrarotkameras oder im Headset eingebaute Sensoren, ins Virtuelle übertragen werden. (=Roomscale VR)

• Eine gewohnte Methode ist das Steuern des Avatars mithilfe eines Controllers.  Durch die Diskrepanz der visuellen Bewegung und den physischen Stillstand des Körpers, kommt es allerdings schnell zu ‚Motion Sickness‘, auch bekannt als ‘Vestibular Mismatch’. Um dem gegenzusteuern wird empfohlen, das Sichtfeld während der Fortbewegung einzuschränken.

• Eine weitere Möglichkeit von einem zum nächsten Punkt kommen ist Teleportation. Allerdings kommt es durch die Sprünge schnell zu Orientierungslosigkeit. Um den Übergang natürlicher zu gestalten, kann während dem Sprung eine Schwarzblende eingesetzt werden, so als würde der User einmal blinzeln, oder der User wird in hoher Geschwindigkeit und mit ‚speed lines‘ zum Ziel hingezogen.

Quelle: https://circuitstream.com/blog/vr-locomotion/
https://www.vodafone.de/featured/digital-life/roomscale-vr-wie-die-virtuelle-realitaet-jetzt-noch-realer-wird/#/

Bad/Epic Practice

In der Serie „Community“ wird auf lustige Weise gezeigt, wie man mithilfe von VR, einfache Aktionen wie das Kopieren eines Files, zu einem epischen Abenteuer machen kann:

“In order to copy a file, you have to throw a fireball at it, then absorb the fire, then drop the flaming file into a crystal lake, then take out both copies and throw them into the side of a mountain.” (Minute 13:00)

Jeder Ordner ist eine eigene Welt mit wieder eigenen Welten. Die Einstellungen selbst bestehen aus einem gigantischen Aktenschrank, den erklommen werden muss. Hat man die richtige Datei gefunden kann man sie beispielsweise nicht durch einen Laserstrahl zerstören, sondern muss die Datei im Wasser vernichten.  “These cabinets would never be this easy to climb in real life. MY WORLD IS OFFICIALLY BOUNDLESS!”

Diese Woche habe ich mir zwei Beispiele angeschaut für ein Metaversum. Zum einen als Einstieg für mich in die Materie und zum anderen um zu sehen, was ich mir für mein Konzept einer virtuellen Website herauspicken kann und in welcher Form solche bereits existieren.

Meta – Eine mögliche Zukunft

Handel soll ein großer Teil des Metaversum werden. Beim Event ‚Connect 2021‘ zeigte Meta, wie Visagistin Jackie Aina ihre Lifestyleprodukte im Metaversum präsentieren und vermarkten könnte. Der Raum selbst kann genutzt werden, um eine Atmosphäre und Erfahrung mit der Marke zu erzeugen. Jedes Produkt hat einen eigenen Raum, der von Duft ihrer Produkte inspiriert ist. Im Video wird einer ihrer Kerzen in einem Rahmen präsentiert, im Rahmen eröffnet sich der Raum, in dem die Kerze steht.

Für Jackie ist es wichtig, mit ihren Fans in den Kommentaren zu interagieren. Durch das Metaversum hätte sie die Möglichkeit, direkt mit Fans zu kommunizieren und so eine tiefe Verbindung zu schaffen.
Hier ein Auszug aus dem Gespräch: „Das ist ziemlich mächtig, und es macht die Person am anderen Ende des Kommentars menschlich. Und ich denke, dass es eine wirklich interessante Möglichkeit ist, darüber nachzudenken, wie wir eine Gemeinschaft aufbauen und wie wir uns mit unseren Fans auf eine wirklich tiefgreifende Art und Weise auseinandersetzen, im Gegensatz zu einer reinen Kommentarfunktion.“
Es kann exklusive Launch-Partys oder Produkte geben, die nur zugänglich sind für Nutzer, die extra dafür zahlen. Durch das Metaversum ist es möglich, digitale und physische Produkte zu verkaufen. Diese Aussicht zeigt mir, was für eine große Rolle die virtuelle Präsenz im Metaversum für Unternehmen sein wird.

• 

https://www.youtube.com/watch?v=Uvufun6xer8&ab_channel=Meta
Transkript: https://www.rev.com/blog/transcripts/meta-facebook-connect-2021-metaverse-event-transcript

Janus XR – Klein aber fein

Janus XR hat bereits eine Metaversum umgesetzt, wenn auch nicht in so einen großen Style wie Meta. Janus XR ist ein Webbrowser in dem gemeinsame dreidimensionale Räume gestalten werden können. Jede Webseite ist als Raum verfügbar, die durch Portale miteinander verbunden sind.

Genutzt wird es, um ein virtuelles Event zu veranstalten, Kunden durch ein virtuelles Haus zu führen, Arbeitsbereiche zu simulieren oder auch um Orte zu erkunden. Die Möglichkeiten sind endlos. So kann man zu Beispiel an einem digitalen Malkurs teilnehmen, den Raketenstart der SpaceX mitverfolgen oder Welten/Orte erkunden. Was ich cool finde ist, dass man zum Beispiel Videos oder den eigenen Computerscreen in den Raum einbetten kann. Soweit ich gesehen habe, wird es aber nicht dafür genutzt, um Unternehmen/ Website hier zu vertreten.

Vom Interface ist nicht viel mitzunehmen: Es besteht aus einer URL Zeile, Ladebalken und Benachrichtigungen. Navigiert wird mit Tasteninput.
Interessant ist, dass man zwischen einer 2D-View und VR-View umschalten kann. So kann es auch ohne VR-Ausrüstung verwendet werden. Das Erstellen eines Webspace soll ganz einfach funktionieren: Zum Erstellen braucht man die Programmiersprache Janus Markup Language (JML) die HTML sehr ähnlich ist. 3D Modelle können einfach hineingezogen werden.
Bei Janus XR handelt es sich um Open source Programm. Mit Janus könnte ich vielleicht erste Umsetzungen probieren.

https://janusvr.github.io/guide/#/build/README?id=build-introduction

https://www.janusvr.com/docs/learn/general/index.html

https://www.youtube.com/watch?v=CyzI3jnehTY&ab_channel=VRARASeattle

Während Virtual Reality in großen Branchen wie im Automobilindustrie, Gesundheitswesen, Tourismus und Immobilien schon großen Anklang findet, ist nun auch die Verwendung von VR auf Websites am Vormarsch. Dies bietet die Möglichkeit, interaktive und hautnahe Erlebnisse zu schaffen. Anwendung findet es beispielsweise schon in virtuellen Showrooms für Interior-Design. So können die Vorteile des online shoppen und physischen shoppen vereint werden, indem Produkte dreidimensional betrachtet, Größenverhältnisse eingeschätzt und unterschiedliche Ausführungen das Produkt verglichen werden können.  Auf Websites eingesetzt wird VR auch für Datenvisualisierungen, virtuelle Galerien und online Spiele. Durch den Browser ist es möglich, VR auch ohne teure Equipment zu jedem nach Hause bringen, beispielsweise mit der Smartphone-Brille.

Mein Ansatz

Besonders interessiert mich die Idee, Websites für kommerzielle Unternehmen komplett dreidimensional zu gestalten. Somit hätte man die Möglichkeit den Berührungspunkt mit dem Unternehmen lebendig und auf neue Weise erlebbar zu machen. Eine dreidimensionale Website bringt einen auch zu fundamentalen gestalterischen Fragestellungen: wie ist der Inhalt aufgebaut, wie steuert der User, welchen Mehrwert gibt es.

Folgende Bereiche interessieren mich beim Einsatz von VR in Websites:

• Wo und in welchen Bereichen wird VR bereits bei Websites eingesetzt
• Was ist technisch alles möglich
• Wo ist es sinnvoll VR einzusetzen
• Entwicklung eines Konzeptes
  • Navigation/Steuerung
  • Darstellung von Informationen
  • Umgebung
  • Mehrwert (dienlich oder nur Ästhetik)