Building the Metaverse – UI/UX Best Practices

Virtual reality (VR) and augmented reality (AR) are nothing new for passionate gamers, but, in other industries, it could cause a revolution. The potential of VR/AR’s power to create an exceptional user experience is still untapped, which is why we took on the challenge to demonstrate how this technology can work for a client.

Today, virtual reality and augmented reality have already become mainstream in the gaming industry. Thanks to its potential to engage users, it attracts a lot of interest from Millennials and Gen Z,who want to enjoy lifelike, immersive experiences. Mixed reality ha huge potential; it’s a new way to interface with emerging platforms on the metaverse and provide a revolutionary user experience. VR and AR technologies as well as NFTs, Ordinals, and AI has the potential to merge diverse digital content with the real world to create unique experiences.

An indication of how quickly mainstream brands are adopting the metaverse and VR is evidenced by Gucci. The world famous brand is making its presence inside of Roblox a little more permanent. The fashion brand previously collaborated with the virtual world for more short-lived experiences, like the surreal Gucci Garden from last year, and is now releasing a more persistent space called Gucci Town. The space features a central garden that links together various areas, including a space for mini-games, a cafe, and a virtual store where players can, of course, purchase virtual Gucci gear for their Roblox avatar. The company says the virtual outfits make use of Roblox’s new “layered clothing” tech.

Gucci says that more than 20 million players visited the garden last year, despite it only being available for two weeks, and it expects the new space to steadily evolve over time. “The starting point when designing the experience has always been the community,” Nicolas Oudinot, Gucci’s EVP of new businesses, told The Verge. “True to this, we envision the future developments as an open dialogue between Gucci and the recurring visitors. Emerging content creators and talents from the Robloxcommunity will be on board, while we will infuse the ecosystem with new ideas and visual stimuli, as our creative messaging is forever in flux, evolving with the kaleidoscopic vision of creative director Alessandro Michele.”

Roblox Studio

Roblox Studio is the studio creation tool for Roblox. Studio enables you create anything and release with one click to smartphones, tablets, desktops, consoles, and virtual reality devices

Devices

To experience the metaverse mean using hardware like headsets. All VR headsets are not created equal – the best solution depends on your team, budget, and intended usage. We recommend you stick with high-end, outside-in tracking headsets like the Valve Index or HTC VIVE Pro if you are creators. These provide the highest performance with most accurate tracking for reliable design reviews. The tethered HP Reverb G2 and Oculus Rift S (phasing out soon) also allow for powerful editing and reviewing heavy models, at the tradeoff of slightly less accurate inside-out tracking. These type of headsets are best for design and creation. For end-users we recommend  Meta Quest 2 as it represents the best of both worlds; combining a portable, lightweight headset you can use anywhere, with the optional power of a tethered headset if you use a link cable. Priced at just £250 ($299), which is less than 1/4 of the cost of the average business trip today , many distributed teams are opting for the convenience and affordability of the Quest 2 for their collaboration.

Enterprise teams may want more security and control of deploying software at scale – the Pico Neo 3 Pro is a great solution for large teams looking to set a standard VR device for multiple collaborators. (Pro-tip: if your team does plan on sharing headsets at any point, make sure to invest in a box of sterilizing cleaning wipes between uses)

Oculus (below) provides in its website a basic guidelines in terms of components sizes and colors. It also provides great infographics to understand how the user look at the screen in VR, where it is comfortable to look at and where it is not, as well as the vision degrees of the human eye.

UI Components

FloatGrids is an XR Design System with one purpose: Speeding up your XR UI design and development process while maintaining consistency, scalability and high quality visual UI components. FloatGrids is a tool that allows UX/UI designers to design VR/AR UI as they have always done and developers to recreate the designs with accuracy while keeping the consistency and scalability.

FloatGrids live in software like Figma and Unity separately. Both platforms are perfectly aligned, so, all the fundamentals and UI components are the same in both platforms. Same names, same structure, etc. FloatGrids achieve this goal by providing a free Figma file and a free Unity Package. Both are aligned in terms of components, styles and nomenclature. Furthermore, FloatGrids has been built using ‘Atomic’ principles and methodology so that it is completely customizable. What’s more, it provides guidelines and best practices for designers to understand how UI works in VR/AR environments.

Semantic and Responsive Gestures

XRTK (above) is a framework for XR from Microsoft based in Unity. It is focused on their product Hololens. Even though they provide a Figma file, it is View Only.

Hand tracking and virtual reality are both emerging technologies, and combining the two into a fluid and seamless experience can be a real challenge. In both cases, developers need to overturn many longstanding ideas that have served them well for traditional PC setups. It’s also an incredible opportunity — the chance to experiment and create in ways that previously existed only in the pages of science fiction.

