An e-commerce website

7/31/2019 An e-commerce website

1/123

An e-commerce website fora Local Business

Kunal RaiBSc Computing with

Industry2004/2005

The candidate confirms that the work submitted is their own and the appropriate credit has

been given where reference has been made to the work of others.

I understand that failure to attribute material which is obtained from another source may be

considered as plagiarism.

(Signature of student) _______________________________


2/123

i

Summary

Often, in todays world people are carrying out many activities as possible in a single

day leaving them short of time and energy to carry out any other tasks such as

shopping. Due to the technological advancements, PCs and Internet are commonly

used by various kinds of people from different backgrounds. Thus it would be

beneficial to have the facility available for online shopping where consumers can

shop at any time of the day, from anywhere and at their own convenience.

The primary objective of this project was to produce a working prototype of a suitable

e-commerce website where customers could view and buy goods online for a local

business selling lingerie.

Developing such a system involved researching the various advantages online

shopping will bring to the stakeholder, the various aspects of HCI involved in web

designing, the user requirements, background technologies, and eventually the

construction of a working prototype.


3/123

ii

Acknowledgments

I would like to thank Andrew Amies-King and Sarah Fores for their supervision,

advice and willingness to answer all type of questions and giving me constructive

feedback on the report whenever required.

I would also like to thank Les Proll for his feedback, advice and comments in the

progress meeting and the mid-project report.


4/123

iii

Table of Contents

Chapter 1 Introduction...................................................................................... 11.1 Introduction .................................................................................................. 1

1.2 The Problem Domain ................................................................................... 11.3 Overview of the Problem Solution ................................................................ 11.3 Aims & Objectives ........................................................................................ 21.4 Schedule ...................................................................................................... 21.5 Minimum Requirements ............................................................................... 31.6 Conclusion ................................................................................................... 4

Chapter 2 Requirements................................................................................... 52.1 Introduction .................................................................................................. 52.2 Stakeholder Needs....................................................................................... 5

2.3 The Problem Owner ..................................................................................... 52.4 The Potential Users...................................................................................... 52.5 Interview with the Stakeholder ..................................................................... 52.6 Evaluation Criteria ........................................................................................ 62.7 Evaluation of competitors website ............................................................... 82.8 Evaluation Result ......................................................................................... 82.9 Functional Requirement ............................................................................... 92.10 Non Functional Requirement...................................................................... 102.11 Conclusion ................................................................................................. 11

Chapter 3 Background Research................................................................... 123.1 Introduction ................................................................................................ 123.2 Online Shopping......................................................................................... 123.3 Human Computer Interaction ..................................................................... 12

3.3.1 Design................................................................................................. 123.3.2 Usability .............................................................................................. 133.3.3 Navigation ........................................................................................... 133.3.4 Screen Real time................................................................................. 143.3.5 Colour ................................................................................................. 143.3.6 Response Time................................................................................... 14

3.3.7 Download Time ................................................................................... 153.3.8 Links.................................................................................................... 153.3.9 Link Titles............................................................................................ 153.3.10 Accessibility for Users with Disabilities................................................ 16

3.4 Technology................................................................................................. 163.4.1 Web Enabled Database Architecture .................................................. 16

3.4.1.1 Client-Tier .................................................................................... 173.4.1.2 Application-server tier .................................................................. 183.4.1.3 The Database Tier ....................................................................... 20

3.5 Security ...................................................................................................... 223.6 Cookies ...................................................................................................... 23

3.7 Conclusion ................................................................................................. 23


5/123

iv

Chapter 4 Project Management ..................................................................... 244.1 Introduction ................................................................................................ 244.2 Process Models.......................................................................................... 24

4.2.1 The RAD Model................................................................................... 244.2.2 Waterfall Model ................................................................................... 24

4.2.3 The Spiral Model ................................................................................. 254.2.4 The Incremental Model ....................................................................... 254.2.5 The Concurrent Development Model .................................................. 254.2.6 The Prototyping Model ........................................................................ 25

4.3 Choice of Model ......................................................................................... 264.4 Deliverables ............................................................................................... 264.5 Conclusion ................................................................................................. 26

Chapter 5 Design ............................................................................................ 275.1 Introduction ................................................................................................ 27

5.2 Unified Modelling Language....................................................................... 275.3 The Client Tier............................................................................................ 29

5.3.1 Human Computer Interaction .............................................................. 295.3.2 The Graphical User Interface .............................................................. 295.3.3 The Site Layout ................................................................................... 30

5.4 Application-server tier................................................................................. 305.4.1 Application server design .................................................................... 315.4.2 Database Connectivity ........................................................................ 315.4.3 Reusing Existing Code........................................................................ 31

5.5 Database Tier............................................................................................. 315.5.1 Database Design................................................................................. 31

5.5.1.1 Conceptual Design............................................................................. 315.5.1.2 Logical Design ............................................................................. 325.5.1.3 Normalisation ............................................................................... 33

5.5.2 Integrity Constraints ............................................................................ 335.6 Conclusion ................................................................................................. 33

Chapter 6 Implementation .............................................................................. 346.1 Introduction ................................................................................................ 346.2 Implementation Tools ................................................................................. 34

6.3 Good Programming Practice ...................................................................... 346.4 Major Issues............................................................................................... 346.5 The User Interface Implementation ............................................................ 35

6.5.1 The Layout .......................................................................................... 356.5.2 Input Validation ................................................................................... 376.5.3 Database Connection.......................................................................... 376.5.4 The Login Script .................................................................................. 386.5.5 Popup Window.................................................................................... 39

6.6 Database Implementation .......................................................................... 396.6.1 Data Manipulation ............................................................................... 40

6.7 System Deployment ................................................................................... 40

6.8 Conclusion ................................................................................................. 40


6/123

v

Chapter 7 Testing............................................................................................ 417.1 Introduction ................................................................................................ 417.2 Testing Procedures .................................................................................... 41

7.2.1 Unit Testing......................................................................................... 417.2.2 Integration Testing .............................................................................. 42

7.2.3 System Testing ................................................................................... 427.2.4 User Acceptance................................................................................. 427.2.5 Input Validation ................................................................................... 437.2.6 Performance Testing........................................................................... 437.2.7 Browser Compatibility Testing............................................................. 43

7.3 Conclusion ................................................................................................. 43

Chapter 8 Evaluation ...................................................................................... 448.1 Introduction ................................................................................................ 448.2 Current features of the Prototype ............................................................... 44

8.3 Evaluating the Requirements ..................................................................... 448.4 Evaluating the Project Extension................................................................ 468.5 Evaluating the Prototype ............................................................................ 47

8.5.1 Evaluation based on the HCI Aspect................................................... 478.5.2 Evaluation based on the effectiveness of Marketing and Sales .......... 488.5.3 Evaluation based on the checklist and guidelines provided by W3C... 48

8.6 Project Schedule Evaluation ...................................................................... 498.7 Process Model Evaluation ......................................................................... 498.8 Future Enhancements................................................................................ 498.9 Conclusion ................................................................................................. 50

Chapter 9 Bibliography................................................................................... 51

