research study and system develpment of e commerce platorms for spaniards in the uk pdf

RESEARCH STUDY AND SYSTEM DEVELOPMENT OF

E-COMMERCE PLATFORMS FOR SPANIARDS IN THE UK

By

José Andrés Durán Vargas

Supervised by

Craig Ramsey

Presented to School of Computing

University of Dundee

in Partial Fulfillment of the Requirements of the Degree

MSc Information Technology and International Business

University of Dundee

September, 2013

II

EXECUTIVE SUMMARY

With the predominant objective of selling goods and products online, the business-to-

consumer prospect of e-commerce is nowadays the most distinct business use of the World

Wide Web.

The current deep Spanish recession has led to a mass exodus of young workers to the

UK. Prior studies has shown that food is what is being missed the most when Spaniards go

abroad. This project verify that, in effect, the above premise is true and explore the feasibility

of developing a viable solution to address this problem in the form of an e-commerce site

based on user-centred design approach.

In order to develop a user-friendly and accessible e-commerce website suitable for the

above-mentioned purpose, a large number of technologies and techniques are discussed,

compared and implemented. These include client and server side scripting approaches,

relational databases and programming languages.

Suggesting the combination of PHP and MySQL to solve the problem, the research

conducted for this paper shows that the growing number of Spanish settled in the UK require a

bespoke solution to effectively meet their food needs

III

DECLARATIONS

“I declare that the special study described in this dissertation has been carried out and

the dissertation composed by me, and that the dissertation has not been accepted in fulfilment

of the requirements of any other degree or professional qualification.”

José Andrés Durán Vargas,

Student

"I certify that José Andrés Durán Vargas has satisfied the conditions of the Ordinance

and Regulations and is qualified to submit this dissertation in application for the degree of

Master of Science."

Craig Ramsay,

MSc Supervisor

IV

ACKNOWLEDGEMENTS

I would like to express my sincere thanks to Dr Craig Ramsey for providing valuable

advice that ensured the project was completed and his willingness to help and supervise this

project

This dissertation is dedicated to my parents and my friend Jessica for her tireless

support, encouragement and help throughout the project.

V

TABLE OF CONTENT

Chapter 1: Background Analysis.......................................................................................1

1.1 Introduction ..............................................................................................................1

1.2 Motivation and research objective ............................................................................1

1.3 E-commerce Description ..........................................................................................2

1.4 Research Method ......................................................................................................2

1.5 Ethics .......................................................................................................................3

1.6 Usability and User Experience ..................................................................................3

Chapter 2: Customer Research .........................................................................................4

2.1 Quantitative Analysis ...............................................................................................4

2.1.1 Individual Backgrounds .....................................................................................5

2.1.2 Attitude toward e-commerce .............................................................................6

2.1.3 Desirable Spanish products in the UK ...............................................................6

2.2 Observations ............................................................................................................8

2.3 Conclusions ..............................................................................................................8

Chapter 3: Comparision of Technology Options ............................................................ 10

3.1 Common choices of programming languages and platforms used in popular websites . 10

3.2 Programming languages ......................................................................................... 10

3.2.1 C/C++: ............................................................................................................ 11

3.2.2 Perl ................................................................................................................. 11

3.2.3 PHP ................................................................................................................. 11

3.2.4 ASP.net ........................................................................................................... 11

3.2.5 Conclusions on Programming Languages: ....................................................... 12

3.3 Relational database management systems ............................................................... 12

3.3.1 Oracle ............................................................................................................. 13

3.3.2 Microsoft SQL Server ..................................................................................... 13

3.3.3 PostgreSQL ..................................................................................................... 13

3.3.4 Conclusions on Database Management Systems .............................................. 13

Chapter 4: Accesibility, Usability, Firendly User Experience and Related Techonolgies .. 15

4.1 How to Build Friendly User Interface and Experience ............................................ 15

4.2 How to Improve Cccessibility................................................................................. 17

4.3 Related Technologies ............................................................................................. 17

4.3.1 HTML, XML and XHTML ............................................................................. 17

4.3.2 CSS ................................................................................................................. 19

VI

4.3.3 JAVASCRIPT and jQUERY ........................................................................... 19

4.4 Summary ................................................................................................................ 20

Chapter 5: System Design and Modeling ........................................................................ 21

5.1 System Model ........................................................................................................ 21

5.1.1 System Data Flow ........................................................................................... 21

5.1.2 System Components ........................................................................................ 22

5.1.3 System Workflow Design and Function Module .............................................. 22

5.1.4 Functional Decomposition Diagram ................................................................ 24

5.1.5 PHP-MYSQL Model ....................................................................................... 24

5.1.6 Folders Organization and Password Protection ................................................ 25

5.2 Database design ...................................................................................................... 26

5.2.1 Physical Design and Requirement Analysis ..................................................... 26

5.2.2 Database logic structure design........................................................................ 27

Chapter 6: Initial prototyping and evaluation ................................................................ 30

6.1 User interface design .............................................................................................. 30

6.1.1 Paper Prototypes Overview ............................................................................. 30

6.1.2 User Evaluation of Paper Prototypes................................................................ 31

6.2 Functional Prototype Design................................................................................... 32

6.2.1 Functional Prototype Overview: ...................................................................... 32

6.2.2 User Evaluation of the First Functional Prototype ............................................ 33

Chapter 7: Application Development .............................................................................. 37

7.1 Homepage .............................................................................................................. 37

7.2 Product description ................................................................................................. 40

7.3 User registration ..................................................................................................... 42

7.4 User login ............................................................................................................... 44

7.5 My basket and checkout ......................................................................................... 46

Chapter 8: Final evaluation ............................................................................................. 50

8.1 Heuristic Evaluation ............................................................................................... 50

8.1.1 Visibility of System Status .............................................................................. 50

8.1.2 Match between the System and the Real World ............................................... 51

8.1.3 User Control and Freedom............................................................................... 51

8.1.4 Consistency and Standards .............................................................................. 51

8.1.5 Error Prevention .............................................................................................. 52

8.1.6 Recognition Rather than Recall ....................................................................... 52

8.1.7 Flexibility and Ease of Use .............................................................................. 53

VII

8.1.8 Aesthetic and Minimalist Design ..................................................................... 53

8.1.9 Help Users Recognise, Diagnose, and Recover from Errors ............................. 53

8.1.10 Help and Documentation ................................................................................. 54

8.1.11 Conclusion on Heuristic Evaluation: ................................................................ 54

8.2 User Testing ........................................................................................................... 54

8.2.1 Method ............................................................................................................ 54

8.2.2 User Testing Results ........................................................................................ 55

Chapter 9: Summary and Conclusions ........................................................................... 57

Chapter 10: Further work ................................................................................................. 58

10.1 Further Technical implementations ......................................................................... 58

10.2 Further Research Study .......................................................................................... 58

Resources ........................................................................................................................ 60

Appendice ........................................................................................................................ 63

VIII

LIST OF FIGURES AND TABLES

Figure [1]: Research Method ...............................................................................................3

Figure [2]: Individual Backroung Charts .............................................................................5

Figure [3]: Attitude Toward E-Commerce Charts ................................................................6

Figure [4]: Desirable Products Chart ...................................................................................7

Figure [5]: Title Attribute .................................................................................................. 16

Figure [6]: Data Flow Diagram ......................................................................................... 21

Figure [7]: Customer Use Case Overview ......................................................................... 22

Figure [8]: Admin Use Case Overview.............................................................................. 23

Figure [9]: Functional Decomposition Diagram ................................................................ 24

Figure [10]: PHP-MySQL Model ........................................................................................ 25

Figure [11]: Folders Organization ....................................................................................... 25

Figure [12]: ER Diagram .................................................................................................... 29

Figure [13]: Paper Prototypes Overview ............................................................................. 30

Figure [14]: Functional Prototype Overview ....................................................................... 33

Figure [15]: User Operation Centre ..................................................................................... 37

Figure [16]: HomePage ....................................................................................................... 39

Figure [17]: Navigation Module .......................................................................................... 40

Figure [18]: Product Description ......................................................................................... 41

Figure [19]: LightBox v2.6 ................................................................................................. 42

Figure [20]: Form Flowchart ............................................................................................... 43

Figure [21]: Invalid Registration Form with Errors ............................................................. 44

Figure [22]: Cookies Disclaimer ......................................................................................... 45

Figure [23]: My Basket ....................................................................................................... 47

Figure [24]: Purchase Completed ........................................................................................ 49

Table [1]: Programmig Languages Used in Most Popular Websites ................................. 10

Table [2]: Common HTML Elements .............................................................................. 18

Table [3]: Folders Description ......................................................................................... 26

Table [4]: Carts Database Table ....................................................................................... 28

Table [5]: User Testing Data ............................................................................................ 55

CHAPTER 1: BACKGROUND ANALYSIS

1


1.1 INTRODUCTION

This project is driven by the author’s on going interest in interdisciplinary research on

international commerce and information technology applications by carrying out an

independent research-oriented project involving the knowledge and learning gained during the

Master of Science course in International Business and Information Technology. Therefore,

business and Applied Computing are combined in this project; however, this research is mostly

focused on the technology area.

1.2 MOTIVATION AND RESEARCH OBJECTIVE

For decades, Spain has had the highest immigration levels in Europe; however, Spain´s

population fell last year for the first time in decades due to a major economic crisis. However,

in their latest analysis, the statistical office of the European Union (Eurostat) [1] indicates that

economic collapse in Spain have made the UK the new main destination for migrants from all

over the world, including Spaniards.

This deep Spanish recession has led not only to a drop in immigration but also to a mass

exodus of young national workers [2]. The most recent data from Spain´s National Institute of

Statistics point out that the jobless rate among adults under 25 years old reached 57 per cent in

the first quarter of 2013.

The paper called “Determinants of International Migration” published by the

University of Oxford’s claims that the U.K. has been the biggest destination for emigrating

Spaniards for eight of the past 10 years for which data is available, nonetheless, over the past

five years, the number of Spaniards living in the U.K. has drastically increased by a third, and

the volume of National Insurance Number applications received by the Department for Work

and Pensions by Spaniards over the last 12 months was second only to those made by

Pakistani’s as the highest number of foreign national requests.[3]

According to a survey conducted by the tour operator Skyscanner which involved 2.500

people, the thing that the 55% of the Spaniards miss the most when they go abroad is precisely

their home food [4].

In view of the above, the main objective of this research will determine the extent to

which this may be a problem for Spanish migrants and visitors in the UK to explore the

http://www.imi.ox.ac.uk/

http://en.wikipedia.org/wiki/National_Insurance_number


2

feasibility of developing a viable solution to address this problem in the form of an e-commerce

site. A secondary aim of the study is to identify patterns of how people engage with e-commerce

sites effectively by providing an overview of relevant interface and an interactive design which

would be able to analyse these patterns and their performance in order to create a usable and

user friendly e-commerce framework 1 . Chapter 4 later will discuss user experience and

accessibility.

1.3 E-COMMERCE DESCRIPTION

E-commerce is nowadays one of the most promising applications of IT regarding trade

in international business activities, it is intelligent to understand that the process of buying over

the internet is present nearly worldwide.

Over the last years e-commerce has been continually increasing in scale. In order to

contain success and competitiveness, strong buyers-supplier relationships would certainly lead

to rising benefits, thus, any e-commerce business has to attract new users and preserve existing

ones [5].

E-commerce platforms are a type of web applications, most websites must provide some

transaction functions, maintenance, and reliable storage services and thereupon, these

characteristics also apply to e-commerce systems. Transaction activities are required to a

number of database queries and some others interactions, such as payment options and shipping

[6, 7].

1.4 RESEARCH METHOD

In order to achieve this study purpose, a wide range of interesting patterns, as well as

user and usability requirements are gathered from online questionnaires. Following this, the

GUI is designed and analysed with users, allowing the patterns to be tested. Then, an early

prototype is developed, after an initial contact with the first functional prototype, the

evaluations took place in the form of research where participants were asked to complete an

usability and user experience interview followed by a new contact with the system where users

were required to perform a number of tasks. The interactive cycle between users and the e-

commerce framework will not be completed until the web site entirely responds to user needs.

Feedbacks were obtained in the form of user verbalization, using interview tools, and

performance measurement by observation protocols. To allow this feedback to be processed, in

1 The final product can be found at : http://namek.computing.dundee.ac.uk/2012-msc/iberiancorner/

http://namek.computing.dundee.ac.uk/2012-msc/iberiancorner/


3

the case of interview, a series transcripts were written down, while with regard to the case of

observation, users screens were recorded on video for deeper analysis.

Figure [1] Research Method

1.5 ETHICS

This project has been carried out under the authorization of the Ethics committee of the

School of Computing in the University of Dundee and acknowledge by all the standards of code

of practice stated bye the same. Participants have been provided with exhaustive information

sheets and consent forms which contain their compliance to take part in this research.

1.6 USABILITY AND USER EXPERIENCE

In order to enhance the use and reliability of the final product, user experience was very

important to this research. This concept is closely related to usability, however, user experience

is also about providing the user with a gratifying experience [8]. On the basis of practice,

usability has plenty of definitions. Nonetheless, most of them refer to each other and incorporate

close aspects. In ISO 9241-11 (2008), the ISO defines usability as follows:

“The extent to which a product can be used by specified users to achieve specified

goals with effectiveness, efficiency and satisfaction in a specified context of use.” [9]

The definition of user experience is more focused on satisfaction. The ISO 9241-210

(2009) defines user experience as:

“A person's perceptions and responses that result from the use or anticipated use of a

