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
CHAPTER 1: BACKGROUND ANALYSIS
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
CHAPTER 1: BACKGROUND ANALYSIS
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/
CHAPTER 1: BACKGROUND ANALYSIS
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
CHAPTER 2: CUSTOMER RESEARCH
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]
CHAPTER 2: CUSTOMER RESEARCH
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
CHAPTER 2: CUSTOMER RESEARCH
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
CHAPTER 2: CUSTOMER RESEARCH
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
CHAPTER 2: CUSTOMER RESEARCH
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.
CHAPTER 2: CUSTOMER RESEARCH
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
CHAPTER 3: COMPARISION OF TECHNOLOGY OPTIONS
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:
CHAPTER 3: COMPARISION OF TECHNOLOGY OPTIONS
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.
CHAPTER 3: COMPARISION OF TECHNOLOGY OPTIONS
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].
CHAPTER 3: COMPARISION OF TECHNOLOGY OPTIONS
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
CHAPTER 3: COMPARISION OF TECHNOLOGY OPTIONS
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
CHAPTER 4: ACCESSIBILITY, USABILITY, FRIENDLY USER EXPERIENCE AND RELATED
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
CHAPTER 4: ACCESSIBILITY, USABILITY, FRIENDLY USER EXPERIENCE AND RELATED
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
CHAPTER 4: ACCESSIBILITY, USABILITY, FRIENDLY USER EXPERIENCE AND RELATED
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
CHAPTER 4: ACCESSIBILITY, USABILITY, FRIENDLY USER EXPERIENCE AND RELATED
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].
CHAPTER 4: ACCESSIBILITY, USABILITY, FRIENDLY USER EXPERIENCE AND RELATED
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
CHAPTER 5: SYSTEM DESIGN AND MODELING
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
CHAPTER 5: SYSTEM DESIGN AND MODELING
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.
CHAPTER 5: SYSTEM DESIGN AND MODELING
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.
CHAPTER 5: SYSTEM DESIGN AND MODELING
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,
CHAPTER 5: SYSTEM DESIGN AND MODELING
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
CHAPTER 5: SYSTEM DESIGN AND MODELING
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
CHAPTER 5: SYSTEM DESIGN AND MODELING
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].
CHAPTER 5: SYSTEM DESIGN AND MODELING
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
CHAPTER 5: SYSTEM DESIGN AND MODELING
29
5.2.2.10 Database Entity-Relation (ER) Diagrams
Figure [12] ER Diagram
CHAPTER 6: INITIAL PROTOTYPING AND EVALUATION
30
CHAPTER 6: INITIAL PROTOTYPING AND EVALUATION
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]
CHAPTER 6: INITIAL PROTOTYPING AND EVALUATION
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]
CHAPTER 6: INITIAL PROTOTYPING AND EVALUATION
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.
CHAPTER 6: INITIAL PROTOTYPING AND EVALUATION
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.
CHAPTER 6: INITIAL PROTOTYPING AND EVALUATION
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.
CHAPTER 6: INITIAL PROTOTYPING AND EVALUATION
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.
CHAPTER 6: INITIAL PROTOTYPING AND EVALUATION
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
CHAPTER 7: APPLICATION DEVELOPMENT
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]
CHAPTER 7: APPLICATION DEVELOPMENT
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 }?>
CHAPTER 7: APPLICATION DEVELOPMENT
39
Figure [16] Homepage
CHAPTER 7: APPLICATION DEVELOPMENT
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,
CHAPTER 7: APPLICATION DEVELOPMENT
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
CHAPTER 7: APPLICATION DEVELOPMENT
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.
CHAPTER 7: APPLICATION DEVELOPMENT
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;
}
CHAPTER 7: APPLICATION DEVELOPMENT
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,
CHAPTER 7: APPLICATION DEVELOPMENT
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
CHAPTER 7: APPLICATION DEVELOPMENT
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.
CHAPTER 7: APPLICATION DEVELOPMENT
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
CHAPTER 7: APPLICATION DEVELOPMENT
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:
CHAPTER 7: APPLICATION DEVELOPMENT
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
CHAPTER 8: FINAL EVALUATION
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.
CHAPTER 8: FINAL EVALUATION
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
CHAPTER 8: FINAL EVALUATION
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.
CHAPTER 8: FINAL EVALUATION
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
CHAPTER 8: FINAL EVALUATION
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
CHAPTER 8: FINAL EVALUATION
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
CHAPTER 8: FINAL EVALUATION
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
CHAPTER 10: FURTHER WORK
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
CHAPTER 10: FURTHER WORK
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
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
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
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%
APPENDIX 1: CUSTOMER RESEARCH – ROW DATA
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%
APPENDIX 1: CUSTOMER RESEARCH – ROW DATA
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
APPENDIX 2: DATABASE TABLE LAYOUT
Categories
Field Data Type Description
id INT Primary key for category identification
category VARCHAR Category name
description VARCHAR Category description
image VARCHAR Category image
Products
Field Data Type Description
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
APPENDIX 2: DATABASE TABLE LAYOUT
5
Sales
Field Data Type Description
id INT Primary key for sale identification
disccount INT Discount rate
start_date DATE Sale start date
end_date DATE Sale end date
product_id INT Foreign key to products
Customers
Field Data Type Description
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
APPENDIX 2: DATABASE TABLE LAYOUT
6
Carts
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
Orders
Field Data Type Description
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
APPENDIX 2: DATABASE TABLE LAYOUT
7
Variables
Field Data Type Description
Id INT Primary key for VAT
VAT INT Current VAT value
Payment method
Field Data Type Description
Id INT Primary key for payment method
method VARCHAR Payment method name
Order status
Field Data Type Description
Id INT Primary and unique key for order status
status VARCHAR Order status
APPENDIX 3: PAPER PROTOTYPE OVERVIEW
8
APPENDIX 3: PAPER PROTOTYPE OVERVIEW
HOME PAGE SKETCH
APPENDIX 3: PAPER PROTOTYPE OVERVIEW
9
PRODUCT LIST SKETCH
APPENDIX 3: PAPER PROTOTYPE OVERVIEW
10
PRODUCT DESCRIPTION SKETCH
APPENDIX 3: PAPER PROTOTYPE OVERVIEW
11
SHOPPING CART SKETCH
APPENDIX 5: FNCTIONAL PROTOTYPE OVERVIEW
12
APPENDIX 4: FUNCTIONAL PROTOTYPE OVERVIEW
HOME PAGE PROTOTYPE
REGISTRATION FORM PROTOTYPE
APPENDIX 5: FNCTIONAL PROTOTYPE OVERVIEW
13
PRODUCT LIST PROTOTYPE
PRODUCT DETAILS PROTOTYPE
APPENDIX 5: FNCTIONAL PROTOTYPE OVERVIEW
14
SHOPPING CART LIST PROTOTYPE
ORDER HISTORY PROTOTYPE
APPENDIX 5: FNCTIONAL PROTOTYPE OVERVIEW
15
ORDER DETAILS PROTOTYPE
APPENDIX 5: SYSTEM BACK-END DETAILED DESIGN
16
APPENDIX 5: SYSTEM BACK-END DETAILED DESIGN
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
APPENDIX 5: SYSTEM BACK-END DETAILED DESIGN
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:
APPENDIX 5: SYSTEM BACK-END DETAILED DESIGN
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);
APPENDIX 5: SYSTEM BACK-END DETAILED DESIGN
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.
APPENDIX 5: SYSTEM BACK-END DETAILED DESIGN
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");
APPENDIX 5: SYSTEM BACK-END DETAILED DESIGN
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.
APPENDIX 5: SYSTEM BACK-END DETAILED DESIGN
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,
APPENDIX 5: SYSTEM BACK-END DETAILED DESIGN
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)
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
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)
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
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
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
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?