Appendix A Personal Reflection ........................................................................ 54Appendix B Project Schedule (The Gantt chart)............................................... 56Appendix C User Requirement Transcript ........................................................ 60Appendix D Competitors Website Evaluation score sheet............................. 62Appendix E Activity Diagram............................................................................... 64Appendix F Normalisation .................................................................................. 65Appendix G The CSS File.................................................................................... 66

Appendix H The System Testing........................................................................ 68Appendix I The Test Plan.................................................................................... 71Appendix J The Stakeholder Evaluation Sheet................................................. 93Appendix K The HCI Score Sheet ...................................................................... 95Appendix L The Prototype Evaluation Score sheet........................................ 110Appendix M The W3C Accessibility Checklist ................................................ 111Appendix N The Project Extension (Screen shots) ........................................ 113Appendix O The Login Code ............................................................................ 116


7/123

Page 1

Chapter 1 Introduction

1.1 Introduction

This chapter gives a general overview of the project and the problem that the project is

intending to solve. It then gradually moves on to examine the aims and objectives of theproject along with its relevance to the authors degree programme.

1.2 The Problem Domain

In todays world there are more and more people accessing the World Wide Web on a regular

basis. Some people just like to use the web for fun where as other people use the web for

specific reasons such as online shopping.

Today more than thirty million American consumers are expected to spend about $65 billion

purchasing products and services on the Internets World Wide Web [42]. So what's sending

shoppers to the Web? Time and (in most states) sales taxes (a fact shopping centre owners

are lobbying to change). [4]. Moreover people like to shop whenever it is convenient for them

and have the opportunity to explore the market through an extended geographical boundary

for the best price and quality [10] which gets restricted through normal shopping. With the

availability of online shopping a user can log in to a website at any time of day, from anywhere

such as home, work or any mobile devices and purchase goods from any part of the world and

get it delivered to the requested address from just a few clicks on the website.

Currently the individual is running his business of selling lingerie from an outlet to limitedcustomers within its locality. He realises that in order to expand and increase the turnover and

profitability of the company it is essential to extend the geographical boundary of the company

and sell its good to people not just locally but potentially globally too as it will increase the

market size and eventually lead to higher profits.

1.3 Overview of the Problem Solution

An e-commerce website would be feasible as users from anywhere and at any time can

access the website and place an order without visiting the physical premises. Such a system

would require a thorough navigation structure and an intuitive user interface so that any

user(s) would be capable to use the system to choose the lingerie they require, regardless of

their background.

Before any implementation work was carried out for the system, the author initially

investigated into the HCI aspect of building a web site so that it could be accessible and used

by all kinds of users and then looked into the technologies available that could be used to

build the application such as different kinds of databases available to store the product details

and images and web connectivity.


8/123

Page 2

1.3 Aims & Objectives

The main objective of the project is to provide a detailed specification and working prototype

of a suitable e-commerce website that can meet the minimum requirements specified by the

outside client and then outline the aspects of security necessary to support the ability to

receive online payment.

In order for the author to achieve this aim and produce a solution to the problem, the following

objectives should be successfully completed.

Design a prototype e-commerce website for customers to view and buy goods online

Create a database to store product information and login details.

Investigate different software development methodologies

Investigate user requirements and needs.

Evaluate the prototype with the stakeholder, with particular regard to the suitability of

the User Interface for the intended market.

Research and evaluate various HCI aspects. Look into various competitors websites

and ascertain what is made available.

1.4 Schedule

This project is a large piece of work in which many tasks are to be performed. If these tasks

are not properly managed than the project can become very disorganised leading to a loss of

control. Hence, a schedule must be followed to ensure that the objectives are met within the

given times set. There are many time management techniques that are used but the most

simple and popular one used is the Gantt chart.

The use of a Gantt chart to plan out the schedule of the project helps a lot in structuring the

report and producing a system that will solve the problem identified in section 1.2 within a set

time scale. The key milestones and deliverables are shown as table 1:

Task Week Ending Description

1 15/10/2004 Discuss Project Idea with Supervisor

2 30/10/2004 Complete the Projects Aims and Requirements

3 13/11/2004 Gather User Requirement and get it checked

4 04-12-2004 Research on the aspects of HCI

5 20-11-2004 Look into various software methodologies available


9/123

Page 3

6 27-11-2004 Select a software methodology for the project

7 20-11-2004 Analysis and evaluation of existing comparable website

8 20-11-2004 Investigate the benefits of an online presence in this type of market

9 09-12-2004 Submit Mid Project Report

10 12-02-2005 Look into the various technologies available

11 12-02-2005Evaluate and choose the appropriate technology to build the

prototype

12 26-02-2005 Begin the development work of the prototype

13 11-03-2005 Submit table of contents and draft chapter

14 18-03-2005 Conduct progress meetings with assessors and supervisors

15 16-04-2005 Testing

16 13-04-2005 Evaluate the prototype with the stakeholder

17 16-04-2005Evaluate the prototype with various users based on the HCI aspects

and effectiveness in marketing and sales.

18 16-04-2005 Complete final write up of the report

19 26-04-2005 Proof Reading and amendments in the report

20 27-04-2005 Submit Report

Table 1 The Project Schedule

The graphical representation of the Gantt chart can be found as Appendix B. Initially a draft

version of the project plan was completed and can be found within appendix B as appendix

B1. Later on as the project progressed a few amendments were made which can be found as

Appendix B2. The latest and the most realistic version of the project plan can be found as

Appendix B3.

1.5 Minimum Requirements

The minimum requirements as agreed with the project supervisor are:

List the User Requirement.

Produce a prototype to the extent where a user can search for an item, select it and

then go to the shopping basket but will not be able to purchase it.


10/123

Page 4

Evaluate prototype with stakeholder.

Evaluation of competitors website using a checklist produced.

Investigate the benefit of online shopping in todays market and how it will benefit the

business in the sense of increasing market penetration with a positive effect on

turnover and profitability.

1.6 Conclusion

Within this chapter the author discusses the problem domain, defines the aims and objectives

to solve the problem and then moves on to identify the key milestones of the project. The next

chapter would look at gathering the user requirements in order to produce a solution to the

problem.


11/123

Page 5

Chapter 2 Requirements

2.1 Introduction

It would be impossible to develop the system without a set of user requirements. This section

discusses the stakeholders requirement for his product and to determine what would be

required to be displayed on the screen.

Another form of gathering requirements for the product was through evaluating the e-

commerce website of the various stakeholders competitors in this line of market.

2.2 Stakeholder Needs

Stakeholders are the people who are interested in the system. In other words stakeholder can

be defined as the people who are paying for the system and who will eventually own the

system when built.

Stakeholder needs define the system requirement which can be achieved through formal

meeting. In order for the product and project to be a success the stakeholder needs or general

objective of the system [6] need to be clearly defined and understood. The requirements that

were gathered were functional and non functional.

Functional requirements are those requirements that tell what the system should be capable

of doing [30] where as the non functional requirements are the requirements of how to provide

the functional requirement. Non-functional requirements tend to be things that you can

measure [31]. It deals mainly with security, usability, performance and scalability

2.3 The Problem Owner

The Problem owner is in effect the main stakeholder of this project. The new system

requirements were eventually gathered through a formal meeting with the stakeholder where

his needs and requirements were discussed in details and then through evaluating the

website of the various stakeholders competitors.

