Web XR User Interface Research: Design 3D Layout Framework in Static Websites

Abstract

Advances in digital interactive technologies have created a range of innovative products and services for the well-being of society. Extended Reality (XR) technology has shown enormous potential in the educational, commercial, and medical fields. Considering the potential of XR, we analyzed the use of XR technology for the improvement of web service user experiences. The paper discusses Web Extended Reality (XR) and its current circumstances. The study also discusses the advantages of web componentization and the Page Builder System, which is a famous framework for web componentization. Furthermore, the study analyzes the characteristics of XR. The research designs the Web XR User Interface framework with XR characteristics and componentization design. A 3D UI framework is proposed for providing an immersive, explorative, and readable user experience. The framework covers three aspects, including main content, a scrollbar, and navigation. In order to evaluate the performance efficiency of the framework, a proof-of-concept prototype was developed to examine the concept. We conducted a user study with 60 participants to evaluate the reading performance. Compared with the traditional web layout, the experimental results showed that the framework can improve the user experience in static websites. The paper indicates possible future views based on the experimental study.

1. Introduction

The history of the Internet follows digital device history. Hyper Text Markup Language 5 (HTML 5) with Cascading Style Sheets 3 (CSS3) includes more immersive features, such as abundant UI (user interface) components and responsive development, in order to adapt to the mobile market [1,2]. With the continual development of digital technology, some research predicts that the digital device will move from mobile to XR (Extended Reality) [3]. Therefore, it is necessary to discuss XR technology and its potential within web services.

XR is a combination concept with Virtual Reality (VR), Augmented Reality (AR), and Mixed Reality (MR) [4,5]. Milgram indicates the difference between VR, AR, and MR in 1994 [5,6]. The related Reality industries are collectively classified as XR. The scale of XR consumers continues to increase. XR technologies provide innovative Information and Communication Technologies (ICTs) to affect the user experience in interacting with the environment [5,7]. This technology opens a new horizon in the game industry. It shows enormous potential in the educational, commercial, and medical fields [5]. It opens new interaction paths in gesture and voice control [5]. Virtual simulation training, education and science, and other academic applications are also emerging [8].

Considering the current XR development trend, it is significant that XR has gradually extended to many fields and that it has more customers. Web services are a general and essential part of modern society, as they provide various avenues of social communication. Web services should provide the same service in XR platforms to adapt to growing XR device numbers. In fact, the initial concept of “Web XR” has just been generated in recent years [3]. W3C has released the specifications of the Web XR Device Application Programming Interface (API) [9,10]. Web XR is based on HTML5 technology. It aims to simulate a three-dimensional (3D) rendering of the virtual world in the browser [8]. Web XR allows developers to access the XR device features, such as motion and direction tracking [8,9].

Compared to mobile phones, the XR device has two prominent characteristics: interactive mode and panoramic vision [7,11]. XR devices are more comfortable to carry and are closer to natural interaction than mobile phones. For instance, HoloLens, an XR device, does track, understand, and model real-world scenes and natural gestures, and real-time rendering and overlapping of virtual worlds (at least targets). The realization of this step is the subversion of the Phone’s core competence and the emergence of a new form of interaction. The most immersive interactive experience in HoloLens is a UI with an intuitive and 3D perspective [12]. Research shows that XR technologies have a high potential for improving user experiences in web applications.

However, Web XR still has a certain gap in XR platforms, due to hardware and software limitations. Consequently, XR devices have limited support for transferring web services into XR platforms. For instance, HoloLens supports use of the Edge browser in visiting websites [13]. Edge supports basic HoloLens gestures, include scroll, drag, and zoom, but the UI visual effect is the same as the desktop version [13]. We ran a 40-participant comparison user test that examined the user experience of visiting the web using XR devices. From participants’ feedback, the desktop version was not adapted to XR platforms because their interactions are designed for a keyboard/mouse, and not a controller/gestures. All participants reflected that using HoloLens 2 to visit websites was more complicated than using desktops. Therefore, it is significant that if the user uses a controller/gesture for operation, these interactions are inconvenient and bring negative user experiences.

