2011 International Conference on Electrical Engineering and Informatics 17-19 July 2011, Bandung, Indonesia

Development Environment for Layout Design of e-Commerce Applications Using Block-Based

Approach Nor Haimimy Rawi1, Marini Abu Bakar2, Rokiah Bahari3 and Abdullah Mohd Zin4

# Programming and Software Technology Research Group Fakulti Teknologi dan Sains Maklumat

Universiti Kebangsaan Malaysia 1mimiey.rawi@gmail.com

2marini@ftsm.ukm.my 3rokiah@citycampus.utm.my

4amz@ftsm.ukm.my

Abstract— E-commerce is a process of buying, selling, transferring or exchanging products or services via the Internet. It is expected that in the future, more and more business transactions will be carried out through e-commerce. The design of an e-commerce website plays a significant role in attracting potential customers to visit the site. It can also influence customer’s decision to make purchase and to return to the site. Good e-commerce applications need to be developed by professional programmers and the cost is substantially high. With the advent of Web 2.0 technology, end-users are now able to create their own web content and applications such as blog, facebook and friendster. Some providers such as Google provide a mechanism for end-users to create web sites and host e-commerce applications. However, using these technologies, users can only select and customize the application according to provide templates. One of the main problems with this approach is that they do not support a flexible layout design. This implies that an end-user cannot change the layout of a selected template. This paper presents a flexible and easy to use block-based development environment for creating customized e-commerce applications. A block is a single layer software component that performs a single function. Concurrent project has developed blocks for e-commerce application. The proposed development environment is intended for non-programmer end-users to design and develop their own e-Commerce applications by selecting and positioning blocks on a page. Keywords— development environment, layout design, e-commerce application, block based

I. INTRODUCTION In recent years, we have witnessed an explosive growth in

electronic commerce or service [1]. More firms and start ups choose the web to build brand reputation, to do transaction with web-users and investors, or for public relations purposes [2]. According to Forrester Research US online retail reached $175 billion in 2007 and is projected to grow to $335 billion by 2012 [3].

The Malaysian government has encouraged Malaysian businesses especially small and medium enterprises to venture into e-commerce. However, the cost of developing e-commerce application is tremendous and this has hindered most of them from venturing into this type of business. In order to solve this problem, we have proposed a mechanism for developing e-commerce application based on the block based software development approach. By using this approach, an e-commerce application can be developed by selecting, customizing and combining software blocks that are specially developed for this purpose.

This environment is based on web 2.0 technology applications such as blogs, friendsters and facebooks, which have enabled end-users to develop their own web applications for the purpose of social networking. The major difference between our approach and the approach used by previous e-commerce applications is that our approach based on blocks and not template. The use of blocks will make the environment more flexible and hence can be used for developing more complex applications [4].

Studies have shown that an important characteristic of online shopping is that consumers have to base their judgments on product information presented on these e-commerce websites. As a consequence, website design plays a significant role in affecting consumers’ online shopping performance and attitude toward the websites [5]. Like user interfaces in ordinary computing, this interface could be a major success factor, and in many cases it is the major factor that determines buyers' willingness to buy on the Net [6]. In particular, the design of websites can influence visitors’ decision to purchase and return to the site [7]. The success of e-commerce for any company, especially if it is not a well-known name, is greatly dependent on the appropriate design of its website [6].

Therefore, the main objective of this research is to develop an environment for layout design of e-commerce application

H2 - 3

978-1-4577-0752-0/11/$26.00 ©2011 IEEE

that will enable end-users to design their own e-commerce applications which are attractive and easy to be used.

II. RELATED WORKS

A. E-Commerce Applications Electronic commerce, or e-commerce, is the selling of

goods and services via an electronic media, using technology to facilitate rapid exchange of detailed information between buyers and sellers [8]. E-Commerce applications can be divided into a few categories such as B2B (Business to Business), B2C (Business to Customers) and C2C (Customers to Customers).

A type of B2C is e-retailing that enables direct sales of products or services through electronic storefronts or electronic malls. This facility enables us to buy from home, 24 hours a day, seven days a week [4]. The fundamental characteristics behind a B2C (Business to Customers) website are its content and design [9]. The content is important in influencing web-user’s purchase decision while the design helps to attract and retain customers’ interest at a site [10]. To help end-users develop their own e-commerce web application, some provider such as Google and open source software such as Content Management Systems (CMS) provide a mechanism for end-users to create web sites and host e-commerce applications.

1)Content Management Systems (CMS)

A CMS is a tool that enables a variety of technical and non technical staff to create, edit, manage and finally publish a variety of content such as text, graphics, video and documents. Examples of the well known CMS for creating e-commerce applications are “Joomla”, “Drupal” and “PrestaShop”. However CMS are very complex pieces of software that required a lot of time to understand and required advanced understanding of HyperText Markup Language (HTML), CSS and web technologies. End-users also need to have knowledge in PHP for editing the web editor and mySQL to manage the database. So essentially operating a CMS still requires a web developer.

