How can you design effective WebAR apps?

AR.js is an open-source library for web-based augmented reality development. This framework is designed to make it simple for users to create engaging WebAR experiences. Despite its user-friendly nature, AR.js is able to handle 60 FPS experiences across Android and iOS platforms. It’s also capable of using marker- and location-based AR technologies. Best of all, it’s free-of-charge and open source, so improvements are both innovative and frequent.

First, it's essential to recognize the existing disparities between native apps and web-based experiences, particularly in the context of AR design. Here are some strategies/thoughts to enhance WebAR experiences: - Simplify the app, a straightforward launch page and a camera view, that’s it! - AR made for the selfie and the back cameras are different “beasts”. Design accordingly - Be aware that certain frameworks exhibit varied performance across different platforms. Don’t wait to test to discover it - Whenever possible, use a single 3D asset optimized for the web. - Read the docs. The diversity of features supported by the various platforms is counterintuitive. Did you know that there is no native “Web Share API” for desktop browsers?

When it comes to pure WebAR, there are only really two choices - 8th Wall and Zappar. The former has the best feature set and tracking, and the latter has the best choice of publishing (from Unity to their new IDE, Mattercraft). However, there are alternative solutions that can be used to present AR interactions on the web that work slightly differently. Scanvengar.world use App Clips to leverage the power of ARKit via a no-app solution and Snap lenses can now be experienced on the web through their Camera Kit for Web SDK.

Analyse, test and research the best platform for the project you are about to start, taking into account critical aspects such as: -Expertise of your in-house team vs external partner in developing on the selected platform. Best to go with a tool where some demonstrated and pre-existing expertise versus a “learning by doing” approach, specially if the project is for a paid client -Features supported -Performance aspects -Commercial model -Duration of your project -Versatility of the tool in integrating with the various development frameworks available

WebAR magic: sprinkle accessibility, surprise, & user-friendliness. Bake in creativity! Know your audience: Cater the AR experience to their needs and interests. Simple & intuitive: Clean interface, clear guides (visuals & instructions). Surprise & delight: Leverage AR's potential for unique, engaging experiences. Mobile-first: Ensure smooth performance across devices and browsers. Short & sweet: Captivate users within a reasonable time frame. Measure & iterate: Analyze user behavior to continuously improve. Remember: Be creative, user-focused, and deliver an informative & delightful experience.

When developing WebXR apps, it's crucial to consider the target audience alongside the platform. The user experience may require adjustments based on factors such as age, race, and ability. Both the design and technical architecture of content delivery are significant factors. While platforms may support generic apps, fine-tuning is necessary to ensure the best experience for the intended audience

In summary, the choice depends on your goals and target platform. ARKit excels for iOS devices, ARCore provides broad compatibility with Android, and WebXR delivers AR experiences in web browsers. Explore their strengths and choose wisely! 🚀🔍

Designing effective web AR apps begins with selecting the right platform. Consider factors such as browser compatibility, device support, and ease of integration. For example, choosing platforms like 8th Wall or A-Frame can provide robust frameworks for creating immersive AR experiences accessible across various devices. It's crucial to ensure the platform aligns with your project goals and offers necessary features.

There's also PlayCanvas and Godot, plus plugins to export Unity and Unreal projects. It's important to find the platform that lets you create the way you are most comfortable. Whether that's lower-level coding in C#/C++, mid-level coding in JavaScript, or drag-and-drop visual style, the features are secondary to ease of use. If you're using WebXR, there are still potentially compatibility concerns across browsers, especially mobile browsers. Be sure to test on desktop Firefox/Edge/Chrome, plus Android and iOS, asking with the Quest and other standalone headset browsers.

Optimizing content is equally vital in creating compelling web AR experiences. Focus on delivering lightweight 3D assets and textures to ensure quick loading times, especially for mobile users. Compression techniques and efficient file formats, such as glTF, can help maintain high-quality visuals while minimizing data transfer. Striking the right balance between engaging visuals and optimized content enhances user experience and encourages prolonged interaction.

Optimising 3d content for WebAR app is one of the critical aspects for getting immearsive experiences. Techniques like Level of Detail should be implemented to adjust the detail levels of 3d models based on the distance from user. Another technique which really helps is asset bundling . This reduces the HTTP request and speeds us loading time.Occlusion culling can be used to skip parts of the 3d scene which are not visible during rendering. Using simple shaders and materials to reduce rendering complexity and loading 3d assets asynchronously.

It can be disappointing to start with amazing models and need to decimate and compress them, but it's a necessity if you are targeting mobile/standalone devices. You should work hard to provide different levels-of-detail just like in a game. Unfortunately, there aren't good enough tools yet to do this fully automated, but I predict AI will be there soon. Loading incrementally and performing background processing is critical for a good user experience. Unfortunately I've seen a number of apps that completely freeze or just stutter during asset loading and that drives away users quickly.

Optimizing is HUGE. But even HUGER (yes, I understand this is poor grammar) is that optimization is often an afterthought, or excluded due to cheapskates not wanting to pay developers. Trust your developers and allow time for optimization. You do not need to include everything. Poor performance will result in a loss of users.