Considering the above evidence, although Web XR has broader prospects, it still has limitations and sits within the initial development period [14]. This limitation brings negative user experiences and affects the extension of the user group to Web XR. XR devices should provide convenience for users with natural and innovative interactions. However, the traditional web UI is a barrier and results in negative user experiences for XR users. Therefore, designing an efficient and immersive interactive methodology is essential for the Web XR field. It can improve user experiences in exploring websites on XR platforms. User interface (UI) design plays an essential role in attracting users to explore [15]. Therefore, the combination of XR characteristics into website UIs has become the primary target of the research.

Globally, there are various types of websites. It is necessary to narrow the research scope into a specific category and to analyze its related UI structure and design framework. The various websites can be divided into two types: dynamic and static websites [16]. Dynamic websites have a content management system (CMS) that dynamically manages the website with commercial and online services [16]. Dynamic websites usually consist of three types: commercial (e-Commerce), service, and mixed websites [17]. Commercial websites contain B2B (Business to Business), B2C (Business to Client), and C2C (Client to Client) modules [17]. Service websites include communication or entertainment functions [17]. Mixed websites contain both commercial and service modules [17]. Static websites do not usually run complicated function modules compared to dynamic ones. They usually play the role of displaying medium/small businesses or organization information, with limited interactive elements [17].

Web Hosting statistics and facts for 2021 indicate that static websites without ecommerce modules occupy 51.3% [18]. Significantly, static websites have a high ratio globally. However, WPForms, one of the largest CMS plugin providers globally, indicates that medium/small businesses usually cannot afford a high investment into online business [19]. We found that most existing Web XR research aims to reconstruct the website UI and transfer it to XR applications. For instance, Saeed developed a web-based survey tool for VR platforms [20]. He redesigned the web survey UI layout and received positive user test data [20]. However, the reconstruction caused a high development cost. Therefore, it is challenging to drive medium/small businesses to jump into the Web XR field, and to improve their online services, because the XR field still has a high level of development barriers. The research focuses on static websites (HTML5) for building up the initial framework principle with fundamental XR characteristics. The research attempts to provide a general and affordable UI framework for assisting static websites in transferring into the Web XR field.

In this paper, the research aims to design a general Web XR UI framework principle. It is applicable to small/medium businesses and organizations’ websites for improving their user experiences in XR platforms. The proposed principle is based on XR interactions (Figure 1). The characteristics are as follows:

• The research uses the HTML5 and XR interaction features to build the UI principle, and to provide users with immersive exploratory experiences.
• The research balances the website’s original UI structure and XR characteristics. The research uses responsive design to display the same content as desktop websites. Meanwhile, 3D layout and gesture navigation are integrated with pages to enhance the user’s immersive experience.
• The research evaluates the performance efficiency of the framework. We conducted a user experiment involving 60 participants.

Our research has released some positional outcomes. In the IEEE 7th International Conference on Virtual Reality (ICVR 2021), the background research for analyzing XR history and its characteristics was presented [5,9]. Furthermore, research on the initial Web XR 3D layout framework concept was presented in the 2022 IEEE Conference on Virtual Reality and 3D User Interfaces Abstracts and Workshops (VRW) [21]. Compared to the previous articles, this research moves much further. This research has built up UI principles and prototypes using Unreal 4, and has organized the user test experiment in HoloLens 2. In the following sections, the research discusses the research methodologies, principles overview, and the experiments.

2. Related Work

In this section, for the discussion on how to apply XR characteristics into the web UI, the research briefly discusses how to build up the web UI principles and how to investigate related XR UI knowledge. The research covers static website structure, responsive design, existing web design principles, and the Page Builder System for the first question. By analyzing the XR characteristics in the second question, the research aims to generate suitable methodologies for designing the Web XR UI principles.

2.1. Static Website Structure

