Augmented reality is becoming more commonplace across the online landscape. But what is it and how is it affecting website design as a whole? In this article, KIJO looks at AR website design and provides augmented reality website examples. We’ll also assess how AR websites are changing the website building game for users.
Augmented reality is when fabricated images are layered over reality. It allows users to see the real world around them and place an object in the space virtually. For example, you could open your camera on a furniture buying app and AR would allow you to see a computer-generated image of your potential new sofa in your living room. AR attempts to bridge the gap between reality and virtual reality.
That said, augmented reality (AR) should not be confused with virtual reality (VR). In VR, users are taken into a virtual world using an implement such as a headset. They are immersed in a completely fabricated world, moving their limbs and interacting with this environment as they would in real life. The images they can see are totally different from the reality of their actual surroundings.
AR can be used on wearable technology, smartphone apps, desktop sites and mobile sites. It’s used for anything like placing furniture in the room, to trying on clothes. AR’s most recognisable form though is (the arguably controversial) photographic filters you can use on social media apps. If you’ve ever used the infamous dog ear filter on Snapchat, you’ve used Augmented Reality.
Of course, this kind of technology is not without its criticisms. Google famously stopped selling its Google Glass wearables in 2015 after reports of privacy concerns. As of 2022, the product was considered a complete failure and sales ceased in March 2023. However, whilst the glasses didn’t make it, the developed AR technology has been implemented elsewhere. You can see it in other Google software like in Google Maps Live View.
And, the AR phenomenon is slowly beginning to assert itself as an invaluable asset to web designers.
With less potential for error than with wearable technology, AR website design is starting to drastically improve user experience (UX). It’s doing so on both desktop and mobile.
E-commerce web designers have been implementing AR in recent years. They’re making use of webcams or smartphone cameras to help consumers choose their products. In fashion retail, for example, AR is sometimes used as a “virtual dressing room” experience. Users can point their desktop or smartphone camera towards themselves and scroll through outfit choices. These are then displayed on the screen.
UK optician Vision Express allows consumers to virtually try on eyewear before purchase and, since 2020, luxury UK designer Burberry allows you to experience their products in 3D and in your surroundings via AR too.
On desktop computers, AR makes use of a webcam to generate an image of the user’s surroundings. Depending on the program in use, it will then implement image recognition technology. This will display the chosen graphics onto an object, for example, the aforementioned clothing or sunglasses.
Mobile AR is slightly more complicated. Handheld devices, including tablets and smartphones, use apps, sensors, GPS and compasses to help show images of real-life objects. This has worked particularly well for England’s Historic Cities. It invites users to point their phones at historical landmarks in the UK, which then allows the app to unlock hidden facts and enjoy panoramas of ‘zero-access’ locations.
Here are three augmented reality website examples the team at KIJO have contributed to and/or been inspired by.
Crucial Trading are a UK-based company specialising in natural floor coverings such as Wool, Sisal, Sisool and Seagrass. Their native app is one we worked on as a team here at KIJO. We developed and improved the app’s augmented reality feature so users could view the rugs they were interested in in their own space, alongside more information and with absolute ease due to the clever walk-prompts we implemented. We also introduced the ability to save the viewed rug to the account holder’s favourites and also allowed rug-building abilities directly in the app. The result is a sleek, naturally fluid AR design feature that contributed to a 988% rise in rug orders for the business.
You can check out our Crucial Trading case study here.
Luxury global make-up brand Lancôme has an augmented reality feature that allows you to try on different shades, textures and colours from their high-end foundation, concealer, and lipstick ranges. It allows the user to experience different products live via their camera, by uploading a photograph or on the face of a pre-loaded model. The multiple options this service provides is useful and enhances the user’s experience. This function means the user can choose an option to explore that’s most convenient to them for that exact time of site-use. If you’re on-the-go, you may not be able to use or feel comfortable using the live camera function, so the multi-option AR feels luxurious as well as user-considerate, proving the Lancôme brand really understands their consumer.
Saatchi Art is the world’s leading online art gallery. The business is based in Los Angeles, United States. The Saatchi Art app allows users to see what their advertised pieces of artwork would look like on the walls of their own homes. With some paintings costing over $85,000, this ability is incredibly useful for users prior to purchase or store visit. This AR web design implementation is research-based. According to Jeanne Anderson, General Manager of Saatchi Art: “80% of hesitant art buyers report they want to see art and imagine it in their space before they make a purchase.” Not only is this AR tool functional, it solves a direct and enormous pain point for buyers.
As you can see from the previous examples, the biggest shift we are seeing for web design is on mobile devices. This is particularly prominent in AR web design. As we move from static websites, in which information does not change, to dynamic websites, where information changes constantly, and applications. One of the benefits of AR is that it offers a completely 360° experience that desktop computers simply cannot match.
As such, this provides designers with more opportunity to interact with their users, adding key points of information at all angles. This is what’s known as the “Z-axis”.
Picture the scene: rather than having multiple tabs open in one two-dimensional screen, users can access information all around them. They can do this in an organised fashion, much like a chemist’s laboratory with every key ingredient within easy reach.
Almost taking a step back in time, AR helps to eliminate the new kinds of tactile interactions to which we have become so accustomed using smartphones. Rather than scrolling and zooming, AR is using automation intuitively. However, it’s doing this whilst helping users restore their human interactions. It does so by allowing them to “touch” virtual objects.
“Contextual computing” makes use of resources such as analytics to help AR better understand users. We see examples of our technology trying to understand us all the time, right down to our Netflix preferences. Rather than responding to a set command, AR’s automation will gather contextual information from historical user data and the real-world environment. It then presents the most useful content to the user at that moment in time.
While AR doesn’t need commands to work successfully, they can certainly enhance the experience when it comes to voice commands. Web designers are now using speech recognition technology to help users give spoken commands. This has proven successful in multiple industries from gaming to e-Commerce.
In 2016, virtual retina display manufacturers Magic Leap showed off an incredible example of voice interaction in AR to optimise the virtual shopping experience. In their explainer video, a pregnant woman was seen shopping for items to place in her new baby’s room. Using the real-life room as a blank canvas, she made voice commands asking the headset to display different items. These then showed up in situ in her baby’s room. She later purchased a product after successfully leveraging this technology.
In 2017, Forbes advised UX designers that voice recognition, along with AR, would soon disrupt the web design industry. With typing and clicking becoming ever more redundant thanks to virtual assistants like Apple’s Siri and commands such as “OK Google”, voice interaction provides a much faster result for users whose time is increasingly short. By implementing voice interaction into AR, UX designers can create a more humanised experience.
While AR may have come to the fore in the 90s, VR has been around longer. However, the two heavily complement each other when it comes to improving UX. VR and AR may differ in terms of the level of immersion, but they also have myriad similarities. This can be seen particularly on mobile.
Back in 2017, Forbes also warned that mobile UX would no longer simply be a consideration for web designers – it would become an entire industry. And, it was right. Responsive, mobile web design is now considered essential for any website that wants to do well on Google.
To that end, designers are always on the lookout for ways to improve the quality of this immersive content. For example, Google VR view allows designers to embed 360° videos onto their sites. By providing mobile-optimised versions of this content, designers benefit from better organic search rankings and a better user experience.
Read our article on mobile web design. Mobile Website Design: How Implementing These 10 Responsive Design Essentials Can Maximise Your Online Presence.
AR web design has come along in leaps and bounds thanks to the dawn of compatible plug-ins such as WordPress VR. This plugin allows designers to upload 360° videos onto WordPress sites. Similarly, Google Maps, Google Street View and Google Earth can all support plugins with the above mentioned Google Live View..
With this technology so readily available on mobile sites, AR and VR can be used just as often on standard mobile devices as they can on headsets. This provides consumers with an affordable option that improves their browsing experience.
At this moment in time, AR is still replete with challenges for web designers. Now web design has almost fully turned toward mobile, the decision to invest in improving desktop AR is a tricky one. While many industries still rely on desktop computers to make their buying decisions, others have evolved ten fold. It’s an expectation of consumers to have a mobile website experience that’s pretty much identical to the desktop one. If a site is solely using desktop AR now, they’ll have to move towards mobile if they want to have any hope in keeping up.
Equally, the need for high-quality content is an absolute must. Giving users high definition images to help them better visualise their chosen scenarios is essential for AR website design to work. However, this must be mobile-optimised, which still poses a challenge for delivering high-quality images at fast speeds.
In the short term, web designers need to gain a better understanding of their customers before they can make any huge advances in AR. AR is a lot more dependent on customer activity than VR. VR is a far older technology and is perhaps most synonymous with gaming. Designers should make use of big data and analytics to understand their customers’ wants and needs.
In 2022, the augmented reality market size was valued at $40.12 billion (USD) in 2022. It’s forecast to hit $56.3 billion in 2023. By 2032, it’s estimated that its worth will reach $1,188.93 billion. So, AR is arguably an undeniable future of web design that shouldn’t be underestimated.
So many big players like Meta and Google have acknowledged and continue to prioritise the benefits of AR and VR. It’s time for smaller companies to start investing time into researching these technologies too. From manufacturing to medicine, AR is revolutionising the web design industry. At KIJO, we predict that the best is yet to come.
Are you in need of a professional digital agency to assist you in AR, or responsive, mobile web design? Perhaps you’re curious about developing your app to include AR or integrating AR web design into your site. If so, contact the KIJO team today.