2.4 The Potential Users

The potential users as stated by the stakeholder will be any person who are interested in the

goods provided, from anywhere in the world and who have access to the World Wide Web. It

will constitute of customer(s) above the age of 13 and onwards as stated by the stakeholder

during the initial meeting to discuss the requirements of the project.

2.5 Interview with the Stakeholder

A meeting was arranged in advance with the stakeholder in order to discuss the requirements

of the project and to gather information in regards to the stakeholders needs. Taking into

consideration, the limited number of interviews that could be conducted due to the stakeholdergoing away for a long period, the interview was structured in such a way that the maximum


12/123

Page 6

information could be gathered with regards to his needs and requirements so that the

implementation of the prototype is not put on hold. The questions were based using non-

technical terms in order to gain maximum amount of information. The transcript of the

interview can be found in the as Appendix C.A copy of the typed transcript was emailed to

the stakeholder in order to ensure them that no points were ignored during the interview and itgave them the opportunity to fill in any questions that he did not answer at the time and

amend any information or requirements gathered, which do not match his needs or

requirements or has been written by mistake. The amendments made by the stakeholder can

again be seen in the same transcript as Appendix C.

In addition to the stakeholders requirements, it was also identified that the stakeholder would

like the security of the commercial website handed to a trusted third party company who will

look into the online payment and provide a virtual shopping basket to their potential

customers.

2.6 Evaluation Criteria

In order to evaluate their website, the website score sheet developed by the author for Whyte

[47] was used. The web site score sheet was developed in order to evaluate websites

effectiveness in sales and marketing and as the system being built is an e-commerce website

it would be beneficial to use it for this project too. The score sheet has been divided into 3

sections taking into consideration contents, design and navigation as three vital things in order

for a website to be effective for marketing and sales purpose. With regards to using a siteeffectively, and in order to get to the important information, it must be navigable and easy-to-

use. Thus navigation and design have also been included as two separate sections.

The evaluation points that were derived are shown below with a brief explanation of each

section.

Contents:

When visiting a website does the homepage clearly indicate its nature of business or

product(s)?A good website should illustrate on its homepage the product and services being provided

by the company to get potential customers attention.

Is product(s) information provided?

In order to help a customer to make their choice/decision to purchase the product, detailed

information about the product should always be made available. This would also reduce

the number of items being returned after purchase.

Does the website provide a reason as to why a customer requires a particular product?


13/123

Page 7

The website should display an imperative reason on their website in order to seduce the

customer to purchase the product from their business.

Are there special emphases on sales items or on the launch of a new product on the

website?

In order to attain customers attention and inform them of the special offers special

arrangements are required to be made on the web site to emphasis them. The

arrangements can be done for example via advertisement on search engines.

Does the website provide the option to evaluate the product(s) offer with its competitors?

An evaluation result based on the comparison of similar product(s) sold by competitors will

help the customer to decide on the best available deal

Has the website got the option of helping the customer to make a decision on a particular

product?

Sometimes having various product with similar features displayed it becomes difficult to

select one particular item. At this stage it would be helpful if the website recommended an

item to the customer based on their budget and requirements.

When making a purchase is everything clearly explained?

It is vital to give detailed information about what is being purchased along with the exact

amount to be paid by the customer including delivery charges.

Is there any kind of after sales customer service?This plays an important role in the economy and the survival of the online store as

customers would purchase goods from websites that will give them the mental satisfaction

and ease of getting back to them if not satisfied with the good(s) or in case of any other

issues such as cancelling the purchase.

Navigation:

Does the website offer a complete navigation structure?

A complete navigation system on each page of the website will mean less time spent by

potential customers on searching for certain items on various pages and thus providing a

complete content of the website.

Design:

Does the website have a consistent page design with presentable font(s) throughout the

site?

This is an important aspect of a website as a consistent layout will be easily adapted by

potential customer and will drastically reduce their time spent on searching for buttons and


14/123

Page 8

links on the screen. Having a presentable font means that customers can easily read

about the product and show professionalism from the point of view of the website owner.

Does the page and image load instantly for the website?

It is important that the page and image load instantly as customers tend to go on another

website making the current one history to them.

Does the website offer the option to skip flash intro?

A good website should have this option available as some customer tend to have made up

their mind of what they want and just want to purchase it as quick as possible without

having any delays due to animation.

The effectiveness of a website would be rated, based on the following as used in [47] by the

author:

Score Effectiveness Reason0-9 Poor Mostly none of the criteria are being met

10-16 Average Meets some of the criteria

17-20 Good Most of the criteria are being met. Gives

a high level of satisfaction.

21-23 Excellent Almost all the criteria are being fulfilled

24 Perfect All the criteria are being met.

Table 2 Effectiveness of a Website

2.7 Evaluation of competitors website

According to the stakeholder its main business rival in the e-commerce lingerie market are La

Senza and Ann Summers. In order to evaluate their websites, the website score sheet

discussed in section 2.6 will be used. These websites will then be given a score out of 24,

which will be used to check its effectiveness in the online market based on the evaluation

criteria mentioned earlier. The score sheets of these two companies can be found as

Appendix D.

2.8 Evaluation Result

Table 3 Competitors scores

Looking at table 3, it can be concluded that in terms of effectiveness in marketing and sales

they all fared well. The detailed evaluation of the websites are placed as Appendix D as

mentioned in section 2.7.

Website Scores (out of 24)

La Senza 17

Ann Summers 17


15/123

Page 9

While examining the score sheets it can be seen that both companies had no comparison to

their competitors, as it is largely difficult to fulfil this criterion as a big brand produces a product

of its own mark, which is unique to its competitors. Thus it can be concluded that this is an

inappropriate criteria for an online lingerie websites scoring sheet and could be ignored when

building the e-commerce website for the business. It can also be derived from analysing thescore sheet(s) that all the websites paid a lot of attention on its design and navigation, which

is imperative in order to succeed in this online market, as customers will demand nothing less.

2.9 Functional Requirement

Functional Requirement is what the system should be capable of doing. With regards to this,

this section will discuss the system features taking into account the stakeholder needs and the

results of the evaluation and analysing of its competitors in the online market, as discussed

earlier.

System Feature:

1. The system must have a homepage which should include the company name (Secret

Whisper), a default picture and the company address along with a menu system.

2. The layout in general, must be clear and straightforward.

3. The homepage of the website must clearly indicate its nature of business or

products(s).

4. The system should be capable of redirecting the user to the homepage from any

webpage within the website

5. The system must provide details of its entire product in details in order for the

customer to select an item.

6. The menu system must take the potential customer to the relevant page as selected

through the navigating system.

7. The system should be capable of emphasising on sales items and on any newproducts that are available.

8. The website background colour must be consistent. Currently there are no preferences

with regards to a colour.

9. Customer(s) need to be able to attain full information on their selected product(s).

10. A database must exist to store product information and stock level

11. The system must be capable of providing product information i.e. product description,

available colour and sizes.


16/123

Page 10

12. The system must be able to allow a user to enter the product quantity required.

13. The system should allow the client to add new product(s) or remove product(s) if

required from the database.

14. The system must output good error message so that any kind of user can understand it

and it can help the user to understand the system better.

