An e-commerce website for a Local Business Kunal Rai BSc Computing with Industry 2004/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) _______________________________

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.

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.

ii

Table of Contents
Chapter 1 Introduction...................................................................................... 1 1.1 Introduction .................................................................................................. 1 1.2 The Problem Domain ................................................................................... 1 1.3 Overview of the Problem Solution ................................................................ 1 1.3 Aims & Objectives ........................................................................................ 2 1.4 Schedule ...................................................................................................... 2 1.5 Minimum Requirements ............................................................................... 3 1.6 Conclusion ................................................................................................... 4

Chapter 2 Requirements................................................................................... 5 2.1 Introduction .................................................................................................. 5 2.2 Stakeholder Needs....................................................................................... 5 2.3 The Problem Owner ..................................................................................... 5 2.4 The Potential Users...................................................................................... 5 2.5 Interview with the Stakeholder ..................................................................... 5 2.6 Evaluation Criteria ........................................................................................ 6 2.7 Evaluation of competitors website ............................................................... 8 2.8 Evaluation Result ......................................................................................... 8 2.9 Functional Requirement ............................................................................... 9 2.10 Non Functional Requirement...................................................................... 10 2.11 Conclusion ................................................................................................. 11

Chapter 3 Background Research................................................................... 12 3.1 Introduction ................................................................................................ 12 3.2 Online Shopping......................................................................................... 12 3.3 Human Computer Interaction ..................................................................... 12 3.3.1 Design................................................................................................. 12 3.3.2 Usability .............................................................................................. 13 3.3.3 Navigation ........................................................................................... 13 3.3.4 Screen Real time................................................................................. 14 3.3.5 Colour ................................................................................................. 14 3.3.6 Response Time ................................................................................... 14 3.3.7 Download Time ................................................................................... 15 3.3.8 Links.................................................................................................... 15 3.3.9 Link Titles ............................................................................................ 15 3.3.10 Accessibility for Users with Disabilities................................................ 16 3.4 Technology................................................................................................. 16 3.4.1 Web Enabled Database Architecture .................................................. 16 3.4.1.1 Client-Tier .................................................................................... 17 3.4.1.2 Application-server tier .................................................................. 18 3.4.1.3 The Database Tier ....................................................................... 20 3.5 Security ...................................................................................................... 22 3.6 Cookies ...................................................................................................... 23 3.7 Conclusion ................................................................................................. 23

iii

Chapter 4 Project Management ..................................................................... 24 4.1 Introduction ................................................................................................ 24 4.2 Process Models.......................................................................................... 24 4.2.1 The RAD Model................................................................................... 24 4.2.2 Waterfall Model ................................................................................... 24 4.2.3 The Spiral Model ................................................................................. 25 4.2.4 The Incremental Model ....................................................................... 25 4.2.5 The Concurrent Development Model .................................................. 25 4.2.6 The Prototyping Model ........................................................................ 25 4.3 Choice of Model ......................................................................................... 26 4.4 Deliverables ............................................................................................... 26 4.5 Conclusion ................................................................................................. 26

Chapter 5 Design ............................................................................................ 27 5.1 Introduction ................................................................................................ 27 5.2 Unified Modelling Language ....................................................................... 27 5.3 The Client Tier............................................................................................ 29 5.3.1 Human Computer Interaction .............................................................. 29 5.3.2 The Graphical User Interface .............................................................. 29 5.3.3 The Site Layout ................................................................................... 30 5.4 Application-server tier................................................................................. 30 5.4.1 Application server design .................................................................... 31 5.4.2 Database Connectivity ........................................................................ 31 5.4.3 Reusing Existing Code........................................................................ 31 5.5 Database Tier............................................................................................. 31 5.5.1 Database Design................................................................................. 31 5.5.1.1 Conceptual Design............................................................................. 31 5.5.1.2 Logical Design ............................................................................. 32 5.5.1.3 Normalisation ............................................................................... 33 5.5.2 Integrity Constraints ............................................................................ 33 5.6 Conclusion ................................................................................................. 33

Chapter 6 Implementation .............................................................................. 34 6.1 Introduction ................................................................................................ 34 6.2 Implementation Tools ................................................................................. 34 6.3 Good Programming Practice ...................................................................... 34 6.4 Major Issues ............................................................................................... 34 6.5 The User Interface Implementation ............................................................ 35 6.5.1 The Layout .......................................................................................... 35 6.5.2 Input Validation ................................................................................... 37 6.5.3 Database Connection.......................................................................... 37 6.5.4 The Login Script .................................................................................. 38 6.5.5 Popup Window .................................................................................... 39 6.6 Database Implementation .......................................................................... 39 6.6.1 Data Manipulation ............................................................................... 40 6.7 System Deployment ................................................................................... 40 6.8 Conclusion ................................................................................................. 40

iv

Chapter 7 Testing............................................................................................ 41 7.1 Introduction ................................................................................................ 41 7.2 Testing Procedures .................................................................................... 41 7.2.1 Unit Testing ......................................................................................... 41 7.2.2 Integration Testing .............................................................................. 42 7.2.3 System Testing ................................................................................... 42 7.2.4 User Acceptance................................................................................. 42 7.2.5 Input Validation ................................................................................... 43 7.2.6 Performance Testing........................................................................... 43 7.2.7 Browser Compatibility Testing............................................................. 43 7.3 Conclusion ................................................................................................. 43

Chapter 8 Evaluation ...................................................................................... 44 8.1 Introduction ................................................................................................ 44 8.2 Current features of the Prototype ............................................................... 44 8.3 Evaluating the Requirements ..................................................................... 44 8.4 Evaluating the Project Extension................................................................ 46 8.5 Evaluating the Prototype ............................................................................ 47 8.5.1 Evaluation based on the HCI Aspect................................................... 47 8.5.2 Evaluation based on the effectiveness of Marketing and Sales .......... 48 8.5.3 Evaluation based on the checklist and guidelines provided by W3C... 48 8.6 Project Schedule Evaluation ...................................................................... 49 8.7 Process Model Evaluation ......................................................................... 49 8.8 Future Enhancements ................................................................................ 49 8.9 Conclusion ................................................................................................. 50 Chapter 9 Bibliography................................................................................... 51

Appendix A Personal Reflection ........................................................................ 54 Appendix B Project Schedule (The Gantt chart)............................................... 56 Appendix C User Requirement Transcript ........................................................ 60 Appendix D Competitors Website Evaluation score sheet ............................. 62 Appendix E Activity Diagram............................................................................... 64 Appendix F Normalisation .................................................................................. 65 Appendix G The CSS File.................................................................................... 66 Appendix H The System Testing........................................................................ 68 Appendix I The Test Plan .................................................................................... 71 Appendix J The Stakeholder Evaluation Sheet................................................. 93 Appendix K The HCI Score Sheet ...................................................................... 95 Appendix L The Prototype Evaluation Score sheet........................................ 110 Appendix M The W3C Accessibility Checklist ................................................ 111 Appendix N The Project Extension (Screen shots) ........................................ 113 Appendix O The Login Code ............................................................................ 116

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 the project 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 limited customers 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.

Page 1

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 1 2 3 4 5 15/10/2004 30/10/2004 13/11/2004 04-12-2004 20-11-2004 Description Discuss Project Idea with Supervisor Complete the Projects Aims and Requirements Gather User Requirement and get it checked Research on the aspects of HCI Look into various software methodologies available

Page 2

6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

27-11-2004 20-11-2004 20-11-2004 09-12-2004 12-02-2005 12-02-2005 26-02-2005 11-03-2005 18-03-2005 16-04-2005 13-04-2005 16-04-2005 16-04-2005 26-04-2005 27-04-2005

Select a software methodology for the project Analysis and evaluation of existing comparable website Investigate the benefits of an online presence in this type of market Submit Mid Project Report Look into the various technologies available Evaluate and choose the appropriate technology to build the prototype Begin the development work of the prototype Submit table of contents and draft chapter Conduct progress meetings with assessors and supervisors Testing Evaluate the prototype with the stakeholder Evaluate the prototype with various users based on the HCI aspects and effectiveness in marketing and sales. Complete final write up of the report Proof Reading and amendments in the report 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.

Page 3

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.

Page 4

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 ecommerce 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 stakeholder going away for a long period, the interview was structured in such a way that the maximum

Page 5

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 nontechnical 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 it gave 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 site effectively, and in order to get to the important information, it must be navigable and easy-touse. 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?

Page 6

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

Page 7

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 0-9 10-16 17-20 21-23 24 Effectiveness Poor Average Good Excellent Perfect Reason Mostly none of the criteria are being met Meets some of the criteria Most of the criteria are being met. Gives a high level of satisfaction. Almost all the criteria are being fulfilled 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 Website Scores (out of 24) La Senza Ann Summers 17 17 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.

Page 8

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 the score 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 new products 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.

Page 9

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.

Page 10

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 it more 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.

Page 11

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 positive effect 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 a temporal 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.

Page 12

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 it would 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: 3.3.3 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 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

Page 13

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 Time

One 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.

Page 14

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 should be 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: 3.3.8 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. 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 on to 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:

Page 15

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 <h1>and <h2> 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 the size 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

Page 16

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 it looks 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

Page 17

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 as HTML 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 February January IE IE 6 64.9% 65.3% IE 5 4.3% 4.4% O 7/8 2.0% 2.1% Ffox 20.0% 19.3% NN Moz 4.0% 4.0% NN 4 0.2% 0.3% NN 7 1.1% 1.1%

Internet Explorer Firefox (Mozilla Ffox before 2005)

Moz Mozilla O Opera

Netscape

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 clienttier. 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 to another 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.

Page 18

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 development community. 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

Page 19

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 Prior experience Cross Platform Complexity (coding the product with this language within the given time High scale.) 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 to gather 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 Low High Low None Yes ASP Basic Yes JSP None Yes PHP Medium Yes

Page 20

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].

Page 21

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 Functionality ODBC Support Performance Cost Portability Medium Yes High None Linux/Windows PostgreSQL High Yes Low None Linux SQL Server High Yes Medium High Windows MS Access High Yes Medium Medium Windows

Table 6 Evaluation criteria for Databases As the Stakeholder uses a Windows machine at the work premise, it would be imperative to build 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 of separation 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

Page 22

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. The item(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 indepth 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.

Page 23

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 a successful 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 well understood 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: Requirements Design Coding Testing Operation

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

Page 24

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 are completed 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). 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 It is driven by the stakeholders needs,

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

Page 25

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 4.5 Deliverables A working prototype for the stakeholder to evaluate. The Project Report Conclusion

The deliverables for the project will be:

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.

Page 26

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 specified in 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 a system. 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].

Page 27

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.

Visit the E-Commerce website

Search for relevant product(s) Keep the system up-to-date Purchase selected product(s) Customer Enter personal details inc. shipping address Send goods to customer(s)

Client

Enter credit card details

Receive Confirmation

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 Page 28

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 to them 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

The Graphical 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 main ones used by the potential user(s) as advised by the stakeholder and hence, require the main attention. According to W3Schools [17], the current trend in todays technology advanced world is that more and more computers are using a screen size of 1024x768 pixels. This can be justified using the statistic table provided by [17]
2004 October July January Higher 10% 10% 10% 1024x768 51% 50% 47% 800x600 34% 35% 37% 640x480 1% 1% 1% Unknown 4% 4% 5%

Table 7 The Display Resolution Thus it would be imperative to build a prototype that can be viewed within the 1024x768 pixels. As stated in the user requirements the stakeholder would prefer vertical scroll bar and minimal use of horizontal scroll bars as it gives a user friendly feeling. It would also be necessary to have a complete navigation structure as stated in Chapter 3 (Background Research) under Navigation. According to [32], a navigation structure should be placed where it is easier for the user to locate and access it. They also state that the navigation structures are generally placed at the top and left hand side of the screen which is evident through the competitors websites. Looking back again at section 3.3, the design of the homepage of the

Page 29

e-commerce website should be different in comparison to other pages as the homepage is something the customer looks at first and this should give a brief idea about the company. Thus the company name should be placed at the top of the website and somewhere around the centre a brief overview stating the purpose the site would serve for a first time visitor should be displayed. The design of all the other web pages within that website would remain consistent apart from the homepage. With regards to the interfaces of the system, it will be designed using images, HTML and Cascading Style Sheets (CSS). The reasons for choosing CSS were that it allows interfaces to be changed easily and gives a consistent and uniform look through the website.

Company Name
Navigation System Image Text giving some idea about the website Image

