Visual Augmented Reality Interface for Table-top E-Business Environment

Alfred Chena, Ya-Ling Huangb, Chien-Hsu Chenc, Kuang-Ching Taid

Department of Spatial Design, Kun Shan University, Taiwan Department of Visual Communication Design, Kun Shan University, Taiwan c Department of Industrial Design, National Cheng Kung University, Taiwan d Department of Visual Communication Design, Kun Shan University, Taiwan
b a

Abstract With rapid development of the Internet, diversified e-business models encourage changes in consumers shopping behaviors. In existing e-business models, most of the websites only provide images and limited information of the products for the consumers. Provided only with virtual images, it is difficult for them to judge how the products will afterwards fit in the real environments. In this research, the authors have attempted to provide precise visual images and correct information of the products for the consumers. To achieve this goal, the authors have adopted augmented reality technology as a tool to develop a system which allows the virtual products adopted from websites to merge in consumers actual home environment. In the developmental stage of the system, a desktop computer, a web camera, location cards, and an interface in webpage form are incorporated to develop an interactive human/computer interface. This interface lets consumers augment the three-dimensional virtual artworks to a specified location of the actual environment. It also creates new shopping experiences for consumers.
Keywords: Human/computer Interaction, Augmented Reality, Webpage, E-business

1. Introduction Due to the fact that the internet has integrated into the lives of the global population, e-business has become a mechanism to provide product consumption in response to the digitalization of global commerce and the consumers purchasing trend. Regrettably, the information provided by these e-businesses is focused only on displaying each individual product or integrating it into a predesigned or pre-arranged display environment. Therefore, how an actual product will fit into the real-life space of the consumer still requires the imagination and mental calibration of the consumer. In terms of helping the consumer to visualize the

actual product in her living environment, there is not much improvement in shifting the mechanism from conventional stores to online shops. By applying the technology of Augmented Reality onto e-business, this study will demonstrate how Augmented Reality can help to present an accurate image of the product to the consumers through the internet in order to integrate the product into the consumers environment.

2. Related References 2.1. Augmented Reality Augmented Reality represents the integration of

computer generated graphic and the real world into an overlapping image through the users see-through head-mounted display. An example of Augmented Reality is placing a 3D computer generated image of a teacup on a real teacup saucer that is physically present in the environment. Through Augmented Reality, the user can also freely walk about the room and the teacup will still display on the exact predetermined location. The attribute of the delivered image will not be restricted or altered by the location of the viewer in the same environment. Although Augmented Reality could easily be confused with Virtual Reality, the fundamental difference rests on the fact that Virtual Reality tries to replace the real world with a synthesized virtual world while as Augmented Reality augments the synthesized objects onto the real world. [1] The purpose of an Augmented Reality system is to enhance a users perception through an interactive interface that delivers a streaming image and was produced by integrating the real world with virtually generated objects. In between reality and the virtual world, there are several ways to classify computer interfaces. According to Milgram, the classification of the interfaces could be determined by how much the users environment is consisted of computer generated graphic. Milgram proposed a scale that represents the multitude of Augmented Reality applied to an environment in a linear fashion. The environment on the most left hand side of the scale represents a world without any synthetic image and while as on the most right hand side of the scale represents a world that is solely made out of Virtual Reality. In between of these two extremes is the world that is consisted of virtual images augmented onto the real world environment. Many of the interfaces that are used by the users can be placed onto a specific location of this scale. [2] 2.2. E-business E-businesss defining character is using the internet as the medium of communication and utilizing such medium for business activities such as online shopping, online ordering, online publishing, and online marketing. It can be classified into three categories based on the mode of the transactions such as Business to Consumer, Business to Business, and Consumer to Consumer. E-business makes business transactions faster and easier, but at the same time, it also brings competition to the next level. [3]

2.3. Consumer Behaviour Process Mode Consumer behavior process mode is used to analyze the phases of consumer behavior to provide marketing reference. The particular E-business model inside the Consumer behavior process mode elaborates the consumers behavior into seven sequential phases: confirmation of needs, information search, pre-purchase evaluation, purchase, using of products, post-purchase evaluation, and termination of use. Among the seven phases, pre-purchase evaluation and post-purchase evaluation are connected in such a way that the purchasing experience between pre-purchase and post-purchase will influence the decision of the buyers next purchase. [4]

