Developing an ATM Interface Using User-Centered Design Techniques

Abstract

ATM interfaces nowadays present serious issues in usability and accessibility, frustrating users’ interaction and leading them to make operational mistakes. For this reason, we present the development of graphical interfaces for ATMs of BBVA Continental Bank, which follows a process of user-centered design. The priority was to identify the real needs of users based on the context, and to understand how they interact with the interfaces. In order to validate our proposal, we established a model and a functional prototype. Later, we evaluated this new design with a usability test. Based on the defects that were found, we applied changes to improve the interfaces. Finally, after an in-depth analysis, we concluded that the designed interfaces were suitable for implementation in the ATMs of BBVA Continental Bank, due to the process followed and the acceptance by users.

Full text

Developing an ATM Interface
Using User-Centered Design Techniques
Arturo Moquillaza
1(&)
, Edward Molina
2
, Edilson Noguera
2
,
Leidi Enríquez
2
, AdriánMuñoz
2
, Freddy Paz
1
, and César Collazos
2
1
Pontificia Universidad Católica del Perú, Lima, Peru
{amoquillaza,fpaz}@pucp.pe
2
Universidad del Cauca, Popayán, Colombia
{eamolina,eynoguera,leidi,jorgevelasco,
ccollazo}@unicauca.edu.co
Abstract. ATM interfaces nowadays present serious issues in usability and
accessibility, frustrating users’interaction and leading them to make operational
mistakes. For this reason, we present the development of graphical interfaces for
ATMs of BBVA Continental Bank, which follows a process of user-centered
design. The priority was to identify the real needs of users based on the context,
and to understand how they interact with the interfaces. In order to validate our
proposal, we established a model and a functional prototype. Later, we evalu-
ated this new design with a usability test. Based on the defects that were found,
we applied changes to improve the interfaces. Finally, after an in-depth analysis,
we concluded that the designed interfaces were suitable for implementation in
the ATMs of BBVA Continental Bank, due to the process followed and the
acceptance by users.
Keywords: Human-computer interaction Semiotic engineering 
User-centered design Usability Automatic teller machine
1 Introduction
According to the study performed by Granollers et al. [1], Latin-American industry is
worried about HCI, UX and usability. In this line, BBVA Continental Bank, which is
one of the leading financial entities in Peru, is worried about user experience in all its
channels. A few years ago, they changed their ATM application. They noted that the
interfaces of their software systems needed improvements in in usability. However,
there is not much information or methods in industry to develop usable interfaces for
ATMs. There are several guidelines about how to design web interfaces, but little
information about how to apply those principles to ATM or self-service interfaces.
According to the study performed by Cooharojananone et al. [2], there are two
relevant aspects that should be considered when we design interfaces for ATMs: (1) the
software application process sensitive information, and (2) the interface has limitations
because of the number of buttons. The first aspect could influence the customer’s
behavior. The second feature gives the experience a strong limitation, which impact
directly on the usability of the system.
©Springer International Publishing AG 2017
A. Marcus and W. Wang (Eds.): DUXU 2017, Part III, LNCS 10290, pp. 690–701, 2017.
DOI: 10.1007/978-3-319-58640-3_49