Links
Figure 3 The proposed layout of the homepage Once the homepage gets implemented all the other pages within the website would have the same layout and font style. Movement within the web pages would be carried out through the navigation structure. Pages that require further functionality and options would have a sub navigation structure that would be made available only on the relevant navigation button. 5.3.3 The Site Layout Before the website was implemented it was imperative to get an idea of what pages would be mandatory and what will be required to be displayed in the navigation system. Using the User Requirement and information gained in the meeting with the stakeholder figure 4 was built. Homepage

Collection

Lingerie

Costumes

Adult Toys

Sale Items

Bras

Briefs & Thongs Figure 4 The Site Layout

5.4

Application-server tier

As stated earlier the Client Tier is more focussed towards the look up, presentation and usability of the system for its potential users. The Application layer on the other hand is more

Page 30

focussed towards the functionality of the website and the interaction between the front-end and the back-end of the system. It is concerned towards the constructing and processing of data for display by the interface to its users including the opening and closing of the database connections. 5.4.1 Application server design As discussed earlier in Chapter 3, PHP is evaluated as the ideal tool for this project and will be used to develop the system. 5.4.2 Database Connectivity

As PHP provides support to database connectivity, it will allow the development to be carried out at ease. One thing to keep in mind while making the database connection is to ensure that the connectivity is closed when the connection is no longer required to ensure all transactions are committed. All PHP files created will have its own database connection and close tags to ensure that when it comes to the stage of testing or debugging the codes it can be done without any potential difficulties. 5.4.3 Reusing Existing Code

As PHP provides the use of functions and include path [23] it will be beneficial to use them in order to reduce the time in writing codes that are similar such as the database connection path. This will in effect reduce the computation cost and time and will be helpful in the long run when it comes down to the maintenance of the system. 5.5 Database Tier The e-commerce website readily relies on a back-end database for its operation and storage mechanisms. Thus it is imperative to construct a database before any web designing work is carried out as it will have no functionality. 5.5.1 Database Design

A database is an organised collection of logically related data. To ensure that it is well organised and efficient in use and performance it must be designed properly. According to Teorey [38] Conceptual Design, Normalisation and Logical design are the important key in designing a good database. With normalisation the database design is allowed to be tested for redundancy and any general problem which may crop up in the database structure. 5.5.1.1 Conceptual Design The conceptual model represents a global view of the data [36]. It allows the requirements acquired by the stakeholder to be processed into data structures that will eventually be used by the system. These data structures will be processed by analysing the stakeholders requirement along with the activity diagram. Entity-Relationship (E-R) model is the most widely used conceptual model [36]. According to [36] the advantages of using ER Modelling are:

Page 31

Helps in defining the data processing and constraint requirements to meet the different views. It helps in implementing the database.

MS Access is a relational database and so the ER diagram can be transformed into a relational data model ([37] p207) to aid implementation. Figure 5 shows the E R Modelling carried out for the database to be implemented. The entities used were the distinct objects [51] identified at the initial user requirement meeting with the stakeholder and through the requirement gathering process defined in Chapter 2. Picture Item Category

Order Line

Basket

Order

User

Figure 5 - Pre Normalised ER Diagram - secretwhisper.mdb Looking at figure 5, many relationships exist between the various entities identified. The ones to mention are Order and the Item entity. The reason being that initially these two entities existed in a many-to-many relationship which got decomposed into one-to-many relationship by a link entity i.e. Order Line as many-to-many relationship is not compatible with relational database i.e. MS Access from the projects perspective [51]. As Order Line is a link entity therefore its primary key will be a composite key, using the primary keys of Item and Order. Another thing to highlight is the addition of the User entity due to the fact that the stakeholder required only registered customer over the age of 18 to have access to the Adult Toy section. 5.5.1.2 Logical Design In the Logical Design the potential schema designs are formed for the database to be created. This is done after the user requirement and the flow of activities have been analysed so that the contents of the required database such as the entities could be identified by breaking down the conceptual model further. The table schema derived for this e-commerce website can be found as table 8. The basic format that would be used is as follow: Table A: {Primary Key, Attribute 1, Attribute 2, Attribute 3 ...} Looking at the schema defined above A represent a table name. Attribute represents a field name where as Primary Key being an attribute as the others in the table has the exception that it will be unique and can be used to identify records in the table. The Primary keys may consist of a single attribute or multiple attributes in combination [35].

Page 32

Category (category_id, category_name, user_id) Item (item_id, item_name, item_desp, price, discount%, colour, size, status, quantity, style, picture_id, category_id) Picture (picture_id, picture_name, picture_desp, picture, picture_size) Order (order_id, order_name, order_desp, order_date, user_id) Order_Line (order_id, item_id, quantity, total_price) User (user_id, password, user_name, dob) Basket (cookie_id, quantity, size, colour, total_price, item_id) Note: The attributes in Italics are foreign keys and the ones underlined are Primary keys that will be indexed for optimal searching. Table 8 The Table Schema 5.5.1.3 Normalisation Normalisation is applied to the table schema identified for the database to ensure the sturdiness of the data structure and to protect it against insertion, update and any deletion anomalies [37]. It is a tool that can be used to validate and improve the logical design ([37], p233). Teorey [38] explains that by following certain rules that involve analysing the interdependencies among the attributes it is possible to obtain well-defined tables. The goal of Normalisation was to have the result attributes ( table 8) in the Third Normal form, which had the nontrivial dependencies, functional dependencies and the presence of any super key extracted [52]. Appendix F shows that the table exist in the Third Normal form. As there were no dependencies identified in the normalization process the post normalization ER diagram and Entities and their attributes will remain the same. 5.5.2 Integrity Constraints

In the database, integrity will be enforced throughout using primary key constraint to ensure entity integrity and foreign key constraint to ensure referential integrity [49]. In order that no duplicate values get created or entered and the primary key is not null, user_id and order_id attributes as mentioned in table 8 will be generated automatically by giving it a field type of auto-number and to also ensure that there are no conflicts in storing data when a new tuple with regards to an order or user requires to be added. In the case of order_id the auto-number will be random instead of incremental making it secure from the perspective that no unauthorized person will be able to view the good(s) purchased by a customer. 5.6 Conclusion

This chapter has described the design of the system from the perspective of the client tier including the user interface, application tier and the database. UML diagram was also used to understand the structure of the system before it gets implemented. The next chapter, Chapter 6 will describe the implementation of the designs discussed here.

Page 33

Chapter 6 Implementation
6.1 Introduction

This chapter provides an overview of how the tools discussed in Chapter 5 would be used to implement the system and discuss any issues that arose during the development period. The implementation of the application as discussed in section 5.3.2 will be done on a resolution of 1024x768 pixels and then will be tested on various other resolutions to see if the application interface is acceptable. Screenshots of the prototype have been placed wherever required. 6.2 Implementation Tools As discussed earlier in Chapter 3 the system will be built using PHP as the Application side scripting language and the back-end database will be MS Access. CSS will be used throughout the front end application to give the User Interface a consistent and uniform look. JavaScript, when required will be used to run any kind of validation on the front end application. Overall, HTML will be used to design the pages and will be embedded with ASP codes where ever required. 6.3 Good Programming Practice Before any implementation work was actually carried out it was decided by the author to adapt the good programming practice learnt at university and during his placement. With regards to the good programming practice it was decided to use Lower case first word then Words with first character capitalized. The first word will be a prefix which will identify the variables data type. For example, a string variable declaring a users name will be declared as strUserName whereas an integer field called rank will have a prefix int and will be declared as intRank. Another good practice is to declare all the variables to be used at the top of the page and the code being well commented and neatly aligned for any potential future work or bug fixes. 6.4 Major Issues At the time of starting implementation it was discovered that the selection of PHP as the development language for this project could not be fulfilled due to the lack of support available for the use of PHP and with the combination of MS Access database at university and through any web hosting company. The alternative was to use ASP as this was the second ideal language to use through the authors evaluation of Application Server Languages and had various similarities with PHP in the evaluation criteria used. Above all ASP could easily be connected with MS Access database and there was support available throughout for the combination of these two tools through various web hosting companies in contrast to PHP. In regards to section 5.4.2 and 5.4.3, no changes were required to be made as ASP is similar to PHP in providing support to database connectivity and has the ability too to reuse any code through the use of function and include path.

Page 34

Finally, the implementation tool that was used in the end was ASP as the Application side scripting language and the other tools that were used were as discussed in section 6.2. Another issue that arose was to get hold of realistic product information and images so that the database could be populated and the prototype could get tested with original data which will give a feel of what the system would be like when it is fully implemented. The author got the product information from the stakeholder in a catalogue and scanned the relevant images from there. Scanning the images took ample time and hence it delayed the development work immensely. At the time of implementation, the use of cookies to store information with regards to what a customer has added to there shopping basket caused an issue for the author, due to lack of initial experience. The author then researched through various online tutorials on how to build a cookie in ASP and finally found a solution of using the keyword COOKIES with the RESPONSE and REQUEST command. The customers machine IP Address was used to populate the cookie_id value for the basket table as shown in table 8. The free web hosting company also caused an issue as it only gave 100Mb of bandwidth per month. At the time of implementation this caused a lot of problem as the author used to exceed the bandwidth quota almost every week and then had to wait for 12 hours to be able to access the website again. This often caused a delay in the progress of the implementation thus the author created another account and used that as a backup. 6.5 The User Interface Implementation As the system being built is for online shopping, the most important part of the implementation was the user interface in terms of getting the customers to have a look at what the company has got to offer and get a good feel with regards to the website so that they can use it in the future and recommend it to others. 6.5.1 The Layout The first component to get implemented was the Homepage. In order to ensure that the website had a consistent and uniform look a CSS file was initially created as a central point for all the font style, heading definitions and alignments. It also had the position and font style of the navigation structure defined in there along side the default font style and colour of texts to be used in the HTML page that were placed with no heading tags. In addition, the CSS file included the colour for the scroll bar to be used in the website. The CSS file used can be found as Appendix G. The interface designed made use of various tables to ensure all text and images remained aligned and the page itself look less cluttered. Moving on to the functionality of the navigation structure, JavaScript was mainly used due to its acceptance with different browsers [10] and its existence in various other websites evaluated at the time of gathering requirements. The navigation structure created for the

Page 35

application was kept consistent throughout the website to ensure it met the guidelines outlined within Section 3.3. ALT tags were also used where ever required to identify that an image or text will lead the user to a new page. Once the Homepage was created all the other pages with regards to its layout and design were made in accordance to figure 6 to keep the website consistent and to ensure that it again met the guidelines outlined in section 3.3.

Navigation system as decided in section 5.3.3 Company Name

Indicating the nature of business for a first time user Figure 6 The Secret Whisper Lingerie Homepage ASP, the scripting language used for implementing the e-commerce system is an HTMLEmbedded language, which allows writing dynamically pages quickly. To ensure that ASP Scripts are executed ASP tags are inserted into HTML so that it can interact with the database and can display information in the desired format and appearance as shown in figure 7. ASP is embedded in HTML as follow: <html> <!--#include file="connection.inc"--> <head></head> <body> <% ASP code %> </body> </html> To allow the user to add the product to their shopping basket Drop down list to select colour ALT tag displaying that the text is a link to the homepage The page title

Figure 7 The Lingerie category

Page 36

6.5.2 Input Validation With regards to an e-commerce website it is necessary that the website has got some validation to offer as it will ensure that all necessary information in regards to the goods and customer details are retrieved. Mostly all the validation carried out in the website front end was done through JavaScript. This guaranteed that user(s) entered all required fields and didnt enter any invalid characters as shown in figure 8. At some places validation was carried out using ASP codes in the application layer to ensure that the user always entered quantity of the goods required with a chosen colour and size and when the quantity entered is more then the current stock level an error message is displayed as displayed in figure 9.

Error displayed to user when the two password entered at time of registration do not match

Error displayed when a user does not enter a valid email address syntax Figure 8 Input Validation carried using JavaScript

Error displayed when a user enters a quantity value more then the current stock level or leaves the field empty

Figure 9 Input Validation carried using ASP 6.5.3 Database Connection As ASP provided the ability to reuse code through the use of function and include path it was decided to create a separate file to create a connection to the database and include that file in to all the ASP pages created. For ASP script to connect to the database it must first create and open a connection by using the Microsoft Access Driver [39] and then select the correct database by giving its physical path as shown below:

Page 37