15. Customer(s) need to be able to enlarge an image if required.

16. Customer should be made aware if stock is not available through a message on the

screen

17. The system should be able to add an external shopping basket seamlessly along with

an online payment system.

18. The system should only allow customer(s) to purchase a product if only it is available.

19. The system should not accept an order unless all mandatory fields in regards to

Personal Details, Shipping address and credit cards details are filled in by user. This

will be done in liaison with the online payment system

20. The system should have the capability to provide information in regards to their order

placed.

21. The system should have the functionality of being able to carry out a quick search on

its products.

22. The system should not let users under the age of 18 to view products within the Adult

toy section.

23. Customers should not be able to register the New User login page without filling in all

the mandatory fields.

2.10 Non Functional Requirement

The Non-Functional Requirement as discussed earlier tends to be things that can be

measured [34]. In regards to this project and system scope the non-functional requirement

that will be discussed within this section are Security, Usability and Performance.

Security:

1. The system should liaise with a secure online payment system seamlessly. The online

payment system to be used will need to be discussed with the stakeholder.

2. The system should prevent hackers from attacking the system by restraining the inputs

the system will authenticate.


17/123

Page 11

Usability:

1. The system should have a vertical scroll bar for movement only. Horizontal bar will not

be preferred as a page without it would appear less cluttered and more user-friendly.

2. The system must have a consistent page layout through the website as it makes itmore user-friendly.

3. The system must layout the menu selection box consistently through the website i.e. it

should be made available throughout the related web pages in the same position. The

preferred location is either on left hand side of the page or on the top.

4. The system must use a consistent colour scheme throughout the website along with a

consistent font size and style.

Performance:

1. The application should allow for future developments to be conducted seamlessly

along with any addition to the system functionality.

2. In the future if the client wishes to migrate to another database application (i.e. from

Access to SQL server or MySQL) it must be done impeccably.

3. Web pages in relation to this e-commerce website should be able to download

instantly along with any graphics.

4. The system should return user requests as quickly and effectively as possible.

5. The system should work properly with its full functionality on Internet Explorer and

Netscape.

2.11 Conclusion

In order for the project to be a success it should satisfy the requirements discussed in this

chapter. The key deliverables for the project will be the functional and the non functional

requirements discussed with the word must whereas the requirements that are mentioned

with the word should are going to be the possible extensions to the project.

The prototype implemented in the end would then be evaluated using the web score sheet

produced to ensure that it proves to be effective in the sense of increasing market penetration

with a positive effect on turnover and profitability.

Now that the requirements for system to be implemented have been gathered the next

chapter will look at the background research carried by the author in order to tackle the

problem.


18/123

Page 12

Chapter 3 Background Research

3.1 Introduction

Within this chapter the author discusses the benefits of online shopping in todays market and

how it will benefit the business in the sense of increasing market penetration with a positiveeffect on turnover and profitability. The author will then move on and look at the various

aspects of HCI and look at the technologies available.

3.2 Online Shopping

Online shopping is available through the use of the Internet; specifically the World Wide Web.

It has digitally enabled commercial activities between individuals and organisations.

In general the benefits that online shopping will provide the business are:

Potential customer(s) will be able to purchase an item from just about everywhere, all

round the year. They do not have to worry about going to the physical premises itself

and during its business time, as they are just one click away from making a purchase

at any time of the day [10]. Access to the World Wide Web is available 24 hours a day

and is one of the most significant reasons for the change in relations between

customer and organisation. Shoppers visiting the shopping websites will be able to

place orders at anytime of the day if they wish so and can also get the good(s)

delivered to and from anywhere in the world.

The business itself will expand beyond traditional boundaries and be removed from atemporal and geographical location [10]. This will increase the profit margin of the

company as it may potentially provide the company more customers as it is available

online and people from anywhere in the world can shop.

In return the business will benefit from reduced operating costs such as rent, rates and

labour and thus would be able to use these savings on to its consumer if needed.

3.3 Human Computer Interaction

HCI involves the design, implementation and evaluation of interactive systems in the context

of the users task and work ([34], p4).

A well-designed User Interface can be the difference between a product being accepted by

the end-user or the system being rejected as a whole. If the user does not find it easy to use,

learn, or too cumbersome, the system built, no matter how good it is, could still be rejected.

Where not otherwise indicated, the information gathered below in regards to the HCI aspects

are taken from [1], [2] & [34].

3.3.1 Design

In the Prototype, the screens should be designed so that information is clearly presented to

the users and they can easily interact with the system.


19/123

Page 13

Shneiderman [1] explains that experiments have shown that users find it easier and quicker

to locate information they require using short articles over many pages rather than long

articles over fewer pages. The only drawback of doing this is that if the Internet connection

being used by the user is slow, it would be beneficial to download fewer larger pages.

Another important aspect is to ensure that the user(s) can distinguish between what can be

selected or clicked in order to go to another page or do something. The use of images as a

link within the website should be kept consistent in order to ensure the user(s) do not get

confused with regards to an image being a link or just for show purpose.

When designing the Home Page of the E-commerce website the design of the latter should be

different in comparison to other pages as the home page is something the customer looks at

first and this should give a brief idea about the company. For example it should have a

prominent placement of the company name and what purpose the site would serve for a first

time visitor. In terms of design all the other web pages within that web site would remain

consistent apart from the home page. All images used as a link will have an ALT tag attached

to it to ensure a user can distinguish between what can be clicked or selected.

3.3.2 Usability

Usability should not be an afterthought in context to this commercial website. Testing and

fixing a website after it has been built is inefficient and unlikely to produce good results. In

order to build an efficient and user friendly website users should be kept in mind through out

the design process. This will be difficult to achieve when designing the shopping web site, as itwould be hard to get access to a sample of the intended audience.

Nielson [2] states Usability rules the web. If a customer cant find a product, then he or she

will not buy it ([2], p9).

According to the Online Guide to the usability resources [3] better usability will provide the

following:

Increased end-user satisfaction

Increased end-user productivity, success, and completion

Reduced training and support costs

Reduced long-term development costs (costs incurred from fixing poorly designed

products)

Return business to improve your competitiveness

3.3.3 Navigation

Another important aspect of building a good website is to have a complete navigation

structure. This will allow users to easily get through a site saving them time and frustration. It

will allow the user to get a good feel for the website as they can get what they require easily


20/123

Page 14

and quickly which could potentially make the user to come back in the future and use the

website again.

When designing the navigation structure the most important thing to keep in mind is the ability

of a user to be able to interpret where he or she is in order to have a chance to understand the

sites structure.The site needs to be identified on all pages as they form a subset of the web as a whole ([2],

189). In addition to that the site identifier/logo should be included on every page with a

consistent placement and should be made into a hypertext link to the homepage with the

addition of an ALT tag so that the users can get to it from any page within the website.

3.3.4 Screen Real time

According to Nielson [2] websites should be dominated by contents, which would be of

interest to the user and should account for at least half the webpage.

The use of white space on web pages is a necessity as it can guide the eyes and help the

potential users to understand the contents and grouping of information [2]. It is also faster to

download in contrast of separating two line segments of content by a heavy line.

3.3.5 Colour

When displaying links the colour blue should be used to identify links to pages that the user