Regarding the methods and techniques that have emerged to develop usable ATM
interfaces, the study performed by Rosenbaum [3] states that the conventional
Nielsen’s heuristics can be applied, especially (N3) User control and freedom, (N5)
Error prevention, and (N1) Visibility of system status.
According to Van der Geest et al. [4], a good ATM service should achieve two
goals:
•The feeling that there is a reliable, responsive, empathetic, and knowledgeable
service employee available to help us
•The belief that an organization is committed to caring for about us, because our
customer experience matters to them
In this context, BBVA Continental Bank contacted “Universidad del Cauca”in order to
present its case and requested improvement of its interfaces. BBVA Continental Bank
requested the design of a new usable interaction that would prevent user frustration.
The design would need to permit the following functions: Payment to companies and
Updating of personal data.
Then, the case was taken up by “Universidad del Cauca”in an HCI undergraduate
course. The teacher proposed this case for developing along the whole course. The final
product for students was to be a prototype validated by users.
For developing those proposals, we used the following techniques: activity theory,
user profiles, and semiotic engineering, among others.
For validation of the prototype, we used user testing. Then, the design was vali-
dated with real users. This validation permitted getting feedback and new information,
which was used to improve the prototype.
Finally, the prototype was delivered to BBVA Continental Bank, which valued
positively the whole experience and the product received.
2 Background
2.1 Human-Computer Interaction (HCI)
According to the study performed by Peres et al. [5], HCI can be defined as a discipline
with focus in the design, evaluation and implementation of interactive systems for human
use, and what happens when a human and a computer system perform tasks together.
2.2 Usability
Usability is defined in ISO 9241 (2002) as “The effectiveness, efficiency and satisfac-
tion with which specified users achieve specified goals in particular environments.”
According to this definition, and Peres et al. [5], there are three analyses we have to
make in order to measure usability:
•The characteristics required of the product in a specific context of use;
•The process of interaction between user and product;
•The efficiency, effectiveness and the satisfaction resulting from use of this product.
Developing an ATM Interface Using User-Centered Design Techniques 691

2.3 User Profile
According to the study performed by Moreno [6], user profiles describe users of the
computer system and provide details of their relevant characteristics. This way, req-
uisites capture is centered on the most relevant for the user, and let a design with an
adequate level of usability. User profiles are fundamental in user-centered design
processes.
2.4 Semiotic Engineering
We can apply concepts of Semiotic Engineering in design and building of artifacts. The
word Artifact (De Souza, 2005) describes something created by humans, and its
meaning or value is intrinsically associated with the creator’s intention, and the
interpretation of the users about how, when or where it can be used [7].
This concept is centered in communication, but in a new type. Designer interaction
is the emitter, and the designer communicates by symbols defined for the understanding
of a determinate user, the receiver. Those symbols should be translated by computers,
which are the mediator between emitter and receiver, carrying the message [7].
2.5 Activity Theory
According to the study performed by Carvalho et al. [8], Activity Theory is a line of
investigation started by some Russian psychologists, among them Vygotsky and
Leontiev. This theory studies the human practices and its development processes. The
basic elements of analysis are the activities of people, which are volunteer interactions
between a human and an element or object.
HCI take an activity as an action that a user wants to perform, and a computer as his
tool or object, besides every button and every interface as another class of objects for
the user to accomplish his task.
Activity Theory emphasizes the social dimension in which the activity is located in
a determinate context. This social vision permits, from different perspectives, emphasis
in every moment the elements which take place in the performance of every task [9].
2.6 Usability Test
Several usability methods were proposed in order to evaluate the level of usability of
computer systems. According to the study perfomed by Holzinger [10], these methods
are divided into two groups: usability inspection methods and usability testing meth-
ods. According to Paz et al. [11], the main difference between them is that in inspection
methods; usability problems are detected by specialists using inspection techniques,
and in testing methods, usability problems are found through the user’s observations
while they are using or making comments about the interface of a computer system.
692 A. Moquillaza et al.

3 Case Study: Design of the ATM Interfaces for BBVA
Continental
3.1 Purpose of Study
The purpose of this study was to design usable interfaces for ATM of BBVA Conti-
nental; however, there were not typical functionalities such as Cash Withdrawal or
Balance Inquiry. Then, this new interface should give support to the following
requirements: payment to companies and updating of personal data.
The Bank provided all the related information in order to students could develop
their proposals according to requirements and complementary information. Three
objectives were established by the Bank, for any proposal:
•Proposing an interaction design of ATM interfaces that fulfills users’needs of
usability.
•Applying an interaction design process for building good interactions with quality.
•Validating the interaction design by the executing of a usability test.
3.2 Methodology
Interface design was developed following a user-centered process. According to dis-
ciplines reviewed in the previous section, and developed in class to students, students
adapted in a process made by the following steps:
1. Identify User Profiles
Students identify characteristics of possible representative user of system. The
importance of this activity is letting the designer know for who he designs, what the
user expects and in what way. Interface design proposed should be oriented to the user,
organized and structured according to profiles defined in this step.
2. Analyze Existent ATM Interfaces
Students analyze current ATM interfaces of the Bank and ask questions about business
rules and style guides predefined. The importance of this activity is proposing inter-
faces that respect guides and rules previously established, and discover what of these
rules can be broken by new proposals.
3. Brainstorming
Students identify by Brainstorming relevant assets for interfaces, having aspects of
usability, accessibility, culture and emotions, under semiotic engineering and activity
theory.
4. Prototyping
In this step, students design prototypes according with requisites given and items
identified in previous steps.
Developing an ATM Interface Using User-Centered Design Techniques 693

