improving usability & security on e-commerce sites luke sloane … · 2019-06-08 · improving...

Improving Usability & Security on E-Commerce Sites

Luke Sloane-Bulger

PROGRAMME

(BSc in Computer Science)

Word Count: 8,692

Wednesday 25th April 2018

SCHOOL OF COMPUTING AND MATHEMATICS

Keele University

Keele

Staffordshire

ST5 5BG

Student ID: 15010247

2 | P a g e

Contents

Keywords ............................................................................................................................................ 3

Abstract .............................................................................................................................................. 3

1.0 Aims ............................................................................................................................................. 3

1.1 Objectives .................................................................................................................................. 3

2.0 Introduction ................................................................................................................................... 3

2.1 Background ................................................................................................................................ 4

3.0 Methodology .................................................................................................................................. 5

3.1 Critical Review ............................................................................................................................ 7

3.2 Self-Evaluation ..........................................................................................................................10

3.3 Survey .....................................................................................................................................11

3.4 Think-Aloud ..............................................................................................................................16

4.0 Addressing the Issue ......................................................................................................................16

4.1 Wireframes ...............................................................................................................................18

4.2 Website – Register/Login System Explained ..................................................................................22

4.2.1 Register (Front-End) ............................................................................................................22

4.2.2 Login (Front End) ................................................................................................................23

4.2.3 Register (Back-End) ............................................................................................................23

4.2.4 Login (Back-End) ................................................................................................................26

5.0 Results .........................................................................................................................................28

6.0 Evaluation/Discussion.....................................................................................................................30

7.0 Conclusion ....................................................................................................................................32

Appendix ............................................................................................................................................32

UG Project Plan ...............................................................................................................................33

Ethics Form ....................................................................................................................................34

Consent Form .................................................................................................................................35

Example Website .............................................................................................................................37

Bibliography: ......................................................................................................................................62


3 | P a g e

Keywords Usability, Security, E-Commerce, Passwords, Pins, Biometrics, Two/Three-Factor Authentication

Abstract

This is an exploration to find a potential answer for improving the current conflict between usability and

security on E-Commerce websites. By outlining, comparing and discussing methods used to secure users’ data,

such as passwords, pins/one-time passwords and biometrics register/login systems. To do this I will be using a

Critical Review, Self-Evaluation, Survey and a Think-Aloud test to gather data and compile results for a

preferable system taken from the survey on which users believe will make E-Commerce sites easier to use. It

was found that pins/OTPs alongside SMS verification offered the majority of the vote from the survey and the

Think-Aloud showed that in terms of usability this was statistically successful from the results. Though this

method of register/login yielded positive results it cannot be ignored that it has its own share of physical and

digital security flaws in terms of phone loss/theft and phone-cloning. The paper concludes that there will

always be a need for further work to answer this never-ending hurdle of vital questions on how to balance

usability and security as technology continues to advance.

1.0 Aims The project aims to explore and improve the current conflict between usability and security on E-Commerce

sites by providing research-based advice, in the form of wireframes and an example website to showcase this.

1.1 Objectives Independently analyse current E-Commerce usability and security platforms through a Critical Review

and Self-Evaluation.

Carry out a survey to understand users’ views on current security methods and how they feel they

affect usability, for example, their preferred method of logging in.

Create a series of wireframes for E-Commerce designs aiming to measurably improve

usability/security and test this with a Think-Aloud.

2.0 Introduction The role of technological revolution has touched every aspect of people’s day-to-day lives from banking,

shopping and much more.

Just one part of this revolution is through the use of E-Commerce, providing people to change the way they

shop from merely using the high street through the use of online servers. Evidently this has become popular

amongst us as last recorded in 2017, “87% of UK consumers have brought at least one product online in the

last 12 months and is expected to increase” (Kitonyi, 2017), with more businesses planning to use the E-

Commerce model approach to widen their audience yet, adding to this ever-increasing statistic – stressing for a

better User Experience (UX).

The use of online transactions has warranted the need for not only usability but, has also warranted online

security to protect users’ sensitive information stored on these sites through the use of passwords and other

means of protection. However, as stated by Schneier “the increase of security methods also leads to the risk of

platforms becoming less usable” (Schneier, 2009). With this fact presented, it should be noted that “E-

Commerce sites are failing to present security measures in a user-friendly way” (Muncaster, 2009).


4 | P a g e

Usability as defined by Jakob Nielsen “is a quality attribute that assesses how easy user interfaces are to use.

The word ‘usability’ also refers to methods for improving ease-of-use during the design process” (Nielsen,

1995). Not only has Nielsen stressed this fact but it has been mentioned in history through the “Technology

Acceptance Model (TAM)” (Davis, Bagozzi & Warshaw, 1989). The model discusses how users come to accept

new technology and how they may reject it. The need for usability is essential for users to navigate through

the site and “it must be easy for users to find what they need” (Cranor, Garfinkel, 2005). This is to prevent

frustration and leaving the website which can be can in fifty-nine seconds or less according to the “59 Second

Rule” (Miller, 2016). This is critical for E-Commerce sites that need users to purchase products to allow the

business to prosper.

Online security comes in several methods. Some have been known to heavily affect UX “through methods such

as passwords, pins, biometrics, two-factor authentication and three-factor authentication. Strong passwords

are desirable, but, often run the risk of having ‘memorability issues’” (Sasse, Brostoff & Weirich, 2001). This

leads to usability issues according to Nielsen’s Heuristics under “learnability and memorability” (Nielsen, 1995).

Through the paper I will be researching and discussing these various methods to find how they impact usability

and security for users.

The flexibility of E-Commerce benefits customers because they are able to browse and shop from the comfort

of their homes without the need to queue in high street shops. For the business sector, E-Commerce is a big

investment as it allows a for a wider target audience without the restrictions that a physical store would bring

in a localised area. These also have to follow legislation such as the Data Protection Act 1998 to protect their

customers’ information, stressing for the need of security but without jeopardising UX.

2.1 Background Figure 1-The spider diagram below depicts a summary of the main background reading I have researched to find relations of

usability and security for E-Commerce.

There has been a dramatic rise of the Internet over the years to the point that it’s become a critical point in

our lives and nigh unavoidable to business and society. With customers using online facilities there's a need to

store personal information and with this, there’s a stress for not only security but a sense of trust for the user

to provide their data for online transactions to take place.

This comes in the form of users registering to the website. Traditionally, by inputting their name, and contact

information which is protected by various security protocols such as passwords. The password is the users’

method of logging into their account and can be troublesome to the organisation. This is due to having to rely

on the user to not only remember their password but, to use a strong password that isn’t at risk of being easily

guessed by malicious users who can gain access to their account through methods such as a Dictionary Attack

as one of many examples, and therefore access to their personal data putting the company at risk of breaching

the Data Protection Act 1998. It’s possible to increase security by forcing the user to have strong passwords

with special characters, capital letters and numbers or by utilising “two-factor authentication with the means of


5 | P a g e

passwords (knowledge) and pins (possession)” (SecurEnvoy, 2015) and even “three-factor authentication with

means of passwords (knowledge), pins (possession) and biometric data (inherence)” (Rouse, 2015) to provide

extra layers of security, to prevent malicious users from breaking into their account. However, this comes with

the consequence of decreased usability.

As stated the limits of human memory are known and play a pivotal factor in usable security. Organisations

can make passwords as strong/complex as they feel necessary, but it’s meaningless if the user cannot

remember them and is forced to write them down causing a critical weakness in security. Though as found in

background reading in the Critical Review (3.1) it’s known that “user behaviour plays a part in many security

failures and it has become common to refer to users as the ‘weakest link’ in the security chain. However,

blaming the user will not lead to more effective security,” (Sasse, Brostoff, Weirrich, 2001). The user cannot be

blamed for security flaws; it is imperative that organisation’s find a means to make security usable.

It’s well known that usability is a critical factor needed in websites. This has been studied many times

throughout history through researchers such as Jakob Nielsen’s Ten Heuristics and Fred Davis’ Technology

Acceptance Model (TAM), “TAM is an Information System theory that models how users come to accept new

technology” (Davis, Bagozzi & Warshaw, 1989). This model suggests that when users are given new

technology it must be:

Perceived Useful (PU) - “the degree to which a person believes that using a particular system would

enhance his/her job performance” (Davis, 1989).

Perceived Ease of Use - "the degree to which a person believes that using a particular system would

be free from effort” (Davis, 1989).

Should the user perceive either of the above in a negative manner they will reject the technology.

With this information it's vital that the system is deemed usable and ‘free from effort’ for users, meaning that

it’s essential that security follows this principle so that users can actually use the system.

3.0 Methodology The methodology process I will use to undergo data collection will be the following: Critical Review, Self-

Evaluation, Survey, Wireframes, Example Website and a Think-Aloud. These will be used to help address the

issue of usable security as discussed in section 4.0.

To assess journals that relate to my project I will be using a Critical Review: Qualitative Studies to review

papers. These guidelines were “originally developed by the McMaster University Occupational Therapy

Evidence-Based Practice Research Group and revised by Letts et al., 2007” (Letts, Wilkin, Law, Stewart, Bosch,

& Westmorland, 2007). This form of review follows structured guidelines that are used to analyse and evaluate

papers, whereas other types of literature review are “rarely underpinned by any clear and systematic

procedures to ensure that all relevant literature is surveyed in an objective manner” (Budgen & Brereton,

2006). The Critical Review asks questions in the left column of the form and the instructions/questions are

written in the ‘comments’ column of each component, the questions asked in this type of review are: study

purpose, literature (Was relevant background literature reviewed?), study design (What was it?), design types,

sampling, data collection, procedural rigour, data analysis, auditability, theoretical connections, overall rigour

and conclusion and implications.

Multiple forms of review exist and deciding on which review to use needs to be accounted. Whether the form of

literature review be the Systematic Literature Review or the Critical Review, I decided to use the Critical

Review as it uses qualitatively to summarise evidence on the topic using subjective methods to collect and

interpret the study, whereas the Systematic Literature Review is said to be a higher-level review it tends to


6 | P a g e

focus on the need to ask a “clinical question” (Basu, 2013) and focuses on a higher number of authors, usually

“three or more” (Basu, 2013) whereas the Critical Review has no need to ask a particular research question

and focuses on one or more authors. To find a relevant paper to review I will be using the keywords related to

this paper seen above, and the information I gained from the Critical Review can be found in section 3.1.

A Self-Evaluation will be conducted to analyse what features current E-Commerce sites have; the guidelines

that they follow and the traits that they share. A Self-Evaluation can be “an important source of information for

evaluating a system’s effectiveness” (Hutchings, 1998). I will be using this to evaluate the current forms

security methods such as passwords, pins, biometric tools. The information gained from the Self-Evaluation

can be found in section 3.2.

The next phase of my methodology I conducted an online survey, this can be found in section 3.3. I have

chosen to use this evaluation technique for a range of reasons. Surveys offer a range of advantages and

disadvantages. The advantages are:

Easy to administer.

“Can be developed in less time compared to other data-collection methods” (Wyse, 2017).

Cost-effective.

Can be administered/recorded online, mobile devices, email, mail or telephone.

Capable of collecting data from a large number of respondents.

Conducted online can reduce boundaries and reach all areas of the country or be limited to a certain

area for a select number of participants, such as students of a university.

Numerous questions can be asked about a subject, providing flexibility in the data analysis.

With survey software, advanced statistical techniques can be utilised to analyse data to determine

validity, reliability, and statistical significance, including the ability to analyse a number of variables.

A broad range of data can be collected.

However, the disadvantages of a survey are:

Respondents may not feel encouraged to provide accurate answers.

Respondents may not be aware of their reasons for any given answer because of lack of memory on

the subject or not enough knowledge about the subject.

Respondents may not feel comfortable providing answers that present themselves in an unfavourable

manner.

The number of respondents who choose to respond to a survey question may be different from those

who chose not to respond, thus creating bias.

Surveys with closed-ended questions can have a lower validity rate than other question types.

Data errors due to question non-responses may exist and not enough feedback provided to aid the

user through the error, so the respondent may leave with the survey unanswered/unfinished.

As stated surveys, like all evaluation techniques, contain its share of advantages and disadvantages. The

reason I opted to use a survey to retrieve a general form of data to find how respondents feel about the

current usability and security trends in E-Commerce sites and what they prefer to use in terms of security.

Once I have gathered results from my survey I will begin constructing wireframes. Wireframes are “a low-cost,

rapid iterative design technique that offers one of the best methods for gaining design insight early. Catching

major usability problems early means you won’t waste precious time, effort and money developing designs that


7 | P a g e

may fail” (Nielsen, 2001). This will not only aid in building the website but will also help showcase the new

register/login method I will be using, which is preferable by the survey statistics whether that be a form of

password, pins or biometric design. From here, I will design an example website based on these wireframes to

better showcase this system for users to use during a Think-Aloud session.

The Think-Aloud is a protocol used to gather data in usability testing. In a Think-Aloud test “you ask test

participants to use the systems while continuously thinking out loud – that is, simply verbalising their thoughts

as they move through the user interface” (Nielsen, 2012). It's used to gain an understanding of potential

issues that users may have with the site overall and is especially useful for this project because I'm trying to

see if I have addressed the Usability versus Security problem successfully or not. Like with all methods of data

gathering, the Think-Aloud method shares its own strengths and weaknesses.

The strengths being that it provides a quick and cost-effective manner of collecting a lot of rich data which is

both a positive and negative factor. A positive being there’s a lot of data to use and a negative because a lot of

useless and meaningless data can be blended in and requires time to sort through.

3.1 Critical Review Websites stress the need for security and usability. However, there's always been a problem with the

coexistence between usability and security, with the increase of one equates to more flaws in the other. This

has been researched time and again throughout history and a paper which relates to this Dissertation’s

purpose as found from the allotted keywords, has been critically reviewed below:

The Software Engineering paper that I have chosen to review is stated below:

-Title: Transforming the ‘weakest-link’ a human/computer interaction approach to usable and

effective security

-Authors: M A Sasse, S Brostoff and D Weirich

-Date of Publication: July 2001

-Volume Number: BT Technology Journal (Volume: 19, Issue: 3)

-Page Numbers: 122-131

The reason for this review is due to the papers relation to my research question on how to improve usability

and security on E-Commerce-sites, particularly on how security often causes the overall usability to suffer and

vice versa.

STUDY PURPOSE: Purpose and/or research question is stated clearly? Yes/No

The purpose of the study was stated clearly. This journal discusses how user behaviour