has not visited before as this is the colour most websites use and it uses vague derivatives of

the default link colours [2]. In contrast, links to pages that the user has visited already should

be displayed in purple or red as users have grown accustomed to it giving them zero delay in

figuring out that they have visited that web site earlier [2]. When non-standard link colours are

used, users lose the ability to clearly identify, which parts of the site have been visited already

and which is yet to be explored ([2], p62).

When selecting the colour for the contents of the website the use of extreme colours from the

spectrum i.e. yellow or light blue should be avoided as it is not user friendly at all. Generally

the colour black should be used on a white background as it can be easily read. Finally the

colour selected for the application should be kept consistent all through the website.

3.3.6 Response TimeOne of the important criteria of web designing is to have a fast speed for loading web pages.

According to Nielson [2] research carried out on a wide variety of hypertext system shows that

users require response time to be less than one second when moving from one page to

another. At present the response time to get a page to users should not be more than 10

seconds ([2], p44) as that is the limit of peoples ability to keep them focussed and thus it may

potentially lead to the user abandoning the website all together.


21/123

Page 15

3.3.7 Download Time

Web designing should be done taking in consideration the speed to download [2]. Users

prefer the page to get downloaded as quickly as possible. It is highly important to ensure that

the loading time of a web page is minimal as waiting for a page to load may irritate the user. In

order to accomplish this graphics should be kept to a minimum and multimedia effects shouldbe used only when required to help users to understand the product in detail [2]. Nielsen [2]

states Removing graphics; increases traffic. Whenever possible multiple occurrence of the

same image should be used as it will render quickly due to being stored on the users local

cache ([2], p46).

Style sheets can be used to improve page design. Nielsen [2] expresses that a web designer

should try to keep pages below 100 kilobytes.

The guidelines for fast loading as defined by Nielsen [2] are:

Top of the page should be meaningful even when no images have downloaded.

ALT text attributes should be used for images so that the user viewing knows what it is

about before it gets rendered.

The browser must draw the top of the page quickly.

Cut down on complex table and try and split the information into several tables.

3.3.8 Links

Links are important as they connect the pages and allow users to go to new and visited pages

on the web. Nielsen [2] states Hypertext links are anchored in the text that the user clicks onto follow the link. These anchors should not be overly long because users scan pages for the

links to see what they can do on any given page.

One of the rules of web designing is to try and avoid using Click Here as an anchored text for

hypertext links [2]. The reason behind is that disabled users or users with a touch screen do

not click on the button and another reason is that the word Click and Here are hardly

information-carrying, and as such should not be used as a design element that attracts the

users attention [2].

The use of underlining and bullet point if used in the website should be kept consistent so that

they are either used to indicate a link or never used as a link at all. For example, using images

as both links and as decoration slows down users as it forces them to study the image to

discern its click ability [5].

3.3.9 Link Titles

Whenever a link is being used on the website a small explanation should be attached to it to

ensure the user(s) are able to a preview of where the link is about to take them and eventually

it will improve their navigation in regards to the system [2].According to Nielsen [2] the suitable information to include in a link title can be:


22/123

Page 16

Name of the site the link will lead to when the user clicks on it

Name of the sub site displayed to user(s) if the link will take them to a different part of

the site

3.3.10 Accessibility for Users with Disabilities

It is imperative to ensure accessibility for disable people have been taken into account for the

potential website so that it can be used by any kind of user(s).

Whenever an image gets placed in the website it should always have an ALT attribute

attached to it to describe what the image is about. Secondly any headings on the page should

have appropriate HTML tags such as and used as blind users can get an overview

of the structure by having it read aloud ([2], p302). CSS file should always be used so that the

layout and presentation of the website can be defined and controlled [46]. The font style in the

CSS should always remain in percentage as user(s) will be able to increase or decrease thesize through their web browser. Again, when designing the website extremely precise mouse

positioning ([2], p309) should always be avoided for users with motor disabilities [2].

Once the website gets implemented the author would validate the prototype using the

checklist and guidelines provided by W3C [46] to ensure the E-Commerce website is

accessible by disabled user(s).

3.4 Technology

Within this section the author will be providing a brief overview on Web Enabled Database

Architecture and the advantages of using this architecture to build the proposed e-commerce

website.

3.4.1 Web Enabled Database Architecture

The user requirements determine the sort of system environment that should be set up but

nothing about the technology best suited for the system to be developed and implemented. So

before creating any web based application the correct technology must be in place. Fournier

[9] explains what technology needs to be in place to create a web environment and places

these requirements in to three categories.

The first category is producing applications that are static in nature. In other words,

applications that holds static Web pages or documents. A static Web page is a HTML

(Hypertext Mark up Language) document. The content of which does not change unless the

file in which the HTML document is stored changes. This enables the user to only view the

document. Such an application involves the use of a Web Browser, the Internet and a Web

Server in the architecture. The Web Browser sends a message to the Web Server to display a

specific document requested by the user. This message is transported via the Internet in the

form of HTTP, Hypertext Transfer Protocol. All documents stored in the Web Server are in


23/123

Page 17

HTML format. The requested document is then sent back to the browser again in the form of

HTTP via the Internet, where the Web Browser interprets it and displays the document on the

screen.

In the second category a database server is added in the architecture. This server resides in

between the Web Server and to a back end database. Another difference is that it consists of

simple dynamic web applications. Dynamic web pages are web pages that are generated

each time it is accessed and can respond to user input from the browser. For example,

returning data requested by completion of a form or the results of a database query. ([51],

p954). The way this architecture works is a bit different from the first category, though the Web

Browser requests information in the same way. The web server receives the request and

communicates with the database server, which obtains the information to be returned from the

database. Examples of this type of application are Custom or commercial Web applications

that are used to directly query or occasionally update a database. [9].

The third category is complex web database applications that can manage complex

transactional systems that can connect to several corporate databases [9]. These

applications require an additional application server that sits between the web server and the

database server. This insight shows that creating a web-enabled database is not just using a

package to develop a database but other technology is needed to support the communication

between the user front end and the back end database information. The expense and

complexity involved in creating a web-enabled database increases with the amount of

functionality needed.

Out of the three categories outlined above, the third category i.e. the three-tier architecture in

the authors opinion is better suited to the task with respect to the Online Shopping system.

Apart from the viewing, updating and inserting capabilities, needed by the system, security is

another important aspect to be considered when choosing the correct architecture. Security is

a key issue regarding the database due to the sensitive nature of the records being kept, i.e.

customers personal details. Fournier [9] explains how security measures, such as user web

page navigation flow control, require the implementation of an application server and so itlooks increasingly obvious that the third category architecture will be the more viable option.

A three tier architecture comprises of the following:

A client tier;

An application-server tier;

A database tier.

3.4.1.1 Client-Tier

The client tier is responsible for the presentation of data, receiving user events and controlling

the user interface [13]. In other words its the user side of the web application and the


24/123

Page 18

technologies that are available to use it are Client Side Scripting languages and the Web

Browsers.

In the context of this project the Client Side Scripting languages that will be discussed is

JavaScript and then the Web Browser.

JavaScript

JavaScript is a client side scripting language that allows you to create simple code to control

the behaviour of web page object ([14], pp195). The benefit of using this client side scripting