<% Declaring Variables Dim strConnect Dim objConn Create connection to database strConnect = "DRIVER= {Microsoft Access Driver (*.mdb)}; DBQ=" & _ Server.MapPath ("database/secret_whisper.mdb") Set objConn = Server.CreateObject ("ADODB.Connection") ObjConn.open strConnect Open up the connection %> It seemed pointless and time consuming duplicating the code on all pages thus the script was saved as connection.inc and included in all ASP script file to create a database connection. The advantage of having the connection as one central script is that it will allow portability in the sense that if the stakeholder later decides to move the database somewhere else the path could simply be edited in one script and it will subsequently show the effect throughout the website which requires database interaction. Once the connection to the database is no longer required it should be closed as shown below: <% objConn.close 'close connection set objConn = Nothing %> 6.5.4 The Login Script

As the stakeholder requested that the Adult Toy page does not get displayed to customers under the age of 18 a login page was created (default.html) where only registered user(s) over the age of 18 could have the ability to view the products and make a purchase if required. In the database built for this system a User table was created. All user(s) that registered with this website had their information stored in the database. The information requested from the registration page (newUser.asp) were first name, surname, Date of Birth (DOB), email address and a chosen password to access the system. For the user to view the adult page they had to enter their email address and password entered at the time of registration, which was then posted to another page to carry out some verification (Login.asp). This page does not get displayed to the user but runs in the backend where it securely accesses the user details from the form.

<% 'Fetch the username and password provided from default.html strUser = request.form ("username") strPass = request.form ("password") %>
The reason for selecting email address for the purpose of logging in was due to its unique character in contrast to the other information gathered. There is always a high probability of more than one person having the same first name and surname with a similar date of birth but the chances of having a similar email address is none.

Page 38

Going back to the verification page the username and password entered by the user is then looked into the database and matched with the those two relevant fields. If a match is found it immediately looks into the users DOB and runs a calculation to check if the user is 18 or above. On successfully meeting those criteria the user is given access and directed to the adult toy page. In the situation when the User details do not match or cannot be found the user is redirected to the login page (default.html) with a suitable error message. The actual code used for Login.asp can be seen as Appendix O. 6.5.5 Popup Window

A popup window is displayed when the user clicks on an image present in one of the main categories. The purpose of the popup is to ensure that the user is able to get a clearer image of the product before they make a purchase. One of the functionalities of the popup window as shown in figure 10 is that the image will automatically close after 20 sec if not closed by the user to ensure extremely precise mouse positioning ([2], p309) can be avoided for users with motor disabilities [2]. For consistency, the popup window on all pages will have the same width and height. The timer and the popup window are created in JavaScript. The function is then called within the body tag where required.

Figure 10 Popup Window 6.6 Database Implementation

For the system to be implemented successfully, creation of a database was carried out. The database implementation was imperative as it would store dynamic data which would ensure that the page content could be updated without any knowledge of web designing. The tables created in MS access were the ones mentioned in table 8 with its identified attributes. For the purpose of development and unit testing sample data were saved in the database. It was populated using the information provided in the catalogue, given by the stakeholder. With regards to the pictures, the thumbnail and the enlarged version of the images were placed in the server and their paths were inputted in the required fields as shown in figure 11. Mainly the attributes that were stored as Primary Key had indexes on them to improve searching for entries in the table. Validation rules were also carried out in the database to ensure only data with the legitimate characters got inputted and stored. For example in the Order table would only accept a delivery date if it is in the dd/mm/yyyy format.

Page 39

Figure 11 The Picture table 6.6.1 Data Manipulation

Throughout the system data were manipulated using SQL query. To allow information from various tables to be viewed on one page, SQL functions such as INNER JOINS were used. INSERT and UPDATE queries were also used whenever data had to be inputted or updated into the database. For example when a new user registers to the website their details get entered into the database and every time in the future they log in their login details are matched using it. Updates queries are used to ensure the item quantity are kept up- to-date and when ever it reaches zero the status of the item gets flagged as unavailable. 6.7 System Deployment

The webpage that required information from the database was deployed as .asp files. In the case of static pages that do not get updated by the database or retrieve any information from any other application was stored as normal HTML files. The database was deployed as .mdb file. The prototype currently is deployed for the purpose of testing through a free web hosting company providing 100 Mb of web space, access to ASP and connectivity to Access database. Once the system is fully implemented the stakeholder can easily move the pages from this server to another server that provides more space and bandwidth along with emailing facility. One of the reasons for not using this application through the current web hosting company is that it only gives 100 Mb of bandwidth every month which will not be enough in the long run as the number of potential user(s) increase. To run the application the user just requires a web browser with an internet connection and needs to know the URL for this system. 6.8 Conclusion

This system has been implemented using ASP and HTML tags along with MS Access database to store product information as well as customer details. The application has been successfully implemented with various extensions to the minimum requirement. The system is capable of extracting information from the database and displaying it in a user friendly interface. The only issue is the rendering speed of images which on the current server is quick but is not done instantly. Chapter 7 tests the prototype on various testing strategies and checks if it is successful or not.

Page 40

Chapter 7 Testing
7.1 Introduction

This chapter provides an overview of how the system implemented in Chapter 6 was formally tested. Referring to the Gantt chart produced as Appendix B it can be seen clearly that testing was carried out thoroughly. 7.2 Testing Procedures

Testing the system is done to confirm its proper functioning. This is not an act that occurs only after the system is implemented. It is done simultaneously throughout the development of the system and after a prototype has been implemented as demanded by the Prototype methodology employed for this project. The testing strategies used for this project were those mainly advocated by Fournier [9] and in addition Input Validation, Performance testing and Browser Compatibility testing were carried out due to the nature of the application. Fournier [9] views on testing a web application include four stages. 7.2.1 Unit Testing

The goal here is to test the smallest logical units of the application code [9]. Whilst designing the database, various products from the catalogue provided were entered in the database and the queries were developed and tested to ensure that relevant data were being returned that mirrored the requirements. With regards to Web pages, each page was tested to ensure that it performed as was expected in its design, thereby ensuring that the basic functionality is in place. In the case of procedural logic such as the use of IF statements in the code, white box testing was used. White Box testing is a way of verifying the internal structure of a program ([9] p301). For example, when displaying the available colours and sizes of an item on the required page IF statements were used to display the relevant statements depending upon the presence of required item information. The sample of data entered were used to test each branch of the IF statement to ensure that it functions correctly and also boundary conditions were used to show that the system functioned properly through its range. For example one of the outcomes of this white box testing procedure can be seen in figure 12.

Page 41

A combo box appears only if the database has a colour available for the item displayed Not available appears when the colour field for the item displayed is empty in the database

Sale price only appears for an item if it has a discount value of more than 0% stored in the database Figure 12 The White Box Testing 7.2.2 Integration Testing Integration testing helps to verify that the collaboration of the pieces of programming and different software are working effectively. It was important to check that every link between pages worked correctly to ensure that the system would carry out its required functionality. It was also imperative to test that the integration of the different software was successful. Checks had to be made that connections were functioning between the Web Server and the Application Server and that the Application Server connected correctly with the database. Web pages needed to be checked to ensure that they presented themselves on execution and that if any manipulation was carried out in the database, the changes were actually made. 7.2.3 System Testing

This was the third testing strategy that came after integration testing. During system testing the system as a whole was tested against the requirements defined by the stakeholder to ensure it met his expectations. The result of this testing can be found as Appendix H which clearly identifies that all the key deliverables as mentioned in section 2.11 have been implemented and tested along with the potential extensions that were implemented. 7.2.4 User Acceptance

This is the fourth and the last test advocated by Fournier [9]. This test entailed the stakeholder testing the system in its entirety and from the perspective that the e-commerce website system was a prototype. The results obtained are attached as Appendix I.

Page 42

7.2.5

Input Validation

Moving from testing strategies advocated by [9] an Input Validation testing was carried out too due to its existence in the system. As discussed in section 6.5.2 two levels of validation were carried out. One based on the front-end using JavaScript and the other based on the application layer using ASP. The validation rules implemented at this stage were thoroughly tested and the outcome can be seen in the test plan created for section 7.2.4, which is documented as Appendix I. 7.2.6 Performance Testing

Another test carried out for the application was performance testing to ensure the prototype was operating on acceptable levels. The test was mainly carried out to ensure that the system met the criteria mentioned in Chapter 3 with regards to response and download time of a page with the essential images. The result of the testing was that the system took approximately 4.6 seconds on average to load a page on the authors computer, which was used to carry out the development work. Looking back at section 3.3.6 the response time for a page to load up should be no more than 10 seconds thus it can be concluded that the application fared well in regards to loading and displaying the images to the user. The performance of the application would be further examined through the evaluation carried out using a sample of user based on the HCI aspects. This would be discussed in the report as a later chapter. 7.2.7 Browser Compatibility Testing

The compatibility of the application was a major concern due to system being an online shopping application. As mentioned earlier in section 4.10 under performance, the stakeholders major customers will be using Internet Explorer or Netscape thus it was imperative to test the application for its compatibility with these two main browsers along with the ones mentioned in section 3.4.1.1. To test the application, the service provided by [40] was used intensively. The outcome of the test was encouraging as it showed layout consistency and compatibility for Internet Explorer (IE). With regards to Netscape, the outcome was promising but not as successful as IE in terms of its layout. It had minor layout issues with the older versions of Netscape. The navigation system sub menu for lingerie did not appear aligned. It was somewhere in between lingerie and adult toys. 7.3 Conclusion

The system was successfully tested against all the test criteria and has all its test results well documented in the Appendix under relevant section. The next chapter, Chapter 8 evaluates the system and the project as a whole.

Page 43

Chapter 8 Evaluation
8.1 Introduction

This chapter looks at how the project has fared in relation to the requirements. Then the author moves on to evaluate the application with the stakeholder, a group of potential user(s) and then against the checklist provided by W3C with regards to the website being accessible by disable users. In the end the process model and schedule is evaluated. 8.2 Current features of the Prototype

Looking back at the implementation of the system the following are a few key features implemented: A Complete Navigation structure for user(s) to navigate through the system A homepage giving an idea to a first time user what the website is about. A facility for user to perform a quick search on item brand or category ( i.e. Collection, costumes or lingerie) A page dedicated on sale items. User(s) having the ability to track an order placed using the Order ID given at the time of purchase. A shopping basket updated dynamically, depending upon the product and quantity purchased. Adult toy page only available through entering via the Login page. Product information displayed and updated via a back-end database. A page dedicated to the terms and conditions of shopping at Secret Whisper online. A Contact facility available to potential user to email the stakeholder of any concerns regarding the website. 8.3 Evaluating the Requirements

The minimum requirements as mentioned by the author in Chapter 1 are being evaluated at this stage to see how they have been met and what solution(s) if any have been offered. List the User Requirement Chapter 2 discusses in detail the User Requirements. It initially discusses the process of how the requirements were gathered and then breaks down the information into functional and non-functional requirements. Further on requirements were gathered through evaluating competitors website and getting an idea of how the system will need to be built to be effective in online sales and marketing.

Page 44

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. Chapter 6 and 7 describes the design and implementation of the prototype to the extent where a user can select their required item to the shopping basket. The shopping basket will have the ability to display the item(s) a user has selected from the categories available, with the quantity required and total price of the item which will be calculated based on the items trade price and quantity purchased. Then at the end there will a sub-total price displayed as shown in figure 13 to the user where the total price of the items are added together along with a delivery charge and displayed to the user as To pay. Sum of the total price

Total amount required to be paid including delivery charge Figure 13 The Shopping Basket Evaluate prototype with stakeholder At the end of the implementation and testing process the prototype was evaluated with the stakeholder in order to gain some insight of how successful the prototype is at meeting his requirements and if the application will be of any use to him for the purpose of online shopping in the future. A short interview, containing five questions, was conducted after the demonstration. The questions were designed to ascertain the prototypes usefulness and success. The questions asked together with his views/feedback can be found as Appendix J. The stakeholders feedback was positive as it met his general objective with a few minor improvements. Overall he was impressed with the outcome of the prototype which is reflected in the evaluation sheet. Evaluation of competitors website using a checklist produced. The evaluation of the competitors website using a checklist was beneficial as it led to some new ideas. It also helped in gathering the User Requirements in making the application effective with regards to marketing and sales in the online market as well as to evaluate the prototype on the same checklist to see how effective it will potentially be once it is fully

Page 45

implemented. The checklist criteria can be found in section 2.6 and evaluation result can be found in section 2.8. With regards to the evaluation of the prototype the result will be discussed in section 8.5.2. 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. Section 3.2 looks at the benefit online shopping will bring to the stakeholder in detail, based not just on profit but on the market penetration too. Having the products made available online along with a good advertising of its presence in the online market, it will potentially bring more customers to the business. Eventually, lead to having a positive effect on the turnover and profitability for the company. 8.4 Evaluating the Project Extension