plays a part in security failures, and that it's become common to refer to the user as

the ‘weakest link’ in the security chain. Security designers must identify the causes of

undesirable user behaviour, and address them to design effective security systems as

the “human side of computer security is easily exploited and overlooked” (Sasse,

Brostoff & Weirich, 2001) and as stated by Adam and Sasse “security has largely

ignored usability issues” (Adam & Sasse, 1999). The paper makes a point of the

problem with passwords and user memorability associated with them and the paper

explores alternatives to improve the coexistence of usability and security.

LITERATURE: Was relevant background literature reviewed? Yes/No

Relevant background literature was reviewed. The paper references over twenty

relevant sources on various usability and cyber security articles, such as Jakob

Nielsen’s “Security and Human Factors” (Nielsen, 2000) to explore how people

associate with security. The author supports their points on usable support with several

relevant research studies, including studies on the usability of passwords in the book

“Are Passfaces more usable than passwords? A field trial investigation” (Brostoff &


8 | P a g e

Sasse, 2000) and “Password Usage” (FIPS, 1985).

STUDY DESIGN: What was the design? Grounded Theory Was a theoretical perspective identified? Yes/No Participatory Action Research Yes/No Method(s) used: Focus-Groups (System users)

The design was appropriate as relevant research was stated. Participatory Action

Research was used by taking knowledge from research articles as stated previously by

Brostoff & Sasse in the year 2000. The paper seems to use a form of Grounded Theory,

in which is “to generate or discover a theory” (Glaser & Strauss, 1967). This is due to

the Author showing beliefs in the possible lack thereof a future for passwords in which

the authors begin to state possible alternatives for future security to make it more

usable, for example, “Biometric Systems” (Sasse, Brostoff & Weirich, 2001) but doesn’t

show a bias by stating that a biometric system may not necessarily work for all forms

of user/tasks/context-configurations.

SAMPLING: Was process of purposeful selection described? Yes/No Was sampling done until redundancy in data was reached?

Yes/No Not addressed Was informed consent-obtained? Yes/No/Not addressed

The sample group was purposeful. The paper’s aimed at security designers discussing

the need to design security to be user-friendly. It discusses the difficulty of human

memorability of being able to remember strong/complex passwords by using various

studies in their sampling. One study that is addressed on human memorability is from

BT Security Staff who found out from their statistics that they “believed that the rising

number of password resets was due to a small number of careless ‘repeat offenders’ —

by their own definition, employees who ask for a reset 6 or more times a month. Study

2 found that 91.7% of resets were caused by ‘normal users’, i.e. more than 90% of

users cannot cope with the password mechanism in the way they were expected to,

which is a rather damning result in terms of usability of password mechanisms” (Sasse,

Brostoff & Weirich, 2001). The author, however, doesn’t discuss how many of BT’s

employees completed the questionnaire given to them to identify the root cause of

their lost passwords, in which the “average password number per user was sixteen”

(Sasse, Brostoff & Weirich, 2001). The sampling of data until redundancy of data was

reached wasn’t mentioned, though the paper shows tables of collected data on the

categorised responses into three groups light use (Per year to just under one month),

medium use (Once a month to once a day) and heavy use (Frequently to more than

once a day). The results are as shown below:

Information consent wasn’t stated in the paper. However, the majority of sources of

information are from the authors in previous studies, which may present a bias.

DATA COLLECTION: Descriptive Clarity Clear & complete description of site: Yes/No

Shows clear/complete descriptions of data, providing the reader with a data on

problems security causes for usability, and how the research studies show this.

Procedural Rigour: Procedural rigor was used in data collection strategies? Yes/No/Not Addressed

Procedural rigour was used in the data collection strategy. The authors describe the

procedures used to ensure that the reader understands the data collection process. The

methods are stated to the reader and can be found using the given reference.

DATA ANALYSES: Analytical Rigour

The reader is able to describe the methods used to find data and therefore is able to


9 | P a g e

Data analyses were inductive? Yes/No/Not Addressed

make a judgement to whether the methods are appropriate given the purpose of the

study. The data, however, may show a bias due to the majority of sources referenced

are from the authors’ previous work and shows their data only in a positive light, but

the researcher can summarise the major findings of the analysis. Though the author

does use sources to suggest that biometric systems may shed a positive and negative

light in the study by saying “Biometric systems are a good fit as an alternative to

passwords, but not all of them” (Rejman-Greene, 2001) showing that the author isn’t

biased in the belief that other methods completely dominate passwords.

Auditability Decision trail developed? Yes/No/Not Addressed Process of analysing the data was described adequately? Yes/No/Not Addressed

The decision trail shows the overall problems with security in relation to the usability,

in regards to memorability issues referencing “Jakob Nielsen’s Ten Usability Heuristic”

(Nielsen, 1995). These claims are supported by case studies from BT’s data analysis on

reasons why their employees forget passwords. Data was collected through the use of

a questionnaire. The author discusses the possible security alternatives to passwords,

such as a “Biometric system” (Sasse, Brostoff & Weirich, 2001) protocol for users.

The process of analysing data was described adequately as it shows the data and

discusses where the data came from through references.

Theoretical Connections: Did a meaningful picture of the phenomenon under study emerge? Yes/No

No, though the concepts of the study were made clear by providing the user with the

question of ‘Do passwords have a future?’ and provides alternatives to passwords, to

potentially better usable security it doesn’t discuss opportunities and challenges that

these alternatives may face in the future.

OVERALL RIGOUR: Was there evidence of the four components of trustworthiness? Credibility Yes/No

Transferability Yes/No Dependability Yes/No Confirmability Yes/No

Creditability is trustworthy as the paper utilises a number of references and is written

by credible authors who have a high amount of paper citations for their research

findings.

Transferability is trustworthy and can be used in other contexts in other situations to

show the negative light of passwords and their burden to usable security.

Dependability is trustworthy as other researchers will have similar findings when

performing the same form of data collection to determine the problem with passwords

and their memorability issues; shown from the paper’s data from studies extracted

from credible companies such as BT.

Confirmability is trustworthy as it shows relevant/confirmable data; however, the

findings aren’t neutral as it purely shows passwords in a negative light, rather than

showing the pros and cons of their use.

CONCLUSIONS & IMPLICATIONS: Conclusions were

appropriate given study findings? Yes/No Findings contributed to theory development & future OT research? Yes/No

The conclusion discusses the number of usability issues associated with passwords in

relation to usable security, providing an alternative in the form of biometric systems.

The findings can be used for future practice in showing the problems passwords cause

for users and how they conflict with Jakob Nielsen’s Heuristics; however, the paper

presents a bias by only showing the negatives of passwords and provides no positives

in the area.

Though the paper is a credible source of information for usable security it does present bias, due to the

majority of the research references are from other articles posted by the main authors of the study. However,

with this, it shows the authors have expertise in this subject from their prior research studies.

The ranking of importance that I would give this paper would be high. The paper discusses the problems with

security and how designers need to adjust current security to meet usability guidelines to support users of the


10 | P a g e

platform, by showing various research topics to show the reader relevant studies of security protocols problems

of today’s use; such as the problem with passwords and user memorability. A problem that must be stressed

that my own personal research question may face is the age of the paper as it was written in 2001, seventeen

years ago from the present time, in which technology has advanced since then. However, the paper in a whole

has importance for the reader referencing the paper due to a high number of citations and the fact that each

author has written other previous highly creditable papers in this field.

3.2 Self-Evaluation There are many online security methods to protect users on E-Commerce Sites. The main methods are:

passwords, pins and biometric tools.

Passwords are the most common form of security used to gain access to the online user's account. The issue

with passwords is that the user is relied on to enter and memorise a string of characters which cannot be easily

guessed. However, this proves difficult when “End-users are juggling far more passwords than prior studies

have estimated, according to a new analysis by LastPass that suggests the average employee is tracking 191

different passwords” (Braue, 2017). Organisations demand strong/complex passwords, but users simply cannot

remember them and forget leading to password resets as discussed in ‘Transforming the ‘weakest-link’ a

human/computer interaction approach to usable and effective security’ paper in the Critical Review above (3.1)

the BT Questionnaire showed that users forget their passwords and require resets, causing problems with

usability in terms of memorability according to “Nielsen’s Heuristics” (Nielsen, 1995). This leads to users

writing down their passwords; ultimately making eliminating the purpose of passwords. It should also be noted

that varieties of password combinations exist, one of which being Graphical Passwords “that works by having

the user select from images, in a specific order, presented in a GUI” (Blonder, 1996). Though, Graphical

Passwords address “traditional passwords. For example, memorable user-chosen text passwords are

predictable, but random system assigned passwords are difficult to remember as they suffer usability issues in

terms of the “log-in process takes too long” (Stobert, Forget, Chiasson, Oorschot & Biddle, 2010) and other

physical security issues like shoulder surfing in public environments.

“Pins usually come in the form of a randomly generated string of characters (often numeric)” (Enisa, 2016)

which are sent to the users’ phone through SMS messages or apps like Google Authenticator to act as a One-

Time Password (OTP) to verify the user. An example might be through Online Banking when verifying a

transaction. This is a useful method of authentication as the hacker would need the users’ Smartphone to gain

access to their account and Smartphones are used by the majority of the Human populace with “The number of

Smartphone users is forecast to grow from 2.1 billion in 2016 to around 2.5 billion in 2019” (Statista, 2018).

OTPs avoid shortcomings that are associated with passwords through the fact that they cannot be guessed due

to their singular existence, which also benefits the usability factor of memorability – eliminating the security

flaw of writing passwords down. Though as with all security methods there are problems, in this case, if the

user loses their mobile they can potentially be locked out of their account and it is well-known that Phone-

Cloning exists which should the Hacker gain access to the users’ Smartphone an identical copy can be created

and used to retrieve an OTP’s sent to the user’s phone.

Biometric security “is a mechanism used to authenticate and provide access to a system based on the

automatic and instant verification of an individual’s physical characteristics” (Technopedia, 2018). This method

stores human information like facial structure use for facial recognition to login to devices and is considered

“the strongest and most foolproof physical security technique used for identity verification” (Technopedia,

2018). Using a Neural Network specialised in Feature Matching “Face recognition is performed by extracting the

facial descriptors and matching them with those in the gallery, size and dimension are common aspects of

facial biometrics, various distance and similarity measures are used in the matching process” (Farag, Bhanu,

Hancock, Medioni & Yang, 2014). Security problems present themselves through hackers replicating the users’


11 | P a g e

face through digital photos or through a system attack known as ‘Hill Climbing Attack’, which “employs a

pattern recognition method that allows guessing the reference data, by successively changing the input

features as to provide a more and more accurate match. Once the match is good enough to fall within the

threshold the system is fooled into allowing access” (Wayne, 2002). Usability problems may occur in incidents

such as a house fire leaving the user unrecognisable, possibly preventing the user from using his/her phone

depending on the training data.

These methods may be combined to form Two-Factor Authentication or Three-Factor Authentication which are

mostly used in companies and e-banking. Though extremely secure, these methods lack usability due to the

user having to undergo a lengthy process to login to their user area and use the system.

3.3 Survey I used a survey to collect raw data from potential users from Keele University:

https://docs.google.com/forms/d/e/1FAIpQLSdZ-uDturV4aLnOPvJVj4EeL-

5p52OgNbkEJJmqouVPd2MqOA/viewform?usp=sf_link

https://docs.google.com/forms/d/e/1FAIpQLSdZ-uDturV4aLnOPvJVj4EeL-5p52OgNbkEJJmqouVPd2MqOA/viewform?usp=sf_link

https://docs.google.com/forms/d/e/1FAIpQLSdZ-uDturV4aLnOPvJVj4EeL-5p52OgNbkEJJmqouVPd2MqOA/viewform?usp=sf_link


12 | P a g e


13 | P a g e


14 | P a g e

As you can see in the above survey I asked twelve questions earning a graphical percentage or written answer

from the respondent:

1. What is your position at Keele University?

To see which of my target audience was answering the survey the most, the

resulting answer being 51.1% were current students, 40.4% were Member of Staff,

and 4.3% were Past Students/Upcoming Students.

2. How old are you?

To get an accurate analysis of the age groups of my target audience, the result

were: 6.4% were under 18, 34% were 18-21, 25.5% were 22-30, 17% were 31-40,

8.5% were 41-50 and 6.4% were 50+.

3. Which device do you use to access E-Commerce Sites?

To see which platform the test site should focus on, whether the website design

should be purely responsive to cater for computer and mobile users or if an app

should also be designed. The results showed that the majority of respondents used a


15 | P a g e

Smartphone as their main form of access to E-Commerce, leading to a vote that the

usable security should accommodate for apps and websites to cater for mobile and

computer users.

4. Level of computer literacy

To see the respondent’s level of computer knowledge. The results showed that the

majority of respondents were competent users.

5. Which sites do you usually use to make website transactions?

Like question three, I asked this to see what types of E-Commerce sites the

respondents use. This way I can design my test site similar to current E-Commerce

sites to give a sense of familiarity to users.

6. How often do you use E-Commerce Sites?

To see how often users use E-Commerce sites at a given time, with 40.4% of

respondents voting to using the E-Commerce sites weekly. This also provides with a

brief estimation of web traffic/usage statistics for the test site, showing the

necessity for users to be able to use the site at a quick pace to reduce traffic and

site slowdown.

7. On a scale of 1 to 7 how easy do you find E-Commerce Sites to use?

To gather information on how easy/difficult current E-Commerce users find the site

to use. I did this using “Miller’s seven point scale” (Miller, 1955) as Miller “that the

human mind has a span of absolute judgment that can distinguish about seven

distinct categories, a span of immediate memory for about seven items, and a span

of attention that can encompass about six objects at a time, which suggested that

any increase in number of response categories beyond six or seven might be futile”

(Miller, 1955). Here ‘1=Very Easy’ and ‘7=Very Difficult’. The results returned that

out of the forty-seven respondents 25.5% feel that E-Commerce sites are neither

easy-nor-difficult to use but have a sort of mixed feeling towards them showing that

the sites need to be easier to use rather than harder.

8. In regards to the previous question why do you feel E-Commerce Sites are easy or difficult to

use?

To gather data on why the user feels the way they do towards the level of difficulty

they have using E-Commerce sites, with mixed responses of some users finding the

current methods easy, and others finding them difficult with responses such ‘I feel it

varies on the site. Some are easier to log in and remember and others are more

difficult’ showing that some E-Commerce Sites are difficult to login to.