5. Running a Usability Test
In this step, students prepare a usability test to real users, which should be selected from
user profiles defined in previous steps.
As prerequisite for the test, students designed a physical mockup similar to a real
ATM in order to validate their proposals and to apply the Test. The principal activities
of this step are: Planning, Execution and Analysis.
The result of this step permitted identifying and proposing improvement to proposal
and getting feedback of real users about interfaces and other aspects related, normally
ignored in design time.
6. Make Improvements Over Prototypes
In this step, students improve their own proposal. This activity is very important
because is the materialization of the feedback of real users, obtained by a formal
method (Usability Test). Prototypes with improvements can be shown to new users in
less formal tests. At the end of this step, prototype is already validated with actual
users, then, the proposal is ready for being delivered to the Bank.
3.3 Interface Design
User Profiles. All BBVA Continental customers were identified as users, and were
separated into three user profiles. The principal difference was the level of expertise
using ATMs.
All the users have the same objectives: Doing a payment to companies and Updating
his personal information, both by the ATM.
Semiotic Engineering. The interaction design process should ensure the adequate
expression about what we can communicate, so that users interpret them from their
context, as if they were communicating directly with the designer.
Fig. 1 Semiotic engineering in the interaction designer- ATM-user
694 A. Moquillaza et al.

Considering this principle, we generated scripts that define the steps that designers
of interfaces expect that users understand when they use the interfaces in the ATMs.
The sequence defined in each phase then was translated into interfaces for the
ATMs, which are interpreted and displayed by the user, according to the following
scheme (Fig. 1):
Activity Theory. By this theory, we identified the tool, the rules and how is organized
the division of work.
According with Fig. 2above, we made these interpretations:
•Community: The set of individuals who are clients of BBVA Continental, and can
be established in one of the profiles described.
•Division of work: Every individual of community will have a role.
•Rules: Requisites defined by community in order to use the tool. In this case, rules
can be: Being a BBVA Continental client, having a Card, etc.
•Tool: BBVA Continental ATMs.
•Goal: Directly the realization of a payment and Updating his personal information,
both by the ATM.
•Result: Refers directly to success of every of two goals described before.
Other Relevant Aspects. Other relevant aspects about interfaces that were considered
are elements of accessibility, culturalism and emotions.
Fig. 2 Application of activity theory
Developing an ATM Interface Using User-Centered Design Techniques 695

•Accessibility: Prototype proposed can be used by tactile o physical (buttons). Every
interaction with the screen generates a sound. Additionally, we considered type and
size of letters. Those permit that users with certain disability can use the ATMs.
•Affordance visual: Keyboard icon permits that the user associates this image with
the functionality, which is, deploy the tactile keyboard.
•Culturalism: According to García[12], images, symbols and objects used in
interfaces do not carry the same meaning in different cultures. Therefore, for the
interface success in an international market, the images must be selected and
designed carefully. Then this concept is applied in the design of the interfaces
requested.
•Emotions: Given the concept of emotional communication between the system and
the user, it is approached from the point of view that a particular client can dispel his
frustration due to failed operations with messages that help the individual to feel
less guilty of the failure. The cases with very effective interfaces consider this
subject. The absence of this concept is a major weakness in the interaction as it
tends to focus on the rational user behavior, ignoring their emotional behavior [13].
For this reason, this point is considered as one of the key issues in this work.
Scenarios
Payment to Companies. This covers the payments that a customer can do to institutions
and companies that have an agreement with the Bank. These payments will be able to
do by ATM independently of ATM’s model or mark. This functionality should be
based in a screen flow similar to Payment of Telephone Services, and implementing the
navigation like the Payment to companies of the Internet Banking (screens were given
by the Bank).
•Navigation should be based in Services Payment (flow already known by the
customer).
•Navigation should include sections shown in Internet Banking (because is the new
functionality).
•It should as far as possible try to have similar flows in channels (in this case Internet
Banking and ATM).
The design challenge is to make various proposals that seek to achieve the objec-
tives, knowing the constraints of an interface like an ATM. In that sense, the proposals
can zoom in or out of some goals, even stop fulfilling some of the requirements. It has
this flexibility because the transaction is completely new in ATM. Finally, flows are
constantly under review and refinement.
Updating of Personal Data. This covers the customer requirement of updating his
personal data managed by Bank for communicating with him. Additionally, the
authorization that enables to Bank to use this data for sending promotions, offers or
other info that the Bank considers convenient. The channel in which customer can do
this will be the ATM, independently of ATM’s model or mark. The workflow of
Updating of Personal Data was provided by BBVA to designers.
696 A. Moquillaza et al.