3. Webpage Architecture The core webpage is divided into six pages and the order of sequence is as follows: Home Page, Select Merchandise, Preview, Checkout, Print Location Card, and Help. The first four web pages belong to shopping process and the latter two belong to customer support. The functions of these pages are listed below: 1. Home Page: Conveying the purpose of the webpage through both image and text. When a consumer loads the Home Page, the page should be easy to navigate while showing the necessary information that is needed to be communicated to the consumer. 2. Select Merchandise: Providing the consumer a selection of merchandise that matches the consumers need through both representation in text and image. Text will include information such as merchandise name, price, and specification. Image will include thumbnails and enlarged pictures of the merchandise. 3. Preview: By using the consumers web cam attached to her personal computer, she is able to upload the image of her living environment onto the webpage in order to preview the virtual merchandise mapped into her living environment. 4. Checkout: This is the final stage of the shopping process. Through this page the consumer can confirm that she has purchased her merchandise through display of image and text. 5. Print Location Card: This page provides the function to print the location card.

6: Help: This page provides information about how to navigate this website and a flow chart that will guide the consumer through how to use Augmented Reality technology in her shopping experience. (See Table 1) Table 1 Webpage Architecture
1 Home Page 2 Select Merchandise 3 Preview 4 Checkout 5 Print Location Card 6 Help

Shopping Process

Costumer Support

In order to make this webpage flexible and convenient to the consumers, these pages except Checkout can be inter-linked together. (See Figure 1)
Original Page Home Page Select Merchandise Preview Checkout Print Location Card Help

Target Page

Home Page Link

Select Merchandise No Link

Preview

Checkout

Print Location Card

Help

Figure 1 Webpage Links

4. System Configuration
Page Transition

The configuration of this page will focus mainly on integrating Augmented Reality onto an e-business webpage that contains a purchase system. Consumer who browses this webpage has several hardware requirements such as: personal computer, web cam, and a location card. (See Figure 2 and 3)

Interface Design

Augmented Reality

Figure 3 Primary Functions of an E-business Webpage This webpage is built based on Macromedia Director as the page platform with the aids from other various graphic software. The webpage is consisted of four primary functions and they are: Page Transition, Interface Design, Augmented Reality, and Network. The definitions of each of the functions are listed below. 1) Page Transition: Page Transition is the function of linking and inter-linking of pages within this site.

Figure 2 Location Card

This function utilizes Director Softwares timeline function to create a seamless transition between pages. A still frame will be the main frame and inside this main frame there will be buttons to link to other frames. It is useful to consider each frame as a different traditional page on a website. These buttons that interlink the frames together can be considered as hyperlinks as well. 2) Interface Design: Interface Design includes image editing, color editing, interactive buttons, and audio effects. Using Macromedia flash, the program can deliver an ideal website that takes background, buttons, and various details into consideration. The final format of the file will be swf files and it will be placed into Director Software as different frames. 3) Network: Using the final production stage of the files, the program converts the swf files into dcr (Shockwave files) which can be accessible by any personal computer. This system then can be run on a web browser,

Processing: The goal of this function is to process the image taken in by the web cam which includes the background of the environment with the main focus on the location card. The image will be cropped into showing the location card only without the background. 3) 3D coordinate calculation: This function is to calculate the coordinate of the location card in the processed image. 4) 3D model construction: This webpage will use a programming language Lingo to construct the 3D model of the virtual merchandise. 5) Mapping of Image and 3D model: Using Director Software to construct 3D model, this program will first create a 3D cast member and then it will construct a 3D model afterwards. This function uses the image inputted by the web cam to be the background image of this 3D cast member, then placing this virtual merchandise onto the background in a location that is based on the coordinates of the location card. (See Figure 4)

Image Input Control

Image Processing

3D Coordinate Calculation

3D Model Construction

Mapping of Image with 3D Model

Figure 4 Necessary Functions of Augmented Reality System therefore, delivers virtual merchandise to consumers all over the internet. 4) Augmented Reality: Consumers can manipulate Augmented Reality system through this website. The necessary functions of an Augmented Reality system are: Image Input Control, Image Processing, 3D coordinate calculation, 3D model construction, and mapping of image with 3D model. The definition of each function is as follows: 1) Image Input Control: Literally controlling the image that is being inputted. Using two Director Softwares supporting programs: FileXtra4 and cXtraVideoCapture made by cXtra. The process of inputting the image will be activating web cam in order to upload the environment into the websites interface. Then the system will convert the environment into a still frame image that fits into the format required by the websites interface. 2) Image
AR Mode Home Page Select Merchandise