Static Websites mainly assist the visitor in finding helpful information efficiently. Therefore, the website has a general system structure. It usually contains Home, About us, Contact, and other information pages [22]. Each information page has a similar layout structure. The Header–Body–Footer layout is the most general layout in web pages [23]. The Header contains the navigation system of the page. The Body section contains the main content of the page. The Footer generally places copyright information and a navigation bar. Most of the existing web design principles are based on how to build up the general layout to adapt to different business criteria. The research focuses on building the 3D layout for the main content and navigation.

2.1.1. Responsive Layout

Responsive Layout is a concept proposed by Ethan Marcotte in 2010 [24]. The primary concept is that a HTML5 website can be compatible with multiple digital devices, rather than making a specific version for each terminal. This concept helps developers to solve how to transfer websites from desktop to mobile. Responsive Layout can provide a comfortable UI and a better mobile experience for users through various devices. Therefore, the research can use the responsive layout to customize the XR UI principle in Web XR platforms.

2.1.2. Web UI Design Principles

To design the Web XR UI principles, it is necessary to discuss the features of existing Web UI principles. The main content in the pages is built using web components. The Web UI Kit (User Interface Kit) is the general concept for describing the web components within interface design [25]. The component library is a part of the web system design. Figure 2 shows how a single component is used to construct the website. Web componentization can build a fully functional website through the structure of a combination of multiple components [26].

The developers can build up different web UI principles based on Web componentization to adapt to various circumstances. Consistency is a significant feature in existing web UI principles [27]. It can help developers to quickly build an interaction framework for one or more products using general rules [28]. Therefore, it is very efficient at developing a sizeable and consistent commercial information system with multiple complex functions. Considering the above advantages, designing general Web XR UI principles can assist static websites with entering into the XR field with affordable investment.

2.1.3. Page Builder System

The Page Builder System is a new trend for web componentization after HTML5 front-end’s growth [28]. Compared to the traditional coding back-end, the system can efficiently follow the designer’s draft and build page structures using less time [29]. The system has covered various platforms, including WordPress, Magento, and Shopify [29].

Figure 3 illustrates how the Page Builder System front-end and back-end function [29]. The gray border boxes show that the page contains three major sections. In the back-end, the system allows developers to generate blocks through the visualization of UIs. Therefore, developers can create different major blocks and separate the content based on the UI design draft. Developers can easily use various widgets to build the page in the same manner as the UI design draft. The system can assist in developing the page with more efficiency. Additionally, the block design method has become popular in front-end development and design.

2.2. Web XR User Interface Analysis

The Page Builder System shows that the page content can be divided into different blocks. Considering the XR 3D characteristics, it is significant that the Web UI can use 3D characteristics for improving the display effect. For instance, different blocks can be placed in different dimensions under the 3D environment. Additionally, the Web UI principle includes different input elements. Another research objective is the method of transferring XR interactive characteristics into Web UI for user experience improvements. In this section, the research analyzes the critical features of XR: panoramic vision and interactive mode.

2.2.1. Panoramic Vision

Panoramic vision is the most significant feature in the XR field [7]. The user view is transferred from a traditional 2D plane to a 3D space [9]. This means that XR UI design can have more space for innovation, based on breaking through 2D limitations [9]. For instance, buttons and icons can appear behind or above the user (Figure 4a) [9]. This 3D method has been widely applied in many XR applications, especially in video games [9,30]. Additionally, the research also found that the 3D design needs to consider the view field limitation. Figure 4b illustrates how to rotate the specific angle to assist the user in viewing as much content as possible in the field.

Furthermore, interacting with objects with different angles and positions in the XR environment severely impacts upon spatial cognition [31]. The user will gradually build a mental representation of the displayed geographic space [31]. This will assist users with building up individual cognitive habits in a similar UI. The general UI characteristics can benefit users that are familiar with interacting with new XR websites in a 3D space. Spatial cognition provides convenience for users that are exploring the new XR websites. Therefore, designing a general layout and applying it to various static websites is essential.

