Using DHTML to Implement the Interactivity in Online Shopping

(1)

Using DHTML to Implement the Interactivity in Online Shopping

Wen-Chang Cheng

Department of Management Information Science, Chung Hwa University of Medical Technology

Email : bill@mail.hwai.edu.tw

Abstract

Adding interactivity to a website can increase online consumers’ shopping motivation. How to promote products and influence customers to shop has always been the retailers’ first concern. And, the usages of interactive features in online shopping website are the most important part of the web pages design. With the advanced development of web pages implementation skills and technologies, many online merchandising tools have been introduced to create interactivity, such as, image zooming and switching technologies, rollover effect, etc. This paper will explains how to use DHTML (a combination of HTML, JavaScript and CSS) to implement the interactivity in online shopping websites and display various examples.

Keywords: Interactivity, DHTML, Web Implementation, Online Shopping.

1. Introduction

According the Wikipedia, the Dynamic HTML or DHTML is a collection of web programming languages used together to create interactive and animated webs. Those web programming languages commonly include HTML, JavaScript, CSS and Document Object Model (DOM). Web designers can use DHTML to animate text and images and include rollover button and drop-down menu. By using the DHTML features, we can add effects to web pages to create interactivity.

Kyrnin[1] defined two primary features of DHTML, they are:

1. Changing the tags and properties: The most commonly used in DHTML. Allows user to change the HTML tags’ qualities.

2. Real-time positioning: Allows user to play interactive games by moving the objects, images and text around the web pages.

Above two features can be implemented by JavaScript because it allows authors to control the browsers element and HTML DOM. JavaScript is an object-oriented language and provides many ready-to-use objects such as Image, Date, Alert and so on. That makes the designers devise web pages effect easily and create more online interactivity. Luo[2] mentioned one of advantage of JavaScript is its decision-making capabilities, allow web designers to control the attributes of HTML and make the web pages more flexible, smarter and enhance the web interactivity. He also used a combination of HTML, CSS and JavaScript to increase the interactivity of an e-learning web site.

The purpose of online shopping interactivity is to promote products and enhance customers’ shopping motivations. Hafizul[3] studied the Effects of Website Interactivity on Online Retail shopping Behavior and found that an interactive websites can stimulate the online shoppers’ perception and generate a positive attitude to the products. Junghyun[4] surveyed the Interactive E-Commerce also found an online shopping sites with some ©2007 National Kaohsiung University of Applied Sciences, ISSN 1813-3851

(2)

interactive features were thought to stimulate recreational and unregulated buying. Chaitanya [5] followed the ideal of online shopping interactive to create a web for the online retailers. That means he made the web interactive and its ease of use. He also used drag and drop features (which could be implemented by DHTML) to providing a user-friendly environment so that buyers can add a product to the shopping cart by dragging the items. With DHTML at your side, adding interactivity into online shopping web pages can raise the shoppers’ motivation and make them involved in the shopping environment easily. Rachael[6] investigated the online shopping in the United States and indicated that online shopping is on the steady rise up because many Americans have the availability to access the Internet and try online shopping. And those shopping websites offered interactive tools to assist the shoppers. In other word, the usage of interactive features played the most important role in the increase. By using the six categories of interactivities defined by Versteeg[7] we can apply them into online shopping interactivity, they are :

1. Illustrate/demonstrate: An animated interactive we can use to demo product.

2. Simulate: Online shopper can experience something closer to the real experience and get real time feedbacks. 3. Quiz: Interactive quizzes such as Frequently Asked Questions (FAQ) can make the shoppers view the

purchase related question and get their answers.

4. Present a pre-topic challenge: Keep the shoppers informed about their buying progress as they continue through the shopping webs.

5. Engage/Motivate: Keep the shoppers motivated by some games, animation or information display. 6. Utility: Perform a specific supporting function to the interactive. E.g. movie or song player.

All the six interactivities can be implemented by DHTML. Al Fernandez[8] mentioned three kinds of online interactivity which are also created through the manipulation of (HTML, JavaScript and CSS), they are Rollover text, Rollover buttons and Pop-windows.

2. Examples

The following are some online shopping interactivity examples implemented by DHTML. (1) Rollover text effect

Simply use hyperlink, CSS and JavaScript to do the effects. The advantage of using Rollover text effects is that no images are needed to be uploaded. Using the effect for online shopping webs, shoppers can get other information or link in real time by moving the mouse pointer on the text (Fig1-1). Another widely used rollover text effect is FAQ (Frequently Asked Questions). When mouse pointer hovers on the questions and the answer will be shown instantly (Fig1-2). We can also use CSS to reach this effect. For example, simply add “A:hover{color:red; font-size:24pt; text-decoration:underline}”to <head> and </head> tags and the text will change when mouse move over on the hypertext links.(Fig1-3)

(3)