For both scenarios, we build Use Case Diagrams and Activity Diagrams in order to
model the behavior and understand requisites.
4 Results of the User-Centered Design
As result of the process described, we proposed interfaces and sent to BBVA Conti-
nental Bank. Some of the screens proposed were the following (Figs. 3,4and 5):
Fig. 3 Payment to companies screen 3 (prototype)
Fig. 4 Payment to companies screen 6 (prototype)
Developing an ATM Interface Using User-Centered Design Techniques 697

5 Usability Test
In order to test the usability of the prototypes proposed, there was made a Usability
Test, from the systematic observation of users doing real tasks. These tests permitted
verifying the existence of possible usability problems in interfaces, and finding possible
solutions for the problems detected. The test was run in three steps: Planning, Exe-
cution and Analysis.
5.1 Planning
As prerequisite, we made a physical mockup with measures closer to reality, which had
a LCD monitor, 4 buttons in each side and a numeric keypad, as real ATM.
After that, 8 participants were selected according to profiles identified.
Also, we prepared three documents: Data necessary for doing tasks, Test cases,
with variants in tasks for every user, and a Post-test questionnaire (Fig. 6).
5.2 Execution
Tests were made on October 27th, 2015 in Vereda Torres, Popayán.
After welcoming the users and explaining what was going to be done, each one was
given a format with the necessary data to perform the tasks and another with the three
tasks that had to be performed. Users lined up to perform the tests one after the other,
simulating also the row that are usually found at ATMs.
When each user finished the test, they filled out the post-test questionnaire, where
they presented their experience with the ATM. In addition, while each user was doing
his tasks with the ATM, it was noted the possible defects of the interface, not only the
visible defects, but also those expressed by the users’facial and body movements.
Figure 7shows to a user working with the physical mockup of an ATM.
Fig. 5 Updating of personal data screen 1 (prototype)
698 A. Moquillaza et al.

5.3 Analysis
From the obtained results, we can affirm that:
•87.5% of the users were able to update their data (telephone, cellphone, email,
address) according to the assigned task. In addition, this same percentage of users
(87.5%) stated that the interfaces for updating data are clear. In the other hand, at
the time of seeking the action, 25% of users consider that they did not easily find the
option (button) to update their data.
•75% of the users were able to make their payments using the ATM in a traditional
way (with physical buttons). This figure coincides with the percentage of users who
consider that the interfaces to perform payments were clear (75%). Similarly, 75%
of users say that they quickly found the option to do them. In the other hand, 62.5%
Fig. 6 Physical mockup of an ATM with prototypes proposed running
Fig. 7 User doing tasks
Developing an ATM Interface Using User-Centered Design Techniques 699