The research designs the 3D layout solution concept (Figure 5) to apply the panoramic vision characteristic. Static websites (HTML5) use a responsive layout to divide the visual effects of different platforms. The navigation is displayed in front of the user while the menu button is activated. The navigational information assists the users in knowing their location, and guides them to explore the websites. The Body section (main content) divides the content into different blocks. Different blocks are displayed in different positions in the 3D environment. The footer is displayed in the bottom corner of the 3D environment because it is not critical, but it is an essential element to the websites. The concept aims to provide a 3D visual effect in highlighting navigation and main content.

2.2.2. Interactive Mode

The controller device is the primary feature of the XR interaction. Hand tracking is a new trend in the XR field [9,32,33]. The Oculus Touch and Knuckles controllers provide hand tracking function [9,34,35]. A gesture controller can track the movements of each finger and recognize gestures [9,36]. Additionally, HoloLens provides different natural gestures for interacting in the 3D space without physical controllers [37]. Hand tracking provides new interaction mechanisms that were not previously available with traditional computer interaction [9]. Therefore, our study aims to design principles with gesture interaction features.

Figure 6 displays the gesture interaction concept in our framework. All three web sessions supported fundamental gesture interactions, including scroll, drag, and zoom. The research focused on navigational interaction. Users can use a single hand or a mouse (controlled using a single hand) to visit the navigation menu on desktop and mobile websites, due to device limitations. It is necessary to consider how two hand controllers will be used, in order to improve navigation efficiency and convenience in XR devices. Both the 3D layout and the two hands controlling concept can be applied to the navigational design.

3. Design Web XR UI Principles