The possible project extensions within the functional requirements as mentioned in section 2.11 are discussed here. Table 9 shows the project extensions that were implemented along with the solution(s) offered. Screen shots have been placed as Appendix N for evidence of its existence within the website. Extension Facility for user(s) to be able to do a Quick Search on a product Moderate Complexity Solution(s) offered The page has a drop down menu to select a product or category from so that user(s) do not struggle in finding an item of their interest. Customer need to enter their Order ID which will be Tracking an Order placed Easy given once payments for the goods have been received. If an order has not been delivered it will display the expected delivery date for that item. Adult Toy security Moderate No user(s) are able to view the page without entering their login details. User need to enter all required details before they New User Registration Moderate are able to view items under Adult Toys. Validation is carried out to check all details are filled in correctly. Once an item quantity goes down to zero the item Stopping User(s) from buying items currently not available Ability to get an enlarge Easy Moderate status in the backend database gets flagged as not available. In the front-end add to basket button disappears for that item and an image displaying Item currently out of stock gets displayed. JavaScript function that gets triggered every time a

Page 46

image of any product chosen by the user. Having the facility to send an email to the stakeholder through the website available to user(s). Ability to break down the product information returned on the webpage by the database into two columns Moderate Difficult Moderate/

user clicks on an image.

A contact us page made available throughout the website in case a user need to contact the stakeholder or a member of Secret Whisper regarding any information.

Use of a For loop to divide the record found for that category into two individual tables and to ensure that the guideline mentioned in section 3.3.1 is met.

Table 9 - The Project Extension 8.5 Evaluating the Prototype

To measure the success of the prototype, it was imperative to evaluate the prototype with the stakeholder. The system was also evaluated from a HCI aspect and then moved on to evaluate the website on its effectiveness with regards to sales and marketing. The evaluation of the prototype with regards to meeting the stakeholders requirements was carried out earlier and has been stated by in section 8.3. 8.5.1 Evaluation based on the HCI Aspect

One of the important evaluations for the prototype was the HCI aspect which dealt with usability and the look and feel of the system. As mentioned in section 3.3.2 it was imperative to evaluate the HCI aspect at this stage and make any amendments rather than when it has been fully implemented. A HCI score sheet was used and given to the stakeholder, various users who would potentially be using the application once it goes live for online shopping purposes and to users from a technical background as they could give more constructive feedback. The score sheet looked at the users overall reaction about the system, their opinion in regards to the User Interface, performance and other capabilities. The score sheet used was based on the background research carried out on HCI using information from [1] and [2]. Each question was scored on a 3-point scoring system where the evaluator could tick either box depending upon their personal experience on the website whilst evaluating it. The score sheet also had a box for any comments under every question, thereby giving the evaluator a chance to openly express their opinion if required. The reason for choosing a 3-point scoring system was due to the fact that users did not have to spend time thinking which box would be most appropriate to tick in comparison to other

Page 47

score sheet(s) which uses a 1-point scoring system or a 5 point scoring system. The score sheet used and filled in by the sample users can be found in Appendix K. The outcome of the score sheet was very positive as the average score out of 12 evaluation sheets was 24.5, which was almost near to the maximum (26) that could be scored. The comments that were mentioned many times on the evaluation sheet was that the product information could be more spaced out and the position of the Add to Basket button could be brought nearer to the product making it easier to see which product it represented. Regarding the design of the website, the general comment was that the prototype was plain and simple but consistent which does not cause the user to want to look away from the site. The final point made about the prototype that justifies section 7.2.6, was that the page loaded very quickly but not instantly. However, the overall feedback including that of the stakeholder was that the website as a whole was a success and would like to see the system to be fully implemented. 8.5.2 Evaluation based on the effectiveness of Marketing and Sales

The evaluation criteria mentioned in section 2.6 was used to see the potential effectiveness of the website with regards to marketing and sales. Again the evaluation sheet were filled in by the stakeholder along with the 11 other users used to evaluate the HCI aspect of the website. Website Scores (out of 24) Secret Whisper Ann Summers La Senza 17 17 17

Table 10 Comparison of the website score sheets The outcome was positive as the average score was 17, which according to the authors rating system defined in section 2.6 meant the effectiveness was good and was as effective as La Senza and Ann Summers in todays market with regards to sales and marketing as shown in table 10. As mentioned in section 2.8 more importance was given to the HCI aspect which was justified in section 8.5.1 and less importance was given when building the website to any comparison to its competitors products or helping a user to make a decision on a product which accounted for 6 marks, so in effect the website got a total of 17/18 which is almost close to being an excellent website in terms of its effectiveness in sales and marketing. The score sheet marked by the stakeholder can be found as Appendix L. 8.5.3 Evaluation based on the checklist and guidelines provided by W3C

As discussed in section 3.3.10 the prototypes evaluation against Web Accessibility checklist and guidelines is imperative as it will ensure that the system could also be potentially used by

Page 48

user(s) having disabilities. A checklist was produced by the author using the guidelines mentioned in [46] which can be found as Appendix M. Unfortunately due to the time constraint all the guidelines within the checklist could not be fulfilled. It would be beneficial though to have the application thoroughly tested by a few disable users before the system gets fully implemented so that the necessary changes could be made on the prototype at the time of implementation rather than after it has been deployed for the purpose of online shopping. 8.6 Project Schedule Evaluation

The project schedule that was formed at the start of the project was realistic but not perfect. Throughout the project due to a number of reasons some of the tasks were not started or completed within the intended schedule. This was mainly due to the authors negligence of not taking into account any unforeseen problems at the time of producing the Gantt chart such as various coursework deadlines and any allowance for revision of the prototype following user evaluation. Again the author missed out in taking in account the design stage of the prototype. Despite these oversights, the project had various positive factors such as the long time frames given to each tasks as shown in section 1.5, which ensured that any loss of time could easily be rectified through hard work and working long hours. The project schedule, on a whole, can be concluded to be a success as the author was able to implement the prototype to a level beyond the minimum requirements, evaluate it with the stakeholder, write the report and submit the project on time. A revised and more realistic Gantt chart can be seen as Appendix B. 8.7 Process Model Evaluation

As mentioned earlier in section 2.3 Prototyping Model was chosen for this project and followed throughout the project lifecycle where possible. This helped the author in building a working prototype which was built to the stakeholders satisfaction and gave an indication of what requires to be done to fully implement the application at a later stage. Amendments to the prototype were made at the end of the iteration, but testing of the prototype was carried out as an ongoing process due to the flexibility provided by the model. On the whole it can be concluded that the process model chosen was the right choice as the prototype implemented at the first iteration met the stakeholders general objective of the system [6] and gave him an indication of what to expect of the system once it is fully implemented. 8.8 Future Enhancements

During the project various fields with potential enhancement were identified which have some kind of structure already established within the database and application layer.

Page 49

One of the enhancements that could be added to the system is storing the users password in the database in encrypted format. This will potentially make the system more secure and safe to use. Another enhancement that could be made is that system could have some kind of personalisation where it could recommend its potential customer of an item that could be of interest to them based on an item they are currently purchasing or have purchased in the past. The personalisation will be based on customer logging into the system using a username and password. Further modifications could be made to the navigation system to ensure that its is accessible through all browsers and in addition input validation could be extended to the point where users can only enter characters in first name and surname where as for date of birth only date format would be accepted. For example: dd/mm/yyyy. Another possible enhancement could be the possibility of user(s) to do a quick search based on colour and size in addition to the brand and category type currently available. With regards to the database a form could be created so the stakeholder or his authorised employees could have the option of adding, deleting and modifying data within the database. 8.9 Conclusion

The project overall has been a success and has been accepted by the stakeholder with a few improvements to be carried out and some addition to the functionality. This additional functionality is mainly merging the prototype with an online payment system. The project on the whole has been able to accomplish its main aim and objectives within the set deadline and also been able to expand on the minimum requirements set initially. In the end the author has identified a few enhancements that could be carried out in the future regarding the system.

Page 50

Chapter 9 Bibliography
1. Shneiderman, B. (1998). Designing the User Interface: Strategies for Effective HumanComputer Interaction. 7th edition, Reading, Addison-Wesley. 2. Nielsen, J. (2001). Designing Web Usability. New Riders, 2001. 3. Your Online guide to Usability Resources, [Internet]. Available: http://www.gerrymcgovern.com/nt/2003/nt_2003_04_21_fast.htm (Accessed: 14th November 2004) 4. Karlin, B. A Stroll On The Cybermall - benefits of online shopping, [Internet]. Available: http://www.findarticles.com/p/articles/mi_m0OUH/is_8_32/ai_106675063 (Accessed: 01st December 2004) 5. Koyani, S.J., Bailey, R.W. & Nall J.R. (2003). Research-Based Web Design and Usability Guidelines. U.S Department of Health and Human Services. 6. Pressman, R. & Ince, D.(2000). Software Engineering: A Practitioners Approach. 5th Edition, McGraw-Hill. 7. Purtilo J., Larson A., & Clark J. (1991). A methodology for prototyping-in-the-large. In Proceedings of the 13th international conference on Software engineering. IEEE Computer Society Press. 8. Avison D.E. & Fitzgerald, G (1995). Information Systems Methodologies, Techniques and Tools. 2nd Edition, Mc-Graw Hill. Development:

9. Fournier, R. (1999). A methodology for client/server and web application development; London, Prentice Hall. 10. Laudon, K.C. & Traver C.G. (2001). E-Commerce: Business. Technology. Society. Addison Wesley. 11. Bocij, P., Chaffey, D., Greasley, A. & Hickie, S. (2003). Business Information Systems: Technology, Development & Management for the E-Business. 2nd Edition, Prentice Hall. 12. Hughes, B. & Cotterell, M. (2002). Software Project Management. 3rd Edition, McGraw Hill. 13. 3-tier Architecture, d-tec Distributed Technologies GmbH, 1998. [Internet]. Available: http://www.corba.ch/e/3tier.html (Accessed 11th February 2005) 14. Teague J.C. (2004). DHTML and CSS for the World Wide Web. 3rd Edition, Peachpit Press. 15. Gray N. (2001). Web Server Programming. Wiley 16. Boroni C.M., Goosey F. W., Grinder M. T., & Ross R. J. (1998). A paradigm shift! The internet, the web browsers, java and the future of computer science education. In Proceedings of the twenty-ninth SIGCSE technical symposium on Computer science education, pp 145 -152. ACM Press. 17. W3Schools Online Web Tutorials [Internet]. Available: http://www.w3schools.com/browsers/browsers_stats.asp (Accessed 09th February 2005)

Page 51

18. About Perl [Internet]. Available: http://www.perl.org/about.html (Accessed 10th February 2005) 19. Gesker G. (2001). Alternatives for Dynamic Web Development Projects. Linux Journal. 2001(83es), March. 20. PHP Manual [Internet]. Available: http://uk.php.net/manual/en/faq.languages.php#faq.languages.asp (Accessed: 09th February 2005). 21. Java Server Pages Technology [Internet]. Available: http://java.sun.com/products/jsp/ (Accessed: 08th February 2005) 22. Axmark, D. & Widenius, M. (1999) MySQL introduction. Linux Journal. 1999(67es):5, ISSN 1075-3583. 23. McCarty B. (2001). PHP 4: A beginners Guide. Osborne/Mc Graw Hill. 24. Meloni J.C. (2000). PHP Fast & Easy Web Development. Prima Tech. 25. Microsoft SQL Server [Internet]. Available: http://www.microsoft.com/sql/evaluation/sysreqs/2000/ (Accessed: 13th February 2005) 26. PostgreSQL [Internet]. Available: http://www.postgresql.org (Accessed: 13th February 2005) 27. Bennett S., Skeleton J., & Lunn K. (2001). UML. McGraw-Hill 28. Crag Systems. Why use UML? [Internet]. Available: http://www.cragsystems.co.uk/why_use_uml.htm (Accessed: 14th February 2005) 29. Activity Diagrams: What they are and how to use Them [Internet]. Available: http://www-106.ibm.com/developerworks/rational/library/2802.html (Accessed: 14th February 2005) 30. Bennett S., McRobb S., & Farmer R. (2002). Object-Orientated System Analysis and Design Using UML. 2nd Edition. McGraw-Hill 31. Non Functional Requirement [Internet]. Available: http://c2.com/cgi/wiki?NonFunctionalRequirements (Accessed: 16th February 2005) 32. Web Design Pitfalls Why Website Designs Fail [Internet]. Available: http://www.ionix.com.au/articles/pitfalls.pdf (Accessed: 24th February 2005) 33. Ho Yu, C. Jannasch-Pennel, A & DiGangi. A (1999). Opportunities and options for Web-enabled databases: comparing in choosing the right software for virtual courses and communities. [Internet] International Journal of Educational Technology. Available: http://www.outreach.uiuc.edulijet/vlnl/yu (Accessed: 5th March 2005) 34. Dix, A. & Finlay, J., (2004). Human-computer interaction. 3rd Edition. Pearson. 35. Chapple M. Primary Key Definition [Internet].