of users were able to make their payments using the touch interface and this same
number considers that this option is easily found.
Then, from the feedback of users, we identified defects and grouped them into the
categories presented below:
•Names of actions are not representative.
•Several actions on the same screen are ambiguous.
•Inaccurate language when giving orientation to the client.
•Important information should be highlighted.
•When requesting information, do so in the form of a question to the user.
These defects identified were corrected in a new version of the ATM interface pro-
totype. Finally, prototypes improved were sent to BBVA Continental Bank.
6 Conclusions and Future Work
At the end of this process, we can conclude that prototypes delivered permit the user
more freedom and use of the system with better satisfaction.
Also, we conclude that is necessary to follow an interaction design process, in order
to ensure a design centered in the real needs of user. This will permit that they can do
the tasks they need in an effective and pleasant way, reducing the mistake probability.
Given the results obtained from the usability test, we can affirm that the majority of
the customers did the tasks without major difficulty. Then, interfaces delivered are
adequate for implementing in BBVA Continental ATMs, because of the process fol-
lowed and the users’acceptance.
According to the previous points, we affirm objectives given by the Bank were
fulfilled.
Finally, we recommend to BBVA Continental Bank implement a systematic process
of interaction design based on the techniques described in this work.
Acknowledgment. The authors thank to all the participants involved into the experience
required to perform the presented study. The study was highly supported by BBVA Continental
Bank, “Universidad del Cauca”and IDIS.
References
1. Granollers, T., Collazos, C., González, M.: The state of HCI in Ibero-American countries.
J. Univ. Comput. Sci. 14(16), 2599–2613 (2008)
2. Cooharojananone, N., Taohai, K., Phimoltares, S.: A new design of ATM interface for
banking services in Thailand. In: Proceeding of the 10th Annual International Symposium on
Applications and the Internet, July 2010, pp 312–315 (2010)
3. Rosenbaum, S.: Creating usable self-service interactions. In: 2010 IEEE International
Professional Communication Conference (IPCC), pp. 344–349 (2010)
700 A. Moquillaza et al.

4. Van der Geest, T., Ramey, J., Rosenbaum, S., Van Velsen, L.: Introduction to the special
section: designing a better user experience for self-service systems. IEEE Trans. Prof.
Commun. 56(2), 92–96 (2013)
5. Peres, R., Cardoso, E., Jeske, J., Da Cuhna, I.: Usability in ATMs. In: Proceedings of the
2011 IEEE Systems and Information Engineering Design Symposium, University of
Virginia, Charlottesville, Virginia (2011)
6. Moreno, L.: Perfiles de usuario. In: AWA, Marco metodológico específico en el dominio de
la accesibilidad para el desarrollo de aplicaciones web. Universidad Carlos III de Madrid
(2010). http://labda.inf.uc3m.es/awa/es/node/66. Accessed 21 Nov 2016
7. Garrido J: Ingeniería Semiótica: Recuperando la Simpleza de la Comunicación. In: Faz:
Revista de diseño de interacción (2014). http://www.revistafaz.org/n6/faz6_01_ingenieria_
semiotica.pdf. Accessed 21 Nov 2016
8. Carvalho, M., Bellotti, F., Berta, R., et al.: An activity theory-based model for serious games
analysis and conceptual design. Comput. Educ. 87(C), 166–181 (2015)
9. Barros, B., Vélez, J., Verdejo, F.: Aplicaciones de la teoría de la actividad en el desarrollo de
sistemas colaborativos de enseñanza y aprendizaje. Experiencias y resultados. Inteligencia
Artif. Rev. Iberoamericana de Inteligencia Artif. 8(24), 67–76 (2004)
10. Holzinger, A.: Usability engineering methods for software developers. Commun. ACM 48
(1), 71–74 (2005)
11. Paz, F., Villanueva, D., Rusu, C., et al.: Experimental evaluation of usability heuristics. In:
Proceedings of the 2013 10th International Conference on Information Technology: New
Generations, 2013, pp. 119–126 (2013)
12. García L: La cultura en el Diseño Centrado en el Usuario. In: Revista UX Nights (2015).
http://revista.uxnights.com/la-cultura-en-el-diseno-centrado-en-el-usuario/. Accessed 21 Nov
2016
13. Hassan, Y., Martín, F.: Más alláde la Usabilidad: Interfaces ‘afectivas’. In: No Solo Usabilidad
(2003). http://www.nosolousabilidad.com/articulos/interfaces_afectivas.htm. Accessed 21
Nov 2016
Developing an ATM Interface Using User-Centered Design Techniques 701