product, system or service.”[10]

This project takes into account both usability and user experience.

CHAPTER 2: CUSTOMER RESEARCH

4


This section will analyse results from the anonymous online questionnaire survey2. The

objective was to determine what kind of Spanish foods participants miss most while living in

the UK, main difficulties finding those products and the level of willingness to acquire them

through an e-commerce web system.

According to specific inclusion criteria3, participants were selected from a wide range

of UK-Based Societies of Spanish on social networks in order to reach a large sample audience.

An invitation was issued to various Social Networking groups to participate in the study.

Facebook groups such as “Españ oles en Londres”,” Españoles en Manchester” and “Españoles

en Glasgow” provided a large number of suitable responses within a very short time period

which was a basis for the discussion.

2.1 QUANTITATIVE ANALYSIS

Assessment was conducted through questionnaires with answers on multi-choice

questions. This system was used to measure and describe the responses of participants. The

questionnaire analysis was carried out with the aids of statistical charts created with Google

Drive Forms to arrive at a clear representation of the data.

175 responses were returned, the returned questionnaires were filtered in order to

establish the validity of samples. Only 1 unavailable questionnaire were eliminated due not to

meet the inclusion criteria so that 174 questionnaires were left. Even though not all respondents

answered all the questions, the outcomes of the survey ensure acceptable levels of accuracy

since the sample is relevant, representative and large enough.

The survey samples include 55 male respondents accounting for 32 percent of the total

number and 118 female respondents accounting for 68 percent. Of these, 80 have lived in the

UK for less than one year (46%), 58 between one and three years (33%) and 36 for more than

three years (21%)4. The questionnaire items are sorted into three key categories: Individual

background, attitude toward e-commerce and desirable Spanish products in the UK