Leverage WebAssembly for computationally intensive tasks to achieve near-native performance, ideal for real-time calculations or complex data processing. Additionally, optimize content loading by anticipating user actions and preloading relevant assets, ensuring a seamless and immersive AR experience.

A well designed user interaction will enhance the user experience. This is a niche field where any interaction would not work, that's why people study HCI(human computer interaction), which identifies, that for a given context, which interaction would be best. Again this might be subjective and hence requires a lot of data to bring the best possible use case forward. Increasing apps accessibility is also a part of HCI. When making an app accessible for differently abled, we eventually make it more accessible for everyone.

Accessibility and good UX are critical. There are no intuitive interactions. Figuring out how to bring up the menu, knowing what buttons are mapped to which actions (especially on the spectrum of controllers and headsets), and even knowing how to move around can be stressful and off-putting to first time users. Keep in mind this means first-time to your app. I'm a veteran VR user and I still have to figure out how each app works. Do I teleport with the trigger? Up arrow? A? Is teleport even supported, or do I need to slide around (still instant nausea), or is it physically walking only? The key is to make no assumptions. Label the controller, or use an in-app wristwatch that I can tap to activate. Don't break conventions, and never assume.

User-centric design is paramount for effective web AR apps. Prioritize intuitive controls, clear instructions, and seamless navigation to ensure users can effortlessly engage with the augmented content. Consider the user's context and design interactions that enhance rather than disrupt their experience. For instance, if creating an AR shopping experience, implement easy-to-use product visualization tools that empower users to explore items in their physical space.

Like...really? Every app ever created should be designed for the user. lol Like, wtf?! Why would you create an app and NOT consider your user base. Recipe for failure right there.

Always question what you're doing and why. -Is AR really the best way to present the information to the users? -Why are we using AR (besides the brief asking us to)? -Is this the best platform/technology to serve the users' needs? -It's also important to guage what level of augmentation is best the experience.

When designing a WebAR app with a user-centric approach, it is paramount to delve deeply into understanding the user's real challenges and needs. This involves empathizing with the user to grasp their experiences and pain points firsthand, rather than relying on the users to dictate the user experience (UX) design themselves. A professional and thoughtful design process should prioritize identifying and solving these core user problems. This ensures that the solutions provided are not only innovative but also genuinely useful and relevant to the user's context. By adopting this method, designers can create more intuitive, engaging, and effective WebAR applications that resonate with users and enhance their overall experience.

Beyond platform choice, content optimization, and user-centric design, other considerations include ensuring cross-browser compatibility, utilizing responsive design principles, and staying updated on emerging technologies. Regularly testing your web AR app on various devices and browsers helps identify potential issues and ensures a smoother user experience across different contexts. Additionally, keeping abreast of evolving web AR standards and industry best practices ensures your app remains cutting-edge and compatible with the latest advancements.

Creating a smooth and intuitive onboarding experience is essential. Users might still expect to navigate and interact with content in a 2D canvas, even within a 3D environment. It's important to provide clear guidance on when they are interacting with 2D elements versus 3D content to ensure a seamless transition and understanding of the interface.

Keep aspects to keep in minds Would be 1. Right optimisation of the asset in use, for smooth experience 2. And the other on would be intuitive user experience. Right methodologies for a simplified omboarding and simplified interfaces .

Think about what makes your experience unique. Good content, flashy presentation, ambient sounds, and intentional interactions can make for a great experience. Don't reinvent the wheel, and if you do, don't make user guess. Collect objective user feedback about ease-of-use and comfort. Be mindful of your users at every step and you'll be successful.

If you're building a product because YOU want it, chances are there's others out there that want it too. But, if you're building a product to meet OTHERS needs...you better include those others in the process. Pay them for their time and feedback, and incorporate that feedback into your design. And ffs, make it accessible.

Clear Call-to-Action: Provide clear calls-to-action (CTAs) to guide users on how to interact with the AR app and what actions to take next. Whether it's to scan a marker, tap on a button, or explore a specific feature, make sure the CTAs are visible, understandable, and easy to follow.

Consider the semantics of what "augmented reality" actually means. Seeing dolphins jumping from your grass yard might be an augmentation but seeing a red light appear on your windshield is an enhancement to your current situation.

If you need to integrate webAR in an existing website, you can also consider using ready-to- use solutions like Google's <model-viewer>.

I personally feel with the current threat landscape and growing cyber risks, a lot of security vulnerabilities still arise from apps - Web, mobile or Mixed reality. Security along with design and cross compatibility or S-SDLC should be followed without fail and there should an efficient process between DevOps and Security. With the evolution of digital technologies, it’ll only become paramount to secure these apps to mitigate cyber attacks and risks

In WebAR, while gestures like pinch are becoming standardized, UX design still lacks clear guidelines, especially in spatial interactions. Establishing consistent gestures is crucial for intuitive 3D experiences. Additionally, cues for spatial awareness, accessibility considerations, and contextual relevance of AR content need emphasis to enhance user experience within the 3D environment.