Page 52

Available: http://databases.about.com/cs/administration/g/primarykey.htm (Accessed: 09th March 2005) 36. Spaccapietra, S, Parent, C, & Zimanyi, E, Modelling Time from a Conceptual Perspective, Proc. of the seventh international conference on Information and knowledge management, 1998 37. McFadden, F.R. & Hoffer, J.A & Prescott, M.B. (1999) Modern Database Design. Reading, Addison Wesley. 38. Teorey, T.J. (1999) Database Modelling & Design. 3rd edition. San Francisco, Morgan Kaufmann 39. Corkhill, B. ASP Tutorials [Internet]. Available: http://www.webwizguide.info/asp/tutorials/connecting_to_a_database_pt2.asp (Accessed: 21st March 2005) 40. BrowserCam [Internet]. Available: http://www.browsercam.com/default.aspx (Accessed: 17th April 2005) 41. Boehm, B. (1988). A Spiral Model for Software Development and Enhancement. Computer, vol. 21, no (5): pp.61-72. 42. Dykema, E.B. (2000). Online Retails Ripple Effect. Forrester Research Report, Forrester Research Inc. 43. Mendelevich, A. (2000). 10 Reasons to Develop in ASP. Web Reference. [Internet]. Available: http://www.webreference.com/new/aspdev.html (Accessed: 17th April 2005) 44. Edwards, P. (2000) DIY Intranets with CFML/XML/HTML/CGI/ASP/JSP. VINE. No. 199, 2000, p53-60 45. Qrzech, D. (2001). Advantages of PHP over Java [Internet] Available: http://www.zend.comlzend/art/php-over-java.php (Accessed: 17th April 2005) 46. Berners Lee T. Web Accessibility Initiative. [Internet]. Available: http://www.w3.org/TR/WCAG (Accessed: 21st April 2005) 47. Whyte, B. (2004). IS34: E-Business & Security. School of Computing. University of Leeds 48. Microsoft Office Online (2003). [Internet]. Available: http://www.microsoft.com/office/access/prodinfo/overview.mspx (Accessed: 21st April 2005) 49. Roberts, S. (2002). DB21: Database Principles and Practice. School of Computing. University of Leeds 50. W3C (2004). [Internet]. Available: http://www.w3.org/ (Accessed: 20th March 2005) 51. Begg, C. & Connolly, T. (2002). Database systems: a practical approach to design, implementation, and management. 3rd Edition, Addison-Wesley. 52. Elmasri R, Navathe S, (2000), Fundamentals of Database Systems, International Edition, Addison-Wesley.

Page 53

Appendix A Personal Reflection

The project has been really interesting and rewarding in that I have been able to add on to the experience gained during my work placement and learn new things. I have also been able to incorporate almost all of my computing modules undertaken so far at university within this one project, starting from first year onwards. Looking back, I feel satisfied with my chosen topic as it is a subject that interests me, gave me a challenge and which has more instant benefits to the client and its potential users. Above all it has truly helped in building my programming skills and knowledge. For instance, I have been able to gain knowledge in regards to coding in ASP, and further enhanced my understanding of database design, SQL queries, Microsoft Access and JavaScript. Upon completion of the project, I feel confident now to be able to deal with any of the languages mentioned above, including any technical and non-technical issues and use it in any real world project. One important thing I learnt through the project that everything does not go according to plan or preference. Initially I had decided to use PHP as my application server language but later on in the project I had to use ASP as PHP with MS access was not supported anywhere. Thus when it came to implement the application I had to change my approach and go ahead with a new language. It would have been beneficial if I had done an evaluation of all the chosen languages together, instead of just doing it individually, as I would not have wasted valuable time in enquiring about how I can use PHP with MS Access. I could have started my implementation instantly without any hassle and last minute change of coding language. The help provided by my Project Supervisors have also been worthwhile. They helped me throughout the project whether it was regarding my report, minimum requirements, implementation tools or even the user requirements for the application. They always gave me valuable advice, which has been useful in the completion of my project. Selecting a suitable methodology for the project helped me to break it into smaller manageable chunks, which were less overwhelming and flexible enough to allow changes when necessary. It also helped to keep the design and implementation process efficient and allowed set deadlines to be met. Another aspect of the project, which is worth mentioning, is the project schedule. In order to be able to concentrate properly on the project at a later stage I chose to take more modules in the first semester compared to second semester. Thus I was able to spend more time during second semester and Easter break working on the project rather than working on various other modules.

Page 54

Throughout the project due to a number of reasons some of the tasks were not started or completed within the intended schedule. This was mainly due to the my negligence of not taking into account at the time of producing the Gantt chart various coursework deadlines and then later on due to some health issues which were not anticipated or could be predicted at that time. Several times during the project lifecycle the project work was put on hold and then started once the coursework was complete and submitted. Another reason that delayed the project progress was the communication gap between me and the stakeholder. The stakeholder was away for a few weeks longer than anticipated. The more realistic and the used in the end has been added as appendix B. One advantage that I had in the project was that I had the experience from my placement of how to deal with externals clients, and conduct interviews with them, in order to gather their requirements and if possible, give me them some kind of idea of what the system would be like when completed. It did help me though to build my communication skills and talk to clients using non-technical IT terms. Overall if I was asked to give advice to future students on carrying out their project I would definitely tell them to plan out the project thoroughly and realistically and take any coursework deadlines into consideration as surely it will have an effect on the project. They should if possible try and build the application in a language they are familiar and confident in, as it will save ample time when it comes to the actual coding and debugging it. Students should also look in to previous year projects to gain some insight in the layout and the structure of their report, as this is only thing that gets marked. With regards to the evaluation of the solution produced it will always take longer then initially anticipated. They should always set aside enough time to carry out a good evaluation and take into consideration all type of users from different backgrounds and skill levels. Students that will be building websites in the future should always get there HTML pages and CSS file validated through W3C and ensure they check the guidelines of building a web site that could be accessible by disabled users through W3C.

Page 55

Appendix B Project Schedule (The Gantt chart)

Appendix B1 Final year project plan Task Project Aims and Minimum Requirements Complete draft version of User Requirement Research on the aspects of HCI Look in previous years projects to see the use of UML Analysis and evaluation of existing comparable website Investigate the benefits of an online presence in this type of market Plan out the contents of Mid-project report Produce Prototype Work on the mid project Report Submit Mid Term Project (paper copy + electronic version) Collect marked Mid-Project Report Evaluate prototype with Stakeholder Progress Meeting User testing Evaluate the product Submit table of contents and draft chapter Project Report Submit report pdf Key: Submit report pdf Submit table of contents and draft chapter Progress Meeting Collect marked Mid-Project Report Submit Mid Term Project (paper copy + electronic version) Task completed Deadlines: 29th April 11th March 24th January 24th January 9th December October November December January February March April

Page 56

Appendix B2 Final year project plan TASK (A block represents a week:) Project Aims and Minimum Requirements Complete draft version of User Requirement Research on the aspects of HCI Look into various sofware development tools Select a software development tool for the project Look in previous years projects to see the use of UML Analysis and evaluation of existing comparable website Gather User Requirement Investigate the benefits of an online presence in this type of market Plan out the contents of Mid-project report Work on the mid project Report Submit Mid Term Project (paper copy + electronic version) Produce Prototype Collect marked Mid-Project Report Evaluate prototype with Stakeholder Progress Meeting User testing Evaluate the product Submit table of contents and draft chapter Project Report Submit report pdf Key: Submit Mid Term Project (paper copy + electronic version) Collect marked Mid-Project Report Submit table of contents and draft chapter Progress Meeting Submit report pdf Revision time First Semester Exams Task completed October November December January February March April

Deadlines: 9th December 24th January 11th March 24th March 29th April

Page 57

Appendix B3 Final year project plan Task (A block represents a week:) Discuss Project Idea with Supervisor Complete the Project's Aims and Requirements Gather User Requirement and get it checked Research on the aspects of HCI Look into various software methodologies available Select a software methodology for the project Analysis and evaluation of existing comparable website Investigate the benefits of an online presence in this type of market Submit Mid Project Report Collect marked Mid-Project Report Look into the various technologies available Evaluate and choose the appropriate technology to build the prototype Design the prototype Begin the development work of the prototype Submit table of contents and draft chapter Conduct progress meetings with assessors and supervisors Testing Evaluate the prototype with the stakeholder Evaluate the prototype with various users based on the HCI aspects and effectiveness in marketing and sales. Revision of the prototype following user evaluation Complete final write up of the report Proof Reading and amendments in the report Submit Report Submit report pdf October November December January February March April

Page 58

Key: Submit Mid Term Project (paper copy + electronic version) Collect marked Mid-Project Report Submit table of contents and draft chapter Progress Meeting Submit report pdf Revision time First Semester Exams Task completed

Deadlines: 9th December 24th January 11th March 24th March 29th April

Page 59

Appendix C User Requirement Transcript

1. What will be the name of the website? Secret Whispers 2. What colour would the website be? Preferably lilac mint green if compatible or white 3. Which browser will customers generally be using? I.E. and Netscape 4. What would be the font face i.e. the colour and size? N/A 5. Design of the Homepage:

Company Name

Navigation

Picture

Company Address/Links

6. Design of the page after selecting an item:

Company Name

Navigation Picture 1 Product Details Picture 2 Product Details Picture 3 Product Details Picture 4 Product Details

Page 60

Then user can select on one of the thumbnail they like and then it will take it to a enlarged picture where they can select to buy it

7. Where will I get the Pictures? Has been made available. 8. Will the website be used by new customers or present customers? New customers, 13 yrs old onwards Where will I get the Product Details from? TO BE PROVIDED 10. How many pages would you like to be seen in the website? Homepage looks in the item Selected item enlarged pic with product detail and Payment option to select colour, quantity and size. Confirmation 11.Which Shopping basket? Will look into it at a later stage . so far to select from: Paypal.com Nochecks.com Worldpay.com The 3 choices above are for secure payments. The actual shopping basket is different I think. Take a look at Actinic Catalog & Secure Trading. Also Netscape do some form of shopping basket and may also do secure payment method. The second pages of the web site, once a choice has been made from the navigation frame, will obviously require scroll bars for vertical movement. We would prefer not to have horizontal scroll bars. This will, we think, make the page less cluttered and more user friendly. Product details are in the catalogues. (I Think!) Enjoy Jane & Al

Page 61

Appendix D Competitors Website Evaluation score sheet

Web Site Score Sheet Key: Yes No 2 Name of Site: URL: Field: Evaluation Date: Contents: 1. 2. 3. 4. 5. 6. 7. 8. When visiting a website does the homepage clearly indicate its nature of business or product(s)? Is product information provided? Does the website provide a reason as to why a customer requires a particular product? Are there special emphases on sales items or on the launch of a new product on the website? Does the website provide the option to evaluate the product(s) offer with its competitors? Has the website got the option of helping the customer to make a decision on a particular product? When making a purchase is everything clearly explained? Is there any kind of after sales customer service? La Senza http://www.lasenza.co.uk/ Lingerie 07 December 04 0 ? 1

Navigation: 9. Does the website offer a complete navigation structure?

Design: 10. Does the website have a consistent page design with presentable font(s) throughout the site? 11. Does the page and image load instantly for the website? 12. Does the website offer the option to skip flash intro? Sub-Total: Total (max. 24): 8 3 17 1

Page 62

Web Site Score Sheet Key: Ye s 2 Name of Site: URL: Field: Evaluation Date: Contents: 1 2. 3. 4. 5. 6. 7. 8. When visiting a website does the homepage clearly indicate its nature of business or product(s)? Is product information provided? Does the website provide a reason as to why a customer requires a particular product? Are there special emphases on sales items or on the launch of a new product on the website? Does the website provide the option to evaluate the product(s) offer with its competitors? Has the website got the option of helping the customer to make a decision on a particular product? When making a purchase is everything clearly explained? Is there any kind of after sales customer service? Ann Summers http://www.annsummers.com/ Lingerie 07 December 04 0 1 No ?

