User-centered design approach for interactive kiosks: evaluation and redesign of an automatic teller machine Marco Camilli
Massimiliano Dibitonto
Alessandro Vona
Laboratory of Usability & Accessibility Laboratory of Usability & Accessibility Laboratory of Usability & Accessibility C.A.T.T.I.D. C.A.T.T.I.D. C.A.T.T.I.D. “Sapienza” University of Rome “Sapienza” University of Rome “Sapienza” University of Rome Piazzale Aldo Moro 5 Piazzale Aldo Moro 5 Piazzale Aldo Moro 5 00185 Roma 00185 Roma 00185 Roma
[email protected]
[email protected]
[email protected]
Carlo Maria Medaglia
Francesco Di Nocera
Laboratory of Usability & Accessibility C.A.T.T.I.D. “Sapienza” University of Rome Piazzale Aldo Moro 5 00185 Roma
Laboratory of Functional Analysis of Behavior Dept. of Psychology “Sapienza” University of Rome Piazzale Aldo Moro 5 00185 Roma
[email protected]
[email protected]
ABSTRACT
Categories and Subject Descriptors
Improvements in bandwidth and computing led towards a growth of technological solutions in services. Also, users developed expectations and skills in their interaction with technology. Despite web and mobile technology makes available a great deal of advanced and engaging apps (e.g., social and geo-localized), less-sophisticated and appealing systems (e.g., automatic teller machines, ticket machines) still represent the most widespread contact points between organizations (e.g., banks, transportation companies) and their clients. In this scenario banks are challenging a service innovation by introducing new services in their ATM. However, this increase in services does not seem to match an appropriate level of usability and user experience. The present work investigates the relation between usability and user experience in kiosk through a usability evaluation and a further redesign process for an ATM of an Italian major bank. The redesign process, centered on the users needs, was aimed to solve usability issues and enhance the effectiveness of the system and the overall user experience 1) by operating major changes in the original structure and 2) by introducing new profile-based functions. In order to test the effectiveness of design hypothesis, a prototype was developed and tested with a sample of users.. Result showed an enhancement of user satisfaction and a reduction of the error rate mainly due to the introduction of profile-based functions.
H.1.2 [User/Machine Systems]: Human Factors; H.5.2 [User Interfaces]: Ergonomics, Graphical user interfaces (GUI), Usercentered design, Evaluation/methodology, Prototyping--Automatic Teller Machine (ATM).
General Terms Measurement, Design, Ergonomics, Experimentation, Human Factors, Innovation, Information Technology.
Keywords Automatic teller machine, Usability, Eye-tracking, Ergonomics, Interaction design.
1. INTRODUCTION In the last decades, improvements in Information Communication Technology (ICT) allowed to offer an increasing number of automated services multiplying delivery channels and contact points with customers. One of the most common and used channels is the interactive totem or kiosk placed in public spaces. In fact, despite the popularity of web, mobile Internet and other channels, public kiosk presence is growing in our everyday life experience (e.g. bank’s ATM, ticket vending machines, self check out, request for services). Generally, these systems are categorized by the main functionality of the service they provide, such as: information exploration (e.g., public transportation) or product transactions (e.g., tickets booking, withdrawals).
Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Conference’10, Month 1–2, 2010, City, State, Country. Copyright 2010 ACM 1-58113-000-0/00/0010…$10.00.
The first class includes information kiosks with multimedia applications allowing users to explore a great deal of information (e.g., multimedia guide totems for tourism). Differently, the transactional kiosks class includes systems that provide services to users for withdrawals, payments or products booking (e.g., automatic teller machines and railway ticket machines). Information kiosks provide a lot of information by multichannel
85
evaluation of innovative services in everyday technologies (Automatic Teller Machines, in this study).
applications (e.g., audio, video, aptical and interactive) aimed at increasing the level of engagement of the users’ information seeking behavior. In these cases, users usually like acquiring information by entrainment systems and they are not oriented to accomplish a specific and strict goal. On the other hand, transactional kiosks are used for buying a specific product (e.g., railway ticket or mobile recharge) or for looking for particular information (e.g., next train departure time or bank account status). Therefore, users interacting with these systems need to get the product or the information they desire efficiently and safely. Moreover, users are heterogeneous (in terms of age and skills). Consequently, the design of these systems should be focused on easy-to-use functions, comprehensible information and linear and safe navigation modalities. Finally, in the service design, the functional aspects of the systems are strongly related to the users’ emotional and cognitive factors that characterize the real-word user experience.
3. USABILITY EVALUATION 3.1 The original system An Opteva® 522 (Diebold Inc.) Automatic Teller Machine (ATM) was provided by Banca Carige (an Italian bank institution) to the Laboratory of Usability and Accessibility (LUA) of C.A.T.T.I.D. (Sapienza University of Rome) and was used as test kiosk in this study. The system implemented a 15,1” LCD color display and eight buttons at the side of the screen for selecting screen functions. A numeric keypad and two other buttons (confirm, delete), a card reader, a small b/w printer and a cash dispenser were embedded in the bottom horizontal plan. The system software was a simple tree of functions linked between them and it was similar to the most traditional websites. Users could navigate the different functions by using the eight buttons placed at the left and right borders of the screen and all information was displayed by a graphical user interface (GUI). Figure 1 shows the “home page” of the ATM’s user interface with links to the main service categories: Prelievo (Withdrawal), Informative (Balance & statements), Riceriche Telefoniche (Mobile balance recharge), Ricariche Prepagate (Recharge of prepaid credit cards). While “Informative” takes to another submenu, the other buttons take directly to the indicated function.
Bank’s Automatic Teller Machine are among the most commonly used public kiosk. During years bank institutions have been challenging a service innovation opening new channels for providing their services (e.g., online and mobile banking, mobile banking, t-banking). They have also enhanced their kiosk by adding a wide range of services such as withdrawal, balance, recharge of mobile phone credit and other types of payment. However, despite their importance and the increasing number of functions, kiosk interface often show usability shortcomings and the user experience could be frustrating [4]. According to Raskin, [14] to the user the interface IS the product, a frustrating experience and usability problem will have consequences on ability of users to achieve their goals and on the overall brand image of the bank . In the present work we investigated the relation among user experience, usability and the introduction of customized functions (based on users’ profiles) in a bank’s ATM system interface. Usability evaluation has been conducted on an ATM system currently used by an Italian bank. Then a redesign process has been carried out based on results obtained from the usability tests and on the introduction of profile-based functions to solve usability problems and to improve the overall user experience. A prototype has been developed and tested to compare the user experience and the usability between the old and the new interface and to check the effectiveness of design strategy.
Figure 1. A screenshot of the original ATM’s interface. The main menu page (in this picture) showed four main functions: withdrawal, mobile balance recharge, balance & statements and recharge prepaid card (from the up-left to the bottomright).
2. RELATED WORKS Despite the large amount of works related to the usability of web sites and web applications there is a lack of empirical studies addressing usability of ATMs. In 2005 Wells Fargo (one of the most important Bank in the U.S.A.) re-designed user interfaces of their ATMs in order to improve customer satisfaction and user experience. This result has been achieved by both improving the aesthetic appeal of the interface and using touch screens as input/output devices; a set of profile-based functions was implemented in the system. This latter is able to recognize the most frequent operation made by the user offering him/her shortcuts. In the literature, other studies have investigated the interaction between user and ATM addressing several specific issues such as the design for the elderly ([1],[10],[15],[16],[17]), visually impaired needs [9], the role of the attitude for the technological innovation ([3],[12]) and the target heterogeneity in the marketing strategies ([7],[18]). The study described in this paper focused on the use of well-known processes and techniques of the user-centered design from traditional domains (e.g., web usability and safety in complex systems) to the design and
3.2 Heuristic Evaluation The first phase of this study was aimed at understanding, analyzing and evaluating the main characteristics of the system. Because of the lack of a specific set of heuristics for interactive kiosks, usability criteria typically used for the evaluation of web sites were adapted to the ATM context of use. The heuristic evaluation of the ATM system was based on Polillo’s quality model [13] focusing on the architecture, communication, contents, and functionality aspects of the systems. A task analysis was run with aim of evaluating the hierarchical sequence of actions (physical and cognitive) required to the users to access to the different ATM functions (i.e., withdrawal, balance & statements, currency exchange rates, mobile balance recharge, prepaid credit card recharge). Moreover, the system was analyzed using the Systematic Human Error Reduction and Prediction Approach
86
during user test on the prototype of the redesigned system. Finally, the original system and the redesign proposal (i.e., the prototype) were compared between them on the basis of the usability perceptions of users involved in two test sessions.
(SHERPA) [8]. This method allows predicting the mistakes the user may incur into, evaluating the importance of those errors and how the user could recover from them. In this study, the SHERPA technique was necessary to identify the criticisms in the tasks that users typically perform by the ATM (i.e., withdrawal, mobile balance recharge, recharge of prepaid credit card balance, account and currency exchange rates). Results from the heuristic evaluation were empirically tested in a session of test with a sample of users.
3.4 Results The heuristic analysis of the original ATM system showed a basic and plain design strongly focused on few main functions (i.e., withdrawal, information services and balance recharge). Moreover, results pointed out several usability issues affecting labeling, navigation and controls. The ATM was not always selfexplicative and when users were required to digit many inputs (e.g., during a mobile balance recharge), the system was not able to predict errors (e.g., providing feedbacks) and did not offer quick way to recover: when the user made a mistake s/he was forced to quit the operation and insert the card again. These criticisms may be caused by a function-oriented design that neglected users’ needs and expectations. Further results regarding users perceptions are presented in the section five of this paper, in which Us.E. questionnaire scores are analyzed in a repeated measures design comparing the original and the redesigned version of the ATM system.
3.3 Test After completing the heuristic evaluation of the system, a session of users test was carried at LUA. Seventeen participants (9 females and 8 males; mean age = 25.88 years; SD = 3.04 years) volunteered in this test. All participants reported to be righthanded, with normal or correct to normal vision. At the beginning of the test, users were asked to fill a questionnaire where they reported about their use of ATM (e.g., frequency of money withdrawal, or mobile balance recharge). Users were provided with an ATM card and a PIN code, and were asked to perform 6 tasks: recharge a prepaid credit card, withdraw money, check account balance, check the list of exchange rates, check the stocks, recharge a mobile phone’s balance. All test procedures were recorded by using both a screen capture software and a camera.
4. SYSTEM REDESIGN The evaluation of the original version of the ATM showed some usability criticism and a design strongly oriented to the functional system’s features. A partial redesign of the system was carried out with the aim of: (1) solving the usability problems and (2) centering the system design on specific users’ needs. With that in mind, the system redesign implemented two new user profile based functions (i.e., two shortcut buttons for the most habitual transactions). This type of redesign was based on a hypothetical integration between the ATM and the Customers Relation Management system (CRM). Currently, CRM systems are able to store both customer-profile information (e.g., age, job, active bank services and mobile accounts) and the frequency of transactions performed at the ATMs (e.g., number of withdrawals and mobile balance recharges). The current redesign proposes a sort of adaptive interface with functionalities based on user-profile information (e.g., withdrawal of habitual cash balance and recharge of the own mobile balance); in real world systems, “profile-based functions” might be activated by data provided by the CRM system. More generally, this redesign was based on the hypothesis that the integration between CRM and ATM will be a new and innovative channel of communication between bank institutions and their customers.
Figure 2. A picture from a user test session. A camera recorded the interaction of the user with the ATM interface and the keypad. At the end of the test, users were asked to fill a questionnaire to evaluate the perceived usability of the system. For this scope the Us.E. questionnaire [6] was adapted to fit the specific context of use. Although this tool was originally developed for the evaluation of web sites, the items are sufficiently generalizable to assess a generic framework. The questionnaire consists of 19 statements to which participants had to report on their level of agreement / disagreement by using a five-point Likert scale. A recent study by Di Nocera et al. [5] showed the validity and reliability of Us.E. with respect to three dimensions of usability: Handling, Satisfaction and Attractiveness. Handling refers to simplicity of use and, in general, to the interaction with the “structural properties” of the technology. Satisfaction refers to the perceived users’ satisfaction. This factor can also be named “Perceived Utility”, since several contributing items describe the achievement of goals using technology. Attractiveness refers to the aesthetics features of the technology (e.g., use of colors and pictures); in this case study, this factor was strongly related to the overall appeal of the GUI. The Us.E. questionnaire was also used
In the first step of the redesign process, a set of wireframes (ie, low-fidelity prototype graphics) of the new systems were developed to graphically represent the GUI organization of contents and functionalities. The new system proposal was firstly aimed at providing a userprofiled area (see Figure 2, the left side) with a welcome message and shortcuts to the most habitual functions; user information by the CRM data (name and transactions frequencies, in this case) was used to customize the massage and the two “quick functions”. On the central side of the main menu, the three principal services available in the original ATM (i.e., cash withdrawal, balance & statements and mobile and cards recharges) were accessible by three specific buttons. Differently from the original version, the entire new interface was designed for a touch screen system. As that area was meant to speed up the interaction with the ATM, it was added in the left part of the screen, to be the first thing read by the user.
87
(A)
(B)
Figure 2 An example of wireframe of the redesigned main menu. The standard functions buttons (cash withdrawal, balance & statements and mobile and cards recharges) are in the central side of the interface. The left side displays userbased services: a welcome message and two shortcuts for accessing to the most frequent transactions (i.e., withdraw 70€ and recharge the mobile balance, in this example). Studies using eye-tracking techniques to evaluate the usability of web sites have shown that users look for significantly longer time on the left side of web pages. For example, Nielsen and Perince [11] showed that 69% of users' eye fixations fell on the left side, 30% and 1% on the right side on the initially not visible due to the horizontal scrolling. Another custom function was integrated in the mobile credit recharge procedure, adding a phonebook to store and select numbers to be recharged. This last function affects one of the most difficult tasks, as resulted from tests. In this way the number to be recharged has to be typed only the first time, afterwards it will be stored and the user will have to perform only a scroll and select operation, reducing inputs needed and the chance of error. The same function could be implemented also for the prepaid credit card recharge. Moreover in this case the system can propose to the user cards already linked to his/her bank account, avoiding even the first input. Also the labeling was changed basing on users’ comments recorded during the test.
Figure 3 Flowchart of “withdrawal” function in standard (A) and custom (B) mode. As shown in Figure 3, using the custom withdrawal function, the system suggests the amount and the user can then complete the transaction in just a few steps, while maintaining the ability to "edit " the amount to be taken.
(A)
4.1 The prototype A prototype of the designed interface was developed using Adobe® ActionScript® 3.0 for Adobe® Flash® and installed on a desktop PC with a 17” touch screen monitor. This choice was made after observing users touching the screen instead of the function buttons of the original system (par 3.1). The interface of the new ATM system was developed using institutional design elements (colors, logo and theme background) of Banca Carige with a brand-new graphic to be more appealing to users. As the main innovation brought by the re-design of the system was offering the user a more immediate and quick interaction, allowing him/her to run regular transactions through fewer steps in the navigation system, the withdrawal and the mobile credit recharge functions were implemented in the prototype. Users reported to be regular in their habits, for example they were accustomed to withdraw the same amount of money, except for specific (and rare) needs, and recharge a small group of phone numbers or credit card numbers. Diagrams in Fig. 3 and Fig. 4 shows the steps to access of "withdrawal" and “mobile credit recharge” functions in standard mode (A) and in custom mode (B).
88
(B)
uncomfortable head-mounted instruments. It uses near infrared diodes to generate reflection patterns on the cornea of the eyes. A camera collects these reflection patterns, together with other visual information. Image processing algorithms identify relevant features, including the eyes and corneal reflection patterns. Threedimensional position in space of each eyeball and the gaze point on the screen are then calculated. Sampling frequency was 33Hz. The eye-tracker system was embedded in a 17’’ LCD touch screen monitor.
4.3 Results The profile-based and standard functions were compared between them in terms of users choices when they were required to withdraw their habitual cash and to recharge their mobile balance. As shown in Table 1, the ninety-two percent of users chose to use the new function when they were asked to withdraw their usual cash. Moreover, when users were required to recharge their mobile balance, the 62% of them chose the new function "mobile recharge" rather than the more standard function labeled as "recharge". Table 1 User’s choices between standard and custom functions
Figure 4 Flowchart of “mobile credit recharge” function in standard (A) and custom (B) mode. From the flowchart in Figure 4 it is clear that there is a reduction of the complexity of the interaction with the use of a profile based function. If the number is already stored in the phonebook, the user only needs to select it and choose the amount to charge. In that way the effort to choose the name of the telephone company and type the number is done only at the first recharge operation. Even the selection of the amount could be set automatically, however we chose to leave this choice to the user to give him/her a sufficient amount of steps to check the correctness of the transaction and revert/edit if an error or a change occurs during the operation.
User’s Choice
Standard Function
Custom Function
TOT
Withdrawal (habitual amount)
8%
92%
100%
Mobile Recharge
38%
62%
100%
The Us.E. questionnaire scores were used as dependent variable in an ANOVA statistical design "System Version" (original vs. prototype) by "Usability" (handling vs. satisfaction vs. attractiveness). The results showed a significant interaction between the components of perceived usability and the version of the ATM system (F2, 58 = 7.78, p