9. Do you think the overall usability of E-Commerce Sites is affected by security?

To show how users feel about security. The results are clear with 76.6% of

respondents believing that security does indeed affect security and therefore current

methods must be addressed to adhere to this.

10. Would you like to see additional security features on E-Commerce Sites?

Utilising “Miller’s seven point scale” (Miller, 1955) I found that the majority of

respondents leant towards agreeing that additional security features should be put

in place. Not surprising due to personal data being stored into the sites Database,

however, it also shows that users not only need additional security features but they

need usability, meaning that usability cannot be ignored whilst providing a greater

wall of security.

11. What security features would you always like to be on E-Commerce Sites?


16 | P a g e

The data showed that the majority of users would also like to see pins with SMS

messages being sent to them to let them know about account activity. Followed by a

mixed response from users wanting to see passwords to wanting to remove the use

of passwords altogether or generally making it so they are easier to use.

12. In terms of security, what would you like to change about E-Commerce sites to make them

easier to use?

The data showed that 40% of users wished to see pins and SMS verification to make

E-Commerce easier to use, followed closely with 32% of users wanting passwords,

16% feeling that biometrics would be easier to use. Other responses included less

verification in general, which comes down to security methods such as Two/Three-

Factor Authentication and problems that it poses to usability due to the number of

tasks the user’s needs to perform to use the system.

In summary, the key information obtained through the analysis of the survey is that 79.6% of users find that

usability is affected by security, which evidently needs to be addressed. The data indicates that majority of

users preferred the use of pins to make their E-Commerce UX easier, followed by passwords and then

biometric security. It’s important to note that users stated they wanted to see less verification in their UX. I

also discovered that the vast majority of users mainly use Smartphones to access the internet which is

supported by numerous articles such as the Guardian showing statistics of “51.3% of worldwide users use

mobile and tablet to browse the internet, over the 48.7% of desktop users” (The Guardian, 2016). This has

encouraged thoughts of designing the website to be mobile-friendly to cater for those users, for example,

making the login process easier for them by eliminating the need to type passwords.

3.4 Think-Aloud

As mentioned previously the Think-Aloud process is a very perceptive information gathering method. To

perform this task, once I have finished the wireframes and built the example site that will contain the approach

that I will take to address the issue of usable security (See Section 4.0) the Think-Aloud activity will be

initiated and the results will be shown in Section 5.0.

To undergo this process I will be using a one-to-one format in which the user will be taking part in the activity

that I will set as they speak aloud, whilst I take notes of their actions. This will allow me to see if they

experiencing difficulties with the new process that will be explained later or if they find it easier than traditional

methods such as two-factor authentication or remembering passwords in general. Consent will be needed for

this to explain to the candidate what the test is before they undertake the Think-Aloud.

4.0 Addressing the Issue

Having obtained the necessary background research from the methodology, I am now able to address the issue

of finding a potential solution for this usability and security conflict.

To do this I will be creating an E-Commerce site based on KeeleSU’s Online Shop, my current employment

where I work as their Web Developer. I will be doing this to design, create and test a form of login system

based on the research gained from the methodology. The survey found that the majority of users stated that

pins would make their E-Commerce UX easier and that they would like to see SMS verification. Here I designed

a login system which will use the users’ mobile number and send an OTP which the user will enter to log onto

the system (Section 4.1 Wireframe Figure 6).

“Text-based passwords are difficult to remember, presenting both usability and security issues” (Sasse,

Brostoff & Weirich, 2001) due to users having to write their passwords down to counteract the memorability


17 | P a g e

issue. Pins are used usually as a form of OTP used to verify users’ actions by using something in their

possession such as their mobile phone or email. Biometrics inherent the physical user’s being through acts

such as facial recognition and fingerprint to sign the user in.

Though biometrics is said to be “the strongest and most foolproof physical security technique” (Technopedia,

2018) and is relatively easy to use, it’s susceptible to Hill Climbing Attacks and suffers heavily from privacy

criticism. “Concerns exist about how this data can be used without the consent of the individuals to whom this

data is considered private and personal” (Wayne, 2002). Which begs the question, could law use it for forensic

purposes tracking purposes as an example? If the database is breached, could fraudsters use biometrics such

as voice recognition data to call banks to gain access to users’ accounts?

Pins in the form of OTP are ideal in terms of usability as it also counters the need for users to remember

lengthy/complex passwords. In terms of security, they suffer similarly to passwords from attacks like the brute

force attacks, where hackers use a constant stream of trial-and-error inputs until they eventually guess the

password/pin. However, this can be counteracted by limiting the number of login attempts until the account is

locked protecting the user. As I stated above OTP is sent to a users’ possession. My solution will utilise SMS to

send the OTP to users’ mobile phone which the majority of the human populace own a mobile as stated “the

number of Smartphones users is forecast to grow from 2.1 billion in 2016 to around 2.5 billion in 2019”

(Statista, 2018) and provides an easy means for users’ to gain the OTP. However, SMS does have its shares of

problems. These come in the forms of Phone-Cloning and signal problem could also prove problematic to users

from rural areas or should phone providers like O2 undergo service failure; meaning phone providers’

downtime equates to the downtime of this system (though this is unlikely). Though the reason I chose SMS

over Email is due to the fact that SMS is received by the users’ mobile which provides a physical means of

security as the Hacker would need to have access to the users’ mobile to gain access to the OTP, and Email

only relies on another form of online security, usually in the form of passwords that the Hacker can get access

to gain the OTP.


18 | P a g e

4.1 Wireframes Figure-1---Homepage

Figure-2---About Us


19 | P a g e

Figure-3-- Products

Figure-4-- Checkout


20 | P a g e

Figure-5-- Register

Figure-6-- Login


21 | P a g e

Figure-7 - Login Success Page

The above wireframes conform to Nielsen’s “Ten Usability Heuristics for User Interface Design” (Nielsen, 1995).

Consistency standards states “users should not have to wonder whether different words, situations, or actions

mean the same thing” (Nielsen, 1995), each wireframe shares consistent characteristics in terms of the

header, body and footer design and contents such as the logo always displaying on the top left corner and

icons such as the basket icon to “Match between the system and the real world” (Nielsen, 1995). I have done

this to give the website a set structure to give the user a sense of “Freedom and Control” (Nielsen, 1995) as

the user knows where the buttons are to rectify any mistakes like being directed to the wrong page.

Visibility of system status as stated by Nielsen is that “the system should always keep the user informed about

what is going on, through appropriate feedback” (Nielsen, 1995). Feedback is used in various instances

whether it's the products page when the user clicks the ‘Add to Bag’ button and the ‘£0.00 (0 Items)

increments, or through the login/registration pages where the user presses the submit button and is prompted

with success or failure feedback messages by “helping users recognise, diagnose and recover from errors”

(Nielsen, 1995). Recognition rather than recall is “to minimise the user’s memory load” (Nielsen, 1995) and is

used via URL link colour changes when clicked or the checkout saving and listing the number of items stored.


22 | P a g e

Finally, this design is based on eye movement patterns using ‘Hot Spots’. Hot Spots are “the areas on a web

page that the visitor’s eyes focus on the most” (Rowell, 2010). I decided to use the F-Layout which based on

studies “shows that web surfers read the screen in an "F" pattern - seeing the top, upper left corner and left

sides of the screen most” (Jones, 2012). As demonstrated in the below image:

Jones showed that the heat-map above represents the visual F-Shape which users focus on the most on web

pages – the Hot Stops indicated as red/yellow/orange show where the users’ attention lingers the most.

Utilising the F-Shape pattern I designed the website around it by placing the logo in the Hot Spot at the top-

left-corner along with the menu so users can quickly find it and begin navigation. This is used by other popular

E-Commerce sites such as Amazon.

4.2 Website – Register/Login System Explained In this section, I shall explain how the front-end and back-end of this system operate. The front-end is the part

of the website that the user interacts with (HTML, CSS, JavaScript, etc…), whilst the back-end is what makes

the front-end possible, consisting of the server, application and database (PHP, SQL).

4.2.1 Register (Front-End) The form will be used to collect the required data needed

from the user to store in the database (Forename, Surname,

Date-of-Birth, Email and Mobile No) once the ‘Submit’ button

is pressed ‘posting’ the data ready to be stored using an SQL

Query in the Server.php code (Section 4.2.3).

Validation is used in the form using errors.php to check that

entries have been inputted, so blank accounts cannot be

created. I used the HTML5 function ‘pattern’ which specifics a

regular expression checking for user inputs, such as, DOB

uses only dd/mm/yyyy format, and only email formats can

be inputted into the Email input. The form also checks if the

users’ mobile and email already exist in the database before

adding them to prevent duplicate accounts.


23 | P a g e

4.2.2 Login (Front End) Utilising a multi-part form,

first the user enters their

mobile number e.g

“7842173891” in the ‘Mobile

No’ input field. The drop down

box contains the country

code, for this test, only the

UK’s country code is available

which is placed in the front of

the users’ mobile number

input. Upon clicking the ‘Send

OTP’ button the database is

checked to clarify that the

number entered exists in the

Database and if it does the

text is sent using an SMS API

known as TextLocal (Section

4.2.4.2) shown in the image

on the right. If the number

doesn’t exist, an error

feedback message is

prompted stating that the

number isn’t registered.

4.2.3 Register (Back-End) The back-end of the Registration controls the inner workings and how it operates on server-side.

4.2.3.1 SQL Database Figure-1---SQL Database created with PHPMyAdmin

I started by creating the database using PHPMyAdmin using the following SQL Query:


24 | P a g e

With this I will be storing the user’s personal information to identify them and importantly their mobile number

for the SMS message containing the OTP to be sent the user’s phone.

4.2.3.2 Register.php:

The registration form’s action attribute is set to ‘register.php’. This means that when the ‘Submit’ button is

clicked, all data from the form will be submitted to this page (register.php). As seen in the file the following

line is set to include the ‘server.php’, which means the form data is written in the ‘server.php’ file for

processing.

4.2.3.3 Server.php

This file controls and tracks the session of logged in users and so a ‘session_start()’ is included at the top of

the file. Initialising the variables is the next step to store user inputs from the registration form. This file

controls the connection for the PHPMyAdmin Database shown on line 12.


25 | P a g e

Here the form data is processed. Line 15’s if statement determines if the ‘reg_user’ ‘Submit’ button on the

registration page is clicked. Providing the ‘errors.php’ file coupled with the forms requirement and pattern

validation encounters no errors and that the user’s email and mobile number isn’t already stored, the user is

registered in the ‘users’ table in the database. If there are errors the relevant feedback error message will be

displayed.


26 | P a g e

4.2.4 Login (Back-End) The back-end of the Login controls the inner workings and how the user logs into the system operates on

server-side.

4.2.4.1 Login.php

Identical to the registration process, the login form’s action attribute is set to ‘login.php’, meaning that when

the ‘Send OTP’ button is clicked; all form data will be submitted to this page (login.php). Again as seen in

‘register.php’ the ‘server.php’ file is included at the top meaning when the form is submitted data is written in

when the ‘server.php’ file for processing.

However, unlike ‘register.php’ the ‘login.php’ file utilises a multipart form in the first input asks for the user’s

mobile number which if found in the database sends the users’ OTP as shown in section 4.2.2. Once received

via SMS the user then inputs the OTP into the second part of the form, which when the ‘Login’ button is clicked

checks to see if the OTP is correct or not.


27 | P a g e

4.2.4.2 Sever.php

Identical to registration the form data is processed. Line 62’s if statement determines if ‘login_user’ ‘Send OTP’

button on the login page is clicked. Providing the ‘errors.php’ file and the forms requirements are satisfied and

that the mobile number exists in the database the OTP is sent.

To send SMS messages I have used the TextLocal API found at: ‘https://www.textlocal.com/’

Using this SMS API on line 74’s if statement uses ‘ccode’ (+44 UK Country Code) and the users mobile number

so as an example the user’s number “7842173891” becomes “+447842173891”. Following this the code is a

modified version of the PHP taken from TextLocal, my authorisation details for TextLocal are checked via the

username and unique hash variables to connect to the API. Line 86 contains the variable for the OTP which

used ‘mt_rand’ to choose a random string of number between 10000-to-99999 that is sent to user alongside

the message variable text shown in line 87. To save the OTP to the server I used ‘setcookie’ function in PHP for

the user to use to login. If the authorisation details are successful then the SMS will be sent providing the user

with feedback and vice versa if not.

The codes line 111’s if statement checks if the ‘verifyOTP’ ‘login’ button is pressed, checking for errors and

returning relevant feedback. The OTP inputted by the user is compared to the OTP sent by the TextLocal API

https://www.textlocal.com/


28 | P a g e

saved by the server and if it is correct the user is successfully logged in to the site sending them to index.php

and is given an error message if they were unsuccessful.

4.2.4.3 Index.php

The above code is set above index.php and other webpage’s that require the user to be logged in such as

checkout.php. Line 11’s if statement checks if the user is already logged in. If they are not logged in, the PHP

code will redirect the user to the login page. The second if statement checks to see if the user has clicked the

logout button; if they have then the system ends the session and redirects them back to the login page.

5.0 Results To yield results I utilised the Think-Aloud data collection method to gain information on how users perceived

this form of login system as “Users’ words are important sources of insight and empathy for designers and are

persuasive evidence of usability issues and user preferences when presenting to stakeholders” (Practical UX

Methods, 2017).

During the Think-Aloud process I gave my candidates two tasks whilst I recorded their actions as they ‘talk

aloud’ letting them know they can be brutally honest about their thoughts and that I cannot answer their

questions during the process such as if their navigation decision is correct, they must find and do what they

think is correct whilst stating their expectations out loud. I will only intervene should the user take an

unexpected path and risk derailing the test I will take them back to the task and make note of the path they

took. These two tasks, starting from the home page are:

1. Register into the system.

2. Login into the system.

To keep their identities anonymous I shall refer to them as ‘Candidate 1, 2, 3 and 4’.

Candidate 1:

Task 1: Register Feedback:

“Register and login are easy to find. Where is the register option though? Oh, I

see it… It’s not clear.” Took the user fifteen seconds to notice the ‘Not a member

yet? Sign up’ link.

“It was a good job you added the feedback text, otherwise I’d have typed my

number with a 0 at the start for sure.”

Task 2: Login Feedback:


29 | P a g e

“Why is it saying my number’s not registered?” The user frowned, thinking for

ten seconds before realising. “Oh, I typed the number with a 0 by mistake

haven’t I?” The system accepted the number and sent the text and entered their