Fig1-2. Mouse pointer hovers on the questions and the answer will be shown instantly

HotProduct Î HotProduct

Fig1-3. Use CSS to do Rollover text. Simply move the mouse pointer on the link text and the text font will be larger and red to attract the users’ attention.

(2) Rollover buttons effect

The same as rollover text effects, just change the text to buttons can also allow the shoppers to get some real time feedbacks. Using this effect combined with Sound Effect Function implemented by JavaScript in shopping cart, the shoppers just move the pointer, the sound and a web page with shopping items will come out. That provides the user a quick interactivity for online merchandising. (Fig2)

Fig2. Use Rollover buttons to engage the Sound Effect function. Click on the button to trigger a sound and pop a new web page with shopping items’ information.

(3) Pop-windows

No matter how we design hypertext links to link our shopping webs’ concepts and resources, users usually press the browser’s back button to get back the previous or main page. That is easy for the users to get lost or loose the place on the web site. By creating the pop-windows, the users simply close the pop-up windows and the main page still remain on the screen. The pop-windows should provide additional information or topics and the sub-windows shouldn’t be too large to cover the main pages. Using the effect for online shopping, users can get the products’ further information shown on pop-window by pressing the mouse button on the images. (Fig3)

(4)

Fig3. Pop-Windows shows the further information the cell phone. Click on the image to see the corresponding information.

(4) Images swapping effect

A survey from “www.viewfx.co.uk” showed 72 percent of customers were more likely to buy online as a result of interactive images. Using DHTML to create interactive images with advanced functions (such as zoom, swapping and spin) can inspire the visitors stay longer in web, turn them to customers and keep them coming back. Modifying <img> tag’s “src” can swap the image, or change “width”, “height” to zoom the images. The codes are shown on Table1 and 2.

(5) Animation

There are many software to make animations such as Flash, JavaScript which both provide Script allow us to design interactive animations. An interactive animation allows users to start, stop, pause and rewind; even drag an object by using keyboard or mouse. We can design products introduction animations and use DHTML to design a list and customers can select any animation they want to watch. Customers only have to click the “Product List” to watch the product introduction animations (Fig4). The codes are shown on Table3.

(5)

Table1. Codes to implement images swapping effect <script type="text/javascript"></script> </head> <body>

</body>

Table2. Codes to implement images zooming effect <head> <script> function ZoomOut() { document.pic.height=310; document.pic.width=205; } function ZoomIn() { document.pic.height=100; document.pic.width=100; } </script> </head> <body>

Table3. Codes to implement animation list <head>

{

outputTag = "<embed width=401 height=346 src='"+mURL+"' type = application/x-mplayer2 >"; document.getElementById("mainMovie").innerHTML = outputTag; } // --></script> </head> <body> <div id="mainMovie"></div><p> <a href="javascript:setMovie('t1.swf')">Product1</a>  <a href="javascript:setMovie('t2.swf')">Product2</a>  <a href="javascript:setMovie('t3.swf')">Product3</a>  <a href="javascript:setMovie('t4.swf')">Product4</a>  </body>

(6)

3. Conclusion

Keep the visitors in the shopping web and turn them to customers is the holy grail for any online shopping web. Interactive shopping orientation plays a very important role in the shopping activity. With DHTML at our side, we can implement many web effects to achieve the online shopping interactivities. For example, we can use hyperlink, CSS and JavaScript to do rollover effect, or swap the images by moving the mouse pointer over them. These effects offer interactive tools to promote products and influence customers’ shopping motivations. As JavaScript is part of DHTML and a decision-making object oriented program (OOP) language, we can control the attributes of HTML and make the shopping web page more flexible and smarter. And, CSS provides a simple mechanism for adding style. With the rapid growth of web programming skill, DHTML will allow web designers to devise more dynamic and interactive web pages. There are still more online shopping interactive could be implemented by DHTML only if we know how to make the most use of DHTML feature and functions.

Reference

[1] Jennifer K., “Features of DHTML”, The About.com Guide to Web Design

[2] Luo Y.W., ”Using JavaScript to Implement the Real Time Feedback in Online Learning” , Journal of Engineering Technology and Education, Vol.7(1), pp.16-20, 2010.

[3] Islam H., "Effects of Website Interactivity on Online Retail Shopping Behavior", AMCIS 2009 Proceedings, pp. 362, 2009.

[4] Junghyun K. and Robert L, “Interactive E-Commerce: Promoting Consumer Efficiency or Impulsivity”, JCMC, Vol.10 (1), Article 9, 2004.

[5] Chaitanya R. and Mittapelli, “Online Shopping”, B.E., Osmania University, 2005 [6] Rachael S., “Online Shopping is on the Steady Rise Up”, http://www.ocf.berkeley.edu/. [7] Versteeg K., “Interactivity in E-Learning”, In B. Hoffman (Ed.), 2008.