2 A copy of the corresponding questionnaire have been attached as part of the appendix (see appendix [6a]. 3 Spaniards or people from other nationalities over 18 years who are familiar with Spanish items and live or lived

in the UK 4 Raw data and more detailed information can be found in appendix [1]


5

43%

33%

21%

Time living in the UK (Years)

Less than 1 Betweeen 1 and 3 More than 3

7%

61%

0%

16%

10%

6%

Occupation

Freelance Employee Retired Student Job Seeker Others

80%

20%

Difficuleties when finding Spanish products in

the UK?

Yes No

2.1.1 INDIVIDUAL BACKGROUNDS

%

Figure [2] Individual Background Charts

67%

31%

1%

Age

18- 30 31 - 45 46 - 60 Over 60

32%

68%

Gender

Male Female


6

20%

44%

24%

13%

Attitude Toward E-commerce

Highly confident Good Average Low

2.1.2 ATTITUDE TOWARD E-COMMERCE

Figure [3] Attitude toward E-commerce Charts

2.1.3 DESIRABLE SPANISH PRODUCTS IN THE UK

Participants were required to select from an extensive list of options all their preferred

Spanish items which, from their point of view, are either arduous or impossible to find in UK

stores.

In order to define the most desirable items, an item has been considered desirable when

that particular item is chosen by at least a quarter of the participants, in other words, only

products which exceed 43 clicks out of 174 were taken into account.

60%20%

13%

7%

Interest in Acquiring Spanish Items Online

Very interested Interested Neutral Not Interested


7

Figure [4] Desirable Products Chart

52%

44%

39%

38%

37%

37%

36%

33%

32%

30%

30%

30%

29%

29%

29%

29%

29%

28%

27%

26%

26%

25%

25%

25%

19%

Jamon Serrano (Serrano Ham)

Colacao

Pulpo (Octopus)

Palmeritas de Chocolate

Calamar (Squid)

Morcilla

Lomo Embuchado (Pork Loin)

Pipas de Girasol (Sunflower Seeds)

Pimientos de Padron (Padron Peppers)

Aceite de olive (Olive oil)

Chorizo

Queso Curado (Cured Cheese)

Colorante para Paella (Paella Colorant)

Empanada Gallega

Lentejas (Lentils)

Queso Semicurado (Semi cured…

Turron

Mantecados y Polvorones

Boquerones (Anchovies)

Ensaimadas

Natillas

Chistorra

Pimentón Dulce (Sweet Pimenton)

Pimientos de Piquillo (Piquillo Peppers)

Salchichon

0 10 20 30 40 50 60

Item

Percentage of user who selected the item

Desirable Spanish products in the UK


8

2.2 OBSERVATIONS

1. The vast majority of Spaniards living in the UK are young females who have

recently moved to the UK in order to work.

2. 80 percent of the respondents experience issues finding their favourite Spanish food.

3. Only 13 percent of the respondents do not feel comfortable with e-commerce,

however, 93 percent are interested in buying Spanish products over the Internet as

long as prices are not abusive.

4. The majority of the respondents agreed on the need of certain specific products.

5. In reply to the open question: “Have you ever experience any difficulty finding those

products in the UK? If yes, please, describe what those difficulties are” A large

number of participants stressed that despite some of these products do exist in the

UK and are regularly available, the main problem is that the quality levels of these

products/brands are below acceptable tolerance levels.

2.3 CONCLUSIONS

Beyond the problem of the lack of items, those that happen to be available are associated

with lower-quality products. For that reason, undertaking this type of e-commerce website

should guarantee top-quality products, this can be best achieved strategically by dealing with

the leading brand in the sector and designation of origin products.

This customer research has also revealed that although 87 percent of potential customers

feel confident or very confident with e-commerce, 20 percent of potential customers do not feel

comfortable with online shopping due to a lack of reliability.

The more confidence and trust users develop, the more estimable and frequent the

purchases they will be willing to carry out.

A suitable way to enhance e-commerce trust is paying special attention to the causes

that customers might associate with credibility, aside from a professional and minimal design,

and the absence of typos and grammatical errors in the content of the website, the following

sections should improve user’s confidence:

1. “How to Buy”: section where the process of shopping is step by step clearly explained

2. “Contact Us” form and contact information such as contact number and e-mail findable

from any page.

http://usabilitygeek.com/will-the-internet-make-grammar-obsolete/


9

3. “Privacy Policy” section ensuring that all customer´s information is confidential and

safely processed explaining policy around privacy as clearly as possible.

4. “Term of use” section which describes guarantees, payment conditions, clearly

described prices including the sub-total, duties, taxes etc.

Furthermore, authority deals certificates might be used to assure users that they will not

receive any replicas but only original branded product.

CHAPTER 3: COMPARISION OF TECHNOLOGY OPTIONS

10


Before the development process for the establishment of the application, it is essential

to analyse diverse technologies and tools which might be used to implement an online shop

system.

In the previous chapter, patterns and user requirements were gathered from online

questionnaires, this chapter introduces, analyses and compares several technologies in order to

build an integrated development environment for the final product in the most efficient and

effective possible manner, and finally, the author draws the conclusion of which specific

technology combination is the most appropriate for this particular research study.

3.1 COMMON CHOICES OF PROGRAMMING LANGUAGES AND

PLATFORMS USED IN POPULAR WEBSITES

Table [1] lists some of the most popular sites, the platform and the main programming

languages they use.

Site Up Since Server

Platform Programming Language

Google.com November 1998 Linux C++, C, Java, PHP & MySQL

Facebook.com February 2004 Linux C++, PHP & MySQL

Youtube.com February 2005 Linux Java, C, & MySQL

Yahoo.com August 1995 Linux C++, C, Java, PHP & MySQL

MSN.com August 1995 Windows ASP.NET

Wikipedia January 2001 Linux PHP & MySQL

WordPress.com November 2005 Linux PHP & MySQL

Source: Comentum Corp [11]

Table [1] Programming languages used in most popular website.

3.2 PROGRAMMING LANGUAGES

There are several potential programming languages that might be used for this

research:

http://learntogeek.com/websites/programming-languages-used-in-most-popular-websites/



11

3.2.1 C/C++:

As a compiled language, it is possible to write server side programs but this

process might be very difficult and complex for this project and its goals which could

result in an instable website [12].

3.2.2 PERL

Perl was the pioneer of server side language, generates dynamic websites, is an

open source software distributed under the GNU General Public License. PERL integrates

with most of the database products such as. MySQL, Oracle, PostgreSQL and SyBase.

Also, can interact with HTML, XML, PDF, and plenty of other formats [13].

There are some accessible features which make Perl quite stable for websites and

take out all the hard work, for instance, Perl stops crashing itself if the user does

something wrong, the system displays an error in the web browser which may give users

a friendly message telling them what the problem was. Additionally, Perl is a highly fast

language, however, Perl syntax can be difficult to handle for occasional programmers.

3.2.3 PHP

PHP stands for the acronym PHP Hypertext PreProcessor, it was first created as a

series of Perl scripts to build Personal Home Pages. Over the years, PHP was rewrote as

a scripting engine that can be used to create web applications ranging from personal

websites to e-commerce applications and community web portals i.e. discussion forums,

blogs etc. in a user friendly manner [14].

PHP is available for free. As PHP is open source, a range of libraries which extend

its functionalities are freely available. Additionally, the PHP source code might be

modified to include custom extensions and other components increasing its extensibility.

PHP scripts run over operating systems such as Windows, linux, Solaris, Mac

OSX etc. and provide support for most of the web servers such as iPlanet, Apache, etc.

3.2.4 ASP.NET

ASP stands for Active Server Pages which is a programming language belonging

to Microsoft’s Internet Information Server., Just like Perl and PHP, ASP can help deliver

dynamic content to the client from databases generating interactive websites.

http://www.microsoft.com/


12

ASP is an easy-to-use language whose pages are basically HTML which include

ASP programs. In order to run an asp file we just have to place it into a directory in our

server. If we want to make some changes, all we need to do is edit the asp file and then,

the modification will be executed automatically. Another advantage is its flexibility; even

if we are new to ASP we can use previous knowledge in other programming languages

like Perl, Visual Basic or JavaScript while migrating to ASP over additional modules

[15].

However, ASP is not open source, it is dependent on Microsoft products and needs

a Windows platform along with an ASP-Apache installation at the server side which

results in additional costs.

3.2.5 CONCLUSIONS ON PROGRAMMING LANGUAGES:

Having analysed the programming languages presented above, the author of this

research considers that PHP is the most suitable server side programming language to

build the e-commerce application that constitutes the subject matter of this study based

on the following set of features:

1. Is Free and Open Source.

2. Can be directly inserted into HTML.

3. Can run on Linux, Mac and Windows servers.

4. Offers easy interaction with MySQL.

5. There is plenty of help in form of articles, books, etc.

6. Its syntax is user-friendly as well as easy to understand and learn.

7. Hosting services are generally ready to PHP with no special setup.

8. There are lots of libraries and source code available to use.

3.3 RELATIONAL DATABASE MANAGEMENT SYSTEMS

Many DBMS are available, however, according Curtis Dicken, editor of

htmlgoodies; Oracle, Microsoft SQL Server and PostgreSQL are the most used database

systems by companies [16].


13

3.3.1 ORACLE

Oracle databases are available in different versions, some of its features such as

performance, security and memory limitations differs from version to version.

For instance, Oracle databases which run on server with more than four CPU´s

are required to acquire the Enterprise Edition which offers further features and advantages

over the Standard Edition [17].

In either case, Oracle databases ensure a high performance and security level by

isolating each transaction individually which means that all the results from transactions

are persistent and ready to handle physical failures [18].

However, Oracle can result excessively expensive for mid-sized companies, in

addition, having a huge learning curve, its complexity is another drawback and, therefore,

it might not be the most appropriate choice when it comes to not highly technical

workforces.

3.3.2 MICROSOFT SQL SERVER

Being MySQL a Microsoft free and open source application, it is probably the

most popular DBMS. As MySQL is open sourced, developers can modify its code to meet

their particular requirements, that is to say that MySQL is exceptionally customizable.

Developed by Microsoft, MySQL comes with an interface that Windows users

find familiar and easy to use through features that provide users with a browser and

predefined SQL statements, visual aids etc. Additionally, MySQL has been many years

in process of development which ensures reliability, correctness and data integrity [19].

3.3.3 POSTGRESQL

PostgreSQL is another powerful and open source DBMS which offers great

advantages for SMEs. Over the years, PostgreSQL has proven to be stable and reliable,

in fact, some companies report that PostgreSQL has never crashed after years of activity.

What is more, there is no associated licensing cost, this should lead to quite significant

savings. [20].

3.3.4 CONCLUSIONS ON DATABASE MANAGEMENT SYSTEMS

Undoubtedly, Oracle is an excellent technology for bigger enterprises. On the

other hand MySQL and PostgreSQL are ideal choices for systems with less data to store


14

needs such as the e-commerce application analysed in this project, however, PostgreSQL

does not runs natively on Microsoft Windows 7. Therefore, and considering the following

specifications, MySQL is certainly the most appropriate option:

1. Is open source and freely available for download.

2. Is available on Windows, Linux and Mac OS X

3. Offers less features than Oracle but still offers both, basic and innovative features.

4. Supports PHP, which is has been designed as the programming langue for our e-

commerce solution in this case study.

5. Is a reliable and solid technology, data security layers protect data from infiltration

and manage access in the same way as other expensive DBMS.

6. Is easy to use.

CHAPTER 4: ACCESSIBILITY, USABILITY, FRIENDLY USER EXPERIENCE AND RELATED

TECHNOLOGIES

15

CHAPTER 4: ACCESIBILITY, USABILITY, FIRENDLY USER

EXPERIENCE AND RELATED TECHONOLGIES

In the previous chapter, which analysed different technologies to produce an online shop

system, it was conclude that PHP and MySQL are the most suitable technologies. This Chapter

aims to collect information for the purpose of improving the user experience, performance,

usability and accessibility of our e-commerce web system.

In their paper “Five Dimensions of User Experience balancing business and user

experience perspectives to create successful e-commerce sites“ [21] Human Factors

International, Inc. insist that “What creates a truly successful e-commerce experience is a

dynamic synergy between usability, power, persuasion, and branding. It is through balancing

these forces that e-tailers fulfil their business goals and create a joyful user experience that

customers will want to return to again and again”. We can thus say that the performance of

user experience will be directly related to the value of our e-commerce web system.

4.1 HOW TO BUILD FRIENDLY USER INTERFACE AND

EXPERIENCE

The design of our system will create a first impressions for customers. According to the

study “The role of visual complexity and prototypically regarding first impression of websites

study” conducted by Google:

“A websites' first impression is known to be a crucial moment for capturing the user’s

interest. Within a fraction of time, people build a first visceral \gut feeling" that helps

them to decide whether they are going to stay at this place or continue surfing to other

sites.” [22].

Ensuring consistency among pages, functions, and other features is essential. The user

expects certain actions to happen as he or she uses our website, if these actions vary from one

page to another, it may result in a confusing and therefore, possibly frustrating user experience.

The GUI5 should be as simple as it can effectively be, it is worth to be focused on the

service that is going to be offered on the site [23]. Visitors should not be distracted from the

main content and consequently, they will be more likely to do purchase items that satisfy their

food needs, which is what we want them to do. In this particular case, the signup page, the

purchase system and the payment screen must be as simple as possible, in other words, if the

5 Graphical User Interface


TECHNOLOGIES

16

purchasing process is clear and easy to use, it will be easy to attract new users as well as keeping

the old ones.

The longer a page takes to load, the more likely people are to look elsewhere. Web

images could take up the majority of the download time, thereupon, it is a must to optimize all

the web images so that we will have a faster loading site, the website logo and other flat colour

images must use GIF and JPG for photographic pictures such as product descriptions. PNG can

be used for both flat colour and photographic pictures [24, 25].

Regardless how intuitive the user GUI is, users might make some mistakes. The author

therefore believes that it is important to give users the chance of easily undo any mistake they

make, i.e., the system must embrace as a matter of priority tools to undo actions such as a

Remove or Delete button next to items on the basket page.

The website might make changes in the GUI during its use, in this case, it would be

effective to the users if we highlight these modifications. Highlighting missing or incorrectly

entered information in the registration forms of our e-commerce website is a good use of this

principle.

According to Microsoft Dev Center:

“Icons are pictorial representations of objects, important not only for aesthetic

reasons as part of the visual identity of a program, but also for utilitarian reasons as

shorthand for conveying meaning that users perceive almost instantaneously.” [26].

A virtual store must be intuitive, icons could represent a series of actions that will make

customers think faster, In other words, icons are an additional way to enhance both usability

and user experience. Icons should have an associated meaning using metaphors that are natural

to customers when using a computer, for example, a shopping basket icon must be used to store

virtual products before the checkout since this a common figure that makes users feel familiar

and probably more confident with what they are doing. Nonetheless, negative impacts of using

icons may emerge in case users do not understand what they mean, this issue can be easily

avoid if web designers provide title attributes in order to indicate what the icons are and what

the icons do when users hover the mouse over them (see figure [5]).

Figure

[5] Tittle attribute


TECHNOLOGIES

17

Finally, providing both, step-by-step instructions and help centres will help users carry

out tasks. It is a vital a way of offering help while customers are actually using the website, this

practice saves users time and makes the entire experience more enjoyable [24]. In our case

study it can be accomplished by including a ‘how to buy section’ and a FAQs page. .

4.2 HOW TO IMPROVE ACCESSIBILITY

The process of designing an E-commerce websites should take into consideration not

only usability standards but also technical accessibility for customers with disabilities,

therefore, improving accessibility also improves usability for all users. As 750 million people

suffer from a disabilities worldwide [27] it is reasonable to consider that some of our potential

customers will be whiting that group

Although screen readers cannot describe what images display, blind and visually

impaired users can benefit from them. Screen readers are nowadays convenient tools that

announces the presence of images when they are found. HTML allows web programmers to

provide a descriptions of the processed image, this image is announced by the screen reader as

long as the alt attribute is correctly set which gives textual content for images [28]. For the same

reason, forms must be properly labelled in favour of screen readers.

On the other hand, images also can behave as links, therefore, the image alt attribute

will be used not only to describe the products through the image but also to identify the target

of the link. In that event, all links must be descriptive enough in order to identify the target

without a surrounding content. Furthermore, this method will enhance results for search engines

as long as they keywords are properly included. [29].

In like manner, users who cannot see the mouse pointer as well as individuals with

neuromuscular impairments might lack control in their hands to handle a mouse. The keyboard

can alternatively do the work for these specific user groups. Considering the website is designed

with these users in mind, most tasks could be achieved by using this piece of hardware instead.

In order to avoid unexpected results, all pages should be structured in a logical order [30].

4.3 RELATED TECHNOLOGIES

4.3.1 HTML, XML AND XHTML

HyperText Markup Language (HTML) is the language of the web, web browsers know

how to read and display documents created with HTML. A good web page should be well


TECHNOLOGIES

18

structured by placing tags and elements in a logical order so that it can be properly read by web

browsers [31]. Table [2] describes the main tags.

Tag Description Typical use

<a> Anchor Creates a link to another page or a section of the same

document.

<br> Line break Enters a line break or return character.

<div> A section of a page Creates overall areas or logical divisions on a page, such as a heading/menu section, a content area, or a

footer

<form> Web form Creates a web form to accept user input.

<h1>…<h6> Heading Creates a container for a heading, such as heading

text.

<hr> Hard rule Creates a horizontal line.

<img> Image A container for an image.

<p> A paragraph in a page Creates textual paragraphs or other areas and

containers for text.

<script> A script tag Denotes a web script or program. Also frequently

fount in the head section.

<span> Span Creates a container for an element, frequently used in

conjunction with styling information.

Table [2] Common HTML Elements

Focusing on the data itself, Extensible Mark-up Language (XML) is an extensible mark-

up language that retains the flexibility and power of HTML while reducing complexity. XML,

is mainly used to store data, while HTML is used to define and display the data [32].

XML type of structure can be stored internally in a DOM tree to make it quickly

searchable [33]. However, Extensible HyperText Markup Language (XHTML) combines the

flexibility of HTML with the extensibility of XML. XHTML is the next generation in the

evolution of HTML. It is an ambitious effort aimed to make the Web more usable and

accessible. Although there are a few differences, XHTML is very similar to HTML 4.01. This

is basically a stricter and cleaner version of HTML 4.01.

XHTML is stricter in syntax rules in comparison of HTML. Whenever a tag is open, it

also must be closed using the corresponding tag that includes angle brackets and a forward

slash. Thereupon, apart from making the website easier to maintain and edit, XHTML generates

a more consistent, well-structured format so that pages are easily processed by present and

future web browsers [34], what is more, XHTML helps avoid errors that can make web pages

fail even in older browsers improving accessibility.

The article “Build quick, slick Web sites“[35] published by IBM states that “a switch to

XHTML will improve the speed by which your pages load”. This is due to older HTML versions


TECHNOLOGIES

19

need to be checked for all the unclosed tags, this will slow down the analysis of the document.

XHTML parsing is much faster, and therefore, pages display quickly.

4.3.2 CSS

Using Cascading Style Sheets (CSS), we can apply styles to the web to make

it look exactly how we want by styling any HTML element to change its dimensions, colours,

borders, spacing, and so on across a number of pages.

With the emergence of the CSS3 standard in recent years, CSS now offers a level of

dynamic interactivity previously supported only by JavaScript, now it is also possible to add

animated transitions and transformations to our e-commerce website using just a few lines of

CSS.

Unlike conventional tables, DIV + CSS technology web makes the website friendly to

search engines. Furthermore, being CSS files separated documents, it becomes possible to apply

consistent styles across a number of pages so that the adjustment of pages and style is

convenient and easy to use [36].

4.3.3 JAVASCRIPT AND JQUERY

JavaScript is an integral part of web pages today, it is used for web programming to

enhance user experience when using a web page. Being easy to integrate into HTML, JavaScript

develops dynamic and interactive web pages, this would be very beneficial for any e-commerce

site since JavaScript enables pages and users to achieve real-time, dynamic and interactive

relationships, so that pages can contain active elements and exciting content.

JavaScript is included in every web browser, however, it is still necessary to program

the actions that we want to happen on the page. It is possible to add the JavaScript directly to

the HTML file, or reference a separate JavaScript file, in this project both methods have been

used depending on the complexity and length of the script.

However, the drawback is that support for JavaScript differs widely from browser to

browser and from version to version [33]. The good news is that jQuery takes away that

complication.

JQuery is simply a JavaScript library that makes writing JavaScript easier. JQuery takes

tasks that require plenty lines of JavaScript code to accomplish, and wraps it into a single line

of code. Additionally, jQuery’s functions figure out what browser is being used and then

account for it in order to make the browser behave in a consistent manner [37].


TECHNOLOGIES

20

4.4 SUMMARY

It is important to consider the user experience when designing interactive e-commerce

sites. This chapter has reviewed standard practices of improving user experience and

accessibility in specific web based technologies systems, it shall be carried out by means of

XHTML, CSS and JavaScript/jQuery.

These guidelines were subsequently used to inform the development and evaluation of

the e-commerce solution which has been proposed and in a heuristic evaluation which is

presented in chapter 7.1.

CHAPTER 5: SYSTEM DESIGN AND MODELING

21


This chapter provides detailed descriptions of the general system modelling process of

the e-commerce platform framework in order to create an evolutionary prototype which is

presented in chapter 6.

The system is split into back-end or administrator side and front-end or client side. The

administration side will maintenance, manage and update the platform. The client side will give

customers the tools for registration, product browsing, shopping cart management etc.

5.1 SYSTEM MODEL

This section describes the modelling process of the means required for both customers

and system administrators of our e-commerce system.

There are three types of actors that can play a role in the system.

Administrators User that can access and manage all the data in the system

Customers Group of user that places orders

Users Every entity that can login into the system

5.1.1 SYSTEM DATA FLOW

The following figure describes the data flow diagram.

Figure [6] Data Flow Diagram


22

5.1.2 SYSTEM COMPONENTS

5.1.2.1 Back-End

Products Management: add, view, edit, delete; Categories Management: add, view, edit,

delete; Customers Management: view, edit, delete; Orders management: edit, view

5.1.2.2 Front-End:

Customer Registration; Customer Login / Logout; Customer profile modification;

Customer Shopping Cart; Customer Order History; Search box; E-mail notifications; Category

List; Product List; Promotion List; Hot products; Check Product; Checkout; Product Review:

About us, Contact Section; FAQ; How to Buy; Privacy Policy; Term of Use and Site Map

5.1.3 SYSTEM WORKFLOW DESIGN AND FUNCTION MODULE

All customers accessing to the front-end system can browse categories and products,

however, for this project, only registered users can place orders, therefore, when adding

products to my basket, users will be required to login with an existing account, when username

and/or password are not correct, the system will display an error message and a link to go back

and re-login.

With respect to users who already have a membership, they can directly login,

otherwise, users will be gently ask to create one. Once users successfully login, they can manage

the shopping cart, add and/or delete items, continue shopping or select payment methods,

checkout and receive a confirmation e-mail, manage past orders and check out orders status

(pending, paid, shipped, cancelled), check out and edit personal details and so on.

Figure [7] Customer use case overview

The back-end administrator receives new order notifications and process them. After

customers place an order, the administrator manually updates the order status on the server side

accordingly.


23

For security reasons, admin validation is required when the administrator accesses to

the back-end module, at this point, the administrator is able to execute management actions

such as product, category, customer and order management.

Figure [8] Admin Use case overview

The categories module do not need a specific a view page since this particular module

contains only a few details which are already displayed on the category list. Likewise,

customers and orders modules do not allow admins to add new records since this is sole

responsibility of customers.


24

5.1.4 FUNCTIONAL DECOMPOSITION DIAGRAM

The decomposition diagram shows the functional decomposition of the system by

exposing the system's structure. The purpose of this Functional Decomposition Diagram is to

analyse the website flow level by level.

Figure [9] Functional Decomposition Diagram

5.1.5 PHP-MYSQL MODEL

This sub-section presents the processes involved when handing requests of the system:

1. The user sends HTTP requests for page to the webserver,


25

2. The webserver loads php code into engine, the php caches the results of database queries

and other scripts.

3. By default, each request of a php script requires the php code to be executed on the

webserver,

4. The end result is HTML code generated by the webserver which is sent to the user so

that it will be readable on browsers.

Figrue [10] PHP-MYSQL Model

5.1.6 FOLDERS ORGANIZATION AND PASSWORD PROTECTION

The folders organization refers to how the files and folders are disposed, folders are

represented in Figure [11] each folder the following files:

Figure [11] Folders Organization


26

Table [3] Folders Description

The administration directory needs to be password protected so that only authenticated

users can access its contents. We can accomplish this by connecting to our server via a

command-line interface and executing the proper commands. On the other hand, the Web host

provides a way to password protect a directory so that we can indicate what directory to protect.

A message will appear in the Web browser’s login prompt to establish the username and

password required to access the protected directory.

5.2 DATABASE DESIGN

Database is very important in any information management system, a good database

architecture will directly enhance the efficiency of the e-commerce application system.

A reasonable database would will improve the efficiency of data storing, to ensure the

data integrity and consistence [38].

5.2.1 PHYSICAL DESIGN AND REQUIREMENT ANALYSIS

The building process and physical design of the Database has been defined in order to

optimize its performance and ensure data integrity.

The database structure has been reviewed and normalized so that the same information

is not duplicated in multiple places, allowing the system to query and manipulate data easily.

Target to standard store requirement regarding orders, one category can contain many

products (1:N), one shopping cart can contain many products, (1:N) one customers relates to

many shopping carts (1:N) and one cart relates to one order(1:1).

Admin Back-End / Control Panel scripts and pages for administrators to configure the web

site

Connections MySQL connection script

CSS Cascade Style Sheets used for describing the presentation semantics of the pages

Documents Uploaded documents by the administrator from the Back-End

Images Web site images used by the front-end

Includes PHP and HTML scripts used by other PHP scripts

JS JavaScript Files

Pages Back-End Pages


27

5.2.2 DATABASE LOGIC STRUCTURE DESIGN

This section focuses on the integration of the basic structure of the tables composing the

database6 and the Database Entity-Relation (ER) Diagrams (see figure [12]).

5.2.2.1 Categories Table

The categories table represents the types of products that will be sold: charcuterie,

cheese, vegetables, etc. The categories table stores category name, description, and product

image. Each product will be in one category and each category will have multiple products.

5.2.2.2 Products Table

The products table has a foreign key, name, description, image, price, stock, and

creation-date columns. This table represents the specific products that customers will purchase.

The stock field contains an indication of the quantity of the item in stock, instead of Yes/No.

5.2.2.3 Sales Table

The sales table represents products discounts. This table stores discount rates together

with sale’s start and end date. A sale is defined by the price of an item. The author decided to

create a price column, plus start and end-date columns, with the end date allowed to be NULL,

indicating an open-ended sale.

5.2.2.4 Customers Table

The customers table stores relevant customer personal details and login information.

Besides the email as a unique identifier, username is also considered to be a proper record for

internal administration when it comes to manage customer orders.

5.2.2.5 Carts Table

The carts table represents the items being purchased in a particular order. This table has

quantity indicator along with cart creation and modification dates. It has been decided that the

column ‘transaction_made’, which is a foreign key to the table ‘orders’, must contain a default

value = 0 which means that it is possible to add more products to the cart as long as the value

remained unchanged. Once the column ‘transaction_made’ is changed to another value, the

6 A more extensive definition of database tables can be found in appendix [2].


28

system will understand that the transaction is completed and therefore, it will be not possible to

add more products in that particular cart.

5.2.2.6 Orders Table

The orders table stores individual completed orders, including shipping cost as well as

date and orders date. Following the guidance on the Payment Card Industry Data Security

Standards (PCI DSS) issued by the Security Standards Council [39], the site will not store the

full credit card number, just the last four digits.

5.2.2.7 Variables Table

The variables table has been created in order to ease the work when applying VAT or

other future variables. The author decided to create this non-linked table for storing the value

of VAT which might vary in the future due to government´s decisions, in that case, we only

would update its value in this table and thus, we eliminates the need of re-programming.

5.2.2.8 Payment Method Table

The payment method table simply stores three different payment options offered by the

platform; PayPal, Debit/Credit card and bank transfer to be used when checking out.

5.2.2.9 Order Status Table

The order status table stores all states through which passes an order (Pending, Paid,

Shipped and Cancelled).

Table [4] shows one of the representative database tables in detail:

Field Data Type Description

id INT Primary key for cart identification

quantity INT Number of a particular products being ordered

date_created TIMESTAMP Cart insertion date

date_modified TIEMESTAMP Cart modification date

product_id INT Foreign key to products

user_session_id INT Foreign key to customers

transaction_made INT Foreign key to orders and transaction status indicator

Table [4] carts database table


29

5.2.2.10 Database Entity-Relation (ER) Diagrams

Figure [12] ER Diagram

CHAPTER 6: INITIAL PROTOTYPING AND EVALUATION

30


The previous chapter has planned and organized the system model making possible the

commencement of the system development. Beginning with early sketches of GUI7 windows,

this chapter provides an overview of the development of the user interfaces and their

corresponding user evaluations. The second part of this chapter presents and discusses the

implantations of the first functional prototype which has been programmed on the basis of the

patterns previously reached.

6.1 USER INTERFACE DESIGN

6.1.1 PAPER PROTOTYPES OVERVIEW

The main page includes a left menu with the category list, signup and longing buttons

as long as the user is not logged, otherwise, a welcome message alongside the corresponding

username, order inquire and my cart links show up. In the main content, users can find a more

descriptive category menu which includes category images.

Figrue [13] Paper Prototypes Overview

7 All the paper prototypes of GUI and functional prototype can be found as part of the appendix [3]


31

The product list page, located whiting every category, use the same layout and works

just like the home page.

The product description page shows the product details for a certain product, products

description along with higher quality images which can be enlarged by clicking on it,

furthermore, this page makes visible the date of inclusion in the catalogue and finally the

purchase button which is easily reachable and near the unit price.

The shopping cart page is designed to make the checkout process as simple as possible

allowing users to start a step-by-step checkout process. Product names will be included together

with a clear description of quantities, unit price, Sub-total, VAT, shipping cost and the total

amount due.

6.1.2 USER EVALUATION OF PAPER PROTOTYPES

To obtain qualitative feedbacks on the GUI windows with the objective of refining the

first stage of development and once ethical approval was obtained. According the inclusion

criteria8, five participants who agreed to be contacted through e-mail for involvement in further

research stages were randomly selected from a volunteer list generated in the customers

research stage defined in Chapter 2.

All target participants were sent the paper prototypes which included a brief

questionnaire9 on the GUI prototype, information sheets and consent form. They were required

to sign and send it back, however, one participant objected to this as a result, the total number

of participants was three.

6.1.2.1 Evaluation Findings

User feedbacks was a valuable activity. As a result, the author can conclude that the

paper prototypes of the GUI reveals that:

1. All the participants were clear that this application is intended to be an online shop.

However, using visual aids to emphasise the basket and/or other shopping elements

is required in order to help identify this purpose.

8 See inclusion criteria on page 5 of this report. 9 Available in appendix [6b]


32

2. It has been suggested to include items availability indicators, edit and delete buttons

on the cart page and a way to check user details such as shipping address or e-mail

address.

3. All the participants believe that the layout is clear enough and the content is properly

distributed, but user experience will depend, in the last instance, on how colours,

text and other elements are distributed.

4. The majority of the participants did not find anything too confusing, however, one

participant brought up that the welcome message is unclear since it is not possible

to identify whether it is a link or not.

5. All the participants agreed that the navigation system of this prototype would be

quite intuitive.

6.2 FUNCTIONAL PROTOTYPE DESIGN

Generally speaking, application development is more flexible as long as the resulting

parts can be analysed under realistic situations. The beginning of this analytical product

development goes beyond the testing stage. This imply an excellent opportunity to go along

with this system, gather direct and instantaneous responses in term of usability and user

experience in order to:

1. Generate new ideas from real users.

2. Amend frustration users might experience.

3. Make users feel more important.

6.2.1 FUNCTIONAL PROTOTYPE OVERVIEW:

Figure [14] sows a brief overview10.

10 Appendix [4] shows a more detailed overview of this first prototype.


33

Figure [14] Functional Prototype Overview

6.2.2 USER EVALUATION OF THE FIRST FUNCTIONAL PROTOTYPE

This first functional prototype provided most of the planned functionality, therefore, can

be given for participants to test in order to obtain qualitative feedbacks on the whole system

with the objective of refining this stage of development.

Seven participants who agreed to be contacted through e-mail for involvement in further

research were randomly selected from the volunteer list generated in the customer’s research

stage with the purpose of modifying the system according user responses and their needs in

terms of usability.


34

A link to the functional version of the prototype was emailed to participants once it was

finally ready for testing. Together with the website link, a detailed information sheet and a

consent form were attached to the e-mail. All the consent forms were successfully returned.

Participants were ask to navigate freely through the website for 1 minute and then

perform a set of predetermined tasks, afterward they were invited to participate in a chat based

usability interview11 which lasted between nine and fourteen minutes.

6.2.2.1 Key criteria for selecting tasks.

1. Frequency: The most performed tasks

2. Importance: The most critical task

3. Error solving: How participant solve performance errors

6.2.2.2 List of tasks to accomplish:

1. Register as new user

2. Sign up with your username and password

3. Buy five items from at least three different categories

4. Delete a product selection from my cart.

5. Add a new product into my cart.

6. Modify your name and address

7. Go back to my cart.

8. Select payment method and checkout

9. Check my order history out

10. Logout

6.2.2.3 Evaluation Findings

This prototype gave a good overview of the potentialities of the project, the author

received with big interest plenty of commentaries, critiques and suggestions:

1. Error Message, Empty Category: A Blank page is displayed when users click on

categories in which products are not available, this is a confusing situation where users

might be unclear about whether the category is empty or an error has occurred, this issue

11 Interview Questions can be examined in appendix [8] of this project.


35

can be solve by showing a gently message when there are no products in a category, for

instance "There are no products to list in this category, will be adding here soon"

2. Error Message, Empty Shopping Cart: A Blank table shows up even when my

shopping cart is empty, this has been reported as confusing since they cannot be sure

whether the cart is actually empty or an error has occurred, if the shopping cart is empty

the systems should display an error message and instructions on how to add new

products, for instance “There are no products in your shopping cart yet, to add a new

product, please, click on the button ‘purchase’ within the product description”

3. Confirmation Dialogues: Users can easily delete items from the shopping cart,

however it has been found that items may also be deleted by accident, in order to prevent

users from accidental deletions, a confirmation dialog must be displayed

4. Continue Shopping Link: In order to return customers exactly where they were in a

dynamic way, it has been suggested to include a ‘continue shopping’ link on the

shopping cart page

5. Drop Lists: Users might find annoying to type their countries and gender manually on

the registration page. A pre-established list would ease this task and also avoid error

inputs. For usability reasons, the UK must appears in first place since this website is

aimed at customers living in the UK.

6. Breadcrumb Navigator: Users are fairly happy with the navigation systems, however

a crumb navigator might be include in order to indicate where the user exactly is at all

times.

7. Password Confirmation: It has been detected that users cannot tell whether they have

entered a password incorrectly, this issue can be solve by requiring people to confirm

their password in a second field.

8. Remainder: There is no possibility for users to find out what their password is in the

event of the password being forgotten. It has been suggested to develop a password

recovery tool, again, it can be implemented by programming a php mailing system.

9. Product Quantity: Users found that they cannot modify product quantities neither

when shopping nor when editing my cart, offering the possibility to add and subtract

more than one product at a time must be studied.


36

10. Product Images on Shopping Cart: The shopping cart only displays a list of items

being ordered, nevertheless, it has been proposed to use product images together with

the product name so that users can identify at any time what the actual product is.

11. Variety of Payment Methods: Even though the payment options are still limited on

purpose for this prototype, the need of more payment methods have been brought up.

12. Order Status: The user cannot find out the relationship between his or her order and

its actual status (pending, paid, shipped ect), the system should provide users with tools

to track orders on the order history page.

13. Payment Option Selection within Cart: It has been suggested to insert the payment

options page within the shopping cart page itself in order to make navigation more fluid,

thus, users will not have to load a new page.

14. Reliability Improvements: Some users do not find the website totally trustworthy, this

might be solved by adding privacy policies, term of use, making contact info clearly

visible and enhancing the general layout.

15. Image optimization: Even though images are optimized for a fluid navigation, it has

been detected that not all the images share the same resolution and size which limits the

system consistency. It has been decided that all the images should 120x120 px and no

more than 7kb. On the other hand, in order to enhance usability, it is needed to create

another directory for higher resolution images that will show up only when the users

want to zoom in and see a full sized image. 300 x 300 px and somewhere between 70

and 120kb.

16. Shopping cart term: It has been suggested that, being an American word, the term

shopping cart term might be incorrect in the UK, the website is intended to people living

in the UK, for this reason it is more correct to use the term Basket.

CHAPTER 7: APPLICATION DEVELOPMENT

37


The previous chapter laid the foundation for our application, this chapter aims to dissect

the system development process of the first version of our E-commerce application. The system

program files constitute back-end12 and front-end files. Back-end files are located in the folder

‘admin’. Separately, Front-end files are located in the root directory.

Both, back-end and front-end share the same system files which are distributed among

the remaining folders as described in chapter 5.1.3.

7.1 HOMEPAGE

The homepage (see figure [16]) is always a key factor since users will get the first

impression of our website. Hence, besides attracting user to come back again, the homepage

must be fully integrated and needs to establish credibility, and trust. The homepage GUI has

been divided into multiple sections on the basis of its area: left, right, top and bottom. The left

area is the main content of the page, by contrast, the rest of the areas will be reused for all the

pages.

The website layout has been distributed in several function modules: header and user

operation center, navigation bar and breadcrumb navigator on the top; list of categories with

images on the left; shop description, featured promotions with images, links and another

category list without images on the right and the website footer at the bottom. Accordingly, the

UI is made up of three parts: ‘index.php’ defines the main layout, ‘session.php’ generates the

user operation center and ‘promotions.php’ displays a list of promotions.

The user operation center (see Figure [15]) has been designed for user’s registration

and login, once users are logged, they can see a personalized welcome message together with

links to their shopping cart, order history, account edition and logout link. As this is an

important module, it should be found easily, therefore, it has been decided to place this module

on the right top of every webpage.

Figure [15] User Operation Centre

12 A description of the implementation of the Back-End can be found in appendix [5]


38

First, it has been created a function to get and display the user first name. Therefore, we have

to query the database through the ‘customers.id’ according the value defined by

‘&identificator’and then, return the user first name:

function GetUserName($identificator)

{

$query_userquery = sprintf("SELECT customers.first_name FROM customers WHERE

customers.id = %s", $identificator);

$userquery = mysql_query($query_userquery, $mysql) or die(mysql_error());

$row_userquery = mysql_fetch_assoc($userquery);

$totalRows_userquery = mysql_num_rows($userquery);

return $row_userquery['first_name'];

}

Once the function is defined we only have to display ‘Hello’ + user first name and 'my basket'

as long as the user is logged, if not, 'Register' and 'Login' will be displayed (see figure [15]).

if ((isset($_SESSION['MM_Username'])) && ($_SESSION['MM_Username'] != ""))

{

echo "Hello ";

echo GetUserName($_SESSION['MM_ID']);

?>

<a href="../final/user_edit.php" class="minilink1"> Edit</a> - <a

href="../final/logout.php"class="minilink1">Exit</a>

<div class="cart">

<div class="title"><span class="title_icon"><img src="images/cart.gif" alt="view

cart" title="" /></span><a href="cart_list.php">My Basket</a></div>

<div align="right"><a href="cart_list.php" class="view_cart"> <a

href="../final/user_order_list.php"class="minilink1">My order history</a> </br>

</div>

</div>

<?php

}

else

{?>

<a href="register.php" >Register</a> <a href="login.php">Login</a>

<?php }?>


39

Figure [16] Homepage


40

The navigation bar module (see Figure [17]) is the menu which enclose important links.

Figure [17] Navigation Module

1. Home. Link that takes users to the homepage.

2. About Us. This page would display extended information about the shop but in this case has

been used to describe information on this particular project.

3. Promotions. Extended list of the promotion products displayed on the homepage.

4. Contact. Contact us form.

1. The category list is on the main content is easily generated through the following code:

Querying the database:

$query_Category = "SELECT * FROM categories";

2. Displaying the query over a do-while loop:

do { ?>

<a href="category_view.php?cat=<?php echo $row_Category['id']; ?>"><img

src="documents/uploaded_images/<?php echo $row_Category['image']; ?>" alt = "<?php

echo $row_Category['image']; ?>"/></a>

<?php echo $row_Category['category']; ?>

<?php echo $row_Category['description']; ?>

<a href="category_view.php?cat=<?php echo $row_Category['id']; ?>" class="more">-

more details -</a>

<?php } while ($row_Category = mysql_fetch_assoc($Category)); ?>

7.2 PRODUCT DESCRIPTION

The product page (see figure [18]) not only displays required information to describe

products but also tries to convince users to buy the product. As this page requires authentication,

only logged users can see the purchase icon, otherwise, they will see a login link instead. The

elements of this page have been minutely designed:

1. Product name. Unique, short and descriptive.

2. Price. Prominent, and placed not far away from the purchase bottom so that when users

open the page, their sight flows naturally through the product name, then the price, and

finally the purchase icon.

3. Order button. Large, colourful and descriptive.

4. Product image. It is common sense to think that most customers would like to use

images in order to confirm that the item is actually what they want to buy. Furthermore,


41

despite images are properly optimized and sized for a smooth navigation, users can

enlarge images by clicking on ‘zoom’ so that a high definition image will show up. In

order to make it more attractive, zoom is handled by Lightbox v.2.613 (see figure [19])

Available stock. Well positioned and easy to see, users can know the possibility of an

item to go out of stock which could encourage buyers impulse.

5. Cost Saving. The website will hold promotions periodically, thereupon, it is worth

including the details on the saving that the customers make not only as a value but also

as a percentage which might be the most effective way to inform the discount.

Figure [18] Product Description

13 Lightbox v2.6 is a small open source JavaScript program used to overlay images on top of the current page

which supports all modern browsers. Created by Lokesh Dhakar and freely available at

www.huddletogether.com


42

Figure [19] Lightbox v.2.6

7.3 USER REGISTRATION

The registration form (see figure [32]) presents six inputs: four text and two password

plus the submit button. Not all the fields are required. As password fields do not display text

but asterisks, it is easy to make a mistake, this is amended by asking users to confirm their

password. In order to ease the work and avoid potential errors while inserting country and

gender, drop lists and radio buttons are standards. Should the registration be incorrect, it must

be shown again with the previous correct values in place, as well as a detailed error messages.

Figure [21] shows a flowchart of how this entire page is processed.


43

Figure [20] Form Flowchart

Potential input errors to validate:

1. Not all required filled are filled

2. Invalid e-mail address

3. Password does not match confirmation

4. Username already taken

5. Password already taken

Error validation is processed over the following JavaScript code:

function validate(form) {var e = form.elements, m = '';

if(!/.+@[^.]+(\.[^.]+)+/.test(e['email'].value)) {

m += '- E-mail requires a valid e-mail address.\n';

}

if(!e['firstname'].value) {m += '- First name is required.\n';}

if(!e['lastname'].value) {m += '- Required.\n';}

if(!e['address1'].value) {m += '- Required.\n';}

if(!e['address2'].value) {m += '- Required.\n';}

if(!e['city'].value) {m += '- Required.\n';}

if(!e[zip].value) {m += '- Required.\n';}

if(!e[country].value) {m += '- Required.\n';}

if(!e['username'].value) {m += '- Required.\n';}

if(!e['password'].value) {m += '- Required.\n';}

if(e['password'].value != e['confirmpassword'].value) {

m += '- Your password and confirmation password do not match.\n';

}

if(m) {

alert('The following error(s) occurred:\n\n' + m);

return false;

}

return true;

}


44

Figure [21] Invalid Registration Form with Errors

7.4 USER LOGIN

Keeping users logged is required to preserve the user’s selection as they go along with

their actions, this will allow them to access their order history and take other personal actions.

Carrying information from one page to another can be achieved by cookies and/or

sessions. A cookie is a small file that keep information in the user´s browser. The server sends

responses to the client, these responses may include cookies, and then, the client keep the

content of the cookie for future use [40].

In this project, cookies could be used in order to identify customers, however, cookies

might be quite insecure for this purpose since they must be transferred as mere text whereas the

server cannot control how cookies are processed at the client’s side. Nonetheless, it can be

approached in the basis of session ID principles in order to track customers through a session,


45

however, unlike cookies, which are kept at the client´s side, session requires a set of variables

which are stored on server itself. This will handle the user´s identification for the application

and make things more transparent. Sessions will start once users log on and will end when they

log off. Therefore, the session purpose is to store user’s information and settings for user

sessions. In order to do that, session variables must be stored in the session object

‘session_start();’ that will hold information about customers in the file “functions.php” which

is accessed from all the pages, as a result, users will be kept logged on all pages.

1. Querying the database:

$loginUsername = $_POST['username'];

$password = $_POST['password'];

$LoginRS__query = "SELECT id, username, password FROM customers WHERE

username=’$loginUsername’ AND password=’$password’";

2. Fetching the data and storing it in a session:

$_SESSION['MM_Username'] = $loginUsername;

$_SESSION['MM_ID'] = $row_LoginRS["id"];

3. Similarly, the following code is simple but effective to logout:

$_SESSION['MM_Username'] = “”;

$_SESSION['MM_ID'] = “”;

It is worth stressing that by default, PHP also sets an additional cookie on the customer´s

browser in order to identify which session id to use, a unique ID will be assigned to each session,

this information is saved in a cookie named ‘PHPSSID’. Nevertheless, according to The EU

cookie law (e-Privacy Directive), the system incorporates sufficiently full and

intelligible information of cookies used on this website as well as information to change

cookies settings [41].

Figure [22] Cookies disclaimer


46

7.5 MY BASKET AND CHECKOUT

The goal of the application as a whole is to provide users who are living in the UK an

online store where they can easily purchase Spanish products from the comfort of their home.

One of the hardest issues to solve was the implementation of my basket (see figure [23]). Users

can choose the desired items and then, add them in the basket in order to purchase them and

paying by bank transfer, PayPal or credit card.

First of all, ‘cart_add.php’ will be invoked when customers request that a product to be

added to their basket from ‘product_view.php’. The procedure takes three pieces of

information; the user session ID, the product ID, and the quantity to be added in the table ´carts´.

$insertSQL = "INSERT INTO carts (user_session_id, product_id, quantity ) VALUES

(‘$_SESSION[MM_ID]’, ‘$_GET[prod]’, ‘$_GET[quantity]’)";

Secondly, it is necessary to define the functions ‘CartUpdate’ and

‘PaymentConfirmation’ which are located in ‘includes/functions.php’ in order to handle the

basket and complete the order.

The ‘CartUpdate’ function accomplishes what happened to be one of the main

challenging tasks which was the process of creating a function that clearly indicates whether

the transactions has been actually made, i.e. the systems needs to know if a transaction has been

fully accomplished so that the current shopping cart becomes part of the order history list and

a new shopping cart will show up instead every time users decide to add new products.

With regard to the database, along with ‘user_session_id’ which is the column that

represents the active user, it has been decided that the column transaction_made in the table

carts must contain a default value = 0 which means that it is possible to add more products to

the cart as long as the value remained unchanged. Once the column ‘transacion_made’ has been

changed to another value, the system will understand that the transaction is completed and

therefore, it will be no possible to add more products in that particular cart.

function CartUpdate($lastorder)

{

$updateSQL = "UPDATE carts SET transaction_made = ’$lastorder,’, data_created =

data_created WHERE user_session_id = ‘$_SESSION[MM_ID]’ AND transaction_made = 0 ";

The first version of this script automatically updated the field ‘data_created’ (which

indicates the date and hour where the cart was created) to the current date and hours, however,

this is an unwanted action that fortunately could be amended by adding the statement

‘data_created=data_created’ as stated below.


47

‘PaymentConfirmation’ is a function that first, insert payment details into the table

‘orders’ and then calls the previous function ‘CartUpdate’ in order to complete the order. The

‘PaymnentConfirmation’ function takes three pieces of information; the user id, the payment

method and the total price due.

function PaymentConfirmation($paymentmethod){

$insertSQL = sprintf("INSERT INTO orders (customer_id, payment_method,

total) VALUES (‘$_SESSION[MM_ID]’, $paymentmethod, ‘$_SESSION[TotalOrder]’)",

CartUpdate($lastorder);}

Figure [23] My Basket


48

The page ´cart_list.php´ defines the basket itself. Its objective is to query the database

and join `carts`with 'products' tables in order to link attributes from both tables over the foreign

key placed on the child table (‘carts’). The condition WHERE ‘transaction_made’ hold the

default value '0' as long as the product is in the cart, once the transaction is completed they will

change from '0' to '1' so the system knows whether the transaction is finally made or not.

$query_cartDetails = "SELECT products.id as productid, products.name,

products.image, carts.id, carts.quantity, products.price, carts.user_session_id,

carts.transaction_made FROM carts

JOIN products

ON products.id = carts.product_id

WHERE user_session_id = '$varUser_cartDetails' AND carts.transaction_made=0";

This page also must be used to calculate values such as sub-total (‘$totalprice’), amount

of the VAT (‘$VAT’) and total price including VAT (‘$totalwithvat’):

$totalprice = 0;

$totalprice = $totalprice + $row_cartDetails['price'];

$VAT = ($totalprice * GetVAT())/100;

$totalwithvat = $totalprice + $VAT;

Finally, and once the user select a payment option and click on checkout, the last page

in the process will show up (see figure [24]). It should indicate the success of the transaction

to the customer and send a confirmation email, this last step is processed through the function

‘sendemailHTML’ located in ‘includes/functions.php’. This function has been programed in

order to send not only confirmation emails but also to retrieve a forgotten password, send

confirmations, newsletter, etc. The function contains a default header and footer, including

logo, therefore, we only need to create the main content on the page which call the function.

1. Defining a variable which defines a default opening message that will appear at the top of

the email:

$message = '<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<table width="100%" border="0" cellspacing="3" cellpadding="3">

<tr>

<td><img src="images/logo.png" /></td>

</tr>

<tr>

<td><p>Dear Customer:</p>

<p>';

2. Defining a variable that set the content of the message:


49

$message.= $content;

3. Creating a variable that set a default closure message that will appear at the bottom of the

email:

$message.='</p></td>

</tr>

<tr>

<td>Thank you for shooping with us!, please, you may wish to contact us by

sending an e-mail at<strong>:</strong><br />

<a href="mailto:[email protected]">info@theiberiancorner</a></td>

</tr>

</table>

</body></html>';

4. Defining the required email header to send a HTML email to customers that come from our

email address and sending a black carbon copy to our own email as a notification:

$headers = 'MIME-Version: 1.0' . "\n";

$headers .= 'Content-type: text/html; charset=utf-8' . "\n";

// Addition headers

$headers .= 'From: [email protected]' . "\n";

$headers .= 'Bcc: [email protected]' . "\n";

5. Sending the email:

mail($to, $subject, $message, $headers);

}

Figure [24] Purchase completed

CHAPTER 8: FINAL EVALUATION

50


Evaluation plays a crucial part in this research, it enables us to know whether the main

research objective (see chapter 1.4) has been achieved by verifying the patterns established in

chapter 2.3, 5.3.3 and 5.4.5

This chapter describes how the final evaluation have been carried out. The first sub

chapter presents the heuristic evaluation. The second part of this chapter presents the final user

evaluation performed through observation.

8.1 HEURISTIC EVALUATION

The main goal of this heuristic evaluation is to discover a better understanding of what

customers would feel on the website in terms of usability through a heuristic evaluation and

how to help this site over a series of recommendations.

The ten general principles for user interface design are called "heuristics" because they

are more in the nature of rules of thumb than specific usability guidelines as described below

[42].

8.1.1 VISIBILITY OF SYSTEM STATUS

“The system should always keep users informed about what is going on, through

appropriate feedback within reasonable time.”

Once the homepage is open, it is clearly noticeable that we are on the shopping website

‘The Iberian Corner’ since being on the top of the website, its distinctive logo is one of the first

elements which one can see. Categories are clearly defined.

In addition, It will not be long until the user realized what kind of actions can be actually

taken as well as the actual purpose of this website since descriptive text about the shop can

easily be seen at the top of every page, therefore users will know where to begin looking and

many of them would not click away.

Alternatively, users can get further information by clicking on the link with ‘about us’

before exploring the website on their own in order to make clear where they actually are and

where they can go next.


51

8.1.2 MATCH BETWEEN THE SYSTEM AND THE REAL WORLD

“The system should speak the users' language, with words, phrases and concepts

familiar to the user, rather than system-oriented terms. Follow real-world conventions,

making information appear in a natural and logical order.”

The virtual basket system is partially following real world convention, A real world

concept applied on this website is a physic shopping basket, users click once to select an item

(the equivalent of picking it up the real world), click again to add the item to the virtual basket

(the equivalent of placing products in the trolley) and finally, to confirm the purchase, click on

checkout bottom (the equivalent of moving to the physical supermarket checkout).

As can be seen, information and categories appear in a natural and logical order and

users can find desire areas with ease, furthermore so that users will not struggle to find their

current item list.

8.1.3 USER CONTROL AND FREEDOM

“Users often choose system functions by mistake and will need a clearly marked

"emergency exit" to leave the unwanted state without having to go through an extended

dialogue. Support undo and redo.”

Should users make any mistake while creating their shopping basket, users can easily

amend the list of items by clicking on the nearest delete icon.

Furthermore, the shopping basket section is available from the top right corner of every

page. However, user might want a chance to cancel an unwanted order for those spontaneous

purchases by a simple click but this options is not available.

On the contrary, yet some users might not understand the site navigation and therefore,

including a search box would improve usability.

8.1.4 CONSISTENCY AND STANDARDS

“Users should not have to wonder whether different words, situations, or actions mean

the same thing. Follow platform conventions.”

Most users will not experience any difficulty when going back to the homepage since

the home links are the same from every page, one of them is the company logo, which might

be difficult to identify since it is not labelled so it could be a vague reference, however, there

are two more links well recognisable labelled (home), one at the top main menu and other in


52

the footer. On the other hand, as users can find some links both on right menu and footer, it

may be confusing for some users.

Likewise, the consistency allows users to quickly find the information and

specifications when viewing and item.

8.1.5 ERROR PREVENTION

“Even better than good error messages is a careful design which prevents a problem

from occurring in the first place. Either eliminate error-prone conditions or check for

them and present users with a confirmation option before they commit to the action.”

This website includes an error recognition system which is effective in displaying what

is wrong. For instance, there are some mandatory field if the three forms included in the website

(“registration form”, “login form” and “contact us”) form, which are properly marked in order

to avoid any possible input error. The website also avoid error prevention by using of drop list

and radio buttons instead of text fields.

8.1.6 RECOGNITION RATHER THAN RECALL

“Minimize the user's memory load by making objects, actions, and options visible. The

user should not have to remember information from one part of the dialogue to another.

Instructions for use of the system should be visible or easily retrievable whenever

appropriate.”

The inclusion of a breadcrumb trail lets visitors know what section they are at any time

and thus they will not have to go back to the home page in order to retrace the path.

The shopping basket allows users to buy an item at the moment, or, to save it later in

case we do not complete the order now so that users will not to look for them over again. What

is more, the system remembers customers past order history and presents them in the ‘Order

History’ so that users can remember what they had ordered a long time ago.

On the other hand, some important objects are not highly visible, for instance, on the

right content of every single page, the section called ‘promotions’ displays pictures of the most

features products, nevertheless, the product name is not visible in this part which might result

uncertain for some users that could not recognise these pictures. In addition, despite the

shopping basket link is always visible as long as users are logged, there is no chance to know

neither the number nor the name of the items which make it up until the user clicks on it.


53

8.1.7 FLEXIBILITY AND EASE OF USE

“Accelerators -- unseen by the novice user -- may often speed up the interaction for the

expert user such that the system can cater to both inexperienced and experienced users.

Allow users to tailor frequent actions.”

As earlier pointed out, this case study is easy to use as a whole, going back to one of its

main feature which is the shopping basket, Users can easily notice that The shopping cart page

is designed to make the checkout process as simple as possible, the payment options page is on

the shopping basket list in order to make navigation more fluid, thus, users will not have to load

a new page. This allows them to place an order without previewing everything, this speeds up

the process of for expert buyers.

8.1.8 AESTHETIC AND MINIMALIST DESIGN

“Dialogues should not contain information which is irrelevant or rarely needed. Every

extra unit of information in a dialogue competes with the relevant units of information

and diminishes their relative visibility.”

The website organises information into a well-distributed layout, the website flows

correctly since everything connects the way it should.

In order not to distract users and being part of the most relevant content, images

basically consist of icons and product pictures with whitespace between them to ease the

readability. The website avoid any unnecessary piece of text or image.

The navigation system is consistent, therefore, user would not feel lost within the site

which make it very usable.

8.1.9 HELP USERS RECOGNISE, DIAGNOSE, AND RECOVER FROM ERRORS

“Error messages should be expressed in plain language (no codes), precisely indicate

the problem, and constructively suggest a solution.”

As said earlier, should users do not complete mandatory field on any of the website

forms, error messages will show up. If those field are invalid, the system automatically stops

the action, warn users of the errors made with user friendly messages in natural language and

finally.

However, unlike input errors, the system does not deal with more technical errors

properly, for instance, if a problem with the database connectivity occurs, the error message


54

obtained is abstract and not friendly and does not suggest any solution at all “Warning:

mysql_pconnect(): php_network_getaddresses: getaddrinfo failed”

8.1.10 HELP AND DOCUMENTATION

“Even though it is better if the system can be used without documentation, it may be

necessary to provide help and documentation. Any such information should be easy to

search, focused on the user's task, list concrete steps to be carried out, and not be too

large.”

Because of the simplicity of the main features of this online system, one can use the

website without any separated documentation, nevertheless, even though the website is user-

friendly, detailed explanation about the process of purchasing have been integrated under the

section “how to buy” to ensure all users understand it.

Additionally, “Terms of Use” and “Privacy Policy sections are visible in order to ensure

that users are aware of the level of confidentiality and other conditions this website might use.

8.1.11 CONCLUSION ON HEURISTIC EVALUATION:

The system seems to be a good shopping website due to a number of reasons. The

system aimed ultimately at providing a flexible and effective response to the needs of those

users who usually do not have too much time to spend looking around the website. To this

category of company, the consistency and site acceptance might be excellent when it comes to

user experience. On the other hand, it is worth mention that there is still room to improve the

usability system, i.e. including a search box.

8.2 USER TESTING

This section describes how the user evaluation have been performed by explaining the user

testing setup.

8.2.1 METHOD

In total, 3 participants took part in the evaluation. The session started with an

introduction of the evaluation, after stating that the evaluation is intended to improve the user

experience of Spaniards who are settled in the UK and somehow requires the use of an e-

commerce framework to acquire the food they miss whilst in the UK. The observation concept

as a data collection method was also explained in the introduction. It was also explained that


55

the researcher was there to observe and will not help participants. Participants were also

provided with, a detailed information sheet and a consent form.

Participants were ask to navigate freely through the website for 1 minute and then

perform a set of predetermined tasks. The tasks and the key criteria for selecting them were the

same previously used in the first functional prototype evaluation and can be found in chapter

5.4.2.1 and 5.4.2.2, respectively.

Furthermore, to ensure that vital feedback was not unseen, after their tasks, participants

were asked to tell which points were friendly and which ones problematic.

Although users themselves were not recorder, user screens of each session were

recorded using HyperCam recorder. The recordings allowed the author to analyse the evaluation

and include further comments about the patterns, making the process more efficient.

8.2.2 USER TESTING RESULTS

User 1 User 2 User 3

Task Clicks Errors Time Clicks Error Time Clicks Errors Time

Register as new user 4 1 51s 17 1 71s 15 0 58s

Sign up with your username and password

3 0 11s 4 1 15s 3 0 9s

Buy five items from at least three

different categories 15 0 41s 15 0 51s 20 0 48s

Delete a product selection from

my basket 2 0 4s 2 0 3s 2 0 5s

Add a new product into your

shopping cart 4 0 12s 4 0 10s 4 0 10s

Modify your name and address 5 1 10s 4 0 16s 4 0 11s

Go back to my basket 1 0 5s 1 0 3s 1 0 5s

Select payment method and

Checkout 1 0 8s 1 0 5s 1 0 5s

Check out my order history 2 0 14s 3 1 16s 2 0 9s

Logout 1 0 4s 1 0 2s 1 0 4s

Table [5] User Testing Data


56

The results of the user evaluation are very reassuring, in the light of the small number

of errors that users have been made, and the short time that each participant spent to accomplish

all the task, therefore, the evidence to date shows that the system provides a high usability level

and a satisfactory user experience which contribute to a satisfactory user experience.

However, it is worth stressing that two thirds of the users did not use the tab key

to move to the next field while filling out the registration form which led to an increase in the

number of clicks.

The field called ‘Address2´ was unclear for all the users who made the same mistake

while filling out the registration form and two of them tried to leave it blank despite the

obligatory nature of that field resulting in an error.

Two participants used the right category menu in order to continue buying, on the other

hand, one participant used the ‘continue buying’ link on the top of the basket which takes the

user to the main category menu on the home page, and this last action implied more clicks.

CHAPTER 9: SUMMARY AND CONCLUSIONS

57

CHAPTER 9: SUMMARY AND CONCLUSIONS

The author can conclude that the research conducted for this paper has proved that

the growing number of Spanish settled in the UK require a tailor-made solution to

effectively meet their food needs, as this project has demonstrated, the vast majority of

them feel confident with e-commerce and would be willing to use this type of application

to bridge this gap.

This project also looked into the e-commerce application related issues. Several

related technologies have been compared by examining their performance and advantages

and drawbacks. Through the course of comparison, the comparison result of the

technologies discusses on some different features conclude that PHP and MySQL are the

more suitable technologies to solve the identified problem addresses in the previous

research.

Furthermore, this project examined the process of designing and developing an

effective e-commerce system through the entire process of system structure design,

system modeling design, GUI design, and careful evaluation and testing.

From theory to practice, from perceptual knowledge to rational knowledge, this

project has provided the author with a better understanding of the potential offered by the

discussed technology in terms of e-commerce applications while attaining an in-depth insight

of actual user needs.

On the other hand, as this project covered a wide range of functionality, the author

met several methodological and technical difficulties throughout the project development

process. Sometimes, minor errors took a very long time and a concentrated efforts to find and

fix them, however, from an appropriated use of literature and research findings, obstacles

were overcome so that the project went entirely as planned.

CHAPTER 10: FURTHER WORK

58


10.1 FURTHER TECHNICAL IMPLEMENTATIONS

As the author has no prior experience with JavaScript and little exposure to PHP

and MySQL, it was arduous to determine what could be accomplished in the established

timeframe due to the broad number features required by an usable an accessible e-

commerce application. However, in spite of the fact that a fully working e-commerce

system aimed at Spaniards settled in the UK has been implemented, there are certain

limitations for the current application to which solutions are provided as a future work:

1. Purchase button for each product on the product list: In order to allow users

to buy items without opening the product description page which would mean less

number clicks for concurrent users.

2. Credit Card and PayPal validation: At this time, the only payment option that

works is Bank Transfer.

3. Pagination: Once the website has lots of products it is vital to divide the catalogue

pages into sub-pages in order to limit a certain number of results per page.. For

instance, when you do a search on a website and results are listed 10 per page, this

is pagination:

4. Shipping: The system should include a shipping feature where users select a type

of shipping at the time of placing the order.

5. Search Box: A search box engine will be necessary for both Front-end and Back-

end so that users will benefit from finding their products faster and Admins will

benefit for finding products, clients and order in a more rapid and sweeping way

10.2 FURTHER RESEARCH STUDY

Notwithstanding the value provided by the current research, future research could focus

on the aspects described below.

1. More evaluators: The final user evaluation has been carried out with a limited

number of users. Using more participants in the evaluations might provide some

extra insights


59

2. Additional scenarios: Using additional scenarios would help obtain decisive

findings for patterns that have not yet been sufficiently analysed and evaluated.

For instance, an additional scenario would be testing the contact form and the

mailing system.

3. Further research into other goods that Spaniards miss while in the UK:

Conduction another research into other goods through new questionnaires in order

to uncover additional user needs other than food and find out which solutions fits

those needs.

RESOURCES

60

RESOURCES

[1] European Commission. Eurostats. Migration and migrant population statistics,

http://epp.eurostat.ec.europa.eu/statistics_explained/index.php/Migration_and_migrant_pop

ulation_statistics#Migration_flows. March 2013

[2] BBC News 22 April 2013, Spain´s population shrinks as immigrants flee economic crisis.

[3] Hein de Hass. University of Oxford. The determinants of international migrations. 2011

[4] Skyscanner. Lo que mas se añora cuando se está en otro país.

http://www.skyscanner.es/noticias/tan-solo-un-10-de-los-turistas-disfruta-de-sus-vacaciones-

sin-padecer-morrina

[5] M. Arlitt, D. Krishnamurthy, and J. Rolia. Characterizing the scalability of a large web-based

shopping system. ACM Transactions on Internet Technology. 2001

[6] G. Gama, W. Meira Jr., M. Carvalho, D. Guedes, and V. Almeida. Resource placement in

distributed e-commerce servers. The Evolving Global Communications Network. 2001.

[7] U. Vallamsetty, K. Kant, and P. Mohapatra. Characterization of e-commerce traffic. Fourth

IEEE International Workshop on Advanced Issues of Ecommerce and Web-Based

[8] Nigel Bevan. What is the difference between the purpose of usability and user experience

evaluation methods? 2010

[9] ISO 9241-11 (1998) Ergonomic requirements for office work with visual display terminals

(VDTs) Part 11: Guidance on Usability. 1998

[10] ISO FDIS 9241-210 (2009) Human-centred design process for interactive systems. 2009

[11] Comentum Corp. Programming Languages Used in Most Popular Websites. Accessed June

2013

[12] Cplusplus. c++ Brief Description. http://www.cplusplus.com/info/description/. Accessed

June 2013

[13] Perl. About Perl. http://www.perl.org/about.html. Accessed June 2013

[14] Web Design Library. Advantages of PHP Programming. http://www.webdesign.org/web-

programming/php. Accessed June 2013

[15] W3Schools. Asp.net tutorial. http://www.w3schools.com/aspnet/default.asp. Accessed

June 2013

[16] Curtis Dicken. Top 5 Databases for Web Developers.

http://www.htmlgoodies.com/primers/database/top-5-databases-for-web-developers.html.

Accessed July 2013

[17] Computerweekly. Choosing the right database management system.

http://www.computerweekly.com/feature/Choosing-the-right-database-management-system

Accessed July 2013

http://www.skyscanner.es/noticias/tan-solo-un-10-de-los-turistas-disfruta-de-sus-vacaciones-sin-padecer-morrina

http://www.skyscanner.es/noticias/tan-solo-un-10-de-los-turistas-disfruta-de-sus-vacaciones-sin-padecer-morrina


http://www.cplusplus.com/

http://www.cplusplus.com/info/description/

http://www.perl.org/about.html

http://www.webdesign.org/web-programming/php

http://www.webdesign.org/web-programming/php

http://www.w3schools.com/aspnet/default.asp

http://www.htmlgoodies.com/primers/database/top-5-databases-for-web-developers.html

http://www.computerweekly.com/feature/Choosing-the-right-database-management-system

RESOURCES

61

[18] Oracle. Database Documentation Library.

http://download.oracle.com/docs/cd/B19306_01/server.102/b14220/intro.htm#i62345.

Accessed June 2013

[19] MySQL. Tutorial. http://www.mysql.com/why-mysql/. Accessed June 2013

[20] PostgreSQL About. http://www.postgresql.org/about/. Accessed June 2013

[21] Human Factors International, Inc. Five Dimensions of User Experience balancing business

and user experience perspectives to create successful e-commerce sites. 2008

[22] Alexandre N. Tuch, Eva Presslaber, Markus Stoecklin, Klaus Opwis, Javier Bargas-Avila. The

role of visual complexity and prototypicality regarding first impression of websites: Working

towards understanding aesthetic judgments. 2012

[23] Haakon Kobbenes, Kristian Folkman. E-learning and usability: integrating the use and user

dimension. 2003

[24] Usability.gov. 2013 Usability Guidelines. http://guidelines.usability.gov/ 2013

[25] About.com. Web Images Should Be Small. Jennifer Kyrnin.

http://webdesign.about.com/od/optimizingimages/a/aa032700a.htm. Accessed July 2013

[26] Microsoft. Dev Center. Desktop. http://msdn.microsoft.com/en-

us/library/windows/desktop/aa511280.aspx. Accessed July 2013.

[27] World Health Organization. IBM Accessibility Center. http://www-

3.ibm.com/able/reasons.html. Accessed July 2013.

[28] Accessible Culture. Screen Readers and details/summary

http://www.accessibleculture.org/articles/2012/03/screen-readers-and-details-summary/.

Accessed July 2013.

[29] Web Accessibility Initiative. Web Content Accessibility Guidelines.

http://www.w3.org/WAI/guid-tech.html . Accessed July 2013.

[31] WebAim. Keyboard Accessibility. http://webaim.org/techniques/keyboard/. Accessed July

2013.

[32] W3Schools. Xml tutorial. http://www.w3schools.com/xml/. Accessed June 2013.

[33] Robin Nixon. Learning PHP, MySQL JavaScript and CSS. 2nd Edition. 2012

[34] W3Schools. XHTML Introduction. http://www.w3schools.com/html/html_xhtml.asp.

Accessed June 2013

[35] IBM. Build quick, slick Web sites. http://www.ibm.com/developerworks/library/wa-

slicksite/index.html Sept 2005

[36] Mozilla Developers Network. Getting started with CSS https://developer.mozilla.org.

Accessed June 2013

[37] W3Schools. JQuery Tutorial. http://www.w3schools.com/jquery/ Accessed June 2013

[38] Thomas M. Connolly Carolyn E. Begg .Database Systems: A Practical Approach to Design,

Implementation and Management. 4th Edition. 2009

http://download.oracle.com/docs/cd/B19306_01/server.102/b14220/intro.htm#i62345

http://www.mysql.com/why-mysql/

http://research.google.com/pubs/JavierBargasAvila.html

http://guidelines.usability.gov/

http://webdesign.about.com/od/optimizingimages/a/aa032700a.htm

http://msdn.microsoft.com/en-us/library/windows/desktop/aa511280.aspx

http://msdn.microsoft.com/en-us/library/windows/desktop/aa511280.aspx

http://www-3.ibm.com/able/reasons.html

http://www-3.ibm.com/able/reasons.html

http://www.accessibleculture.org/articles/2012/03/screen-readers-and-details-summary/

http://www.w3.org/WAI/guid-tech.html

http://webaim.org/techniques/keyboard/

http://www.w3schools.com/xml/

http://www.w3schools.com/html/html_xhtml.asp

http://www.ibm.com/developerworks/library/wa-slicksite/index.html

http://www.ibm.com/developerworks/library/wa-slicksite/index.html

https://developer.mozilla.org/

http://www.w3schools.com/jquery/

http://www.amazon.com/s/ref=ntt_athr_dp_sr_1?_encoding=UTF8&field-author=Thomas%20M.%20Connolly&search-alias=books&sort=relevancerank

http://www.amazon.com/s/ref=ntt_athr_dp_sr_2?_encoding=UTF8&field-author=Carolyn%20E.%20Begg&search-alias=books&sort=relevancerank

RESOURCES

62

[39] Security Standards Council. Requirements and Security Assessment Procedures Version 2.0.

https://www.pcisecuritystandards.org/documents/pci_dss_v2.pdf. 2010

[40] About.com. The Difference between Cookies and Sessions. Angela Bradley

http://php.about.com/od/learnphp/qt/session_cookie.htm. Accessed August 2013

[41] United Kingdom International Chamber of Commerce. ICC UK Cookies Guide. 2012

http://www.international-chamber.co.uk/components/com_wordpress/wp/wp-

content/uploads/2012/04/icc_uk_cookie_guide.pdf

[42] Jakob Nielsen. 10 Usability Heuristics for User Interface Design. 1995

http://www.nngroup.com/articles/ten-usability-heuristics/ Accessed August 2013

https://www.pcisecuritystandards.org/documents/pci_dss_v2.pdf.%202010

http://php.about.com/od/learnphp/qt/session_cookie.htm

http://www.international-chamber.co.uk/components/com_wordpress/wp/wp-content/uploads/2012/04/icc_uk_cookie_guide.pdf

http://www.international-chamber.co.uk/components/com_wordpress/wp/wp-content/uploads/2012/04/icc_uk_cookie_guide.pdf

http://www.nngroup.com/articles/ten-usability-heuristics/

APPENDICE

63

APPENDICE

Appendix 1: Customer Research Raw Data .................................................................. 1

Appendix 2: Database Table Layout ............................................................................ 4

Appendix 3: Paper Prototype ....................................................................................... 8

Appendix 4: Functional Prototype .............................................................................. 12

Appendix 5: System Back-End Detailed Design ......................................................... 16

Appendix 6a: Quesionnaire 1 (Customer Research) ..................................................... 24

Appendix 6b: Questionnaire 2 (Paper Prototype Evaluation) ........................................ 28

Appendix 6c: Interview Questions (Functional Prototype Evaluation).......................... 29

Appendix 7: Source Code ...................................................................... Attached DISC

Appendix 8: Database Backup ............................................................... Attached DISC

APPENDIX 1: CUSTOMER RESEARCH – ROW DATA

1

APPENDIX 1: CUSTOMER RESEARCH - ROW DATA

10.2.1 INDIVIDUAL BACKGROUNDS

Gender Number or Respondents Percentage (%)

Male 55 32%

Female 118 68%

Age Number or Respondents Percentage (%)

18 - 30 117 67%

31 - 45 55 31%

46 - 60 2 1%

Over 60 0 0%

Time living in the

UK Number or Respondents Percentage (%)

Less than 1 year 80 43%

Between 1 and 3

years 58 33%

More than 3 years 36 21%

Any difficulty

finding your

favourite Spanish

products in the UK?

Number or Respondents Percentage (%)

Yes 139 80%

No 34 20%

Occupation Number or Respondents Percentage (%)

Freelance 12 7%

Employee 107 61%


2

Retired 0 0%

Student 28 16%

Job Seeker 17 10%

Others 11 6%

ATTITUDE TOWARD E-COMMERCE

Confident with e-

commerce Number or Respondents Percentage (%)

Highly confident 34 20%

Good 76 44%

Average 41 24%

Low 22 13%

Interested in

acquiring dSpanish

items online

Number or Respondents Percentage (%)

Very interested 104 60%

Interested 35 20%

Neutral 23 13%

Not Interested 12 7%

DESIRABLE SPANISH PRODUCTS IN THE UK.

Product Number of times the product has

been selected Percentage (%)

Chorizo 53 30%

Morcilla 65 37%

Lomo Embuchado

(Pork Loin) 63 36%

Jamon Serrano

(Serrano Ham) 91 52%


3

Salchichon 50 19%

Chistorra 44 25%

Queso Semicurado

(Semi cured Cheese) 51 29%

Queso Curado (Cured

Cheese) 52 30%

Lentejas (Lentils) 51 29%

Boquerones

(Anchovies) 47 27%

Pulpo (Octopus) 68 39%

Calamar (Squid) 64 37%

Pimientos de Padron

(Padron Peppers) 55 32%

Pimientos de Piquillo

(Piquillo Peppers) 44 25%

Colorante para Paella

(Paella Colorant) 51 29%

Pimentón Dulce

(Sweet Pimenton) 44 25%

Natillas 46 26%

Turron 51 29%

Mantecados y

Polvorones 49 28%

Ensaimadas 46 26%

Palmeritas de

Chocolate 66 38%

Colacao 76 44%

Pipas de Girasol

(Sunflower Seeds) 57 33%

Aceite de olive (Olive

oil) 52 30%

Empanada Gallega 50 29%

APPENDIX 2: DATABASE TABLE LAYOUT

4


Categories


id INT Primary key for category identification

category VARCHAR Category name

description VARCHAR Category description

image VARCHAR Category image

Products


Id INT Primary key for product identification

sku VARCHAR Stock-keeping unit

name VARCHAR Product name

description VARCHAR Product description

image VARCHAR Product image

price DECIMAL Price per unit

stock INT Remaining stock

date_created TIMPESTAMP Product Insertion Date

Categories_id INT Foreign key to categories


5

Sales


id INT Primary key for sale identification

disccount INT Discount rate

start_date DATE Sale start date

end_date DATE Sale end date


Customers


Id INT Primary key for product identification

email VARCHAR Customer email address

first_name VARCHAR Customer Forename

las_name VARCHAR Customer Surname

address1 VARCHAR Number and street

address2 VARCHAR Apartment, condo, floor number…

city VARCHAR Current customer city

country VARCHAR Current customer country

phone INT Customer telephone number

date_created TIMESTAMP Customer insertion date

gender VARCHAR Customer gender

username VARCHAR Customer preferred username

password VARCHAR Customer password


6

Carts


Id INT Primary key for cart identification

quantity INT Number of a particular products being

ordered

date_created TIMESTAMP Cart insertion date

date_modified TIEMESTAMP Cart modification date


user_session_id INT Foreign key to customers

transaction_made INT Foreign key to orders and transaction

status indicator

Orders


Id INT Primary key for order identification

total DECIMAL Order total price

shipping DECIMAL Shipping cost

ship_date TIMESTAMP Shipping date

credit_card_numb

er VARCHAR Part of the customer´s credit card number

order_date TIMESTAMP Order insertion date

customer_id INT Foreign key to customer

payment_method_

id INT Foreign key to payment_methods

order_status_id INT Foreign key to order_status


7

Variables


Id INT Primary key for VAT

VAT INT Current VAT value

Payment method


Id INT Primary key for payment method

method VARCHAR Payment method name

Order status


Id INT Primary and unique key for order status

status VARCHAR Order status

APPENDIX 3: PAPER PROTOTYPE OVERVIEW

8


HOME PAGE SKETCH


9

PRODUCT LIST SKETCH


10

PRODUCT DESCRIPTION SKETCH


11

SHOPPING CART SKETCH

APPENDIX 5: FNCTIONAL PROTOTYPE OVERVIEW

12

APPENDIX 4: FUNCTIONAL PROTOTYPE OVERVIEW

HOME PAGE PROTOTYPE

REGISTRATION FORM PROTOTYPE


13

PRODUCT LIST PROTOTYPE

PRODUCT DETAILS PROTOTYPE


14

SHOPPING CART LIST PROTOTYPE

ORDER HISTORY PROTOTYPE


15

ORDER DETAILS PROTOTYPE

APPENDIX 5: SYSTEM BACK-END DETAILED DESIGN

16


Back-end start up module (see Figure [AP1-1]) is the first webpage that the admin

see, the start-up page expose the most practical designated tools and information for the

admin to manage the system.

The system operations menu is located on the top of the page and provides useful

modules on products, categories, customers and orders.

When the admin clicks on a specific module on the top menu, the according

system operation module of that section will be displayed on content of the page, this

module provides admins useful actions for adding, editing and deleting elements.

7.1.1 PRODUCTS MODULE

Figure [AP1-1] Products Module

Figure [AP1-2] Start up Module

7.1.1.1 Product List

This page (see figure [AP1-2]) fetches basic records from table products, the

category name from categories and order the results by SKU


17

Figure [AP1-3]] Product List

$query_productlist = "SELECT products.id, products.sku, products.name,

products.image, products.description, products.price, products.stock,

products.date_created, categories.category

FROM products

LEFT JOIN categories

ON products.categories_id = categories.id

ORDER BY products.SKU ASC")

We also need to include a parameter so that the system knows what register the

user wants to select, for instance, for editing it would be as follow:

<a href="products_edit.php?recordID=<?php echo $row['id']; ?>"

7.1.1.2 Add New Product

This page (see figure [AP1-4]) generates a form which inserts a new record into

the table products as follows:


18

Figure [AP1-4] Add new product

Inserting the new records in the database:

if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {

$insertSQL = "INSERT INTO products (sku, name, `description`, image, price,

stock, categories_id) VALUES ('$_POST[sku]', '$_POST[name]',

'$_POST[description]', '$_POST[image]', '$_POST[price]', '$_POST[stock]',

'$_POST[categories_id]')";

The following code has been programed in order to create a JavaScript function which

allows users to upload an image for each image register in the products table

The first line defines the variable 'opener' which will upload the image through a pop-up

window. Subsequently, a new variable named 'remote' opens a new window and then

also defines the shape and tools of that window and finally ‘remote.focus()’ moves the

windows into the foreground.

function uploadimage(){

self.name = 'opener';

remote = open('imagemanager.php', 'remote', '

width=400,height=150,location=no,scrollbars=yes,menubars=no,toolbars=n

o,resizable=yes,fullscreen=no, status=yes');

remote.focus();}

The next script copy the selected image into the server with a name defined by the image

itself using a temp name in the meanwhile

if ((isset($_POST["sent"])) && ($_POST["sent"] == "form1")) {

$file_name = $_FILES['userfile']['name'];

move_uploaded_file($_FILES['userfile']['tmp_name'],

"../documents/uploaded_images/".$file_name);


19

This JavaScript code defines the 'form1' value name same as the name defined by the

uploaded image and then closes the windows

opener.document.form1.image.value="<?php echo $file_name; ?>";

self.close();

7.1.1.3 Edit Product

This page (see figure [AP1-5]) shows and modifies the details of a particular

product:

Figure [AP1-5] Edit Product

This Code, first select and display the correct record from the database and then updates

the record according user preferences:

$query_productDetails = "SELECT * FROM products WHERE

products.id='$varProduct_productDetails'";

if ((isset($_POST["MM_update"])) && ($_POST["MM_update"] == "form1")) {

$updateSQL = "UPDATE products SET sku='$_POST[sku]', name='$_POST[name]',

`description`='$_POST[description]', image='$_POST[image]',

price='$_POST[price]', stock='$_POST[stock]',

categories_id='$_POST[categories_id]' WHERE id='$_POST[id]'";

7.1.1.4 View Product Details

This page (see figure [AP1-6]) selects and displays essential details from the table

products and the discount rate from sales, if applicable.


20

Figure [AP1-6] Product Details

Retrieving the selected records

$query_productview = "SELECT products.id as idproduct, products.name,

products.description, products.image,

products.price, products.stock, products.date_created, categories.category,

categories.id,sales.discount

FROM products

JOIN categories

ON products.categories_id = categories.id

LEFT JOIN sales

ON products.id = sales.product_id

WHERE products.id='$varProducts_productview'";

7.1.1.5 Delete Product

This script deletes the selected register.

1. Getting id of the data from url:

$id =$_REQUEST['recordID'];

2. Sending query/deleting:

mysql_query("DELETE FROM products WHERE id = '$id'")

or die(mysql_error());

3. Redirecting to the previous page:

header("Location: products_list.php");


21

4. Further, in order to prevent users from accidentally deleting something, a

confirmation dialog (figure [AP1-7]) must be displayed. This feature has been easily

implemented with JavaScript:

function ensure()

{

rc = confirm("Are you sure you want to delete this product?");

return rc;

}

Next, we only need to call the function when deleting a product.

Figure [AP1-7] Confirmation Dialog

7.1.2 Orders Module

Figure [AP1-8] Orders Module

7.1.2.1 ORDER LIST SCRIPT

This script (see figure [AP1-9]) displays and orders records from the database by

date, in this particular case we need a double join in order to get registers from orders and

customers tables.


22

Figure [AP1-9] Order List

$query_orderslist = "SELECT orders.id, orders.order_date, orders.total,

customers.username, order_status.status FROM orders

LEFT JOIN customers

ON orders.customer_id = customers.id

LEFT JOIN order_status

ON orders.order_status_id = order_status.id

ORDER BY orders.order_date DESC";

The following code is required to send the parameter RecordId in order to identify what

register is selected for viewing through the identifier id.

<a href="orders_view.php?recordID=<?php echo $row_Recordset1['id']; ?>">

7.1.2.2 VIEW ORDER DETAILS SCRIPT

This script (see figure [AP1-10]) gets records from the orders, on this occasion

we need four join in order to get and display records not only from the tables orders but

also customers, payment methods, carts and products Using the statement 'AS' is

required in order to avoid ambiguity with several columns from different tables but named

the same ('id')

The predefined $_GET variable collects the value defined by the parameter

recordID declared on the previous page so that the system knows what register the user

wants to select:

$query_Orderdetails = "SELECT orders.id, orders.order_date, orders.total,

orders.order_status_id, carts.quantity, customers.id as idcustomer,


23

customers.username, products.name, products.price, payment_methods.method,

order_status.status FROM orders

LEFT JOIN customers

ON customers.id = orders.customer_id

LEFT JOIN carts

ON carts.transaction_made = orders.id

LEFT JOIN products

ON products.id = carts.product_id

LEFT JOIN payment_methods

ON payment_methods.id = orders.payment_method

LEFT JOIN order_status

ON order_status.id = orders.order_status_id

WHERE orders.id = '$varOrder_Orderdetails'";

The next script allows admins to update the order status of the selected order by updating

the column orders in table orders for that particular record previously selected by the

admin. There are four options displayed in a drop list: Pending, Paid, Shipped and

Cancelled.

$updateSQL = "UPDATE orders SET order_status_id='$_POST[order_status_id]'

WHERE id='$_POST[id]'";

Figure [AP1-11] Order Details

The remaining back-end modules (Categories and Customers) have relatively

similar types of operations to those already mentioned.

APPENDIX 6A: QUESTIONNAIRE 1

(Customer Research)

Online version filled out by users at:

https://docs.google.com/forms/d/1Kk7j5mmx_bsrxtZ6_62TOl8YdCmo0k5PcrDAR-hIFL0/viewform E-commerce Platform for Spaniards in the UK Research Study

Questionnaire 1 20 may 2013 School of Computing, College of Art & Design, Architecture, Engineering & Physical Sciences

UNIVERSITY OF DUNDEE Dundee DD1 4HN Scotland UK t +44 (0)1382 344145 f +44 (0)1382 345509

25

E-commerce Platform for Spaniards in the UK

1. Are you Over 18 years old?

Yes

No

2. Do you live / have you ever lived in the UK?

Yes

No

3. If yes, how long?

Less than one year

Between one and three years

More than three years

4. Are you familiar with typical Spanish food?

Very familiar

Average

Not very familiar

Not at all

5. Have you ever experience any difficulty finding those products in the UK?

Yes

No

6. If yes, describe what those difficulties are

7. If no, describe the method you normally use in order to find this kind of products.

8. Please, select from the following list all the products that you miss while living in the UK

Charcuterie:

Chorizo

Morcilla

Pork Loin (Lomo embuchado)

Serrano Ham (Jamón serrano)

https://docs.google.com/forms/d/1Kk7j5mmx_bsrxtZ6_62TOl8YdCmo0k5PcrDAR-hIFL0/viewform


(Customer Research)





26

Salchichon

Chistorra*

Cheese:

Goat Cheese (queso de cabra)

Sheep Cheese (Queso de oveja)

Semicured Cheese (Queso semicurado)

Cured Cheese (Queso curado)

Tetilla Cheese (Queso de tetilla)*

Blue Cheese (Queso azul)*

Store Cupboard:

Rice (Arroz)*

White Beans (Alubias blancas)*

Red Beans (Alubias rojas)*

Lentils (Lentejas)

White Flour (Arina)*

Chickpeas (Garbanzos)

Fish and Seafood:

Anchovies (Boquerones)

Mussels (mejillones)

Octopus (Pulpo)

Tuna (Atun)*

Squid (Calamar)

Prawn (Gambas)*

Shrimp(Langostinos)*

Vegetables:

Padron Peppers (Pimientros de pardon)

Piquillo Peppers (Pimientos de piquillo)

Asparagus (Esparragos)

Sun-dried Tomatoes (Tomates secos)*

Dried Peppers (Pi mienetos secos)*

Spices:

Paella Colorant (Colorante para paella)



(Customer Research)





27

Sweet Pimentón (Pi mentón dulce)

Spicy Pimentón (Pi mentón picante)

Pincho Seasoning (Aliño para pinchos)

Sweets:

Crema Catalana

Flan

Natillas

Dulce de membrillo

Cabello de Angel

Turron

Mantecados & Polvorones

Ensaimadas

Palmeritas de Chocolate

Colacao

Horchata

Others Foods:

Sunflower Seeds (Pipas de girasol)

Extra virgin olive oil (Aceite de olive virgen extra)

Vinegar (Vinagre)

Empanada Gallega

Others (Specify – Food or any other categories of items):

9. Please rate your confidence with e-commerce sites:

Highly confident

Good

Average

Low

10. Would you be interested in acquiring these products through the internet at the same price

offered by regular Spanish supermarkets?

Very interested

Interested,

Neutral

Not interested



(Customer Research)





28

11. If not, please, tell us your reason to not be interested in this system

It is complicated

It is not reliable

It is unnecessary

Other (Specify)

12. Gender

Male

Female

13. Age

18 - 30

31 – 45

46 – 60

Over 60

14. Occupation

Freelance

Employee - Specify

Retired

Student - Specify

Job Seeker

Other

15. Would you be willing to be contacted for involvement in further stages of this research? If

so, please, write here your e-mail address, otherwise, leave it blank.


APPENDIX 6B: QUESTIONNAIRE 2:

(Paper Prototype Evaluation)

E-commerce Platform for Spaniards in the UK Research Study

Questionnaire 2 20 may 2013 School of Computing, College of Art & Design, Architecture, Engineering & Physical Sciences UNIVERSITY OF DUNDEE Dundee DD1 4HN Scotland UK t +44 (0)1382 344145 f +44 (0)1382 345509

28

E-commerce Platform for Spaniards in the UK research

1. Could you tell what the page was about? Describe the purpose and recommend how this

can be communicated in a better way.

2. Is there something missing that you were expecting to see?

3. How did you find the layout of the site? How would you improve the colours, graphics,

photos, text etc.?

4. Pick at least one confusing thing about the sketch that you do not understand. Also

mention how you think this can be fixed.

5. Is intuitive the navigation system?

APPENDIX 6C: INTERVIEW

(Functional Prototype Evaluation)

orm for Spaniards in the UK Research Study

Interview 20 may 2013 School of Computing, College of Art & Design, Architecture, Engineering & Physical Sciences UNIVERSITY OF DUNDEE Dundee DD1 4HN Scotland UK t +44 (0)1382 344145 f +44 (0)1382 345509

29

E-commerce Platform for Spaniards in the UK research

1. Could you find the products and categories easily?

2. Was it easy to get to the requested page from the page you were on?

3. Was it difficult to edit a product selection?

4. Was there something missing that you were expecting to see?

5. Was anything too well hidden’

6. Was everything organized well and set out as expected?

7. Is it clear what the user must do to complete the task?

8. How intuitive and helpful is the navigation system?

9. Do error messages indicate the what, where and why and how to recover?

10. Do you find this website as trustworthy or non-trustworthy/shady? Why?

11. Name your three favourite things about the site, and your three least favourite

12. If you could change one thing on the site, what would you change?

13. As a potential customer, are you likely to use this website?

research study and system develpment of e commerce platorms for spaniards in the uk pdf

Documents

jos andrs durn vargas

ecommerce site

research study

research objective

research method

dr craig ramsey

craig ramsay

degree of master