Designing AR and VR for Websites
New challenges, risks, and opportunities for designers
Within the past few years, designers have been pushing the limits of modern web browsers with new ways to tell stories via websites. Technologies like WebGL, WebSockets, and 3D rendering APIs like three.js have all helped digital creators rethink the way a traditional webpage behaves. Websites no longer have to be a series of scrolling, static pages that linked via hyperlinks. Instead, they can be interactive playgrounds that immerse their respective users. Virtual Reality and Augmented Reality are the most talked about of these emerging technologies and companies are now encouraging designers and content creators to begin to leverage them in their everyday practice.
New tools, faster Internet speeds, and the compatibility of modern web browsers have all made designing Web VR & AR experiences more accessible than ever before. But with these new mediums, there are new challenges, risks, and patterns that designers must adapt to create seamless and intuitive experiences.
Defining A Goal
Although VR & AR have seen the widest mainstream appeal in mobile apps and games up to this point, web experiences are becoming more adopted. Before designing a Web VR or AR experience, it’s important to define its goal. Like designing a landing page or an e-commerce site, establishing what actions you would want the user to take and how this technology would help them reach these goals further creates engaging and seamless experiences.
Virtual Reality is great at cultivating new storytelling opportunities through the use of 360º videos and immersive environments. A user can enjoy these browser-based experiences via a headset, or by dragging and moving content within a browser. Emergence Magazine uses a Web VR experience as the basis for their “Sanctuary of Silence” cover story. With it, they show how Olympia National Park is one of the quietest and most serene places in North America. This use of VR engages the user and helps show the core message of the story in an immersive and delightful way.
Augmented Reality provides new ways for users to interact with physical products and objects in the comfort of their own home. It can also show off the unique features of these objects in interesting ways. Shopify’s latest integration with 3D Warehouse allows users to view 3D renderings of products and place it in real spaces via ARKit. InstantPot, a programmable pressure cooker, allows prospective customers to see how the product looks in their kitchen before they commit to purchasing. This use of AR is a smart way to give customers the confidence needed to make an informed purchase.
Blending Many Mediums
When designing for Virtual Reality and Augmented Reality, designers must seamlessly blend multiple forms of communication together in order to create a cohesive experience. Video, music, copywriting, and 3D modeling are a few of many different mediums that can inhabit an experience to make it truly immersive.
To support their 2018 Super Bowl campaign, Pepsi created an immersive Web VR experience that integrates video, 3D models cars, music, and even a poster of Cindy Crawford to show iconic moments in the brand’s history. This experience, titled Pepsi Go Back, jumps between these different mediums in a way that supports the goal of the campaign. To tell the brand’s history and cultural impact in an engaging way.
Since AR provides interactive models in real spaces it has unique design considerations. Two of the most important, as defined in this article by Google, are both “environmental considerations” and “visual affordances”. Users should be aware of the visual space needed to interact with an AR object and they should also be aware of which object they can interact with. Google UX designer, Alesha Unpingco, notes that “visual cues like instructional text or character animations can direct users to move around their physical spaces” and 3D objects should “stand out as interactive components” as to not confuse users.
Mastering New Tools
There are many tools and programs that designers can use to start creating their very first Web VR & AR experiences. Mozilla created an open source framework called A-Frame that empowers designers to create Web VR experiences using HTML. With it, they’ve provided in-depth documentation and examples to help make this experience accessible to beginners.
3D rendering tools like Cinema4D and Blender have been around for a while but they tend to have steep learning curves. Startups like Vectary are making it easier than ever for designers to create 3-dimensional models and export them to web-native file formats like .obj and .usdz (used for ARKit).
As designers adopt new tools and practices, they must learn the fundamentals of 3D design including the mechanics of lighting and materials on objects. With this knowledge, they can make interesting objects that excite users and increase engagement. Additionally, since digital designers have traditionally worked within a 2D plane, learning how to create volumetric designs with depth and space will be crucial to help guide users through their designs.
Creating Clear Hierarchy & Legibility
Much like creating a landing page or e-commerce site, hierarchy and legibility are key to creating intuitive experiences. Typography still plays a crucial role in helping users to understand the content. While UI elements can help convey how to navigate through the virtual experience.
Google’s Petra VR Experience uses a combination of descriptive text, pulsating UI elements, arrows, and a clear map to help users understand how to navigate the environment. These elements help to create a clear sign of both how to maneuver through space and contextual information to what the user is looking at.
Since AR & VR are new mediums, it’s important for designers to guide users in ways that promote both exploration and interactivity. Additionally, these guiding elements should be familiar and clear in their intent. Interacting with an element should behave as a user thinks it should (arrows should move content, ‘x’ buttons should close content, etc…) and these design patterns should be consistent throughout the experience.
Optimizing Performance
Most Web VR & AR experiences can take a large amount of computing power to render 3D objects in a browser. To ensure that users are able to access these experiences wherever they are, it’s important to optimize them when possible.
When Google created a prototype of a 3D model to highlight the power of AR-enabled browsers, they noted a few ways to ensure that that it stays smooth and seamless. Low-poly count models, a limited number of light sources in the scene, and a decreased shadow resolution will help your 3D objects feel smooth and natural to your users. Designers should optimize their Web VR & AR experiences so that everyone can use them, even in low-bandwidth areas.
Designing for Accessibility
Web accessibility is currently a hot topic in digital design, and for a good reason. Like designing inclusive experiences for traditional websites, designers should take care to consider how to create an inclusive experience for all users. It’s currently unclear how accessibility will manifest in Web VR & AR moving forward but companies are currently taking the first steps to ensure that this emerging technology is inclusive for all.
Microsoft recently announced the “canetroller” that gives haptic feedback for users with visual impairments. Users can hold a VR controller that resembles an assistive cane to help them navigate virtual worlds. It helps in three ways: physical resistance is applied when touching a virtual object, “vibrotactile” feedback simulates vibrations, and audio feedback simulates the sounds of real-world cane interactions. Although at the time of writing it does not yet seem this technology is available for purchase, it’s a good step to progress accessibility for Web VR & AR for the future.
The Future of Web VR & AR
As these technologies are becoming more prominent in websites, designers will have to create systematic ways to create branded and compelling experiences at scale. UI and UX patterns will be standardized, visual systems will become more prevalent, and users will become more accustomed to this form of content. There has never been a better time to start experimenting in these emerging technologies and designing new experiences with it.
Nicholas Kramer is a designer currently working at Barrel in New York City. He solves design problems for businesses by helping them simplify ideas and communicate their value to customers.