The research aims to design web UI principles that adapt to XR characteristics. The research was divided into two sections based on the structure of informational websites. First, the research designed a general 3D layout principle in the main content. The layout aimed to fit with various HTML5 static websites. Secondly, the research analyzed how to use gesture interaction and 3D space to improve the web navigation system. The research used an existing website as the experimental subject. The research used GNA Web Design (Website links: https://gnawebdesign.com.au/ (accessed on 20 April 2022)) to test the possibility of the principles in the user test section, as the website has a standard business static website structure [38].

3.1. Main Content

The 3D layout requires the division of the main content of the page to avoid the user’s distraction. We referred to the Page Builder system to divide the page into different parts. Each part can be presented to users in different positions and angles as independent modules, in order to achieve an effect of visual perspective. After dividing the modules, we needed to place each module into 3D environments.

Figure 7 displays the structural concept for the main content. The main content divides into three sessions: the current visiting block, other blocks, and a scrolling bar. The current block is positioned in the middle of the screen, while other blocks remain at the top and bottom corners at specific angles. Transparency is used to weaken the other blocks, to avoid distracting the users’ attention when visiting the current block. The scroll bar is on the right side with a touching interaction.

Figure 8 displays the 3D layout plan. The plan has two positional options. The first one follows the user’s position without tracking the head rotation so that the users can look around the UI. The second option is a fixed position where the user can move in closer. Figure 8a shows that the module’s initial position is 60.0 cm away from the users. The scroll bar and the Navigation icon are a distance of 45.0 cm from the users. The previous and next modules have a 45 degree rotation and 30% transparency (Figure 8b). The user can use a scrolling interaction to move the different modules (Figure 8c).

The research uses Unreal 4’s MR UX development tools to design interactive website prototypes based on XR devices. The development tool supports the VR and MR devices. Figure 8c illustrates how the conceptual plan adapts to the XR environment and the existing website.

Figure 9a displays the conceptual solution for the XR scrollbar. When the user’s hand controller drags the scrollbar or the main content, a thumbnail of the web page will display on the right side of the scrollbar (Figure 8c and Figure 9a). The current module is highlighted. Users can briefly understand the page content and its current location via the page thumbnails. The scrollbar thumbnails only exist when the user scrolls the slider. This solution does not disturb the user’s focus and provides clear guidance.

3.2. Navigation

The traditional web menu provides users with basic button options without detailed location information. However, the menu should have a navigational feature that assists the user in understanding “where he is”. Therefore, our research aims to use 3D layout features to provide clear guidance for users. Users can use gesture interactions to conveniently select the link. Additionally, it has enough padding space between each menu to avoid incorrect selection issues in the desktop version.

Figure 10 displays the flow concept of navigational interaction. The detailed navigation information is invisible upon initial loading. The navigation icon is on the left side in Figure 8a. When the user clicks the icon, the location panel will display. Using sliding gestures and by rotating the 3D ring, the user can switch between the location and the menu panel. Additionally, each location panel provides the “Home” button in order to jump to the menu panel. Both panels provide links to jump to the web pages.

Figure 11 illustrates how the navigation fits into the 3D layout and gesture. When the user clicks the navigation icon, the main content and scrollbar move far away, and the navigation panel will display in front of the user, as shown in Figure 11a. The user can rotate the 3D ring or the sliding gesture to switch the location and menu panels (Figure 11b).

Figure 12 displays the details of the location panel. The location panel displays the current location and provides other links in the same sublevel (Figure 12a). The system will jump to the selected page when the user selects other submenus. The location panel can guide the user to understand their location and assist them quickly in selecting the related page.

At the same time, the framework provides enough convenience for helping the user to move to menus for other levels. By sliding or rotating the 3D ring, the user can switch to the menu panel and check other levels’ titles. Furthermore, when the user clicks the ‘Home’ button (Figure 13a), this will also switch to the menu panel and check the menu list. Figure 12b,c displays the location panel in VR and MR platforms.

The menu panel displays the overall menu selection and allows users to check each menu detail by clicking on different menu thumbnails (Figure 13a). If the sub-level has multiple menus, it displays as Figure 13a. If the sub-level has a single page, the menu panel provides detailed meta-descriptions to assist the user in knowing the page’s overall information (Figure 13b). Figure 13c,d displays the menu panel in VR and MR platforms.

4. User Test Experiment

The user test section was run as a contrast experiment. The experiment aims to testify that the UI framework can have better performance efficiency than the traditional browser in HoloLens 2 (MR) and the desktop platform. Static websites (especially business/organizations) usually want to attract users to remember their business information. The websites have a limited number of interactive input elements. The study aims to use “reading efficiency” to measure how much key information the customer remembers after exploring the website. Sixty students in Guangdong University of Finance were chosen for system evaluation. The users participated in a task with limited time, and they received an online questionnaire that was utilized for data collection. The experiment had three primary analysis points:

• Measure the effectiveness of visiting the website (all platforms);
• Compare the effectiveness of MR and the desktop platform;
• Compare the effectiveness of the Web XR UI framework and the traditional desktop version in MR.

4.1. Participants

For the research, 60 participants from Guangdong University of Finance were chosen for the evaluation section. All of the participants were Bachelor’s degree students. Twenty students were studying Computer Science (the same class) in Guangdong University of Finance. The other students were studying Accounting (the same class). Each student had the same educational background. The participants were divided equally into three groups, as shown in

Table 1. Demographics of the participants.

	Group A	Group B	Group C
Participant	20	20	20
Background	Bachelor’s degree student	Bachelor’s degree student	Bachelor’s degree student
UI Version	3D Layout (MR prototype)	Desktop	Desktop
Platform	HoloLens 2 (MR)	HoloLens 2 (MR)	Desktop

. Each group contained 20 people. The users explored the web content (GNA Web Design Website). Each group used different UI versions and platforms. The study compared the performance between the 3D layout and the desktop versions, and between the HoloLens (XR) platform and the desktop.

Groups A/B used the MR platform, but they used different UI versions (conditions). Group A used the 3D framework prototype and Group B used the desktop version. Group C was the control group, without any XR elements. Group C was the traditional reading group. They visited the desktop version of the website using a desktop platform. All three groups read the same content. Subsequently, each was required to complete a short online questionnaire related to website content.

4.2. Tasks

The experiment’s focus was mainly on the participants’ performance regarding two tasks: interactive experiment and questionnaire. The content of both tasks used Simplified Chinese due to the users’ regional backgrounds.

4.2.1. Interactive Experiment

The participants of Groups A/B/C took part in an interactive experiment. Figure 14a shows that the participants used HoloLens 2 to interact with the framework. The Group B participants used HoloLens 2 to explore the desktop website. Groups A/B had a 20 min time limitation to play. Group C had the same amount of time allotted for reading the desktop website on the computers (Figure 14b).

4.2.2. Questionnaire

Groups A/B/C participants needed to complete the online open-ended questionnaire in five minutes, in order to guarantee that each group had similar amounts of knowledge before the interactive experiment. Therefore, we ran the questionnaire session before the experiment as the pre-test. Groups A/B/C faced the pre-test on 21 December 2021.

To avoid bringing the questionnaire memory during exploration, which may affect the test result, the research set up a time gap between the pre-test and the post-test. Group C ran the second questionnaire (post-test) after the user test on 25 February 2022. Group A was on 30 and 31 March, 2022. Group B was on 23 and 24 March 2022.

The online questionnaire section included seven single choices and three judgments. The questionnaire covered the business content on the website. The Web design and Web eMarketing sections have more business services, so they had a higher ratio in the questionnaire than did the other sections (

Table 2. Questionnaire details.

Question Topic	Question Type	Question Detail
GNA Business Introduction	Single Choice	● Where is the GNA Corporation location?
	Single Choice	● How long has GNA Corporation existed?
Web Design Service	Single Choice	● Select the incorrect web design service scope of GNA Corporation.
	Single Choice	● How many GNA web design packages are there?
	Single Choice	● Can PayPal pay for GNA’s services?
	Judgment Question	● Do WooCommerce and Shopify plans offer product uploads?
Web eMarketing	Single Choices	● How many keywords can be optimized in the Standard package of the SEO services?
	Single Choices	● Which of the following services are not within GNA’s social network promotion?
	Judgment Question	● Do Google (Google) ADS need to be paid to Google?
GNA Recruiting	Single Choices	● Select a quality that GNA Corporation does not want its staff to have.

).

Each single choice or judgment question was worth 1 point. The total score was 10 points. After the users had completed the questionnaire form, the study calculated the correct rating of the user experience. For example, 14 people received 5 points, and six people received 4 points. Considering that the maximum score is 10 and that there were 20 people in each group, the average score was calculated as (14 × 5 + 6 × 4)/20 ≈ 4.7.

4.3. Data Result

The research collected the user score into three groups from the questionnaire data. Figure 15 and Figure 16 display the user score distribution in each group (pre-test and post-test). The study needed to compare each group’s pre-test data and confirm that they have similar circumstances before the experiment. Therefore, the study ran a one-way MANOVA (Multivariate Analysis of Variance) in Excel software to analyze the difference between each group’s pre-test score distribution.

Table 3. p-value between different groups (pre-test) in Excel Software.

Compared Group	Group A (Pre-test) and Group B (Pre-test)
p-value	0.67584
Compared Group	Group B (Pre-test) and Group C(Pre-test)
p-value	0.55658
Compared Group	Group A (Pre-test) and Group C(Pre-test)
p-value	0.88518

displays the pre-test p-values.

Table 4. Average and median score data in each group.

	Group A	Group B	Group C
Average Score (Pre-test)	3.95	3.8	4
Median Score (Pre-test)	4	4	4
Average Score (Post-test)	6.8	6.15	7.9
Median Score (Post-test)	7	6	8

displays the pre-test and post-test averages and median scores. The pre-test data are as follows:

• The p-value of the user score for Groups A and B is 0.67584. The p-value for Groups B and C is 0.55658. The p-value for Groups A and C is 0.88518. The data indicate that the difference in the user score between the experimental groups is insignificant.
• The average score of Group A is 3.95 and its median score is 4. The average score of Group B is 3.8 and its median score is 4. The average score of Group C is 4 and its median score is 4. The data show that the number in the user score between the experimental groups is within a limited range.

The pre-test data showed that all groups had similarly limited knowledge regarding the website. Therefore, it was possible to use the post-test to compare different groups’ reading efficiency. The research calculated the average and median scores in the post-test (Table 4). Considering the difficulty of using XR devices, the study monitored Group A/B users and assisted them in operating the HoloLens 2. All participants were able to complete the experiment. For the experiment, five trends were obtained, as follows:

• Group C’s post-test average score was 97.5% higher than the pre-test. The median score was 100%. It is significant that the GNA website has a unified UI and provides smooth user experiences on desktops.
• Group B’s post-test average score was 61.84% higher than the pre-test, but 22.16% lower than Group C. The median score was 25% lower than Group C.
• Group A’s post-test average score was 72.15% higher than the pre-test, 10.57% higher than Group B, but 16.17% lower than Group C. The median score was 12.5% lower than Group C.
• It is encouraging that Groups A/B/C improved their score from exploring the website. However, Group B had a certain gap with Groups A and C.

4.4. Result Analysis

The above data shows that the framework could improve the reading efficiency using comparisons. It could provide a better performance compared to the traditional desktop version on XR platforms. However, its performance was worse than the desktop version.

The study attempted to find the reasons that led to this result. The study interviewed Group A participants and asked about their experiences with the framework. All users reflected that although the framework could provide a 3D visual effect and absorb them to explore, some existing issues affected their exploration. The primary issues were a limited field of view, a blurred rainbow-colored light flare, and tiredness in gesture scrolling. It is significant that the performance still had a gap with exploration via desktop.

The study analyzed that most of the issues came from hardware limitations except for the tiredness. Hardware limitations are an issue that is difficult to solve in terms of software. Therefore, the study focused on solving issues which did not belong to hardware limitations. The study lowered the sliding gesture range in the framework to decrease the tiredness experience.

In short, the user experiment gave support that the framework could improve website performance on XR platforms. Additionally, the experimental data is able assist the study in improving the framework. The framework can assist static websites in updating their UIs with XR features.

5. Conclusions

In order to improve the user experience of web services in XR platforms, our research aimed to design a Web XR User Interface framework with XR characteristics and componentization design. The research explored Web Extended Reality (XR) and its current circumstances. Compared to other existing research, the study tried to avoid reconstructing the static websites’ layout at a high cost for small/medium businesses. The study aimed to optimize the current UI layout with XR fundamental features. The research discussed the advantages of web componentization and the Page Builder System, which is a famous framework for web componentization. The study refers to these existing HTML5 technologies for designing a general and convenient UI framework. It can assist static websites with transferring into the Web XR field without extensive reconstruction of their website UIs. A 3D UI framework is proposed for providing an immersive, explorative, and readable user experience. The framework covers three aspects, including main content, scrollbar, and navigation. The framework follows the componentization design to provide a smooth transition and immersive interactive experiences. The research runs a comparative user test with 60 participants. The result shows that the framework is more attractive and efficient than the traditional desktop UI layout in the MR platform. At the same time, the framework is close to the desktop experience. Based on these evaluations, we believe that the proposed framework can be used as an effective exploration tool for static websites. The proposed framework can contribute towards improving the user experience in the fields of Web XR. In short, the research supports that XR interactions can efficiently improve website layout. The framework can enhance user participant enthusiasm.

Although the study can contribute to the user experience in Web XR, it still has some limitations. The study only covers most static websites, while dynamic websites are much more different. The dynamic websites have various UI layouts and navigation principles, such as online shopping and social communication. The current framework cannot adapt because it aims to display general business/organization information. Therefore, it is necessary to extend the research to the dynamic website. Future work will extend to dynamic websites and discuss the different UI structures of services and e-commerce websites. The study can improve their UIs with XR interactions. We will use various statistical analysis methodologies such as mixed-ANOVA to measure the user experience after analyzing the framework with pre-test and post-test.