OTP and logged in. “That was easy, but it would be an absolute nightmare if you

wanted to log in whilst you were upstairs and your phone was downstairs

though”

Candidate 2:


Is it right if I click this link at the top?” The user clicked it and looked around for

five seconds. “Oh, the registers here.” They entered their details and typed in

their number realising that the input wouldn’t accept more than the allotted

characters as they entered the first 0 of their number before realising, and tried

again before refreshing the page and seeing the placeholder text before realising

with a sigh. “Oh, that’s why! That’s annoying.”


“Oh that’s why you wouldn’t let it take the full number because of the country

code; makes sense now.” The user typed their number, sent the OTP and logged

into the system. “It’s good that you don’t have to remember a password with

this.”

Candidate 3:


“It says the formats wrong on my date of birth, what?” The user had entered

their DOB with hyphens rather than forward-slashes between the date, month

and year. They tried three more times before realising. “Oh that’s really

annoying, you should’ve put some text their other than format wrong like you

did with the mobile number.”


“Login is done well, so take it that ‘+44’ is automatically put at the start of my

number?” The user said as the typed their number and sent the OTP, which

took up to 30 seconds possibly due to phone network issue causing confusion

for the user who quickly grew bored asking, “Where is the text then?”, “It’s

taking too long” before receiving the text and typing in the OTP. “That’s a lot

easier I admit, but it’s annoying I had to wait so long…”

Candidate 4:


“I can’t find where to go?” The user had scrolled slightly, making the link at the

top of the page unseen. They then scrolled down and found the ‘Create Account’

link in the footer. “Oh, it’s there, why put it at the bottom of the page?”

“How come I can’t enter my full number?” The user tried to enter it four more

times having not read the placeholder text and realised they had to exclude the

first 0. “Oh, why can’t you have the 0 at the front, makes no sense.”


“Oh the register and login button was at the top of the page I can see it now,

my bad.”

“You’ve made it so the country code is at front of the number so that’s you can’t


30 | P a g e

add the 0 on registration, right?” The user entered their number and sent the

OTP. “I like that it comes through on my phone because I use my phone for

literally everything.” The user entered the OTP and logged in. “That was easy,

but the registration with the mobile number needs be clearer.”

Using the Think-Aloud I was able to see both positive and negative factors of this system. The negatives being,

that this version suffered from navigational and feedback issues, affecting usability and overall UX. Three of

the four candidates struggled to find the registration page due to them having to go to login page first if they

clicked the top ‘register/login’ button rather than the separate button located in the footer, which the fourth

candidate used instead due to an instance where the user scrolled down slightly making them unable to see

the link. I initially made it so the user would be navigated to the login page first rather than the registration as

the E-Commerce site is based on the Keele Students’ Union, where users’ would already have a University

account and not necessarily need to see the registration page first, however, for this test, registration should

have been taken into account. Feedback issues were apparent in terms of the user attempting to enter their

full phone number into the input field, to which they realised they couldn’t due to the maximum length of that

field being reached. This caused confusion due to the user not seeing the initial placeholder text in that field

and not reading the feedback message that provided an example the first time. Eventually, they were able to

overcome this problem but it led to frustration with the form and therefore jeopardising their UX.

However, the positives of the test are that 75% of the candidates stated that the login system was easy to use,

which comes under TAM as mentioned above that for a system to be successful it must be “Perceived Easy to

Use” (Davis, 1989). The candidates also credited the system for not having to remember any complicated form

of password and were happy to be able to use their mobile. Though an issue was raised in the third candidates

Think-Aloud, where they had to wait over 30 seconds for their SMS message to arrive, due to a faulty

connection which I mentioned, may be a cause for concern in section 4.0 ‘Addressing The Issue’.

A notable drawback would be the number of candidates I had available for this test. Had more people have

taken part I would have a greater reservoir of data to analyse and form an evaluation. Though from the data I

collected I can safely assume that had I had more candidates the same errors such as with the phone number

input in registration would have been present and must be addressed in future versions. The positive feedback

received is a cause for motivation to continue this login system for future use.

6.0 Evaluation/Discussion

Reading the results above, it can be seen that this login process is generally successful. The majority of users

stated that this method of logging in was easier and credited the fact they didn’t need to struggle with usability

problems of remembering a password. This appears to have improved the usability problem, but what of the

security problem?

The Think-Aloud process, however, did highlight the follies in the design in the registration process in terms of

feedback and the insertion of the user’s mobile number. In future developments of this process, this must be

accounted for to aid UX and prove to the user this is an easier model to use. Should this not be seen as an

easier alternative to passwords and other forms of login systems, it would cause difficulties in the actual

launching of the system. Therefore it is important that users don’t see the system to be creating any difficulties

which may make them reluctant to the change and show no enthusiasm towards the system. It may even lead

to a complete rejection to the new system as stated by Davis’ TAM in terms of users not “perceiving the

system free from effort” (Davis, 1989).


31 | P a g e

Security in this form of login system’s current version is subject to brute force attacks. To counter this it is

crucial to implement a security measure that limits the number of login attacks, thus preventing this form of

attack. Additionally, the OTP used in this login can be made harder to guess by changing its current form from

only using a random string of numbers to be combined with letters and even special characters to be sent to

be used as the OTP in future versions.

Though this method is justified by not only the memorability issue of today’s current use of passwords but,

also the ever-increasing number of Smartphone users in the world it suffers from not only physical security

issues but also the issue of SMS downtime from the users’ phone provider. The latter was actually shown as an

evident factor in one of the Think-Aloud tests with one of the users experiencing phone network problems, in

which it took over thirty seconds for the SMS message sent by the system to be received by the user. With no

feedback in this process other than the system stating that the message had been sent, the user became

increasingly frustrated and had it taken longer the user may have completely forfeited the system, which as

stated by Miller in fifty-nine seconds or less according to the “59 Second Rule” (Miller, 2016). Though this

occurred once in the tests it is still an important factor to take into account and may have occurred more had

there been more candidates. Physical problems such as the user losing or breaking their phone is a problem

here as the current test system supports no means of solving this problem and the user won’t be able to login

to their account. For future systems there would need to be means of reporting this to the E-Commerce site’s

administrator(s) to lock their account or re-register the user and change their phone number in the database to

the new number to send OTPs. This is especially crucial should the user have lost their mobile due to the

threats of phone-cloning and malicious users gaining access to the user’s account. Naturally, contacting is a

risk in itself with deciding what form of communication protocol the user will use to contact about this problem,

should it be through email, call centre or by going to a physical version of the store? Each has their share of

problems to security and it may be essential to have the user set a number of recovery questions for the user

to reset their account to prevent fraudulent claims.

Security will always be a concern. With the evolution of security counteracting malicious users’ attempts, new

measures will be created to bypass security and this will continue indefinitely.

It’s vital to discuss the feasibility of implementation of this particular login system. For implementation, it’s

important to consider the factor that there’s a range of organisational factors which can affect the introduction

of this login system.

With the introduction of this new form of usable security, it’s vital to consider these factors for the product to

able to successfully fit in with existing methods in organisations. Organisations pose difficulties in the creation

of projects and one specific type that must accounted for is bureaucracies which follow strict rules in regards to

completing tasks which can impose risks to projects like this, as is the case with Keele University which the

example site is based on their student union.

Weber argued that “bureaucracy constitutes the most efficient and rational way in which one can organize the

human activity and that systematic processes and organised hierarchies are necessary to maintain order,

maximize efficiency, and eliminate favouritism” (Weber, 1978). Weber found that people that work within

bureaucracy become cogs in a machine, and new ways of doing activities must be approved through proper

channels. Unlike any other form of business that is likely to approve on something new in hopes to gain profit,

bureaucracy doesn’t and has “no desire to gamble on success in the short-term as their desire is for the long-

term benefits” (Du gay, 2000). Due to this, future workings for this project would face challenges in approval

for funding as it’s an untested product and target E-Commerce businesses such as KeeleSU may wish to avoid

the risks of reputational damage. To counter this, testing the product is essential and to do this, the project

can market towards smaller companies that may be likely to accept the product to gain little profit initially. This


32 | P a g e

would benefit the product as it would demonstrate to larger companies which utilise bureaucracy, if the product

has met UX standards and satisfaction whilst also maintaining security standards vital for protecting company

integrity and increase the chance of acceptance.

7.0 Conclusion

In summary, I have identified a number of usability and security issues that jeopardise today’s E-Commerce

systems. This paper has analysed and revealed that many problems are due to the way login systems are

currently implemented.

“Nielsen suggests that passwords are a usability nuisance that will be abolished by a wide-scale introduction of

biometric authentication” (Nielsen, 2000). But, “Biometric systems may be a good fit for some

user/task/context configurations, but not all of them” (Sasse, Brostoff & Weirich, 2001). Even though they are

considered a very strong and foolproof form of security they like all security methods suffer from their own

flaws, in biometrics case “Hill Climbing Attacks” (Wayne, 2000) which will only be a factor in their form of

security and not only this but “privacy is also a pressing concern” (Wayne, 2000).

Evident from the results of the online survey, it was shown that from the pool of users stated that they found

pins/OTP preferable for what they stated would make E-Commerce easier to use. From the results of the

Think-Aloud, the majority of users found that the OTP was generally easier to use over needing to remember

lengthy/complex passwords and credited being able to receive this on their mobile. Though with this, as is with

all methods it has its own positive and negative factors in terms of being usable with users finding it easy to

use, but also having flaws in terms of relying on the user’s phone signal. Security has its own positives and

negatives in terms of physical/digital security, but problems occur with users losing their phone and malicious

users cloning the user’s phone to receive the SMS from the login system.

In terms of future work, it may be interesting to perform this work in conjunction with several other methods

such as a form of register/login system that utilises biometrics using identical methodologies. This would allow

for the equal comparability of data to truly find what users find easier to use, whether it be the method used in

this paper or a form of a biometric system as an example.

In conclusion, this paper has aided in helping the current problems of improving usability and security on E-

Commerce sites, to find a system that meets both usability and security standards for a greater User

Experience. However, though evidence has been presented here this isn’t the end. This paper is merely a

stepping stone towards the greater answer to truly improving usability and security on E-Commerce sites.

There will always be further work in this field as technology continues to advance meaning usability will remain

apparent, and the need for security will continue to evolve with the ever-increasing threats which can

jeopardise E-Commerce sites. But with this said, the need for a balance between usability and security will

always be vital in all user targeted systems.


33 | P a g e

Appendix

UG Project Plan Project Overview and Description Student Name: Luke Sloane-Bulger Student Username: w4v71 Student Number: 15010247 Module (delete as appropriate): CSC-30014 Supervisor Name: Adam Stanton Project Title: Improving Usability and Security on Ecommerce Sites Please provide a brief Project Description:

The project will aim to help improve the security and usability of E-Commerce websites through both desktop and mobile devices providing research based advice, in the form of screen mock-ups and an example website to showcase this.

What are the aims and objectives of the Project?

To find and explore how security techniques in E-Commerce/M-Commerce affect Usability on websites and to improve on them should the security measures have detrimental effects for the user. Objectives: -Analyse current E-Commerce/M-Commerce websites & applications -To carry out a survey to understand perceptions of how easy/difficult current users find security measures on sites/applications. -To create a wireframe for ideal Ecommerce design to improve usability and security.

Please provide a brief overview of the key literature related to the Project:

Davis, F. Bagozzi, R. Warshaw, P. (1989) User Acceptance of Computer Technology: A Comparison of Two

Theoretical Models. Management Science, VOL 35, 8, Page: 982-1003

Cranor, L. Garfinkel, S. (2005) Security and Usability. (1st ed.) O'Reilly Media. ISBN-10: 0596008279

Project Process and Method Please provide a brief overview of the Methodology to be used in the Project (inc. an overview of best practice within the Methodology):

The key methods and principles that the Project will follow will be to find specific security features affect usability on the site through the use of articles, surveys and Think Aloud tests and through my own self-research.

Which Data Collection Methods will be employed (e.g card sorts, questionnaires, simulations, …)?

Think Aloud, surveys

Time and Resource Planning Will Standard Departmental Hardware be used? YES/NO

If NO please outline the Hardware/Materials to be used: Will Software which is already available in department be used? YES/NO

If NO please outline the Software to be used including how any necessary licences will be obtained: Will the project require any Programming? YES/NO

If YES please list the (potential) Programming Languages to be used (including any IDEs and Libraries you may make use of):

PHP, SQL

Table of Risks (if non Standard Hardware and/or Software to be used please include backup options/ contingency plans here): Gantt Chart/ Pert Chart (must include milestones and deliverables):


34 | P a g e

Submission Date: 20/10/17

PLEASE NOTE THAT SHOULD YOUR PROJECT UNDERGO ANY MAJOR CHANGES FOLLOWING THE

SUBMISSION OF THIS PLAN YOU ARE EXPECTED TO SUBMIT AN UPDATED PLAN WHICH

ACCURATLEY REFLECTS YOUR PROJECT.

CHANGES IN MODULE FROM CSC-30013 TO CSC-30014 ARE DEEMED TO BE A SIGNIFICANT CHANGE

REQUIRING AN UPDATED PLAN.

Ethics Form School of Computing and Mathematics: Student Project Ethics Committee Application form (U/G and PGT Students) Please print off a hard copy of this form and submit it to the School Office. Please remember to sign it, date it, and to get your supervisor’s signature on it.

Student name: Luke Sloane-Bulger

Student number: 15010247

Course: BSc Computer Science

Date: 20/10/17

Part A: (all students)

Does the topic of the project involve any of the following? YES NO

Recall of personal or sensitive memories

Reporting or discussion of personal or sensitive topics

Tasks which could be harmful or distressing

A significant risk of participants later regretting taking part

Procedures which are likely to provoke inter-personal or inter-group conflict?


35 | P a g e

If you answer “Yes” to any questions on Part A, then please also complete the University Ethics form (on the KLE) and seek guidance from the School Research Governance officer. The School Research Governance officer (mentioned in the university form) is the projects co-ordinator, Gordon Rugg. Part B: (if you are doing a software design and/or software build or gathering data from human participants)

Requirements gathering and evaluation: use of unusual techniques YES NO

Will the techniques you are using for requirements gathering and software

evaluation be unusual in a way which could cause ethical problems?

Will any of the participants be from a vulnerable group (e.g. under 18, or with

learning difficulties, or under pressure to help you)?

