Interactive Web Experience in Augmented Reality

Augmented Reality (AR) is reshaping digital interactions by introducing immersive and spatial experiences beyond traditional 2D screens. While AR applications are widely explored in gaming and education, web-based interactions remain largely confined to conventional interfaces. This project investigates how AR can enhance web experiences by reimagining interaction and visualization techniques for websites within Head-Mounted Displays (HMDs) and Spatial Augmented Reality (SAR) systems​.


Beginning with a demonstration of the website in its current browser-based form, this video proceeds to introduce the three developed concepts, demonstrating their functionality with the Apple Vision Pro and the SAR-system.

Initial situation

Traditional web navigation relies on structured menus and static layouts, optimized for 2D screens. With the rise of immersive AR platforms such as Apple Vision Pro and Microsoft HoloLens, there is an opportunity to rethink how users interact with web content spatially. However, challenges such as adapting conventional UI elements to 3D space, optimizing for gaze- and gesture-based interactions, and maintaining usability across different AR platforms remain open questions​

Problem statement / Project goal

The goal of this project was to develop and evaluate novel interaction techniques for accessing websites in AR. This included designing multiple AR-based navigation concepts and comparing them against traditional web interfaces. Through user studies, we examined which methods provided the best usability and engagement in SAR and HMD environments

Planet SAR

FHNW

Mindmap SAR

FHNW

Bookcase SAR

FHNW

Planet HMD

FHNW

The website is a planetary system with topics as planets and subtopics as clouds. Users navigate by rotating a dial in SAR or spinning planets with their fingers in HMD.

Mindmap HMD

FHNW

The website is a dynamic mindmap where topics appear as nodes. Selecting a node reveals connected nodes from deeper levels. The path of previously selected nodes remains visible for easy navigation.

Bookcase HMD

FHNW

Website topics appear as books in a bookcase. Users pick and open books, turning real pages in SAR or swiping virtually in HMD to explore content.

Solution developed and its benefits

The developed solution explores innovative ways to interact with websites in AR, moving beyond traditional interfaces. By transforming content into spatial representations users engage with information in a new way. These approaches enhance navigation, making it more immersive and interactive. The prototypes improve usability by leveraging natural interactions, like hand gestures and physical objects, ensuring a more seamless user experience. The findings highlight the potential of AR-based web interactions to improve usability and ease of use, offering a more dynamic alternative to conventional browsing.

  • Improved engagement and usability in AR environments.
  • More natural and immersive navigation patterns.
  • New design considerations for integrating web content into AR.
Figure 1

Evaluation of the prototypes in SAR.

Figure 2

Evaluation of the prototypes on the HMD, Apple Vision Pro.

The usability evaluation of the prototypes on SAR and HMD systems reveals key differences. On SAR, Browser and Mindmap achieved the highest usability scores, with users finding them intuitive and effective. Planet showed potential but had mixed feedback, requiring refinements, while Bookcase struggled the most, indicating significant usability issues.
For HMD, Planet and Browser emerged as the most user-friendly prototypes, with consistently high usability ratings. Mindmap and Bookcase received lower and more varied scores, suggesting a need for improvements.
Overall, Mindmap on SAR performed best, offering the most seamless and intuitive experience.

Key terms

  • Head-Mounted Displays (HMDs)Wearable devices that overlay digital content on the user’s view.
  • Spatial Augmented Reality (SAR)Projection-based AR where digital content is overlaid onto physical surfaces.
  • Gaze and Gesture InteractionInteraction techniques using eye tracking and hand movements instead of traditional mouse clicks.
  • Tangible User Interfaces (TUIs)A tangible user interface integrates physical objects as interactive elements, enabling users to control a digital system.

Customer

Institute of Interactive Technologies
Bahnhofstrasse 6
5210 Windisch

Team

Laura Hansen
Sarah Keller

Advisor
Hilko Cords
Yves Simmen