Navigation: 9. Does the website offer a complete navigation structure?

Design: 10 . 11 . 12 . Sub-Total: Total (max. 24): 8 3 17 Does the website offer the option to skip flash intro? Does the website have a consistent page design with presentable font(s) throughout the site? Does the page and image load instantly for the website? 1

Page 63

Appendix E Activity Diagram

Enter URL for the e-commerce website

View the Homepage

[ Yes - Add product to shopping basket and return to homepage ]

Select the desired page from the navigator [ No ] View the desired page

Valid Page in regards to selection? [ Yes ] [ No - Return to previous page ] View Product [ No ]

[ No - Return to previous page ] [ Yes ]

Want more details on the product?

Click on the thumbnail to enlarge image and get further information on the product and price

Want to purchase te product? [ Yes ] Product available to purchase? [ Yes ] View another product? [ No ] Go to check-out Enter credit card detail on request page

Enter Personal detail and shipping address Provide a suitable message

[ No ]

Credit card authorised? [ Yes ] Provide Confirmation

Figure 14 The Activity Diagram

Page 64

Appendix F Normalisation
Normalisation: Attributes category_id category_name item_id item_name item_desp price discount% colour size status quantity style picture_id picture_name picture_desp picture picture_size order_id order_name order_desp order_date quantity total_price user_id password user_name dob 1st NF category_id category_name item_id item_name item_desp price discount% colour size status quantity style picture_id picture_name picture_desp picture picture_size order_id order_name order_desp order_date quantity total_price user_id password user_name dob 2nd NF category_id category_name item_id item_name item_desp price price discount% colour size status quantity style picture_id picture_name picture_desp picture picture_size order_id order_name order_desp order_date user_id password user_name dob item_id order_id quantity total_price 3rd NF category_id category_name Table Category

item_id Item item_name item_desp price price discount% colour size status quantity style picture_id picture_name picture_desp picture picture_size order_id order_name order_desp order_date user_id password user_name dob item_id order_id quantity total_price Picture

Order

User

Order_Line

Table 11 - Normalisation

Page 65

Appendix G The CSS File

<style type="text/css"> <!-body { margin:[0][0][0][0]; scrollbar-face-color : #f1f1f1; scrollbar-highlight-color : #ffffff; scrollbar-3dlight-color : silver; scrollbar-shadow-color :#ffffff ; scrollbar-darkshadow-color :silver ; scrollbar-track-color : silver; scrollbar-arrow-color : #000000 filter:dropshadow {color=#7AC5CD, offx=1, offy=1}; } h1 { font-size: 24px; color: #2F4F4F; font-family: Comic Sans MS; font-weight: bold; textalign: center; } h2 { font-size: 12px; color: #2F2F2F; font-family: Verdana; font-weight: strong; text-align: left; } h3 {text-align: center;} hr {color: silver; size="5"; width: 980px;} A:link { text-decoration: none; color: #000000; } A:visited { text-decoration: none; color: #000000; } A:active { color: #000000; } A:hover { text-decoration: none; color: #aaa;font-weight: strong;} b.first{ color: red;} .product{color: red; font-weight: bold;} .product2{color: black; font-family: verdana;} #DIV { font-size : 9pt; font-family : verdana; font-weight:strong; } #SubMenu { position: absolute; top: 90px; left: 205px; width: 10px; border: 1px solid #999; visibility: hidden; } #SubMenuBlock { font: 70% Verdana; border-top: solid 0px #999; border-bottom: solid 0px #999; background: #F1F1F1; padding: 2px 0px 2px 0px; } #SubMenuBlock td { font-size: 100%; } #SubMenuBlock a { Page 66

font: 70% Verdana; color: black; text-decoration: none; } #localToolbar { padding-right: 0px; border-top: #999 1px solid; padding-left: 0px; font-size: 70%; background: #f1f1f1; padding-bottom: 2px; width: 190px; padding-top: 2px; border-bottom: #999 1px solid; } #localToolbar td { width: 190px; font-size: 100%; } #localToolbar a { font: 70% Verdana; color: black; text-decoration: none; } #homePageLink { width: 182px; padding-left: 2px; } #homePageLink td { font-size: 100%; } #homePageLink a { display: block; border: solid 1px #F1F1F1; padding: 2px 6px 2px 6px; margin: 0px; background: #F1F1F1; white-space: nowrap; } .flyoutHeading { font-family: Verdana, Arial, Helvetica; font-size: 10pt; background-color: #F1F1F1; font-weight: bold; padding-top: 2px; padding-bottom: 4px; padding-left: 2px; cursor: default; }--></style>

Page 67

Appendix H The System Testing

Task No. Partially Implemented Not implemented

Requirements

Implemented

System must have a homepage which 1. should include the company name a default picture and the company x address along with a menu system. 2. The layout in general, must be clear and straightforward. The homepage of the website must 3. clearly indicate its nature of business or products(s). The system should be capable of 4. redirecting the user to the homepage from any webpage within the website The system must provide details of its 5. entire product in details in order for the customer to select an item. The 6. menu system must take the x potential customer to the relevant page as selected through the navigating system. The website background colour must be 7. consistent. Currently there are no x preferences with regards to a colour. Customer(s) need to be able to attain 8. full information on their selected x product(s). 9. A database must exist to store product information and stock level The 10. system must be capable of i.e. x providing and sizes. 11. System must be able to allow a user to enter the product quantity required. x product information x x x x x

product description, available colour

Page 68

System should allow the client to add 12. new product(s) or remove product(s) if required from the database. The system must output good error 13. message so that any kind of user can understand it and it can help the user to understand the system better. 14. Customer(s) need to be able to enlarge an image if required. Customer should be made aware if 15. stock is not available through a x message on the screen The system should be able to add an 16. external shopping basket seamlessly along with an online payment system. The 17. system should only allow x customer(s) to purchase a product if only it is available. The system should not accept an order unless all mandatory fields in regards to 18. Personal Details, Shipping address and credit cards details are filled in by user. This will be done in liaison with the online payment system The system should have the capability 19. to provide information in regards to their order placed. The 20. system should have the x functionality of being able to carry out a quick search on its products. The system should not let users under 21. the age of 18 to view products within the Adult toy section. Customers should not be able to 22. register the New User login page without filling in all the mandatory fields. x x x x x x x x

Page 69

The system should liaise with a secure online payment system seamlessly. The 23. online payment system to be used will need to be discussed with the stakeholder. The system should prevent hackers 24. from attacking the system by restraining the inputs the system will authenticate. The system should have a vertical scroll bar for movement only. Horizontal bar 25. will not be preferred as a page without it would appear less cluttered and more user-friendly. The system must have a consistent 26. page layout through the website as it makes it more user-friendly. The system must layout the menu selection box consistently through the website i.e. it should be made available 27. 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. The system must use a consistent colour scheme throughout the website 28. along with a consistent font size and style. Web pages in relation to this ecommerce website should be able to 29. download graphics. instantly along with any x x x x x x x

Page 70

Appendix I The Test Plan

Title Purpose Author Outcome Secret Whisper Lingerie To test the functionality of the bras page Kunal Rai Return for any bug fixes Action 1. Move the mouse on the Lingerie button

Date Of Test

13/04/2005

Time Bug Details Successful (Y/N) y

Expected Result

2.

Click on Bras

2.

Click on the websites navigation system

Will open up a sub menu with the option of selecting Bras or Briefs and Thongs. Will open a new page with images of brands available. Click on the image or text and it will take the user to the relevant page Opens up relevant pages as shown on the navigation system. This time as user is within Briefs & thongs the navigation system Should have the option of going back to the will have instead of Lingerie, bras bra page and the sub menu will have the brands available. An alt tag will appear Secret Whisper Lingerie and will take the user to the homepage. It will open a new page with various sizes explained.

3.

Click on the company name

4.

Click on Size Check

Page 71

Action

Expected Result It will take you to a page where user will need to enter their order ID in order to search for their product ordered. Will open up a new page displaying the companys policy It will take you to the Shopping Basket page showing what you have purchased so far. A new page will open and will provide information on the store location. A new page opens and user is allowed to type in a brand name of item name.

Bug Details

Successful (Y/N) y

5.

Click on Track Order

6.

Click on Terms and Conditions

7.

Click on Shopping Basket

8.

Click on Store Location

9.

Click on Quick Search

10 .

11 .

A new page opens where user will potentially be able to email Click on Contact Us the stakeholder. (email function not supported by the web server) Will not be displayed for items that have the text currently out of Add to basket button available on one of the stock. brand chosen When clicked will open a new page

Page 72

Action 12 .

Expected Result Will display an enlarge version of the exact image on a new window. The pop up window will close after 15 secs. All images will have a product code, description and trade price. Along with trade price products will have a Sales price field too if they are placed on sale.

Bug Details

Successful (Y/N) y

Click on the images

13 .

Product description

Page 73

Title Purpose Author Outcome

Secret Whisper Lingerie To test the functionality of the Costumes page Kunal Rai Return for any bug fixes Date Of Test Action Expected Result Opens up relevant pages as shown on the navigation system i.e. collection, lingerie etc An alt tag will appear Secret Whisper Lingerie and will take the user to the homepage. It will open a new page with various sizes explained It will take you to a page where user will need to enter their order ID in order to search for their product ordered. Will open up a new page displaying the companys policy It will take you to the Shopping Basket page showing what you have purchased so far.

13/04/2005

Time Bug Details Successful (Y/N) y

1.

Click on the websites navigation system

Click on the company name

Click on Size Check

Click on Track Order

Click on Terms and Conditions

Click on Shopping Basket

Page 74

Action

Expected Result A new page will open and will provide information on the store location. A new page opens and user is allowed to type in a brand name of item name. A new page opens where user will potentially be able to email the stakeholder. (email function not supported by the web server) Will not be displayed for items that have the text currently out of stock. When clicked will open a new page Will display an enlarge version of the exact image on a new window. The pop up window will close after 15 secs. All images will have a product code, description and trade price. Those items that have a colour available will be displayed as Available colour where as those that dont will have Colour: Not Available. Same goes with size. Again items available on sale will have an extra field displayed called sale price and will have a background colour grey.

Bug Details

Successful (Y/N) y

Click on Store Location

Click on Quick Search

Click on Contact Us

10

Add to basket button

11

Click on the images

12 .

Product description

Page 75

Title Purpose Author Outcome

Secret Whisper Lingerie To test the functionality of the Shopping Basket page Kunal Rai Return for any bug fixes Date Of Test Action Expected Result Will have a message to it displaying view your shopping basket Will open a page where items selected by user will be displayed along with the required quantity and total price for that particular item. Then at the bottom of the screen it will have a sub total displaying what the user requires to pay. This will be calculated using the sum of total price of all goods along with delivery charge. A user will not be able to enter anything in this field Will open a new page where user will potentially be able to enter their details to purchase the item and be able to make a payment. An alt tag will appear Secret Whisper Lingerie and will take the user to the homepage.

13/04/2005

Time Bug Details Successful (Y/N) y

1.

Move the mouse on the Shopping Basket button

2.

Click on Shopping Basket

2.

Click on Check out

3.

Click on the company name

Page 76

Action

Expected Result It will open a new page with various sizes explained. It will take you to a page where user will need to enter their order ID in order to search for their product ordered. Will open up a new page displaying the companys policy

Bug Details

Successful (Y/N) y

4.

Click on Size Check

5.

Click on Track Order

6.

Click on Terms and Conditions

7.

Click on Shopping Basket

It will take you to the Shopping Basket page showing what you have purchased so far. A new page will open and will provide information on the store location. A new page opens and user is allowed to type in a brand name of item name. A new page opens where user will potentially be able to email the stakeholder. (email function not supported by the web server)

Should be removed from the page as user already all shopping basket

8.

Click on Store Location

9.

Click on Quick Search

Should have an additional functionality of searching through size

10 .

Click on Contact Us

Page 77

Action

Expected Result

Bug Details

Successful (Y/N)

11 .

Click on Empty Shopping Basket

Will empty the Shopping Basket and redirect the user to the homepage.

Page 78

Title Purpose Author Outcome