5. Operational Procedure This flowchart demonstrates the two different kinds of purchase process: Augmented Reality Mode and Conventional Purchase Mode. The difference between these two lies in whether or not the process involves the Preview page. Augmented Reality Mode utilizes the preview page while the Conventional Purchase Mode does not. Furthermore, in Augmented Reality mode, the Checkout page will display images that were augmented by Augmented Reality technology. In the Conventional Purchase Mode, the page will directly transit from Select Merchandise to Checkout and will only show enlarged image of the merchandise during Checkout. (See Figure 5)

Preview

Checkout

Print Location Card

Conventional Mode

Home Page

Select Merchandise

Checkout

Figure 5 Webpage Operational Procedure

The Augmented Reality Purchase Mode of this webpage can be divided into eight steps and the operational procedures are as follows: 1. As soon as the consumer enters the website, click on the Select Merchandise button to switch the page into Select Merchandise page. 2.After the consumer enters the Select Merchandise webpage, inside the merchandise column there are images and basic introductions of the merchandise (Title, Artist, Date, Price, and etc). The consumer can click on each of the image in order to select the desired merchandise. The image of the selected merchandise will be enlarged in the display box in order for the consumer to view the fine details of such products. The selected merchandise will also provide a more detail information inside the information box including: historical background, style, and theories. Then the consumer can click on Print Location Card button to switch to the Print Location Card page.

place the virtual image of the merchandise in a precise manner over the location card. 7. The consumer will be able to preview the merchandise and see how the merchandise matches with her living environment. The Hide and Show buttons on the AR toolbar will be able to hide or show the virtual image of the merchandise. The consumer can compare the image of her environment

3. After the consumer enters the Print Location Card page, there will be a popup window for printing. The consumer will click ok to print the location card. After printing, the consumer will click the Preview button to switch the page to the Preview page. 4. After entering the Preview page, the icon that says web cam will blink to guide the consumer to click on the web cam icon that lies within the AR toolbar on the left hand side of the page. By clicking this icon, this program will activate the web cam on the consumers personal computer. 5. After the web cam has been activated, the web cam can capture images that will display in the preview box. The consumer should first place the location card at the location where the merchandise will be located, and then the consumer should hold the web cam by hand and aim at the location card and capture the best image by adjusting the focus of the web cam. 6. When the web cam is focused and the preview box displays the location card in the ideal position of the environment for the consumer, the consumer should click the capture button in the AR toolbar. After the image is captured, the program will automatically calculate the coordinate of the location card and then

with or without the merchandise. Then the consumer will click Checkout button on the top to purchase the desired merchandise and the page will transit into the Checkout page. 8. After loading the checkout page, the page will display the selected merchandises basic information on the right while the detailed information is displayed below the image. There is also another link inside the page to go back to the Select Merchandise page in order to make it convenient for the consumer to shop for more merchandise. (See Figure 6)

First Step

Second Step

Third Step

Eighth Step Figure 6 Eight Steps in Operational Procedures

6. Conclusion Since the globalization of business and trade, the market competition is getting fiercer each day. The price, quality, channels, and information of a product are the factors to determine how successful an entrepreneur is. By adding Augmented Reality to an online shop, this research intends to provide consumers with more information before they make their purchases. This study also creates a positive experience for online shopping, and boosts business revenue.

Fourth Step

7. Acknowledgement Fifth Step This research is dedicated to the financial support of National Science Council of Republic of China. Code Number: 94-2213-E-168-006

References
[1] Feiner, S. K. 2002 Augmented Reality: A New Way of Seeing: Computer scientists are developing systems that can enhance and enrich a users view of the world. Scientific American, April 2002. p.36-45. [2] Mark Billinghurst. Hirokazu Kato. Ivan Poupyrev, The MagicBook: A Transitional AR Interface, Computers & Graphics, Vol.25, 2001, pp.745-753 [3] Jonassen, D.H., The physics tutor: Integrating htpertext and expert systems, Journal of Educational Technology Systems, No. 22, 1993, pp. 19-28 [4] Blackwell,R.,& Miniard,P.& Engel,J., Consumer Behavior, FL: Harcourt, p.83

Sixth Step

Seventh Step