CMS is not flexible when it comes to designing and structuring of a website. CMS sites primarily use templates for design. They are easy to recognize because they have a standard format such as 2 or 3 column designs with boxes placed in various positions to accommodate the content. The designer must stay within the confines of this type of template therefore it is limited in the flexibility and uniqueness of design. Furthermore, CMS sites cost a lot more to design than static sites because a designer has to install and configure the database, design the template, then customize it to include all the extensions such as menus, polls, banners and forms. It will also require extensive testing to check for errors, browser compatibility and screen resolution [11].

2) Google Sites Google sites also provide a mechanism for end-user

to develop a simple e-commerce site. Just like CMS

software, Google Sites is based on template for design. Users can only select and customize the application according to provide templates. This implies that an end-user cannot change the layout of a selected template. So it limited flexibility in design.

B. Web 2.0 Technology The term Web 2.0 is generally associated with web

applications that facilitate the interactive exchange of information. A Web 2.0 site gives users the free choice to interact or collaborate with each other in a dialogue of social media as a creator of user generated content in virtual communities, as opposed to a website where users (subscribers) is limited and can only view content created for them. Examples of Web 2.0 including social networking sites, blogs, wikis, video-sharing site, hosts services, web applications and mashups.

The increasing popularity of Web 2.0 tools, such as facebook, friendster, blogs and wikis is fundamentally changing how consumers use the web. The basic core of Web 2.0, that user can generate and share their own content, often regarding company brands and products, provides both potential value and challenges to marketing practitioners. So to make our application is acceptable, user friendly and easy to create without using any programming code, we create this application similar to the environment for creating Web 2.0 site such as facebook, friendster and blogs.

(i) Facebook

Facebook is another social networking application that is used basically as a mean of communication between friends [12]. From the view of design, facebook are not flexible because user cannot rearrange the layout interface.

(ii) Blogspot Blogspot is a free blog publishing tool from Google for easily sharing our thoughts with the world. Blogger will use the features in this blog to help them posting text, photo, video and more to their blog [13]. The layout for blogspot is half flexible because the layout design is still depending on template.

(iii) Wikis A wiki is a tool that allows multiple users to collaborate with each other through a group website. Each user can add or modify text as well as upload files by simply using a web browser. Anyone can edit the text or file so this may be too open for some applications, for example confidential documentation. The flexibility of a wiki's structure can mean that information can become disorganised

III. DESIGN OF LAYOUT EDITOR DEVELOPMENT ENVIRONMENT

A. Blocks Blocks are basically a program component that can be

combined with other blocks to form an application without

going through the coding process. The use of blocks will enable end-users to develop applications directly. It has also introduced a new approach for programming, known as Block-Based Programming [14].

Some of the proposed blocks to be provided for this application are:

• Login block • Shopping cart block • Product block • Payment block • Shipping block

Fig. 1 is an example of login block looks like.

Fig. 1 Login block

B. Use-Case Diagram. Fig. 2 shows the use-case diagram to represent the

functionality of the system. The functional requirements for this system are:

• Register • Login • Create web page • Select block • Drag and drop block • Edit block properties • Integrate block • Run project • Save project

Fig. 2 Use-case diagram

1) Register: The new user need to register first before can start using this e-commerce web application.

2) Login: For the user that has already registered, can continue with login.

3) Create web page: After successfully login, layout editor’s page will be shown. User can start with

creating the first page for their e-commerce web application.

4) Select block: User can select the block provided at the bottom of the page.

5) Drag and drop block: the selected block can be drag and drop it into the workspace.

6) Edit block properties: User can edit the properties such as text colour, text font, text size and text title of the selected block.

7) Integrated block: All the selected block will be integrate.

8) Run project: After the block was integrated, user can run or see the preview of the project that has been done.

9) Save project: user can save the project that has been done.

IV. IMPLEMENTATION AND EVALUATION

A. Implementation This application is developed using Netbeans IDE 6.8 with

Glass Fish v3.

1)Block features

In layout editor’s page, end-user can design their own layout for their web page by choosing any of the available blocks. The list of block provided is shown at the bottom of the layout editor’s page (Fig. 3).

Fig. 3 List of block

All these block is create as .jar file. One block is one jar file. Each block has its own properties and behaviour or operation. Block properties such as text font, text size and text colour can be customized by the end-users. Block can be positioned anywhere on the workspace layout because it does not depend on template. So it’s more flexible because end-users can design their own layout. One web page layout can contain

more than one block and block can be re-used. Its means that the same block can be used more than one time. Anyway, the web pages that have been design is not consider as a block.

2)Interface design The GUI for proposed development environment for layout

design of e-commerce application is shown below. (i) Login and register

Firstly, user need to login before they can create their e-