Secret Whisper Lingerie To test the functionality of the Sale items page Kunal Rai Return for any bug fixes Date Of Test Action Expected Result Opens up relevant pages as shown on the navigation system i.e. collection, lingerie etc An alt tag will appear Secret Whisper Lingerie and will take the user to the homepage. It will open a new page with various sizes explained It will take you to a page where user will need to enter their order ID in order to search for their product ordered. Will open up a new page displaying the companys policy It will take you to the Shopping Basket page showing what you have purchased so far.

13/04/2005

Time Bug Details Successful (Y/N) y

1.

Click on the websites navigation system

Click on the company name

Click on Size Check

Click on Track Order

Click on Terms and Conditions

Click on Shopping Basket

Page 79

Action

Expected Result A new page will open and will provide information on the store location. A new page opens and user is allowed to type in a brand name of item name. A new page opens where user will potentially be able to email the stakeholder. (email function not supported by the web server) Will not be displayed for items that have the text currently out of stock. When clicked will open a new page Will display an enlarge version of the exact image on a new window. The pop up window will close after 15 secs. All images will have a product code, description and trade price. Those items that have a colour available will be displayed as Available colour where as those that dont will have Colour: Not Available. Same goes with size. Along with trade price all products will have a Sales price field too.

Bug Details

Successful (Y/N) y

Click on Store Location

Click on Quick Search

Click on Contact Us

10

Add to basket button

11

Click on the images

12 .

Product description

Page 80

Title Purpose Author Outcome

Secret Whisper Lingerie To test the functionality of Add to Basket Kunal Rai Return for any bug fixes Action

Date Of Test

13/04/2005

Time Bug Details Successful (Y/N) y

Expected Result The add to basket will change colour when hovered over it by the user stating that the button can be selected. Will open a new page with images of product selected, item description, item brand, a field to enter the quantity required, a field to enter the colour required, filed to enter size required, trade price and a save item button. The image shown of the item can be clicked to see an enlarge version of the product selected. If the product has no colour it will be come up as as shown in the product. Quantity field will only accept up to 2 digits. An alt tag will appear Secret Whisper Lingerie and will take the user to the homepage.

1.

Move the mouse on the Add to basket button on one of the categories

2.

Click on Add to basket button

Needs to be placed below the image

2.

Enter a value in the quantity field

3.

Click on the company name

Page 81

Action

Expected Result It will open a new page with various sizes explained. It will take you to a page where user will need to enter their order ID in order to search for their product ordered. Will open up a new page displaying the companys policy It will take you to the Shopping Basket page showing what you have purchased so far. A new page will open and will provide information on the store location. A new page opens and user is allowed to type in a brand name of item name. A new page opens where user will potentially be able to email the stakeholder. (email function not supported by the web server)

Bug Details

Successful (Y/N) y

4.

Click on Size Check

5.

Click on Track Order

6.

Click on Terms and Conditions

7.

Click on Shopping Basket

8.

Click on Store Location

9.

Click on Quick Search

10 .

Click on Contact Us

Page 82

Action

Expected Result Carries out some validation. If quantity entered is less than 1 it will give an error. If all data entered are correct and passes through the validation it gets added to the shopping basket. User can now either continue shopping or go to shopping basket. Will display an enlarge version of the exact image on a new window. The pop up window will close after 15 secs.

Bug Details

Successful (Y/N)

11 .

Click on Save item

Should have a back button

12 .

Click on the images

Page 83

Title Purpose Author Outcome

Secret Whisper Lingerie To test the functionality of the Collection page Kunal Rai Return for any bug fixes Date Of Test Action Expected Result Opens up relevant pages as shown on the navigation system i.e. collection, lingerie etc An alt tag will appear Secret Whisper Lingerie and will take the user to the homepage. It will open a new page with various sizes explained It will take you to a page where user will need to enter their order ID in order to search for their product ordered. Will open up a new page displaying the companys policy A pop up will appear which allow users to add the website in their favourites

13/04/2005

Time Bug Details Successful (Y/N) y

1.

Click on the websites navigation system

Click on the company name

Click on Size Check

Click on Track Order

Click on Terms and Conditions

Click on Add to Favourites

Page 84

Action

Expected Result A new page will open and will provide information on the store location. A new page opens and user is allowed to type in a brand name of item name. A new page opens where user will potentially be able to email the stakeholder. (email function not supported by the web server) Will not be displayed for items that have the text currently out of stock. When clicked will open a new page Will display an enlarge version of the exact image on a new window. The pop up window will close after 15 secs.

Bug Details

Successful (Y/N) y

Click on Store Location

Click on Quick Search

Click on Contact Us

10

Add to basket button

11

Click on the images

Page 85

Action

Expected Result All images will have a product code, description and trade price. Those items that have a colour available will be displayed as Available colour where as those that dont will have Colour: Not Available. Same goes with size. Again items available on sale will have an extra field displayed called sale price and will have a background colour grey.

Bug Details

Successful (Y/N)

12 .

Product description

Page 86

Title Purpose Author Outcome

Secret Whisper Lingerie To test the functionality of the Adult Toy page Kunal Rai Return for any bug fixes Action

Date Of Test

13/04/2005

Time Bug Details Successful (Y/N)

Expected Result A login page will be displayed. An existing user over the age of 18 can enter this page using their email address and password that they entered at time of registration. New User will have the option to create an account. Opens up relevant pages as shown on the navigation system i.e. collection, lingerie etc An alt tag will appear Secret Whisper Lingerie and will take the user to the homepage. It will open a new page with various sizes explained It will take you to a page where user will need to enter their order ID in order to search for their product ordered.

1.

Click on the Adult Toy button

2.

Click on the websites navigation system

3.

Click on the company name

4.

Click on Size Check

5.

Click on Track Order

Page 87

Action

Expected Result Will open up a new page displaying the companys policy It will take you to the Shopping Basket page showing what you have purchased so far. A new page will open and will provide information on the store location. A new page opens and user is allowed to type in a brand name of item name. A new page opens where user will potentially be able to email the stakeholder. (email function not supported by the web server) Will not be displayed for items that have the textcurrently out of stock. When clicked will open a new page Will display an enlarge version of the exact image on a new window. The pop up window will close after 20 secs.

Bug Details

Successful (Y/N) y

6.

Click on Terms and Conditions

Terms and conditions require a few changes.

7.

Click on Shopping Basket

8.

Click on Store Location

Should just show the address of the company.

9.

Click on Quick Search

10 .

Click on Contact Us

11 .

Add to basket button

12 .

Click on the images

Page 88

Action

Expected Result All images will have a product code, description and trade price. Along with trade price products will have a Sales price field too if they are placed on sale. User will be logged out and redirected to the homepage.

Bug Details

Successful (Y/N)

13 .

Product description

14 .

Click on Log Out button

Page 89

Title Purpose Author Outcome

Secret Whisper Lingerie To test the functionality of the briefs page Kunal Rai Return for any bug fixes Action

Date Of Test

13/04/2005

Time Bug Details Successful (Y/N) y

Expected Result Will open up a sub menu with the option of selecting Bras or Briefs and Thongs. Will open a new page with images of brands available. Click on the image or text and it will take the user to the relevant page Opens up relevant pages as shown on the navigation system. This time as user is within Briefs & thongs the navigation system will have instead of Lingerie, bras and the sub menu will have the brands available. An alt tag will appear Secret Whisper Lingerie and will take the user to the homepage. It will open a new page with various sizes explained.

1.

Move the mouse on the Lingerie button

2.

Click on Briefs & thongs

2.

Click on the websites navigation system

Should have the option of going back to the bra page

3.

Click on the company name

4.

Click on Size Check

Page 90

Action

Expected Result It will take you to a page where user will need to enter their order ID in order to search for their product ordered. Will open up a new page displaying the companys policy It will take you to the Shopping Basket page showing what you have purchased so far. A new page will open and will provide information on the store location. A new page opens and user is allowed to type in a brand name of item name. A new page opens where user will potentially be able to email the stakeholder. (email function not supported by the web server) Will not be displayed for items that have the textcurrently out of stock. When clicked will open a new page

Bug Details

Successful (Y/N) y

5.

Click on Track Order

6.

Click on Terms and Conditions

7.

Click on Shopping Basket

8.

Click on Store Location

9.

Click on Quick Search

10 .

Click on Contact Us

11 .

Add to basket button available on one of the brand chosen

Page 91

Action

Expected Result Will display an enlarge version of the exact image on a new window. The pop up window will close after 15 secs. All images will have a product code, description and trade price. Along with trade price products will have a Sales price field too if they are placed on sale.

Bug Details

Successful (Y/N) y

12 .

Click on the images

13 .

Product description

Page 92

Appendix J The Stakeholder Evaluation Sheet

Evaluation Sheet Any Comment(s) Title: URL: Purpose: Evaluation Date: Author: Executed By: Secret Whisper Lingerie http://k.domaindlx.com/secretwhisper/index.html Evaluation of the website 13th April 2005 Kunal Rai Al Stanway I would like to do a thorough check on the search facility to 4 award a 5 in this category

On a scale of 1-5 how successful is the prototype at 1. achieving the functionality required for the E-Commerce Website? (with 5 being Brilliant and 1 being Poor)

Shopping basket which incorparates the ecommerce payment 2. What extra functionality would need to be added? system.

3.

Could potential customers use this system?

Given the above criteria, yes.

4.

Have you filled in the HCI score sheet?

Yes

No

Page 93

It now looks as if I may be able to take this further and eventually use it live on the web. 5. Are there any comments that you would like to make? Thank you.

Page 94

Appendix K The HCI Score Sheet

Web Site Score Sheet

Key: Ye s 2 N o 0 ? Any Comment(s) 1

Title: URL: Purpose: Evaluation Date: Author: Executed By:

Secret Whisper Lingerie http://k.domaindlx.com/secretwhisper/index.html Evaluation of the website 13th April 2005 Kunal Rai Al Stanway (Stakeholder)

Design:
1. Does the website have all information clearly presented? 2. Is the system easy to interact with? 3. Is it easy to distinguish between what can be selected or clicked in order to go to another page or do something? 2 2 2 2 2

4. Does the homepage give some kind of idea what the website is about? 5. Is the design of all pages within the website (excluding the homepage) consistent with presentable font(s) throughout the site?

Usability:

Page 95

6. Can a product easily be found within the website? 7. Can a product easily be selected if required? 8. Is product information clearly displayed?

2 2 2

Search is good Everything just 2 clicks awayideal!

Navigation:
All pages accessible from home page. 9. Does the website offer a complete navigation structure? 10 Is the site name present on all pages and does it take the user to the homepage? 2 2

Download Time:
11 Does the page and image load instantly for the website? 2

Colour:
12. Does the website use a consistent colour? 13. Is the colour used in the website user friendly (i.e. avoids use of extreme colours from the colour spectrum)? Sub-Total: Total (max. 26): 2 2 13 26

Page 96

Web Site Score Sheet

Key: Ye s 2 N o 0 ? Any Comment(s) 1

Title: URL: Purpose: Evaluation Date: Author: Executed By:

Secret Whisper Lingerie http://k.domaindlx.com/secretwhisper/index.html Evaluation of the website 13th April 2005 Kunal Rai Lousie

Design:
1. 2. 3. 4. 5. Does the website have all information clearly presented? Is the system easy to interact with? Is it easy to distinguish between what can be selected or clicked in order to go to another page or do something? Does the homepage give some kind of idea what the website is about? Is the design of all pages within the website (excluding the homepage) consistent with presentable font(s) throughout the site? 2 2 2 2 1 Should have an introduction to the company On homepage rather than just pictures

Usability:
6. 7. Can a product easily be found within the website? Can a product easily be selected if required? 2 2

Page 97

8.

Are product information clearly displayed?

The images should be aligned so they are level on the same row Some images look squashed

Navigation:
9. 10. Does the website offer a complete navigation structure? Is the site logo present on all pages and does it take the user to the homepage? 2 1 No back button, although internet explorer does allow you to go back Wouldnt really call the title a logo though?

Download Time:
11. Does the page and image load instantly for the website? 0 Very quickly but not instaneous

Colour:
12. 13. Does the website use a consistent colour? Is the colour used in the website user friendly (i.e. avoids use of extreme colours from the colour spectrum)? Sub-Total: Total (max. 26): 2 Not boring, but not garish easy on the eye 2 9 1 3 21

Page 98

Web Site Score Sheet No ? Key: Yes 2 0 1 Title: URL: Purpose: Evaluation Date: Author: Executed By: Design: 1. Does the website have all information clearly presented? 2 Secret Whisper Lingerie http://k.domaindlx.com/secretwhisper/index.html Evaluation of the website 13th April 2005 Kunal Rai Clare Brolly