language is that it executes codes on the client side rather than the server side meaning that

there is less load or burden on the server. It allows Webpage Developer to validate a form

without adding extra load onto the server [15].

Web Browser

Web Browsers play an important role in displaying client side scripting language such asHTML and JavaScript to the user(s). It allows for these technologies to be integrated into a

single system [16] which according to the author means that the browser has the potential to

accept various scripting languages and then display them to the user in a readable format.

Today, there are many web browsers made available to the users. Currently the most widely

used web browsers according to W3C [17] is Internet Explorer as seen in figure 3.

2005 IE 6 IE 5 O 7/8 Ffox Moz NN 4 NN 7

February 64.9% 4.3% 2.0% 20.0% 4.0% 0.2% 1.1%

January 65.3% 4.4% 2.1% 19.3% 4.0% 0.3% 1.1%

IE Internet Explorer Moz Mozilla NN Netscape

FfoxFirefox (Mozillabefore 2005)

O Opera

Table 4 Web Browsers Statistics

3.4.1.2 Application-server tier

Business-objects that implement the business rules "live" here, and are available to the client-

tier. This tier protects the data from direct access by the clients. [15]. Server side Scripting

language is required for this tier, which will help in user interaction and to link a web page toanother page. It will in effect tie the user interface available to the user with the server and the

database linked with the web application.

As the system relies on the web it is imperative that the correct Server Side scripting language

is chosen which will eventually lead to the project being a success.

In regards to this project the Server Side Scripting language that will be evaluated and

discussed are Perl, ASP, JSP and PHP.


25/123

Page 19

Perl

Perl is open-source software that is regarded as a stable and a cross-platform programming

language [18]. This server side scripting language has the ability of text manipulation and

does also handle encrypted web data. According to Gesker [19], Perl is a complex mechanism

for attaching web pages to a database back end. This makes it a slow process and it

eventually takes time to insert and update database tables. Perl overall is not an easy

programming language to learn or use within this short time frame due to its syntax and its

strongly typed nature. Perl, though being stable, it is a complicated language as it was built to

do potentially more than just web scripting [20].

Active Server Pages

Active Server Pages (ASP) is Microsofts leading technology that provides a framework for the

development of dynamic web applications. Mendelevich [43] highlights the advantages of

using ASP. He describes many features that amalgamate giving a development tool that is

easy to use. Firstly, Active server pages are HTML pages with ASP code embedded in

dynamic HTML tags that are saved as .asp files, in a directory, allowing changes to be made

easily during development and maintenance.

Secondly, ASP can be developed in a variety of languages, the most common choices being

VB script and J script (Microsofts version of Java script) [20]. This ensures that no matter

what programming background a developer is from it should not to be too difficult to use ASP.

Edwards [44] highlights another advantage of ASP is the huge size of the developmentcommunity. There are numerous amounts of literature available from books to the Internet,

including a number of free components to extend the functionality of the ASP application.

Unfortunately ASP is not open source and is costly to implement.

Java Server Pages

Java Server Pages (JSP) were developed by Sun Microsystems as direct competition with

Microsofts ASP. Like ASP, Java Server Pages are HTML documents with scripts enclosed in

special tags. It provides a simplified fast way of creating dynamic web contents that are server

and platform independent [21]. Unfortunately, unlike ASP, when using JSP developers are

restricted to using one language, Java, when adding dynamic functionality. Edwards [44]

highlights another disadvantage of JSP is the lack of work that has been done to produce

easy to use editor which hinders development but unlike ASP, JSP is free and also because

its coded using Java it is more portable.

PHP

PHP is a server side scripting language and an open source software that is used for web

development. PHP provides dynamic web content ([23], p XIX), and runs on the web server


26/123

Page 20

unlike JavaScript that runs on the web browser. According to the PHP manual [20] The goal

of the language is to allow web developers to write dynamically generated page quickly. It is

a scripting tool that allows HTML and the code to be mixed in the same file along with a

database driven website being built. The only drawback of PHP is that due to its open

architecture it has some security concerns [23].

Evaluation and Conclusion

Perl ASP JSP PHP

Prior experience None Basic None Medium

Cross Platform Yes Yes Yes Yes

Complexity (coding the product with

this language within the given time

scale.)

High Low High Low

Table 5 Evaluation criteria for Scripting Languages

Prior to selecting the scripting side language an evaluation is done among the chosen

language so that it could be seen clearly which would be the ideal one to use for this project.

Comparing the three evaluation criteria against the languages it can be seen that it comes

down to either using ASP or PHP due to a lower complexity level and the presence of prior

experience.

PHP seems to encompass all the strengths of ASP whilst not seemingly having its

weaknesses as it is platform independent and an open-source software. Orzech [45] explains

the fact that PHP was designed specifically for Web development gives it an edge as a

development tool with regards to other comparable technologies.

PHP is concluded as the right choice for scripting language by the author in regards to this

project as it is flexible, fast and simple in its requirements, yet powerful to output ([24], p xxiii).

As it is a cross- platform scripting language it can be used on any available web server, and

does not have the problem of leaking precious memory ([24], pp xiv). PHP can also be used togather data from forms and access the selected database for this project where it can add,

delete or modify elements. In addition, PHP lacks complexity thus making it easier to maintain.

Above all PHP will generate HTML output which will be viewed by the users via their web

browser. With regards to the security issues of PHP, this can be resolved by coding the

system properly and by configuring it correctly.

3.4.1.3 The Database Tier

This tier is responsible for data storage. Besides the widespread relational database

systems, existing legacy systems databases are often reused here [13]. As mentioned in


27/123

Page 21

section 2.9, a database is required to store product information and for the web page to

interact with its potential user(s) and retrieve the information as requested.

A collection of related files is a database. Within these files, records of items are organized

into rows and columns [19]. Overall it would be beneficial to create a database where product

information and stock level could be stored and updated when required.

With regards to choosing the ideal database for this e-commerce website the databases that

were evaluated and discussed by the author were MySQL, PostgreSQL, SQL Server and

Microsoft Access.

MySQL

MySQL is a very fast, multithreaded, multi-user and robust SQL database server [19]. It is

cross platform thus making it possible to be accessed via any operating systems [22]. As

MySQL is a command driven application it has difficulty in updating data values in comparison

to other databases that have a GUI interface for update features. Another drawback of MySQL

is that it lacks support for data-types, and active rules.

PostgreSQL

PostgreSQL is a highly-scalable, SQL compliant, open source object-relational database

management system [26]. In comparison to MySQL, PostgreSQL is slower on inserts and

updates because it has transaction overhead [19]. This type of database is beneficial to

organisations that have large systems and store a lot of data as an empty PostgreSQL

database on its own takes about 1MB of space [19]. PostgreSQL offers a greater number of

services and functionality. They offer trigger and support Relational Database Management

System very well [19].

SQL Server

SQL is a Microsoft built server, thus it would have to be purchased, unlike the others which

are an open source database.

Although SQL Server has the potential to deal with a lot of web traffic and handles security

and performance very well; it has a requirement of 95270 MB of available hard disk space for

the server; and consumes 250 MB of that space for a typical installation [25].

MS Access

Access is a Microsoft product. It comes with a good interface to implement with and is an