If you answer “Yes” to any questions on Part B, then please also complete the University Ethics form (on the KLE) and seek guidance from the School Research Governance officer. The School Research Governance officer (mentioned in the university form) is the projects co-ordinator, Gordon Rugg.

Consent Form

Information Sheet

Study Title: BSc Computer Science

Aims of the Research: Improving Usability and Security on Ecommerce Sites - -The project will aim to help improve the security and usability of E-Commerce websites through both desktop and mobile devices providing research based evidence. In order to find and explore, how security techniques in E-Commerce websites affect user experience such as through the logging in process.

Invitation You are being invited to consider taking part in the research study for a BSc Computer Science project on

‘Improving Usability and Security on E-Commerce Sites’. This project is being undertaken by Luke Sloane-

Bulger (Student No: 15010247).

Before you decide whether or not you wish to take part, it is important for you to understand why this research

is being done and what it will involve. Please take time to read this information carefully and discuss it with

friends and relatives if you wish. Ask us if there is anything that is unclear or if you would like more

information.

Why have I been invited?

You have been invited to participant in a one to one structured interview process where you will be asked to

‘Think Aloud’ where you will be conducting a user test of the KeeleSU Shop Website for a Dissertation research

project on “Improving Usability & Security on E-Commerce Sites”. Here you’ll be registering into account where

we will temporarily collect your forename, surname, date of birth, email and mobile number (All personal

details stored in the websites’ database will be erased immediately after the test is finished or should you

choose to withdraw at any point before the test is finished). You will then be asked to login in the system as I

observe and note your actions for further analysis in my final report.

Do I have to take part? You are free to decide whether you wish to take part or not. If you do decide to take part you will be asked to sign two consent forms, one is for you to keep and the other is for our records. You are free to withdraw from this study at any time and without giving reasons. What will happen if I take part? During the interview, I will ask you to carry out a task which involves you to register into the system as mentioned above and then to login into the system using a method which involves a SMS message being sent to your mobile phone which will contain an OTP (One Time Password), which will allow you to login to system. As you do this you will be encouraged to ‘Think Aloud’ to allow me to gather data in order to analyse and improve the system. This is a method used in website usability testing, and will take about 30 minutes in total. What are the benefits (if any) of taking part? Information you provide may be written into my Dissertation Report to help showcase the positive/negative

points of this system.


36 | P a g e

What are the risks (if any) of taking part? There are no risks involved if you take part, the interview will be recorded by me (Luke Sloane-Bulger) taking notes of what you say during the ‘Think Aloud’ process to be used for further analysis. All personal details stored in the websites’ database from the registration process (Your: Forename, Surname, Date of Birth, Email and Mobile Number) will be deleted and removed at the end of the task or when you choose to leave. However, your name and any personal details added to this consent form will be kept confidential. If it is required, an anonymised summary of the interview will be published, but nothing that can personally identify you will be published. How will information about me be used? Any personal data collected through the database in the registration process of the interview in order for you to logon will be erased at the end of the interview or when you choose to leave. The only data that will be retained will be from this consent form in order to be processed by the Keele University’s School of Computing and Mathematics in accordance to the Student Project Ethics Committee. Who will have access to information about me? The researcher and Keele University’s School of Computing and Mathematics will have access to the information provided by you stored purely and only on this consent form. Consent forms with your personal data will be stored by me in a locked and secured file cabinet and will be destroyed after my Dissertation has been submitted on Wednesday 25th April 2018. A version of the consent form will be also stored by Keele University’s School of Computing and Mathematics. Who is funding and organising the research?

This project is not funded. What if there is a problem? If you have a concern about any aspect of this study, you may wish to speak to the researcher who will do their best to answer your questions. You should contact Luke Sloane-Bulger on mobile: 07842173892 and/or email: [email protected]. Alternatively, if you do not wish to contact the researcher you may contact my Project Supervisor Adam Stanton on mobile: 01782 733992 and/or email: [email protected]. If you remain unhappy about the research and/or wish to raise a complaint about any aspect of the way that you have been approached or treated during the course of the study please write to Nicola Leighton who is the University’s contact for complaints regarding research at the following address:- Nicola Leighton Research Governance Officer Research & Enterprise Services

Dorothy Hodgkin Building Keele University ST5 5BG E-mail: [email protected] Tel: 01782 733306 Contact for further information Normally only Keele telephone numbers and e-mail addresses

should be used in all study documentation. If there are reasons to depart from this then these must be explained in your Ethical Review Panel documentation. CONSENT FORM Title of Project: Improving Usability & Security on E-Commerce Sites Name and contact details of Principal Investigator: Luke Sloane-Bulger, 34 Louise Street, Burslem, Stoke-on-Trent, Staffordshire, ST61AY, 07842173892, [email protected] Please tick box if you agree with the statement 1. I confirm that I have read and understood the information sheet dated 26/03/18

(version no 1) for the above study and have had the opportunity to ask questions 2. I understand that my participation is voluntary and that I am free to withdraw at any time

3. I agree to take part in this study. 4. I understand that data collected about me during this study will/will not* be anonymised before

it is submitted for publication. 5. I understand that although data will be anonymised because of my role it may be possible that I

could be identified in reports and publications*

6. I agree to the interview/focus* group being audio/video recorded*

mailto:[email protected]




37 | P a g e

7. For focus groups* I agree to keep the issues discussed within the focus group confidential and in particular, to avoid identifying any of the participants in relation to these issues/individual comments made during the session

8. I agree to allow the dataset collected to be used for future research projects* 9. I agree to be contacted about possible participation in future research project* ________________________

Name of participant

___________________

Date

_____________________

Signature

________________________

Researcher

___________________

Date

____________________

Signature

For Focus Groups/Interviews* If you consent to participate in this study, it should be drawn to your attention that the researcher has a professional obligation to act upon any aspects of poor practice and/or unprofessional behaviour that may be disclosed during the research activity. Researchers should use the appropriate

reporting mechanisms if they have witnessed or experienced poor practice and/or professional behaviour. CONSENT FORM (for use of quotes) Title of Project: Improving Usability & Security on E-Commerce Sites Name and contact details of Principal Investigator: Luke Sloane-Bulger, 34 Louise Street, Burslem, Stoke-on-Trent, Staffordshire, ST61AY, 07842173892, [email protected] Please tick box if you agree with the statement 1. I agree for my quotes to be used 2. I do not agree for my quotes to be used 3. I understand that although data will be anonymised because of my role it may be

possible that I could be identified in reports and publications*

Example Website (Requires a Server, PHPMyAdmin & Textlocal SMS API) – For demonstration please contact the author at: [email protected] Home.html  <!DOCTYPE html> <html> <head> <title>KeeleSU Shop</title>  <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="KeeleSU, Shop" />  <link rel="stylesheet" href="css/grid.css"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <link rel="stylesheet" href="css/responsive.css">  <script src="js/jquery.min.js"></script>

38 | P a g e

<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>  <script src="js/simpleCart.min.js"></script> <script src="js/script.js" defer></script>  <link href='./images/favicon.ico' rel='icon' type='image/x-icon'/> </head> <body>  <div class="header"> <div class="header-top"> <div class="container"> <div class="top-right"> <ul> <li><a href="checkout.php">Checkout</a></li> <li><a href="login.php">Register/Login</a></li> </ul> </div> <div class="clearfix"></div> </div> </div> <div class="heder-bottom"> <div class="container"> <div class="logo-nav">

<div class="logo-nav-left"> <a href="Home.html"><img src="images/keeleSULogo.png" alt="Keele Logo"/></a> </div> <div class="logo-nav-left1"> <nav class="navbar navbar-default">  <div class="navbar-header nav_2"> <button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse" data-target="#bs-megadropdown-tabs"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-megadropdown-tabs"> <ul class="nav navbar-nav"> <li class="active"><a href="about.html" class="act">About Us</a></li> <li class="active"><a href="products.html" class="act">Shop</a></li> </ul> </div> </nav> </div> <div class="header-right2"> <div class="cart box_1"> <a href="checkout.php"> <h3> <div class="total"> <span class="simpleCart_total"></span> (<span id="simpleCart_quantity" class="simpleCart_quantity"></span> items)</div> <img src="images/bag.png" alt="" /> </h3> </a> <p><a href="javascript:;" class="simpleCart_empty">Empty Cart</a></p> <div class="clearfix"> </div> </div>

</div> <div class="clearfix"> </div> </div>

39 | P a g e

</div> </div> </div>   <div class="featured"> <div class="wrap-featured grid"> <div class="slider"> <div class="numbertext"></div> <img src="images/Image1-960x460.jpg" alt="Keele Feature Photo" /> <div class="text"></div> </div> <div class="slider" style="display:none"> <div class="numbertext"></div> <img src="images/Image2-960x460.jpg" alt="Keele Feature Photo" /> <div class="text"></div> </div> <div class="slider" style="display:none"> <div class="numbertext"></div> <img src="images/Image3-960x460.jpg" alt="Keele Feature Photo" />

<div class="text"></div> </div> </div> </div>   <section id="content"> <div class="wrap-content grid"> <div class="row block02"> <p>For more information about us visit our main page at: <a href="http://http://www.keelesu.com/" target="_blank">KeeleSU</a>. You can use KeeleSU to recieve the latest news, blogs, events and tickets, etc...</p> <div id='result'></div> <div id='present'></div> </div> </div> </section>   <footer> <div class="footer-w3l"> <div class="container"> <div class="footer-grids"> <div class="col-md-3 footer-grid"> <h4><strong>Popular Links</strong></h4> <ul> <li><a href="home.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="https://keelesu.com/aboutus/feedback/">Submit Feedback</a></li> <li><a href="https://keelesu.com/volunteering/profile/">Log Volunteering Hours</a></li> <li><a href="https://keelesu.com/shopsandservices/bookinghub/">Book Facilities</a></li> <li><a href="https://keelesu.com/yourunion/ugm/yourideas/">Submit a Motion</a></li> <li><a href="https://keelesu.com/aboutus/contact/">Contact Us</a></li> </ul> </div> <div class="col-md-3 footer-grid"> <h4><strong>Follow Us</strong></h4> <div class="social-icon"> <a href="https://www.facebook.com/britishjudo/"><img

src="images/facebook-icon.png" alt="Facebook Icon"/></a> <a href="https://twitter.com/BritishJudo?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><i

40 | P a g e

mg src="images/twitter_icon.png" alt="Twitter Icon"/></a> <a href="https://www.youtube.com/user/BritishJudo"><img src="images/youtube_icon.png" alt="YouTube Icon"/></a> </div> </div> <div class="col-md-3 footer-grid"> <h4><strong>My Account</strong></h4> <ul> <li><a href="checkout.html">Checkout</a></li> <li><a href="login.php">Login</a></li> <li><a href="register.php"> Create Account </a></li> </ul> </div> <div class="col-md-3 footer-grid foot"> <h4><strong>Find Us</strong></h4> <ul> <li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i><p>Keele University Students' Union,<br>Keele University,<br>Newcastle-Under-Lyme,<br>Staffordshire<br>ST5 5BJ</p></li> <li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i><a href="#">01782 733700</a></li> <li><i class="glyphicon glyphicon-envelope" aria-

hidden="true"></i><a href="mailto:[email protected]"> [email protected]</a></li> </ul> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="author-area"> <div class="container"> <div class="copy-left"> <p>CSC-30014: Third Year Double Project - Luke Sloane-Bulger, Student ID: 15010247</p> </div> <div class="clearfix"></div> </div> </div> </footer>  </body> </html> About.html   <!DOCTYPE html> <html> <head> <title>KeeleSU Shop</title>  <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="KeeleSU, Shop" />  <link rel="stylesheet" href="css/grid.css"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <link rel="stylesheet" href="css/responsive.css">

 <script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>

41 | P a g e

<script src="js/simpleCart.min.js"></script> <script src="js/script.js" defer></script>  <link href='./images/favicon.ico' rel='icon' type='image/x-icon'/> </head> <body>  <div class="header"> <div class="header-top"> <div class="container"> <div class="top-right"> <ul> <li><a href="checkout.php">Checkout</a></li> <li><a href="login.php">Register/Login</a></li> </ul> </div> <div class="clearfix"></div> </div> </div> <div class="heder-bottom"> <div class="container"> <div class="logo-nav"> <div class="logo-nav-left">

<a href="Home.html"><img src="images/keeleSULogo.png" alt="Keele Logo"/></a> </div> <div class="logo-nav-left1"> <nav class="navbar navbar-default">  <div class="navbar-header nav_2"> <button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse" data-target="#bs-megadropdown-tabs"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-megadropdown-tabs"> <ul class="nav navbar-nav"> <li class="active"><a href="about.html" class="act">About Us</a></li> <li class="active"><a href="products.html" class="act">Shop</a></li> </ul> </div> </nav> </div> <div class="header-right2"> <div class="cart box_1"> <a href="checkout.php"> <h3> <div class="total"> <span class="simpleCart_total"></span> (<span id="simpleCart_quantity" class="simpleCart_quantity"></span> items)</div> <img src="images/bag.png" alt="" /> </h3> </a> <p><a href="javascript:;" class="simpleCart_empty">Empty Cart</a></p> <div class="clearfix"> </div> </div> </div>

<div class="clearfix"> </div> </div> </div>

42 | P a g e

</div> </div>   <section id="content"> <div class="wrap-content grid"> <article> <div class="row-About02"> <h1>About us</h1> <p>KeeleSU Shop is a demonstration website that conveys usable security for a research question on 'Improving Usability & Security on E-Commerce Sites'. Further details for this Dissertation Project can be found in the Project Plan and Project Report.</p><br> </article> </div> </div> </section>   <footer> <div class="footer-w3l"> <div class="container"> <div class="footer-grids"> <div class="col-md-3 footer-grid">