Any Comment(s)

The add to basket button could be clearer as to which product it belongs to.

2. 3. 4. 5.

Is the system easy to interact with? Is it easy to distinguish between what can be selected or clicked in order to go to another page or do something? Does the homepage give some kind of idea what the website is about? Is the design of all pages within the website (excluding the homepage) consistent with presentable font(s) throughout the site?

2 2 2 2

Usability: 6. 7. Can a product easily be found within the website? Can a product easily be selected if required? 2 2

Page 99

8.

Are product information clearly displayed?

Navigation: 9. 10. Does the website offer a complete navigation structure? Is the site logo present on all pages and does it take the user to the homepage? 2 2

Download Time: 11. Colour: 12. Does the website use a consistent colour? 13. Is the colour used in the website user friendly (i.e. avoids use of extreme colours from the colour spectrum)? Sub-Total: Total (max. 26): 2 2 13 26 Does the page and image load instantly for the website? 2

Page 100

Web Site Score Sheet Key: Yes ? 2 Title: URL: Purpose: Evaluation Date: Author: Executed By: Design: 1. Does the website have all information clearly presented? 2 Secret Whisper Lingerie http://k.domaindlx.com/secretwhisper/index.html Evaluation of the website 11th April 2005 Kunal Rai Lorraine Watson 1

No

Any Comment(s) 0

Great positioning of the payment methods that are accepted.

2.

Is the system easy to interact with?

2 Changing colour of the links when the cursor is placed over the link-helps you to see what you are selecting. The hand that appears and tags point out that a link can be accessed. E.g. on the two main pictures on the home page-you are shown that you can progress further through the site from the pictures. I would also recommend that the line sell quality lingerie at affordable prices was made more noticeable to the customers eye so that it becomes clearer as to what is being sold instead of having to presume from the pictures and links provided.

3.

Is it easy to distinguish between what can be selected or clicked in order to go to another page or do something?

4.

Does the homepage give some kind of idea what the website is about?

Page 101

5.

Is the design of all pages within the website (excluding the homepage) consistent with presentable font(s) throughout the site?

The main layout and techniques used in the contents etc are maintained throughout the whole site-giving a structure to the whole site.

Usability: For example, it is not possible to create a search for black bras -which might be a more beneficial search for people who just want a bra but dont know any specific makes.

6.

Can a product easily be found within the website?

7.

Can a product easily be selected if required?

2 When selecting a product, and the larger picture appears I would also maybe insert a few sentences that describe the product to the customer- e.g. Fabric type

8.

Are product information clearly displayed?

Navigation: Access to the homepage is available from each page, although on the tag that appears when you select the link, maybe insert back to homepage so the user knows where the link takes them. The logo does not move, as it maintains the same position throughout the whole site. The link takes you back to the homepage.

9.

Does the website offer a complete navigation structure?

10.

Is the site logo present on all pages and does it take the user to the homepage?

Page 102

Download Time: 11. Colour: Plain and simple but consistent-does not cause the user to want to look away from the site like yellow for example. Again as above. 2 12 1 0 25 Does the page and image load instantly for the website? 2

12. Does the website use a consistent colour?

13.

Is the colour used in the website user friendly (i.e. avoids use of extreme colours from the colour spectrum)? Sub-Total: Total (max. 26):

Page 103

Web Site Score Sheet

Key: Ye s 2 N o 0 ? Any Comment(s) 1

Title: URL: Purpose: Evaluation Date: Author: Executed By:

Secret Whisper Lingerie http://k.domaindlx.com/secretwhisper/index.html Evaluation of the website 12/04/05 Kunal Rai Ketan Mistry

Design:
1. 2. Does the website have all information clearly presented? Is the system easy to interact with? Is it easy to distinguish between what can be selected or clicked in order to go to another page or do something? Does the homepage give some kind of idea what the website is about? Is the design of all pages within the website (excluding the homepage) consistent with presentable font(s) throughout the site? 2 2 2 2 Didnt know that the word has to be clicked when going to a link

3.

4. 5.

Usability:
6. Can a product easily be found within the website? 2

Page 104

7. 8.

Can a product easily be selected if required? Are product information clearly displayed?

2 2

Navigation:
9. 10. Does the website offer a complete navigation structure? Is the site logo present on all pages and does it take the user to the homepage? 2 1 Lingerie menu not visible in the sub-menu

Download Time:
11. Does the page and image load instantly for the website? 2

Colour:
12. Does the website use a consistent colour? 13. Is the colour used in the website user friendly (i.e. avoids use of extreme colours from the colour spectrum)? Sub-Total: Total (max. 26): 2 2 11 1 1 23

Page 105

Web Site Score Sheet

Key: Ye s 2 N o 0 ? Any Comment(s) 1

Title: URL: Purpose: Evaluation Date: Author: Executed By:

Secret Whisper Lingerie http://k.domaindlx.com/secretwhisper/index.html Evaluation of the website Kunal Rai Matthew Wright

Design:
1. 2. 3. 4. 5. Does the website have all information clearly presented? Is the system easy to interact with? Is it easy to distinguish between what can be selected or clicked in order to go to another page or do something? Does the homepage give some kind of idea what the website is about? Is the design of all pages within the website (excluding the homepage) consistent with presentable font(s) throughout the site? x x x x x

Usability:
6. Can a product easily be found within the website? x Search tool is limited to a selection from a drop-down menu. Could do with a search based on text

Page 106

7. 8.

Can a product easily be selected if required? Are product information clearly displayed?

x x

Navigation:
9. 10. Does the website offer a complete navigation structure? Is the site logo present on all pages and does it take the user to the homepage? x x Logo is present but it takes you somewhere else on the contact us page

Download Time:
11. Does the page and image load instantly for the website? x

Colour:
12. Does the website use a consistent colour? 13. Is the colour used in the website user friendly (i.e. avoids use of extreme colours from the colour spectrum)? Sub-Total: Total (max. 26): x x 12 1 0 25

Page 107

Web Site Score Sheet

Key: Ye s 2 N o 0 ? Any Comment(s) 1

Title: URL: Purpose: Evaluation Date: Author: Executed By:

Secret Whisper Lingerie http://k.domaindlx.com/secretwhisper/index.html Evaluation of the website 12th April 2005 Kunal Rai Pankaj Anand

Design:
1. 2. 3. 4. Does the website have all information clearly presented? Is the system easy to interact with? Is it easy to distinguish between what can be selected or clicked in order to go to another page or do something? Does the homepage give some kind of idea what the website is about? Is the design of all pages within the website (excluding the homepage) consistent with presentable font(s) throughout the site? 2 2 2 2 Some of the thumbnails are 93x148 px, others are squashed to 80x70

5.

Usability:
6. Can a product easily be found within the website? 2

Page 108

7. 8.

Can a product easily be selected if required? Are product information clearly displayed?

2 2

Navigation:
9. 10. Does the website offer a complete navigation structure? Is the site logo present on all pages and does it take the user to the homepage? 2 2 The site logo could be improved

Download Time:
11. Does the page and image load instantly for the website? 2

Colour:
12. Does the website use a consistent colour? 13. Is the colour used in the website user friendly (i.e. avoids use of extreme colours from the colour spectrum)? Sub-Total: Total (max. 26): 2 2 12 0 1 25

Page 109

Appendix L The Prototype Evaluation Score sheet

Web Site Score Sheet Key: Yes No 2
Name of Site: URL: Field: Evaluation Date:

? 1

Secret Whisper http://k.domaindlx.com/secretwhisper/index.html Lingerie 13th April 2005

Contents: 1. 2. 3. 4. 5. 6. 7. 8. When visiting a website does the homepage clearly indicate its nature of business or product(s)? Is product information provided? Does the website provide a reason as to why a customer requires a particular product? Are there special emphases on sales items or on the launch of a new product on the website? Does the website provide the option to evaluate the product(s) offer with its competitors? Has the website got the option of helping the customer to make a decision on a particular product? When making a purchase is everything clearly explained? Is there any kind of after sales customer service?

Navigation: 9. Design: 10. Does the website have a consistent page design with presentable font(s) throughout the site? 11. Does the page and image load instantly for the website? 12. Does the website offer the option to skip flash intro? Sub-Total: Total (max. 24): 8 3 17 1 Does the website offer a complete navigation structure?

Page 110

Appendix M The W3C Accessibility Checklist

Web Site Checklist Key: Yes No Any Comment(s) x Title: URL: Purpose: Evaluation Date: Author: Secret Whisper Lingerie http://k.domaindlx.com/secretwhisper/index.html Evaluation of the website 18th April 2005 Kunal Rai x

1.

Has an ALT tag been placed for all images and graphical representation of text? Does the foreground and background colour combinations provide sufficient contrast?

See figure 6 in the report

2.

See figure 6,7, 9 and 12 in the report

3.

Are style sheets used to format text and control layout?

See Appendix

4.

Is the style of presentation consistent across all pages?

5.

Is the HTML syntax validated with W3C? Validate style sheets (e.g., CSS).

Yes

Page 111

6.

Is the CSS syntax validated with W3C?

7.

Has a text-only browser or emulator been used to test the system?

8.

Are product information clearly displayed?

9.

Has several browsers, old and new been used to test the system?

Tested through Browser cam. See section 7.2.7 in the report

10.

Have people with disabilities been invited to review the system?

Due to the time constraint it did not get carried out.

11.

Do headings on the page have appropriate HTML tags such as <h1>and <h2>? Are the font styles defined as relative in the CSS file? Are extremely precise mouse positioning avoided?

12. 13.

Page 112

Appendix N The Project Extension (Screen shots)

Figure 15 The Quick Search facility

Page 113

Send Message button

Figure 16 The Terms & Conditions page

Figure 17 The Contact us page

Enter Order ID here

Figure 18 The Track Order facility

Page 114

Figure 19 The Adult Toy login page

Figure 20 New User registration page

When users clicks on the submit button runs an input validation to ensure all required fields are filled in.

Page 115

Appendix O The Login Code

<% <!--#include file="connection.inc"--> %> <% '--------------------------------------'Global declaration of variable '--------------------------------------dim strSQL 'dim strUpdate dim rs ' dim intRank 'dim intSum 'set adoRsExperts = Server.CreateObject("ADODB.RecordSet") 'set stringKeyword = request.Form("keyword") 'set adoRsExperts2 = Server.CreateObject("ADODB.RecordSet") 'Create a Recordset using CursorType 1, which allows the number of 'records returned to be checked set rs = Server.CreateObject("ADODB.recordset") rs.CursorType = 1 %> <% 'Fetch the username and password provided from default.html strUser = request.form("username") strPass = request.form("password") %> <% 'Query the database for a record matching the specified username/password strSQL = "SELECT User.fullname, User.DOB, User.password, User.email FROM [User] WHERE User.email = '" & strUser & "'" & _ "AND User.password = '" & strPass & "' AND ((((Date()-[DoB])/365.25)>18)); " rs.open strSQL, objConn, 3 'Make sure there is only one record in the recordset (zero records means 'an invalid ID or password, more than one means multiple matching records 'exist and something is wrong, less than zero means something went wrong, 'probably an invalid recordset or incorrect cursor type) numRecs = rs.RecordCount if (numRecs = 0) then 'An invalid user ID or password was entered response.write("The username or password entered were not valid, please try again.") response.redirect("default.html") elseif (numRecs > 1) then

Page 116

elseif (numRecs < 0) then 'Unknown error response.write("An unknown error has occured, please report this to CMS right away.") else 'Everything worked, store the user number (key field of user table) 'as a session variable so it can be used in queries on other pages session("UserID") = rs.Fields("email") 'Close the recordset & connection objConn.close 'close connection set objConn = Nothing 'Redirect to the next page Response.Redirect("toy.asp") end if 'Close the recordset & connection objConn.close 'close connection set objConn = Nothing %> 'Code for Checksession.asp (page is included at the top of each page within the web-app, makes sure you're still logged in.) <% response.write("<font size=1>Connection Number: " & session.SessionID & "</font>") %> <% Session.timeout = 30 'Redirect to the login page unless a valid Session object exists for 'this user and the UserID session variable is not null. This should 'also cause it to redirect after the session object expires. if (session("User_id") = "") then response.redirect("default.html") else 'Open a database connection Set objConn = Server.CreateObject("ADODB.Connection") strConnect = "DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" & _ Server.MapPath("database/secret_whisper.mdb") objConn.open strConnect 'Create a default recordset set rs = Server.CreateObject("ADODB.recordset") end if %>

Page 117