application that can be used easily by a beginner to an expert database user [48]. Visual

Basic is its underlying language. One of the advantages that MS Access provides is that it has

a GUI interface which can be used by the user to modify, delete or add data to the system

[48].


28/123

Page 22

One of the drawbacks of using Microsoft Access is that it becomes inefficient when it has to

deal with multiple users due to the fact that it struggles to manage multiple IO threads.

Evaluation and Conclusion

MySQL PostgreSQL SQL Server MS Access

Functionality Medium High High High

ODBC Support Yes Yes Yes Yes

Performance High Low Medium Medium

Cost None None High Medium

Portability Linux/Windows Linux Windows Windows

Table 6 Evaluation criteria for Databases

As the Stakeholder uses a Windows machine at the work premise, it would be imperative tobuild an application that would liaise with it without any restrictions. Looking at table 6,

PostgreSQL is dependent on the Linux operating system and also looking at performance, it is

slow in comparison to the others. Thus it can be eliminated from the list of databases that can

be used. Though MySQL is versatile in the sense that it is platform independent making it

work with any operating system it has the drawback of being a command driven application

and lacks support for active rules and data types, which rules it out. Looking at MS Access

and SQL server both are a Microsoft product thus they both can liaise equally well on any

Windows machine. Their performance and functionality are also equal. The only means ofseparation between the two is the cost. Due to cost constraint and the stakeholders

experience in MS Access, Access would be the ideal choice here. In addition, Access offers a

simple functionality and comes with the peace of mind that it could be easily exported to

Microsoft SQL Server if the stakeholder decides to expand the business further and/or there is

an increase in customer demands in the future. Access also exports table structures and data

via standard SQL statement, which will in effect allow it to be transferred to any database

system and even another platform if required. The reason to go towards Microsoft SQL Server

in the future is that it can handle performance and security very well along with a lot of web

traffic. According to Ho Yu, C. et al [33] Access can support up to 1 Gigabyte of data which

currently is more than enough for the stakeholder where as Microsoft SQL Server has the

capacity to hold several Terabytes making it capable to handle data in the future. When

moving towards SQL server the cost of it should be kept in mind. Currently it comes with a

price tag of $4,999 which is approximately 2600 in todays market [25].

3.5 Security

When building the e-commerce system security is an important part to be looked at as from a

customers perspective they will be entering there personal information and card details which


29/123

Page 23

they would not like anyone to know about where as from the stakeholders perspective they

would like to ensure confidential data cannot be accessed by any unauthorised person and

the data integrity are maintained.

A secure system will always be accepted by customer(s) in contrast to a system that cannot

be trusted. Thus security should always be given importance and when an application is

getting built it should be planned throughout the project life cycle ([47], p2). In regards to

receiving payments from a customer a Secure Socket Layer (SSL) should be used which will

sit between the application layer and TCP/IP [47]. SSL provides data encryption, server

authentication, optional client authentication and message integrity for TCP/IP connection

([10], p257). In addition to having SSL protocol the stakeholder should also adopt SET i.e.

Secure Electronic Transaction Protocol that authenticates cardholders and merchant identity

through using digital certificates ([10], p257). As the database being implemented for the

system will be storing confidential data it should be password protected to ensure

unauthorised person do not get any access to the personal information stored.

3.6 Cookies

A Cookie is a kind of data storage that is used by web sites to store data on a users computer

and then at later stage allow the data stored on that computer to be retrieved [10].

A cookie in the case of the e-commerce website could be used to store product information in

regards to what a customer has added to their shopping bag and then later retrieve it when

the customer(s) has made up their mind to go to the checkout to purchase those goods. Theitem(s) that the customer has placed in the shopping bag will be stored in the sites database

with a unique ID number which will be generated by the website. The number generated will

then be stored in the customers machine under the cookie file [10]. In other words it will

assign a unique reference code which will be attached in the database implemented for the

website to identify the customer [47].

3.7 Conclusion

In this chapter the benefit of moving towards online shopping is discussed alongside the HCI

aspect when building a website has been researched before any design or implementation

work got carried out. The HCI aspects discussed here would be used to produce a more in-

depth score sheet similar to the one mentioned in section 2.6 to evaluate the prototype from

the HCI perspective together with the evaluation to measure the effectiveness of the prototype

in regards to marketing and sales. Towards the end of the chapter, choice for the application

scripting language was made and the appropriate database was chosen. Security was also

briefly covered in this chapter along with cookies.

The author will now move on to evaluate the various software methodologies available and

select the most appropriate one for this project.


30/123

Page 24

Chapter 4 Project Management

4.1 Introduction

A successful product/project can only be accomplished with the combination of a successful

project management and selection of the correct methodology. In order to ensure that asuccessful system is developed the correct model is required to be chosen and a project plan

will then help to guide the project to completion on the set deadline.

A methodology is regarded as a recommended series of steps and procedures to be followed

in the course of developing an information system ([8], p 418).

There are plenty of Process Models available for software development but different systems

require different models to get implemented. Within this section all the software processes that

were looked at by the author are discussed.

4.2 Process Models

The following is a list of process models that are available for software development. The

models that are discussed below are the ones the author researched using [6], [8], [11] & [12],

in order to select the most appropriate one for this project.

4.2.1 The RAD Model

The Rapid Application Development (RAD) Model is a linear sequential software

development process model, which uses a component based construction approach with the

emphasis on a short development lifecycle ([6], p31). When the User Requirement is wellunderstood and the project scope is constrained then the RAD model is beneficial to use

within a short period of time. Generally the RAD model is used for Information System

applications and is developed by the RAD Team using fourth generation techniques.

Another disadvantage that led to the decision of not using this model for the software

development is that it lacks methodology, which may lead to a casual approach towards the

project and due to time constraints it would not be beneficial as the prototype might not be

completed on time.

4.2.2 Waterfall Model

The Waterfall model is one of the oldest software models suggesting a systematic, sequential

approach ([6], p26) to building a software starting from the system level and progressing up to

the testing and then maintenance level. It comprises of five stages as shown in figure 1:

Figure 1 The Waterfall Model

The Waterfall has the drawback of the program not being available for evaluation to thestakeholder until late in the project time-span. It also requires all the requirements to be

Requirements OperationTesting

Coding

Design


31/123

Page 25

explicitly defined at the start of the project as it becomes difficult to do amendments at the end

of the project. This model will not be ideal for this project as the User Requirement might

change at a later stage or some new ideas may arise at the time of evaluating the product

making it difficult to carry out any amendments to the product. Thus the Waterfall model would

be unsuitable for this project.

4.2.3 The Spiral Model

The Spiral Model proposed by Boehm [41] couples the iterative nature of prototyping with the

controlled and systematic aspects of the linear sequential model. Boehms [41] approach of

software development is realistically beneficial for large-scale systems and software making it

unsuitable for the current project. Another reason is that this model becomes very time

consuming if a new feature has to be added to the product due to the fact that the analysis,

design and coding stage has to be started once again.

4.2.4 The Incremental Model

The Incremental Model applies linear sequences in a staggered fashion as calendar time

progresses ([6], p34). It focuses on producing an operational product ([6], 34) with each

increment where the final product is a stripped down version ([6], 35) of each increment. The