<h4><strong>Popular Links</strong></h4> <ul> <li><a href="home.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="https://keelesu.com/aboutus/feedback/">Submit Feedback</a></li> <li><a href="https://keelesu.com/volunteering/profile/">Log Volunteering Hours</a></li> <li><a href="https://keelesu.com/shopsandservices/bookinghub/">Book Facilities</a></li> <li><a href="https://keelesu.com/yourunion/ugm/yourideas/">Submit a Motion</a></li> <li><a href="https://keelesu.com/aboutus/contact/">Contact Us</a></li> </ul> </div> <div class="col-md-3 footer-grid"> <h4><strong>Follow Us</strong></h4> <div class="social-icon"> <a href="https://www.facebook.com/britishjudo/"><img src="images/facebook-icon.png" alt="Facebook Icon"/></a> <a href="https://twitter.com/BritishJudo?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><img src="images/twitter_icon.png" alt="Twitter Icon"/></a> <a href="https://www.youtube.com/user/BritishJudo"><img src="images/youtube_icon.png" alt="YouTube Icon"/></a> </div> </div> <div class="col-md-3 footer-grid"> <h4><strong>My Account</strong></h4> <ul> <li><a href="checkout.html">Checkout</a></li> <li><a href="login.php">Login</a></li> <li><a href="register.php"> Create Account </a></li> </ul> </div> <div class="col-md-3 footer-grid foot"> <h4><strong>Find Us</strong></h4> <ul> <li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i><p>Keele University Students' Union,<br>Keele University,<br>Newcastle-Under-Lyme,<br>Staffordshire<br>ST5 5BJ</p></li> <li><i class="glyphicon glyphicon-earphone" aria-

hidden="true"></i><a href="#">01782 733700</a></li> <li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><a href="mailto:[email protected]"> [email protected]</a></li>

43 | P a g e

</ul> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="author-area"> <div class="container"> <div class="copy-left"> <p>CSC-30014: Third Year Double Project - Luke Sloane-Bulger, Student ID: 15010247</p> </div> <div class="clearfix"></div> </div> </div> </footer>  </body> </html> Products.html  <!DOCTYPE html> <html> <head> <title>KeeleSU Shop</title>  <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="KeeleSU, Shop" />  <link rel="stylesheet" href="css/grid.css"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <link rel="stylesheet" href="css/responsive.css">  <script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>  <script src="js/simpleCart.min.js"></script> <script src="js/script.js" defer></script>  <link href='./images/favicon.ico' rel='icon' type='image/x-icon'/> </head> <body>  <div class="header"> <div class="header-top"> <div class="container"> <div class="top-right"> <ul> <li><a href="checkout.php">Checkout</a></li> <li><a href="login.php">Register/Login</a></li> </ul> </div> <div class="clearfix"></div> </div> </div> <div class="heder-bottom"> <div class="container"> <div class="logo-nav">

<div class="logo-nav-left"> <a href="Home.html"><img src="images/keeleSULogo.png" alt="Keele Logo"/></a>

44 | P a g e

</div> <div class="logo-nav-left1"> <nav class="navbar navbar-default">  <div class="navbar-header nav_2"> <button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse" data-target="#bs-megadropdown-tabs"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-megadropdown-tabs"> <ul class="nav navbar-nav"> <li class="active"><a href="about.html" class="act">About Us</a></li> <li class="active"><a href="products.html" class="act">Shop</a></li> </ul>

</div> </nav> </div> <div class="header-right2"> <div class="cart box_1"> <a href="checkout.php"> <h3> <div class="total"> <span class="simpleCart_total"></span> (<span id="simpleCart_quantity" class="simpleCart_quantity"></span> items)</div> <img src="images/bag.png" alt="" /> </h3> </a> <p><a href="javascript:;" class="simpleCart_empty">Empty Cart</a></p> <div class="clearfix"> </div> </div> </div> <div class="clearfix"> </div> </div> </div> </div> </div>    <section id="content"> <div class="wrap-content grid"> <div class="row block-About02"> <table> <tr> <th><h1>Product</h1></th> <th><h1>Product Name</h1></th> <th><h1>Price</h1></th> <th><h1>Bag</h1></th> </tr> <tbody> <tr> <td><img src="images/Item1.jpg" alt="Plush Toy" width="135" height="135"/></td> <td>Plush Teddy</td> <td>£12.00</td> <td><div class="col-md-4 product-tab-grid simpleCart_shelfItem"><em

hidden class="item_price">$12.00</em><a href="#" data-text="Add To Cart" class="my-cart-b item_add">Add To Cart</a></div></td> </tr>

45 | P a g e

<td><img src="images/Item2.jpg" alt="Judo Gi" width="135" height="135" largewidth="480" largeheight="360"/></td> <td>Plush Squirrell</td> <td>£10.00</td> <td><div class="col-md-4 product-tab-grid simpleCart_shelfItem"><em hidden class="item_price">$10.00</em><a href="#" data-text="Add To Cart" class="my-cart-b item_add">Add To Cart</a></div></td> </tr> </table> </div> </div> </section>   <footer> <div class="footer-w3l"> <div class="container"> <div class="footer-grids"> <div class="col-md-3 footer-grid"> <h4><strong>Popular Links</strong></h4> <ul> <li><a href="home.html">Home</a></li>

<li><a href="about.html">About Us</a></li> <li><a href="https://keelesu.com/aboutus/feedback/">Submit Feedback</a></li> <li><a href="https://keelesu.com/volunteering/profile/">Log Volunteering Hours</a></li> <li><a href="https://keelesu.com/shopsandservices/bookinghub/">Book Facilities</a></li> <li><a href="https://keelesu.com/yourunion/ugm/yourideas/">Submit a Motion</a></li> <li><a href="https://keelesu.com/aboutus/contact/">Contact Us</a></li> </ul> </div> <div class="col-md-3 footer-grid"> <h4><strong>Follow Us</strong></h4> <div class="social-icon"> <a href="https://www.facebook.com/britishjudo/"><img src="images/facebook-icon.png" alt="Facebook Icon"/></a> <a href="https://twitter.com/BritishJudo?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><img src="images/twitter_icon.png" alt="Twitter Icon"/></a> <a href="https://www.youtube.com/user/BritishJudo"><img src="images/youtube_icon.png" alt="YouTube Icon"/></a> </div> </div> <div class="col-md-3 footer-grid"> <h4><strong>My Account</strong></h4> <ul> <li><a href="checkout.html">Checkout</a></li> <li><a href="login.php">Login</a></li> <li><a href="register.php"> Create Account </a></li> </ul> </div> <div class="col-md-3 footer-grid foot"> <h4><strong>Find Us</strong></h4> <ul> <li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i><p>Keele University Students' Union,<br>Keele University,<br>Newcastle-Under-Lyme,<br>Staffordshire<br>ST5 5BJ</p></li> <li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i><a href="#">01782 733700</a></li> <li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><a href="mailto:[email protected]"> [email protected]</a></li>

</ul> </div>

46 | P a g e

<div class="clearfix"> </div> </div> </div> </div> <div class="author-area"> <div class="container"> <div class="copy-left"> <p>CSC-30014: Third Year Double Project - Luke Sloane-Bulger, Student ID: 15010247</p> </div> <div class="clearfix"></div> </div> </div> </footer>  </body> </html> Checkout.php   <?php session_start(); if (!isset($_SESSION['mobileNo'])) { $_SESSION['msg'] = "You must log in first"; header('location: login.php'); } if (isset($_GET['logout'])) { session_destroy(); unset($_SESSION['mobileNo']); header("location: login.php"); } ?> <!DOCTYPE html> <html> <head> <title>KeeleSU Shop</title>  <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="KeeleSU, Shop" />  <link rel="stylesheet" href="css/grid.css"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <link rel="stylesheet" href="css/responsive.css">  <script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>  <script src="js/simpleCart.min.js"></script> <script src="js/script.js" defer></script>  <link href='./images/favicon.ico' rel='icon' type='image/x-icon'/> </head> <body>  <div class="header"> <div class="header-top"> <div class="container"> <div class="top-right">

<ul> <li><a href="checkout.php">Checkout</a></li> <li><a href="login.php">Register/Login</a></li>

47 | P a g e

</ul> </div> <div class="clearfix"></div> </div> </div> <div class="heder-bottom"> <div class="container"> <div class="logo-nav"> <div class="logo-nav-left"> <a href="Home.html"><img src="images/keeleSULogo.png" alt="Keele Logo"/></a> </div> <div class="logo-nav-left1"> <nav class="navbar navbar-default">  <div class="navbar-header nav_2"> <button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse" data-target="#bs-megadropdown-tabs"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span>

<span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-megadropdown-tabs"> <ul class="nav navbar-nav"> <li class="active"><a href="about.html" class="act">About Us</a></li> <li class="active"><a href="products.html" class="act">Shop</a></li> </ul> </div> </nav> </div> <div class="header-right2"> <div class="cart box_1"> <a href="checkout.php"> <h3> <div class="total"> <span class="simpleCart_total"></span> (<span id="simpleCart_quantity" class="simpleCart_quantity"></span> items)</div> <img src="images/bag.png" alt="" /> </h3> </a> <p><a href="javascript:;" class="simpleCart_empty">Empty Cart</a></p> <div class="clearfix"> </div> </div> </div> <div class="clearfix"> </div> </div> </div> </div> </div>   <section id="content"> <div class="wrap-content grid"> <div class="cart-items"> <h2>KeeleSU Shopping Bag</h2>

<script>$(document).ready(function(c) { $('.close1').on('click', function(c){ $('.cart-header').fadeOut('slow', function(c){

48 | P a g e

$('.cart-header').remove(); }); }); }); </script> <div class="cart-header"> <div class="close1"></div> <div class="cart-sec simpleCart_shelfItem"> <div class="cart-item cyc"> <img src="images/Item1.jpg" class="img-responsive" alt=""> </div> <div class="cart-item-info"> <h3><a href="#">Keele Plush Squirrel</a><span>Pickup time: N/A</span></h3> <ul class="qty"> <li><p>Min. order value:</p></li> <li><p>FREE delivery</p></li> </ul> <div class="delivery"> <p>Service Charges : £5.00</p> <span>Delivered in 1-2 Working Days</span> <div class="clearfix"></div> </div>

</div> <div class="clearfix"></div> </div> </div> <script>$(document).ready(function(c) { $('.close2').on('click', function(c){ $('.cart-header2').fadeOut('slow', function(c){ $('.cart-header2').remove(); }); }); }); </script> <div class="cart-header2"> <div class="close2"></div> <div class="cart-sec simpleCart_shelfItem"> <div class="cart-item cyc"> <img src="images/Item2.jpg" class="img-responsive" alt=""> </div> <div class="cart-item-info"> <h3><a href="#">Keele Plush Squirrel</a><span>Pickup time: N/A</span></h3> <ul class="qty"> <li><p>Min. order value:</p></li> <li><p>FREE delivery</p></li> </ul> <div class="delivery"> <p>Service Charges : £5.00</p> <span>Delivered in 1-2 Working Days</span> <div class="clearfix"></div> </div> </div> <div class="clearfix"></div> </div> </div> </div> </div> </section>   <footer> <div class="footer-w3l"> <div class="container"> <div class="footer-grids">

<div class="col-md-3 footer-grid"> <h4><strong>Popular Links</strong></h4> <ul>

49 | P a g e

<li><a href="home.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="https://keelesu.com/aboutus/feedback/">Submit Feedback</a></li> <li><a href="https://keelesu.com/volunteering/profile/">Log Volunteering Hours</a></li> <li><a href="https://keelesu.com/shopsandservices/bookinghub/">Book Facilities</a></li> <li><a href="https://keelesu.com/yourunion/ugm/yourideas/">Submit a Motion</a></li> <li><a href="https://keelesu.com/aboutus/contact/">Contact Us</a></li> </ul> </div> <div class="col-md-3 footer-grid"> <h4><strong>Follow Us</strong></h4> <div class="social-icon"> <a href="https://www.facebook.com/britishjudo/"><img src="images/facebook-icon.png" alt="Facebook Icon"/></a> <a href="https://twitter.com/BritishJudo?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><img src="images/twitter_icon.png" alt="Twitter Icon"/></a>

<a href="https://www.youtube.com/user/BritishJudo"><img src="images/youtube_icon.png" alt="YouTube Icon"/></a> </div> </div> <div class="col-md-3 footer-grid"> <h4><strong>My Account</strong></h4> <ul> <li><a href="checkout.html">Checkout</a></li> <li><a href="login.php">Login</a></li> <li><a href="register.php"> Create Account </a></li> </ul> </div> <div class="col-md-3 footer-grid foot"> <h4><strong>Find Us</strong></h4> <ul> <li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i><p>Keele University Students' Union,<br>Keele University,<br>Newcastle-Under-Lyme,<br>Staffordshire<br>ST5 5BJ</p></li> <li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i><a href="#">01782 733700</a></li> <li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><a href="mailto:[email protected]"> [email protected]</a></li> </ul> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="author-area"> <div class="container"> <div class="copy-left"> <p>CSC-30014: Third Year Double Project - Luke Sloane-Bulger, Student ID: 15010247</p> </div> <div class="clearfix"></div> </div> </div> </footer>  </body> </html> Server.php <?php

session_start(); /*Begins session to store information across webpages until browser is closed or user logs out.*/ //Initialising variables


50 | P a g e

$forename = ""; $surname = ""; $dob = ""; $email = ""; $mobileNo = ""; $errors = array(); //MyPHPAdmin Database Connection $db = mysqli_connect('localhost', 'root', '', 'keelesuregistration'); //Register User if (isset($_POST['reg_user'])) { //Recieves inputs from the registration form $forename = mysqli_real_escape_string($db, $_POST['forename']); $surname = mysqli_real_escape_string($db, $_POST['surname']); $dob = mysqli_real_escape_string($db, $_POST['dob']); $email = mysqli_real_escape_string($db, $_POST['email']); $mobileNo = mysqli_real_escape_string($db, $_POST['mobileNo']); /*Form Validation - Ensures that the form is correctly completed by with '(array_push())' alongside errors.php*/ if (empty($forename)) { array_push($errors, "Forename is required"); } if (empty($surname)) { array_push($errors, "Surname is required"); }

if (empty($dob)) { array_push($errors, "Date of Birth is required"); } if (empty($email)) { array_push($errors, "Email is required"); } if (empty($mobileNo)) { array_push($errors, "Mobile is required"); } /*First phase check database to make sure user doesn't already exist, by checking for the same email and mobile variables.*/ $user_check_query = "SELECT * FROM users WHERE email='$email' OR mobileNo='$mobileNo' LIMIT 1"; $result = mysqli_query($db, $user_check_query); $user = mysqli_fetch_assoc($result); //If the user exists if ($user) { if ($user['email'] === $email) { array_push($errors, "email already exists"); } if ($user['mobileNo'] === $mobileNo) { array_push($errors, "Mobile Number already exists"); } } //Final phase, register the user if there are no errors in the form if (count($errors) == 0) { $query = "INSERT INTO users (forename, surname, dob, email, mobileNo) VALUES('$forename','$surname', '$dob', '$email', '$mobileNo')"; mysqli_query($db, $query); $_SESSION['email'] = $email; //Checks user session using their email ID $_SESSION['success'] = "You are now logged in"; header('location: index.php'); //Directs user to index.php to let the user know they have logged in } } // LOGIN USER if (isset($_POST['login_user'])) { $mobileNo = mysqli_real_escape_string($db, $_POST['mobileNo']); if (empty($mobileNo)) { //Checks to see if user has entered their mobile number array_push($errors, "Mobile is required"); //If not display error message } if (count($errors) == 0) { //If zero errors $query = "SELECT * FROM users WHERE mobileNo='$mobileNo'"; //Checks to see if entered Mobile No exists in database $results = mysqli_query($db, $query); if (mysqli_num_rows($results) == 1) { if(isset($_POST['ccode']) && isset($_POST['mobileNo'])) { //Check country code and Mobile No //My authorisation details for TextLocal $username = "[email protected]";