This guide brings together longstanding user experience design principles and VR research with what we’ve learned from ongoing development and user testing. Like everything in this field, it’s just a stepping stone on the path to the Metaverse.

Gestures break down into two categories: semantic and responsive. Semantic gestures are based on our ideas about the world. They vary widely from person to person, making them hard to track, but it’s important to understand their impact on meaning to the user. For example, pointing at oneself when referring to another person feels foreign.

Responsive gestures occur in response to the ergonomics and affordances of specific objects. They are grounded and specific, making them easy to track. Because there is a limited range of specific interactions, multiple users will perform the exact same gestures.

By leveraging a user’s understanding of real-world physical interactions, and avoiding gestures that don’t make sense in semantic terms, we can inform and guide them in using digital objects. From there, the opportunities to expand a user’s understanding of data are endless.

3D Environments

Designing virtual environments such as places and landscapes requires proficiency with 3D modelling tools, putting these elements out of reach for many designers. However, there’s a huge opportunity for UX and UI designers to apply their skills to designing user interfaces for virtual reality (or VR UIs, for short).

Below is what a 360-degree environment looks like when flattened. This representation is called an equirectangular projection. In a 3D virtual environment, these projections are wrapped around a sphere to mimic the real world.

The Concept

Virtual Reality can enhance a vacation before, during, and after travel – using content drawn from the destination, the property, or both. Augmented Reality can assist with navigation, provide customer service, and facilitate loyalty programs. Overall, VR & AR for hotels and resorts can elevate the status of any hospitality brand.

We worked with a client (NDA is inlace) to develope a VR resort walkthrough that allows vacationers to explore and visit properties and attractions in a range of destinations from the comfort of their own homes. We developed add-ons like interactive upgrades or seasonal variations can maximize the value of a destinsation or attractions ‘digital twin’ – a VR counterpart – that can extend the enjoyment and enable holiday makers to relive there experience and access additional services remotely, such as shopping or purchasing souvenirs.

Digital Twins – remote virtual replicas of a hotel or resort are also an ideal try-before-you-buy approach to tourism marketing. Travellers in either the decision-making phase or who are looking for collateral to help them get excited about a booking already made can literally immerse themselves in a picture-perfect version of a place.

While virtual versions of a property are the largest investment to be made in VR or 360 degree video, they will easily be the most memorable. The digital twin of a resort or hotel also has the added benefit of being completely under the developer’s control.

An Escape within An Escape

Another opportunity for hotels and resorts to offer VR is as an on-site activity by supplying top quality headsets. Whether that VR offering takes the form of a common lounge or an in-room device, business and pleasure travellers alike can enjoy games and other immersive experiences alongside the hotel’s other amenities.

Initial investment can be as little as a single headset and a small selection of VR content from the Steam digital marketplace. You could expect to get started for £1000-£2000, depending on accessories like controllers and headphones or speakers. If you go the lounge route, you might even want specialized chairs with haptic gloves and/or vests to really complete each experience.

Resorts and hotels with amenities like restaurants and spas who market to non-guests in their communities could consider a VR lounge as an offering along the same lines.

Augmented Reality

Augmented Reality apps tailored to your property’s neighbourhood or region are just one more value-added feature hotels can offer guests. It can be as easy as adding a QR code to a tent card or a hotel directory binder. Properties in popular urban destinations may be able to access existing apps, although custom-branded AR tour guide apps are likely to be more affordable than you might think. Hotels with strategic business partnerships in their communities can strengthen those connections with another referral channel via AR. Language and logos can carry over from your marketing collateral into the AR app, ensuring that your messaging and customer service are consistent – like a concierge to go.

Using visual confirmers in the cityscape we are able to trigger AR objects (floatgrids) that feature information about an asset (a building or sculpture or feature in the landscape) where users are able to explore information at a pace that suits them, while the host city or area can use the AR asset to nudge the user to engage with historical timelines, local commerce or services relating to that specific location or artefact.

Providing access to educational AR apps adds another layer of value for guests, helping even the most unprepared traveller to get the most out of his or her accommodation. Apps rich with information about geography, historical locations, landmarks, and seasonal events can be anywhere from practical (hiking maps with flora and fauna labeled) to magical (virtual restorations of ancient ruins) with just a few clicks.

XR Extended Reality

The next generation in XR product development is going to do more than just tack on an AR or VR component to an existing product. We explored using QR codes that launch AR content or 360-degree artwork or in a video game, a bonus level playable in full VR immersion.

I used a range of technologies including:

Floatgrids www.floatgrids.com

Unity Package Get the Unity package here

Documentation Take a look at the documentation here

Join FloatGrids Discord server here!