main product delivered will be used by the stakeholder and after vigorous testing feedback will

be given of any modification to the program in order to make the product better and user

friendly. In essence this approach ensures that a complete system will be delivered to the

customer in the end after all the linear sequences leading up to the project completion arecompleted satisfactorily [6].

In this model amendments can be done to the User Requirements at any stage as an

incremental approach is being used. Thus a complete Requirement analysis is not required.

An incremental approach may lead to the software breakage as a later increment may require

modifications to the earlier increments making it unsuitable for this project.

4.2.5 The Concurrent Development Model

The Concurrent Development model is sometimes called the concurrent engineering model

[6]. It defines a series of events that will trigger transitions from one state to another for each

of the software engineering activities ([6], p39). It is driven by the stakeholders needs,

management decisions and the review results.

As this process model is suitable for complex projects that are operated by many people it will

be inappropriate for this project [6].

4.2.6 The Prototyping Model

The Prototyping model uses an iterative approach [6] to software development. The first step

involved in this process model is the initial meeting between the developer and the


32/123

Page 26

client/stakeholder to gather the User Requirements and to define the objectives [6] of the

product.

If there was to be an error in the development of the product and that was detected at a later

stage it would cause a disaster in contrast to the error being detected at an earlier stage. This

is where Prototyping model plays an important role, as the client/stakeholder is able to

evaluate the prototype and detect any problem [6].

The goal of the Prototyping methodology is for developers to discover critical properties of

their product before making final decisions [7]and thus ensuring that fewer errors will occur.

Any refinement to the requirements can also be done to the product at this stage with fewer

difficulties before it gets deployed.

4.3 Choice of Model

Out of all the models mentioned above, the Prototyping model was selected as the most

suitable, as it seems ideal for small - medium sized projects and can be accessible at any

stage of the development process. Above all this process can be used when the customer

has a legitimate need but is clueless about processing or output requirements ([6], p29).

Another reason for using the prototyping model is that the first step in this model as stated in

section 4.2.6 has already been carried out and discussed in Chapter 2. In addition as some of

the requirements were gathered through evaluating competitors website it would be an

appropriate process to use to get some feedback from the stakeholder at the construction of a

prototype at each iteration, which will satisfy the stakeholder that the product is being built to

their requirements, and in return it will give a better understanding to author of what requires

to be done. It will also enhance the stakeholders involvement in the sense that they can be

more actively involved in the design decision and there would be a production of an expected

result.

4.4 Deliverables

The deliverables for the project will be:

A working prototype for the stakeholder to evaluate. The Project Report

4.5 Conclusion

The Prototyping model has been chosen as the software methodology for this project in order

to produce a solution for the stakeholder.

The author will now move on to produce a preliminary design of the system in order to

implement the first prototype for the e-commerce website which could then be evaluated by

the stakeholder and any amendments required could be carried out.


33/123

Page 27

Chapter 5 Design

5.1 Introduction

Designing a system is another important stage in the whole software lifecycle. It is the activity

aiming at developing the system architecture which would meet all the requirements specifiedin the earlier chapters and at modifying this architecture according to the changing

requirements. It details the architectural model, the internal structure and implementation

particularities of all modules specified. Hence, if the design model is sufficiently accurate, it

becomes possible to implement the system effectively.

This chapter discusses the design technique used and the work carried out during the design

phase for implementing the prototype - an e-commerce website. In addition to the database

design, the layout of the content for the webpage will be discussed with a brief introduction on

UML, (Unified Modelling Language) a graphical notation used to discuss the designs of asystem.

5.2 Unified Modelling Language

UML can be used to understand the user requirement which in effect will help in developing a

system that meets the stakeholders requirements more closely and precisely. This visual

language is useful in the analysis and design stage of a project life cycle and is now being

used for business modelling and web-based applications development [28].

According to the author, UML is the ideal method for understanding the design of this project

as the user requirements gathered in Chapter 2 can be used to interpret the flow of activities

with regards of purchasing an item from the potential website and estimating how many web

pages would be required and what would be the role of each webpage when designed and

implemented. It will eventually help to understand the flow of activities in order to build the

system and from the stakeholder perspective he will be able to understand what is being done

and what to expect from the system being implemented.

According to the online resource, Why use UML? [28], the impact of a requested change

from the stakeholder can quickly be estimated as it can be traced through the UML models

into those components affected and even identify the lines of code which need to be

amended.

Currently there are a large number of UML diagrams available, which are used for depicting a

systems structure and actions for different purposes. Due to the simplicity of this application

and the purpose of this report only the most relevant UML structures and diagrams will be

used and discussed later in this chapter.

The following is a discussion of the suitable UML diagrams in relation to this project. Where

not otherwise indicated, the details of the discussed UML diagrams are taken from [27].


34/123

Page 28

Use Case Diagram

The Use Case diagram is imperative as it provides a good understanding of the overall picture

of what is to happen and what needs to be planned for the new system. It is an effective way

of communicating with the user or stakeholder of what functionality should be expected from

the new system [27]. A Use Case is a procedural definition of functional requirements written

in prose [28]. Use Cases are drawn taking into account the actors (users interacting with the

system) and the use cases (actions performed by the users) and the associations among

these. This is more of an analysis technique then a design one. It provides a high level view of

what the system does and who uses it. Figure 2 shows the interaction between the users

(Customer and Client) and the e-commerce website.

Receive Confirmation

Enter credit card details

Visit the E-Commerce website

Search for relevant product(s)

Purchase selected product(s)

Enter personal details inc.

shipping address

Customer

Keep the system up-to-date

Send goods to customer(s)Client

Receive money from customer via

online payment system

Figure 2- The Use Case Diagram

Activity Diagram

Activity Diagram is used to describe the flow of procedure within the e-commerce website from

the perspective of a potential customer. An activity diagram is a simple and intuitive illustration

of what happens in a workflow, what activities can be done in parallel, and whether there are

any alternative paths through the workflow [29].

In order to acquire the flow of procedures within the website, various shopping websites in this

kind of market were looked at and their flow of procedure (up to the stage of purchasing an

item) were noted down along with the views of various colleagues who have experience in


35/123

Page 29

buying products online. Taking the above into consideration, the flow of procedure that the

author came up can be seen in Appendix E.

5.3 The Client Tier

This involves designing the front end of the application. It needs to be done carefully as the

potential customers are mainly interested in the user interface as that is what is presented tothem not the back-end application. Without providing an adequate front end application users

will not be able to explore all the features of the system or in the worst case scenario, none of

the features at all.

5.3.1 Human Computer Interaction

A system with a good interface will readily be accepted by the potential customers whereas a

badly designed system will always be rejected by any kind of users. Thus it is important to

keep the user in mind when building any kind of human interaction application(s) as ultimately

they will be using the system. All the features mentioned in section 3.3 will be taken into

account whilst designing the application.

5.3.2 The Graphical User Interface

TheGraphical User Interface (GUI) of the system would solely be dependent on the analysis

of the client side scripting code used by the web browser. Whilst building the prototype, it

would be crucial to ensure that the HTML outputs are getting interpreted as expected by the

various web browsers as shown in table 4. Among all of the web browsers, Internet Explorer

and Netscape will be the m

Documents

An e-commerce website