$hash = "4be2a8e9c8a0bea4f4c4b991847f1d74ec41e755c1980c491f0bca4ae75f37a0"; //Config variables. Consult http://api.txtlocal.com/docs for more info.

51 | P a g e

$test = "0"; //Data for text message. This is the text message data. $sender = "Keele University"; // This is who the message appears to be from. $numbers = $_POST['ccode'].$mobileNo; //A single number or a comma-seperated list of numbers $otp = mt_rand(10000, 99999); //Sends OTP of random string of number between 10,000 & 99,999 $message = "Hello, this is your One Time Password (OTP) for KeeleSU Shop:" . $otp; //Text message user will receive //612 chars or less // A single number or a comma-seperated list of numbers $message = urlencode($message); $data = "username=".$username."&hash=".$hash."&message=".$message."&sender=".$sender."&numbers=".$numbers."&test=".$test; setcookie('otp', $otp); //Sets & Saves cookie to users computer for the OTP to be remember by system $ch = curl_init('http://api.txtlocal.com/send/?'); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_POSTFIELDS, $data); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $resultSMS = curl_exec($ch); // This is the result from the API if($resultSMS==true){

echo "Message Sent"; }else { echo "Message Not Sent"; } curl_close($ch); } }else { array_push($errors, "Incorrect Mobile Number and OTP combination. Please try again"); } } } if(isset($_POST['verifyOtp'])) { //When user clicks login button checks OTP if (empty($otp)) { //Checks to see if input field contains OTP array_push($errors, "OTP is required"); //If no OTP, display feedback message } $otp = $_POST['otp']; if($_COOKIE['otp'] == $otp) { //If OTP saved in browser cookie and is the same as user input log user in $_SESSION['mobileNo'] = $mobileNo; $_SESSION['success'] = "You are now logged in"; header('location: index.php'); //Direct user to index.php } else { echo "Your login details were incorrect, please try again."; } } ?> Register.php  <?php include('server.php') ?>  <!DOCTYPE html> <html> <head> <title>KeeleSU Shop</title>  <meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="KeeleSU, Shop" />

52 | P a g e

<link rel="stylesheet" href="css/grid.css"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <link rel="stylesheet" href="css/responsive.css">  <script src="js/jquery.min.js"></script>  <script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>  <script src="js/simpleCart.min.js"></script> <script src="js/script.js" defer></script>  <link href='./images/favicon.ico' rel='icon' type='image/x-icon'/> </head> <body>  <div class="header"> <div class="header-top"> <div class="container"> <div class="top-right"> <ul> <li><a href="checkout.php">Checkout</a></li> <li><a href="login.php">Register/Login</a></li> </ul> </div>

<div class="clearfix"></div> </div> </div> <div class="heder-bottom"> <div class="container"> <div class="logo-nav"> <div class="logo-nav-left"> <a href="Home.html"><img src="images/keeleSULogo.png" alt="Keele Logo"/></a> </div> <div class="logo-nav-left1"> <nav class="navbar navbar-default">  <div class="navbar-header nav_2"> <button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse" data-target="#bs-megadropdown-tabs"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-megadropdown-tabs"> <ul class="nav navbar-nav"> <li class="active"><a href="about.html" class="act">About Us</a></li> <li class="active"><a href="products.html" class="act">Shop</a></li> </ul> </div> </nav> </div> <div class="header-right2"> <div class="cart box_1"> <a href="checkout.php"> <h3> <div class="total"> <span class="simpleCart_total"></span> (<span id="simpleCart_quantity" class="simpleCart_quantity"></span> items)</div> <img src="images/bag.png" alt="" /> </h3> </a>

<p><a href="javascript:;" class="simpleCart_empty">Empty Cart</a></p> <div class="clearfix"> </div>

53 | P a g e

</div> </div> <div class="clearfix"> </div> </div> </div> </div> </div>   <div class="content">  <div class="login"> <div class="main-agileits"> <div class="form-w3agile form1"> <h3>Register</h3> <form method="post" action="register.php"> <?php include('errors.php'); ?> <div id ="message"></div> <label>Forename:</label> <div class="key"> <i class="fa fa-user" aria-hidden="true"></i> <input type="text" name="forename" value="<?php echo $forename; ?>" required="" maxlength="100">

<div class="clearfix"></div> </div> <label>Surname:</label> <div class="key"> <i class="fa fa-user" aria-hidden="true"></i> <input type="text" name="surname" value="<?php echo $surname; ?>" required="" maxlength="100"> <div class="clearfix"></div> </div> <label>DOB:</label> <div class="key"> <i class="fa fa-user" aria-hidden="true"></i> <input type="text" name="dob" value="<?php echo $dob; ?>" required="" maxlength="100" pattern="\d{1,2}/\d{1,2}/\d{4}"> <div class="clearfix"></div> </div> <label>Email:</label> <div class="key"> <i class="fa fa-user" aria-hidden="true"></i> <input type="email" name="email" value="<?php echo $email; ?>" required="" maxlength="100"> <div class="clearfix"></div> </div> <label>Mobile Number:</label> <div class="key"> <i class="fa fa-user" aria-hidden="true"></i> <input type="text" name="mobileNo" value="<?php echo $mobileNo; ?>" required="" maxlength="10" pattern="\d*" required title="Enter your Mobile Number without the first '0', e.g '7842173892'" placeholder="Enter Mobile Number without the first 0, e.g '7842173892'"> <div class="clearfix"></div> </div> <input type="submit" id="send" name="reg_user" value="Submit"> <p>Already a member? <a href="login.php">Sign in</a></p> </form> </div > </div> </div>  </div> 

 <footer> <div class="footer-w3l">

54 | P a g e

<div class="container"> <div class="footer-grids"> <div class="col-md-3 footer-grid"> <h4><strong>Popular Links</strong></h4> <ul> <li><a href="home.html">Home</a></li> <li><a href="https://keelesu.com/aboutus/feedback/">Submit Feedback</a></li> <li><a href="https://keelesu.com/volunteering/profile/">Log Volunteering Hours</a></li> <li><a href="https://keelesu.com/shopsandservices/bookinghub/">Book Facilities</a></li> <li><a href="https://keelesu.com/yourunion/ugm/yourideas/">Submit a Motion</a></li> <li><a href="https://keelesu.com/aboutus/contact/">Contact Us</a></li> </ul> </div> <div class="col-md-3 footer-grid"> <h4><strong>Follow Us</strong></h4> <div class="social-icon"> <a href="https://www.facebook.com/britishjudo/"><img

src="images/facebook-icon.png" alt="Facebook Icon"/></a> <a href="https://twitter.com/BritishJudo?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><img src="images/twitter_icon.png" alt="Twitter Icon"/></a> <a href="https://www.youtube.com/user/BritishJudo"><img src="images/youtube_icon.png" alt="YouTube Icon"/></a> </div> </div> <div class="col-md-3 footer-grid"> <h4><strong>My Account</strong></h4> <ul> <li><a href="checkout.html">Checkout</a></li> <li><a href="Login.html">Login</a></li> <li><a href="registered.html"> Create Account </a></li> </ul> </div> <div class="col-md-3 footer-grid foot"> <h4><strong>Find Us</strong></h4> <ul> <li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i><p>Keele University Students' Union,<br>Keele University,<br>Newcastle-Under-Lyme,<br>Staffordshire<br>ST5 5BJ</p></li> <li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i><a href="#">01782 733700</a></li> <li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><a href="mailto:[email protected]"> [email protected]</a></li> </ul> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="author-area"> <div class="container"> <div class="copy-left"> <p>CSC-30014: Third Year Double Project - Luke Sloane-Bulger, Student ID: 15010247</p> </div> <div class="clearfix"></div> </div> </div> </footer>

 </body>

55 | P a g e

</html> Login.php  <?php include('server.php') ?> <!DOCTYPE html> <html> <head> <title>KeeleSU Shop</title>  <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="KeeleSU, Shop" />  <link rel="stylesheet" href="css/grid.css"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>

<link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <link rel="stylesheet" href="css/responsive.css">  <script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>  <script src="js/simpleCart.min.js"></script> <script src="js/script.js" defer></script>  <link href='./images/favicon.ico' rel='icon' type='image/x-icon'/> </head> <body>  <div class="header"> <div class="header-top"> <div class="container"> <div class="top-right"> <ul> <li><a href="checkout.php">Checkout</a></li> <li><a href="login.php">Register/Login</a></li> </ul> </div> <div class="clearfix"></div> </div> </div> <div class="heder-bottom"> <div class="container"> <div class="logo-nav"> <div class="logo-nav-left"> <a href="Home.html"><img src="images/keeleSULogo.png" alt="Keele Logo"/></a> </div> <div class="logo-nav-left1"> <nav class="navbar navbar-default">  <div class="navbar-header nav_2"> <button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse" data-target="#bs-megadropdown-tabs"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

</div> <div class="collapse navbar-collapse" id="bs-megadropdown-tabs">

56 | P a g e

<ul class="nav navbar-nav"> <li class="active"><a href="about.html" class="act">About Us</a></li> <li class="active"><a href="products.html" class="act">Shop</a></li> </ul> </div> </nav> </div> <div class="header-right2"> <div class="cart box_1"> <a href="checkout.php"> <h3> <div class="total"> <span class="simpleCart_total"></span> (<span id="simpleCart_quantity" class="simpleCart_quantity"></span> items)</div> <img src="images/bag.png" alt="" /> </h3> </a> <p><a href="javascript:;" class="simpleCart_empty">Empty Cart</a></p>

<div class="clearfix"> </div> </div> </div> <div class="clearfix"> </div> </div> </div> </div> </div>   <div class="content">  <div class="login"> <div class="main-agileits"> <div class="form-w3agile form1"> <h3>Login</h3> <form role="form" method="post" action="login.php" enctype="multipart/form-data"> <?php include('errors.php'); ?> <div id ="message"></div> <label>Mobile No:</label> <select name="ccode"> <option value="44">UK + 44<option> </select> <div class="key"> <i class="fa fa-user" aria-hidden="true"></i> <input type="text" name="mobileNo" maxlength="10" placeholder="Enter your mobile" required=""> <div class="clearfix"></div> </div> <input type="submit" name="login_user" value="Send OTP"> </form> <form method="POST" action="login.php"> <?php include('errors.php'); ?> <div id ="message"></div> <label>OTP</label> <div class="key"> <i class="fa fa-user" aria-hidden="true"></i> <input type="text" name="otp" maxlength="5" placeholder="Enter OTP" required=""> <div class="clearfix"></div> </div> <input type="submit" name="verifyOtp" value="Login"> <p>Not yet a member? <a href="register.php">Sign

up</a></p> </form> </div>

57 | P a g e

</div> </div>  </div>   <footer> <div class="footer-w3l"> <div class="container"> <div class="footer-grids"> <div class="col-md-3 footer-grid"> <h4><strong>Popular Links</strong></h4> <ul> <li><a href="home.html">Home</a></li> <li><a href="https://keelesu.com/aboutus/feedback/">Submit Feedback</a></li> <li><a href="https://keelesu.com/volunteering/profile/">Log Volunteering Hours</a></li> <li><a href="https://keelesu.com/shopsandservices/bookinghub/">Book Facilities</a></li> <li><a href="https://keelesu.com/yourunion/ugm/yourideas/">Submit a Motion</a></li> <li><a

href="https://keelesu.com/aboutus/contact/">Contact Us</a></li> </ul> </div> <div class="col-md-3 footer-grid"> <h4><strong>Follow Us</strong></h4> <div class="social-icon"> <a href="https://www.facebook.com/britishjudo/"><img src="images/facebook-icon.png" alt="Facebook Icon"/></a> <a href="https://twitter.com/BritishJudo?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><img src="images/twitter_icon.png" alt="Twitter Icon"/></a> <a href="https://www.youtube.com/user/BritishJudo"><img src="images/youtube_icon.png" alt="YouTube Icon"/></a> </div> </div> <div class="col-md-3 footer-grid"> <h4><strong>My Account</strong></h4> <ul> <li><a href="checkout.html">Checkout</a></li> <li><a href="Login.html">Login</a></li> <li><a href="registered.html"> Create Account </a></li> </ul> </div> <div class="col-md-3 footer-grid foot"> <h4><strong>Find Us</strong></h4> <ul> <li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i><p>Keele University Students' Union,<br>Keele University,<br>Newcastle-Under-Lyme,<br>Staffordshire<br>ST5 5BJ</p></li> <li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i><a href="#">01782 733700</a></li> <li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><a href="mailto:[email protected]"> [email protected]</a></li> </ul> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="author-area"> <div class="container">

<div class="copy-left"> <p>CSC-30014: Third Year Double Project - Luke Sloane-Bulger, Student ID: 15010247</p>

58 | P a g e

</div> <div class="clearfix"></div> </div> </div> </footer>  </body> </html> Index.php   <?php session_start(); if (!isset($_SESSION['mobileNo'])) {

$_SESSION['msg'] = "You must log in first"; header('location: login.php'); } if (isset($_GET['logout'])) { session_destroy(); unset($_SESSION['mobileNo']); header("location: login.php"); } ?> <!DOCTYPE html> <html> <head> <title>KeeleSU Shop</title>  <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="KeeleSU, Shop" />  <link rel="stylesheet" href="css/grid.css"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <link rel="stylesheet" href="css/responsive.css">  <script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>  <script src="js/simpleCart.min.js"></script> <script src="js/script.js" defer></script>  <link href='./images/favicon.ico' rel='icon' type='image/x-icon'/> </head> <body>  <div class="header"> <div class="header-top"> <div class="container"> <div class="top-right"> <ul> <li><a href="checkout.php">Checkout</a></li> <li><a href="login.php">Register/Login</a></li> </ul> </div> <div class="clearfix"></div> </div> </div> <div class="heder-bottom">

<div class="container"> <div class="logo-nav"> <div class="logo-nav-left">

59 | P a g e

<a href="Home.html"><img src="images/keeleSULogo.png" alt="Keele Logo"/></a> </div> <div class="logo-nav-left1"> <nav class="navbar navbar-default">  <div class="navbar-header nav_2"> <button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse" data-target="#bs-megadropdown-tabs"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-megadropdown-tabs"> <ul class="nav navbar-nav"> <li class="active"><a href="about.html" class="act">About Us</a></li> <li class="active"><a

href="products.html" class="act">Shop</a></li> </ul> </div> </nav> </div> <div class="header-right2"> <div class="cart box_1"> <a href="checkout.php"> <h3> <div class="total"> <span class="simpleCart_total"></span> (<span id="simpleCart_quantity" class="simpleCart_quantity"></span> items)</div> <img src="images/bag.png" alt="" /> </h3> </a> <p><a href="javascript:;" class="simpleCart_empty">Empty Cart</a></p> <div class="clearfix"> </div> </div> </div> <div class="clearfix"> </div> </div> </div> </div> </div>   <section id="content"> <div class="wrap-content grid"> <div class="main-agileits"> <div class="form-w3agile form1">  <?php if (isset($_SESSION['success'])) : ?> <div class="error success" > <h3> <?php echo $_SESSION['success']; unset($_SESSION['success']); ?> </h3> </div> <?php endif ?>

 <?php if (isset($_SESSION['mobileNo'])) : ?> <p>Welcome <strong><?php echo $_SESSION['mobileNo'];

60 | P a g e

?></strong></p> <p> <a href="index.php?logout='1'" style="color: red;">logout</a> </p> <?php endif ?> </div> </div> </div> </section>   <footer> <div class="footer-w3l"> <div class="container"> <div class="footer-grids"> <div class="col-md-3 footer-grid"> <h4><strong>Popular Links</strong></h4> <ul> <li><a href="home.html">Home</a></li> <li><a href="https://keelesu.com/aboutus/feedback/">Submit Feedback</a></li> <li><a href="https://keelesu.com/volunteering/profile/">Log Volunteering Hours</a></li> <li><a href="https://keelesu.com/shopsandservices/bookinghub/">Book Facilities</a></li>

<li><a href="https://keelesu.com/yourunion/ugm/yourideas/">Submit a Motion</a></li> <li><a href="https://keelesu.com/aboutus/contact/">Contact Us</a></li> </ul> </div> <div class="col-md-3 footer-grid"> <h4><strong>Follow Us</strong></h4> <div class="social-icon"> <a href="https://www.facebook.com/britishjudo/"><img src="images/facebook-icon.png" alt="Facebook Icon"/></a> <a href="https://twitter.com/BritishJudo?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><img src="images/twitter_icon.png" alt="Twitter Icon"/></a> <a href="https://www.youtube.com/user/BritishJudo"><img src="images/youtube_icon.png" alt="YouTube Icon"/></a> </div> </div> <div class="col-md-3 footer-grid"> <h4><strong>My Account</strong></h4> <ul> <li><a href="checkout.html">Checkout</a></li> <li><a href="Login.html">Login</a></li> <li><a href="registered.html"> Create Account </a></li> </ul> </div> <div class="col-md-3 footer-grid foot"> <h4><strong>Find Us</strong></h4> <ul> <li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i><p>Keele University Students' Union,<br>Keele University,<br>Newcastle-Under-Lyme,<br>Staffordshire<br>ST5 5BJ</p></li> <li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i><a href="#">01782 733700</a></li> <li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><a href="mailto:[email protected]"> [email protected]</a></li> </ul> </div> <div class="clearfix"> </div> </div> </div>

</div> <div class="author-area"> <div class="container">

61 | P a g e

<div class="copy-left"> <p>CSC-30014: Third Year Double Project - Luke Sloane-Bulger, Student ID: 15010247</p> </div> <div class="clearfix"></div> </div> </div> </footer>  </body> </html> Error.php <?php if (count($errors) > 0) : ?>  <div class="error"> <?php foreach ($errors as $error) : ?> <p><?php echo $error ?></p> <?php endforeach ?> </div> <?php endif ?>


62 | P a g e

Bibliography: Kitonyi, N. (2018) UK Online Shopping and E-Commerce Statistics for 2017. Retrieved on 10/12/17 from:

https://www.gurufocus.com/news/492058/uk-online-shopping-and-ecommerce-statistics-for-2017

Schneier, B. (2009) Balancing Security and Usability in Authentication - Schneier on Security. Retrieved on

10/12/17 from: https://www.schneier.com/blog/archives/2009/02/balancing_secur.html

Muncaster, P. (2009) Security versus usability: the e-commerce conundrum | V3. Retrieved on 10/12/17 from:

https://www.v3.co.uk/v3-uk/analysis/2002017/security-versus-usability-commerce-conundrum

Nielsen, J. (1995) 10 Usability Heuristics for User Interface Design. Retrieved on 10/12/17 from:

https://www.nngroup.com/articles/ten-usability-heuristics/

Davis, F. Bagozzi, R. Warshaw, P. (1989) User Acceptance of Computer Technology: A Comparison of Two

Theoretical Models. Management Science, VOL 35, 8, Page: 982-1003

Cranor, L. Garfinkel, S. (2005) Security and Usability. (1st ed.) O'Reilly Media. ISBN-10: 0596008279

Miller, C (2016). The Daily Egg - The 59 Second Rule: 3 Reasons Why Users Leave a Website. Retrieved on

10/12/18 from: https://www.crazyegg.com/blog/why-users-leave-a-website/

Sasse, M. Brostoff, S. Weirich, D. (2001) Transforming the ‘weakest link’ — a human/computer interaction

approach to usable and effective security. BT Technology Journal. VOL 19, 3.

SecurEnvoy. (2018) What is Two Factor Authentication? Retrieved on 15/12/17 from:

https://www.securenvoy.com/two-factor-authentication/what-is-2fa.shtm

Rouse, M. (2015) What is three-factor authentication (3FA). Retrieved on 15/12/17 from:

https://searchsecurity.techtarget.com/definition/three-factor-authentication-3FA

Letts, L., Wilkins, S., Law, M., Stewart, D., Bosch, J., & Westmorland, M. (2007) Guidelines for Critical Review

Form: Qualitative Studies (Version 2.0) Retrieved on 16/10/17 from:

https://students.keele.ac.uk/bbcswebdav/pid-1364112-dt-content-rid-3026934_1/courses/CSC-30016-2017-

SEM1-A/Guidelines-for-Critical-Review-Form-Qualitative-Studies.pdf

Budgen, D., Brereton, P. (2006) Performing Systematic Literature Reviews in Software Engineering. (1), 1051-

1052.

Basu, G. (2013) Literature Review vs. Systematic - SJSU Research Guides at San José State University Library.

Retrieved on 16/10/17 from: https://libguides.sjsu.edu/c.php?g=230370&p=1528399

National Research Council. (2003) Evaluating and Improving Undergraduate Teaching in Science, Technology,

Engineering, and Mathematics. Washington, DC: The National Academies Press.

https://doi.org/10.17226/10024.

Wyse, S. (2017) Advantages and Disadvantages of Surveys. Retrieved on 15/12/17 from:

https://www.snapsurveys.com/blog/advantages-disadvantages-surveys/

Nielsen, J. (2001) Wireframing and Prototyping. Retrieved on 15/12/17 from:

https://www.nngroup.com/courses/wireframing-and-prototyping/

Nielsen, J. (2012) Thinking Aloud: The #1 Usability Tool. Retrieved on 15/12/17 from:

https://www.nngroup.com/articles/thinking-aloud-the-1-usability-tool/

Adams, A & Sasse, M A. (1999) M A: ‘Users are not the enemy’, Communications of the ACM, 42, No 12

Nielsen J. (2000) ‘Security and Human Factors’, Alertbox. Retrieved on 15/12/17 from:

http://www.useit.com/alertbox/20001126.html

Brostoff, S and Sasse, M A. (2000) ‘Safe and sound: a safety-critical design approach to security’, to be

presented at the 10th ACM/SIGSAC New Security Paradigms Workshop, Cloudcroft, New Mexico (September

2001) (in press).

https://www.gurufocus.com/news/492058/uk-online-shopping-and-ecommerce-statistics-for-2017

https://www.schneier.com/blog/archives/2009/02/balancing_secur.html

https://www.v3.co.uk/v3-uk/analysis/2002017/security-versus-usability-commerce-conundrum

https://www.nngroup.com/articles/ten-usability-heuristics/

https://www.crazyegg.com/blog/why-users-leave-a-website/

https://www.securenvoy.com/two-factor-authentication/what-is-2fa.shtm

https://searchsecurity.techtarget.com/definition/three-factor-authentication-3FA

https://students.keele.ac.uk/bbcswebdav/pid-1364112-dt-content-rid-3026934_1/courses/CSC-30016-2017-%20SEM1-A/Guidelines-for-Critical-Review-Form-Qualitative-Studies.pdf

https://students.keele.ac.uk/bbcswebdav/pid-1364112-dt-content-rid-3026934_1/courses/CSC-30016-2017-%20SEM1-A/Guidelines-for-Critical-Review-Form-Qualitative-Studies.pdf

https://libguides.sjsu.edu/c.php?g=230370&p=1528399

https://www.snapsurveys.com/blog/advantages-disadvantages-surveys/

https://www.nngroup.com/courses/wireframing-and-prototyping/

https://www.nngroup.com/articles/thinking-aloud-the-1-usability-tool/

http://www.useit.com/alertbox/20001126.html


63 | P a g e

FIPS. (1985) ‘Password Usage’, Federal Information Processing Standards Publication (May 1985).

Glaser, BG & Strauss, AL. (1967) The discovery of grounded theory: Strategies for

qualitative research New York: Aldine de Gruyter

Rejman-Greene, M (2001) ‘Biometrics — real identities for a virtual world’, BT Technol J, 19, No 3, pp 115—

121

Braue, D (2017). Users’ password problems are even worse for security than you think - CSO | The Resource

for Data Security Executives. Retrieved on 31/02/18 from: https://www.cso.com.au/article/629480/users-

password-problems-even-worse-security-than-think/

Blonder, G.E. (1996). Graphical Passwords. United States Patent. ISBN: 5559961.

Stobert, E, Forget, A, Chiasson, S, Oorschot, V & Biddle, R. (2010) Exploring usability effects of increasing

security in click-based graphical passwords. ACSAC '10 Proceedings of the 26th Annual Computer Security

Applications Conference, pp 79-88. ISBN: 978-1-4503-0133-6

Enisa. (2016) Security of Mobile Payments and Digital Wallets - European Union Agency for

Network and Information Security. ISBN: 978-92-9204-199-1. Retrieved on 31/02/18 from:

https://www.enisa.europa.eu/publications/mobile-payments-security

Statista. (2018) Number of Smartphone users worldwide 2014-2020. Retrieved on 31/02/18 from:

https://www.statista.com/statistics/330695/number-of-smartphone-users-worldwide/

Techopedia. (2018) What is Biometric Security? - Definition from Techopedia. Retrieved on 31/02/18 from:

https://www.techopedia.com/definition/6203/biometric-security

Farag, A, Bhanu, B, Hancock, E, Medioni, G & Yang, J. (2014). Guest Editorial Special Issue on Facial

Biometrics in the Wild. IEEE TRANSACTIONS ON INFORMATION FORENSICS AND SECURITY, VOL. 9, NO. 12,

DECEMBER 2014

Wayne, P. (2002) “Biometrics: A Double Edged Sword – Security and Privacy”, GSEC Certification Practical 1.3.

Retrieved on 31/02/18 from: https://www.sans.org/reading-room/whitepapers/authentication/biometrics-

double-edged-sword-security-privacy-137

George A Miller. (1955) The Psychological Review. The Magical Number Seven, Plus or Minus Two: Some Limits

on Our Capacity for Processing Information, vol. 63, 81-97.

The Guardian. (2018) Mobile web browsing overtakes desktop for the first time. Retrieved on 15/03/18 from:

https://www.theguardian.com/technology/2016/nov/02/mobile-web-browsing-desktop-smartphones-tablets

Turnball, C. (2011) Using Metaphors in Web Design. Retrieved on 15/03/18 from:

https://webdesign.tutsplus.com/articles/using-metaphors-in-web-design--webdesign-4752

Rowell, E. (2010) Onextrapixel - Eye Movement Patterns in Web Design. Retrieved on 31/01/18 from:

https://onextrapixel.com/eye-movement-patterns-in-web-design/

Jones, B (2012). Understanding the F-Layout in Web Design. Retrieved on 15/03/18 from:

https://webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-design--webdesign-687

Textlocal. (2018) Textlocal: Bulk SMS Marketing Service for Business | Send SMS Online. Retrieved on

01/04/18 from: https://www.textlocal.com/

Practical UX Methods. (2017) Think-Aloud Testing - Practical UX Methods. Retrieved on 01/04/18 from:

http://practicaluxmethods.com/product/think-aloud-testing/

Weber, M. (1978). Economy and society. Berkeley: University of California Press.

Paul Du gay. (2000). In Praise of Bureaucracy. (1st ed.). London: SAGE.

https://www.cso.com.au/article/629480/users-password-problems-even-worse-security-than-think/

https://www.cso.com.au/article/629480/users-password-problems-even-worse-security-than-think/

https://www.enisa.europa.eu/

https://www.enisa.europa.eu/

https://www.enisa.europa.eu/publications/mobile-payments-security

https://www.statista.com/statistics/330695/number-of-smartphone-users-worldwide/

https://www.techopedia.com/definition/6203/biometric-security

https://www.sans.org/reading-room/whitepapers/authentication/biometrics-double-edged-sword-security-privacy-137

https://www.sans.org/reading-room/whitepapers/authentication/biometrics-double-edged-sword-security-privacy-137

https://www.theguardian.com/technology/2016/nov/02/mobile-web-browsing-desktop-smartphones-tablets

https://webdesign.tutsplus.com/articles/using-metaphors-in-web-design--webdesign-4752

https://onextrapixel.com/eye-movement-patterns-in-web-design/

https://webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-design--webdesign-687

https://www.textlocal.com/

http://practicaluxmethods.com/product/think-aloud-testing/

improving usability & security on e-commerce sites luke sloane … · 2019-06-08 · improving...

Documents