commerce web application. For new user, they need to register their information fist before they can start using this application. The interface for login and register new user is shown in Fig. 4.

Fig. 4 Login page

(ii) Layout editor environment

After successful login, layout editor’s page will be shown (Fig. 5)

Fig. 5 Layout editor’s page

1)Profile info: After login, the name of the user appeared at this side. Edit profile also available for user to edit or change their profile information.

2)Workspace: Name of the user’s website appeared at the top of the workspace. The user’s web page that has been created by user also will be list in workspace.

3)List of blocks: All provided block were list here. User can select any block they want to use by drag the selected block and drop it on the workspace.

4)Operation: This part listed all the behaviour of the selected block.

5)Properties: Listed all the available properties where user can change or customize it.

6)Layout preview: When the selected block has chosen, user can arrange it on this layout.

B. Scenario Example After user successfully login, layout editor page was

shown. User can see their name appear at the profile info. User can edit the profile and also can upload the photo. At the workspace part, the site was name earlier by user will be shown at the top. In this example the site was name ‘My Ecommerce’. After that, user creates the first page named ‘Home Page’ as shown in Fig. 6. Now user can start design the first page.

Fig. 6 Layout editor’s page

They can select the block provided in ‘List of Blocks’ part. For example, user select the login block by drag from the ‘List of Blocks’ part and drop it on the workspace. The login block was assign to ‘Home Page’ page (Fig. 7).

Fig. 7 Layout editor page

After login block was selected, we will see the part at the right side was change. At the top of right side we can notice the layout preview for Home Page. The login block that user chose appear at the layout preview. User can design by rearrange the position of that block. They can position that block anywhere on the layout without confines. So, it is unlimited in flexibility. At the middle of the right side, the properties and operation available for the login block was shown. So user can customize it to make it look unique and different from the others. User can check and uncheck the checkbox at the ‘Operation’ part. Operation part is containing block behaviour and function. For example, if user wants to make the checkbox ‘Remember’ in Login block can function, user need to tick or check the checkbox Remember in operation part (Fig. 8).

Fig. 8 Layout editor page

V. CONCLUSIONS The use of blocks based approach provides a simpler

environment for end-users to develop web applications since it does not involve any form of coding. This will hopefully encourage entrepreneurs especially from small and medium enterprise to develop their own e-commerce web applications. Furthermore, this approach also allows the design of web application to be flexible and thus the web applications can be customize according to the need of the customers.

REFERENCES [1] D. Cyr, et al, The role of social presence in establishing loyalty in e-

Service environments, Interacting with Computers Vol. 19. No. 1: 43-56, 2007.

[2] C. Subramaniam, et al, Product Marketing and Channel Management in Electronic Commerce, Information Systems Frontier, Vol. 1, No.: 363-379, 2000.

[3] S. Mulpuru, (2008). US eCommerce: 2008 To 2012. Cambridge, MA. Forrester Research. [Online]. Available: http://www.forrester.com/rb/search/results.jsp?N=0+11129.

[4] M. H. Hamizah, R. N. Haimimy, B. Rokiah, et al, Conceptual Design of an Environment for Creating Simple e-Commerce Applications, 2010

[5] Palmer, J. W. Web site usability, design, and performance metrics. Information Systems Research. Vol. 13.No. 2: 151-167. 2002.

[6] D. Gehrke, E. Turban, “Determinants of Successful Website Design: Relative Importance and Recommendations for Effectiveness,” International Conference on System Sciences, Hawaii, 1999.

[7] B. T. Felix, L. L. Tung, Y. Xu, A Study of Web-Designers’ Criteria for Effective Business-to-Consumer (B2C) Websites Using the repertory Grid Technique, Journal of electronic commerce research, Vol.10. No.3: 155-177, 2009.

[8] J. L. Nancy, What users want in e-commerce design: effect of age, education and income, Ergonomics, vol. 46, No. 1-3, 153-168, 2003.

[9] Huizingh, E. K. R. E, The content and design of web sites: an empirical study. Information & Management, Vol. 37, No. 3: 123-134, 2000.

[10] Ranganathan, C. and S. Ganapathy, Key dimensions of business-to-consumer web sites, Information & Management, Vol. 39, No. 6: 457-465, 2002.

[11] (2009) Web Design Discussion website [Online]. Available: http://www.drostdesigns.com/the-disadvantage-of-a-content-management-system/

[12] M. Jazayeri, Some Trend in Web Application Development, Future of Software Engineering (FOSE’07), 2007, IEEE.

[13] M. D. Jacyntho, D. Schwabe, G. Rossi, A Software Architecture For Structuring Complex Web Application, Journal of Web Engineering, Vol. 1, no 1(2002) 037-060: Rinton Press.

[14] A. Mohd. Zin, et. al, Block-Based Software development, Programming and Software Technology Research Group Technical Report 1/2008, Universiti Kebangsaan Malaysia.