Documente Academic
Documente Profesional
Documente Cultură
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.
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
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.
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
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%
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
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 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.
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
Receive Confirmation
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
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.
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
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.
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
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/
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.
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
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
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
Company Name
Navigation
Picture
Company Address/Links
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
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
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 ?
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
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 ]
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
[ No ]
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
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
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
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
Date Of Test
13/04/2005
Expected Result
2.
Click on Bras
2.
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.
4.
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.
6.
7.
8.
9.
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
13 .
Product description
Page 73
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
1.
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 Contact Us
10
11
12 .
Product description
Page 75
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
1.
2.
2.
3.
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.
5.
6.
7.
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.
9.
10 .
Click on Contact Us
Page 77
Action
Expected Result
Bug Details
Successful (Y/N)
11 .
Will empty the Shopping Basket and redirect the user to the homepage.
Page 78
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
1.
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 Contact Us
10
11
12 .
Product description
Page 80
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
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.
2.
3.
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.
5.
6.
7.
8.
9.
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 .
12 .
Page 83
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
1.
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 Contact Us
10
11
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
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
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.
2.
3.
4.
5.
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.
7.
8.
9.
10 .
Click on Contact Us
11 .
12 .
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 .
Page 89
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
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.
2.
2.
3.
4.
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.
6.
7.
8.
9.
10 .
Click on Contact Us
11 .
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 .
13 .
Product description
Page 92
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.
4.
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
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
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
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.
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.
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
2.
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.
7.
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.
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.
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
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
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
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
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
? 1
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
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?
2.
3.
See Appendix
4.
5.
Is the HTML syntax validated with W3C? Validate style sheets (e.g., CSS).
Yes
Page 111
6.
7.
8.
9.
Has several browsers, old and new been used to test the system?
10.
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
Page 113
Page 114
When users clicks on the submit button runs an input validation to ensure all required fields are filled in.
Page 115
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