Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
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
Student ID: 15010247
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).
Student ID: 15010247
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
Student ID: 15010247
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
Student ID: 15010247
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
Student ID: 15010247
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 &
Student ID: 15010247
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
Student ID: 15010247
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
Student ID: 15010247
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’
Student ID: 15010247
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
Student ID: 15010247
12 | P a g e
Student ID: 15010247
13 | P a g e
Student ID: 15010247
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
Student ID: 15010247
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?
Student ID: 15010247
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
Student ID: 15010247
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.
Student ID: 15010247
18 | P a g e
4.1 Wireframes Figure-1---Homepage
Figure-2---About Us
Student ID: 15010247
19 | P a g e
Figure-3-- Products
Figure-4-- Checkout
Student ID: 15010247
20 | P a g e
Figure-5-- Register
Figure-6-- Login
Student ID: 15010247
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.
Student ID: 15010247
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.
Student ID: 15010247
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:
Student ID: 15010247
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.
Student ID: 15010247
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.
Student ID: 15010247
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.
Student ID: 15010247
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
Student ID: 15010247
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:
Student ID: 15010247
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:
Task 1: Register Feedback:
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.”
Task 2: Login Feedback:
“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:
Task 1: Register Feedback:
“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.”
Task 2: Login Feedback:
“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:
Task 1: Register Feedback:
“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.”
Task 2: Login Feedback:
“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
Student ID: 15010247
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).
Student ID: 15010247
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
Student ID: 15010247
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.
Student ID: 15010247
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):
Student ID: 15010247
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?
Student ID: 15010247
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.
Student ID: 15010247
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*
Student ID: 15010247
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 <!-- Project: Usability and Security in Desktop/Mobile Designs Student Name: Luke Sloane-Bulger Student No: 15010247 Email: [email protected] Bootstrap.css, bootstrap-3.1.1.min.js, simpleCart.min.js taken from: https://getbootstrap.com/ Images taken from: https://keelesu.com/ --> <!DOCTYPE html> <html> <head> <title>KeeleSU Shop</title> <!--Meta Data--> <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" /> <!--CSS--> <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"> <!--JS/jQuery--> <script src="js/jquery.min.js"></script>
Student ID: 15010247
38 | P a g e
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script> <!--mycart--> <script src="js/simpleCart.min.js"></script><!-- cart --> <script src="js/script.js" defer></script> <!--Icon--> <link href='./images/favicon.ico' rel='icon' type='image/x-icon'/> </head> <body> <!--Header Start--> <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"> <!-- Brand and toggle get grouped for better mobile display --> <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>
Student ID: 15010247
39 | P a g e
</div> </div> </div> <!--Header End--> <!--Feature Photo Start - Change this to image slideshow--> <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> <!--Feature Photo End --> <!--Content Start--> <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> <!--Content End--> <!--Footer Start--> <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
Student ID: 15010247
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> <!--Footer End--> </body> </html> About.html <!-- Project: Usability and Security in Desktop/Mobile Designs Student Name: Luke Sloane-Bulger Student No: 15010247 Email: [email protected] Bootstrap.css, bootstrap-3.1.1.min.js, simpleCart.min.js taken from: https://getbootstrap.com/ Images taken from: https://keelesu.com/ --> <!--User logged in only page - checks to see if user is logged in and directs them to appropriate page--> <!DOCTYPE html> <html> <head> <title>KeeleSU Shop</title> <!--Meta Data--> <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" /> <!--css--> <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">
<!--JS/jQuery--> <script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script> <!--mycart-->
Student ID: 15010247
41 | P a g e
<script src="js/simpleCart.min.js"></script><!-- cart --> <script src="js/script.js" defer></script> <!--Icon--> <link href='./images/favicon.ico' rel='icon' type='image/x-icon'/> </head> <body> <!--Header Start--> <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"> <!-- Brand and toggle get grouped for better mobile display --> <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>
Student ID: 15010247
42 | P a g e
</div> </div> <!--Header End--> <!--Content Start--> <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> <!--Content End--> <!--Footer Start--> <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>
Student ID: 15010247
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> <!--Footer End--> </body> </html> Products.html <!-- Project: Usability and Security in Desktop/Mobile Designs
Student Name: Luke Sloane-Bulger Student No: 15010247 Email: [email protected] Bootstrap.css, bootstrap-3.1.1.min.js, simpleCart.min.js taken from: https://getbootstrap.com/ Images taken from: https://keelesu.com/ --> <!DOCTYPE html> <html> <head> <title>KeeleSU Shop</title> <!--Meta Data--> <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" /> <!--css--> <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"> <!--JS/jQuery--> <script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script> <!--mycart--> <script src="js/simpleCart.min.js"></script><!-- cart --> <script src="js/script.js" defer></script> <!--Icon--> <link href='./images/favicon.ico' rel='icon' type='image/x-icon'/> </head> <body> <!--Header Start--> <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>
Student ID: 15010247
44 | P a g e
</div> <div class="logo-nav-left1"> <nav class="navbar navbar-default"> <!-- Brand and toggle get grouped for better mobile display --> <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> <!--Header End--> <!--Content Start--> <!--Content Start--> <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>
Student ID: 15010247
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> <!--Content End--> <!--Footer Start--> <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>
Student ID: 15010247
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> <!--Footer End--> </body> </html> Checkout.php <!-- Project: Usability and Security in Desktop/Mobile Designs Student Name: Luke Sloane-Bulger Student No: 15010247 Email: [email protected]
Bootstrap.css, bootstrap-3.1.1.min.js, simpleCart.min.js taken from: https://getbootstrap.com/ Images taken from: https://keelesu.com/ --> <!--User logged in only page - checks to see if user is logged in and directs them to appropriate page--> <?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 Data--> <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" /> <!--css--> <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"> <!--JS/jQuery--> <script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script> <!--mycart--> <script src="js/simpleCart.min.js"></script><!-- cart --> <script src="js/script.js" defer></script> <!--Icon--> <link href='./images/favicon.ico' rel='icon' type='image/x-icon'/> </head> <body> <!--Header Start--> <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>
Student ID: 15010247
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"> <!-- Brand and toggle get grouped for better mobile display --> <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> <!--Header End--> <!--Content Start--> <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){
Student ID: 15010247
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> <!--Content End--> <!--Footer Start--> <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>
Student ID: 15010247
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> <!--Footer End--> </body> </html> Server.php <?php
session_start(); /*Begins session to store information across webpages until browser is closed or user logs out.*/ //Initialising variables
Student ID: 15010247
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.
Student ID: 15010247
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 <!-- Project: Usability and Security in Desktop/Mobile Designs Student Name: Luke Sloane-Bulger Student No: 15010247 Email: [email protected] Bootstrap.css, bootstrap-3.1.1.min.js, simpleCart.min.js taken from: https://getbootstrap.com/ Images taken from: https://keelesu.com/ --> <?php include('server.php') ?> <!--Will receive data from the Registration Form--> <!DOCTYPE html> <html> <head> <title>KeeleSU Shop</title> <!--Meta Data--> <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" /> <!--css-->
Student ID: 15010247
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"> <!--JS/jQuery--> <script src="js/jquery.min.js"></script> <!--Controls menu and Checkout Price--> <script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script> <!--mycart--> <script src="js/simpleCart.min.js"></script><!-- cart --> <script src="js/script.js" defer></script> <!--Icon--> <link href='./images/favicon.ico' rel='icon' type='image/x-icon'/> </head> <body> <!--Header Start--> <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"> <!-- Brand and toggle get grouped for better mobile display --> <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>
Student ID: 15010247
53 | P a g e
</div> </div> <div class="clearfix"> </div> </div> </div> </div> </div> <!--Header End--> <!--Content Start--> <div class="content"> <!--Login Start--> <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> <!--Login End--> </div> <!--Content End-->
<!--Footer Start--> <footer> <div class="footer-w3l">
Student ID: 15010247
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>
<!--Footer End--> </body>
Student ID: 15010247
55 | P a g e
</html> Login.php <!-- Project: Usability and Security in Desktop/Mobile Designs Student Name: Luke Sloane-Bulger Student No: 15010247 Email: [email protected] Bootstrap.css, bootstrap-3.1.1.min.js, simpleCart.min.js taken from: https://getbootstrap.com/ Images taken from: https://keelesu.com/ --> <?php include('server.php') ?> <!DOCTYPE html> <html> <head> <title>KeeleSU Shop</title> <!--Meta Data--> <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" /> <!--css--> <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"> <!--JS/jQuery--> <script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script> <!--mycart--> <script src="js/simpleCart.min.js"></script><!-- cart --> <script src="js/script.js" defer></script> <!--Icon--> <link href='./images/favicon.ico' rel='icon' type='image/x-icon'/> </head> <body> <!--Header Start--> <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"> <!-- Brand and toggle get grouped for better mobile display --> <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">
Student ID: 15010247
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> <!--Header End--> <!--Content Start--> <div class="content"> <!--Login Start--> <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>
Student ID: 15010247
57 | P a g e
</div> </div> <!--Login End--> </div> <!--Content End--> <!--Footer Start--> <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>
Student ID: 15010247
58 | P a g e
</div> <div class="clearfix"></div> </div> </div> </footer> <!--Footer End--> </body> </html> Index.php <!-- Project: Usability and Security in Desktop/Mobile Designs Student Name: Luke Sloane-Bulger Student No: 15010247 Email: [email protected] Bootstrap.css, bootstrap-3.1.1.min.js, simpleCart.min.js taken from: https://getbootstrap.com/ Images taken from: https://keelesu.com/ --> <!--User logged in only page - checks to see if user is logged in and directs them to appropriate page--> <?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 Data--> <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" /> <!--css--> <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"> <!--JS/jQuery--> <script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script> <!--mycart--> <script src="js/simpleCart.min.js"></script><!-- cart --> <script src="js/script.js" defer></script> <!--Icon--> <link href='./images/favicon.ico' rel='icon' type='image/x-icon'/> </head> <body> <!--Header Start--> <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">
Student ID: 15010247
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"> <!-- Brand and toggle get grouped for better mobile display --> <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> <!--Header End--> <!--Content Start--> <section id="content"> <div class="wrap-content grid"> <div class="main-agileits"> <div class="form-w3agile form1"> <!-- notification message --> <?php if (isset($_SESSION['success'])) : ?> <div class="error success" > <h3> <?php echo $_SESSION['success']; unset($_SESSION['success']); ?> </h3> </div> <?php endif ?>
<!-- logged in user information --> <?php if (isset($_SESSION['mobileNo'])) : ?> <p>Welcome <strong><?php echo $_SESSION['mobileNo'];
Student ID: 15010247
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> <!--Content End--> <!--Footer Start--> <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">
Student ID: 15010247
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> <!--Footer End--> </body> </html> Error.php <?php if (count($errors) > 0) : ?> <!--Checks to see if any character inputs are in the input box--> <div class="error"> <?php foreach ($errors as $error) : ?> <p><?php echo $error ?></p><!--If no inputs are entered display form error--> <?php endforeach ?> </div> <?php endif ?>
Student ID: 15010247
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).
Student ID: 15010247
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.