Preventing payments in error What causes mistakes in user experience of banking apps and websites? Commissioned by Payments UK Authored by Adaptive Lab A D A P T I V E L A B
About this report Billions of electronic payments are made each year in UK, with more of se than ever sent using online or mobile banking apps. The overwhelming majority of se payments are sent to account where y are intended, but unfortunately, where an error is made entering payment information, y can be sent to wrong place. Payments UK, trade association for payments industry, is leading collaborative work with banks and building societies on how y can minimise risk for ir customers of sending a payment in error. To ensure user experience is placed at centre of industry guidance, Payments UK has commissioned this independent research report from Adaptive Lab. With increase in use of digital services, more types of errors are being made online. This has become an area of priority amongst User Experience (UX) specialists as y lead to users frustrations, drop outs and need for recovery infrastructures to be put in place by companies. The banking industry is one sector among ors being affected by this wider issue. 2 Preventing payments in error report
While we acknowledge that re is no silver bullet to preventing payments in error and that work has already been undertaken by industry to drive out error and improve user experience, this report leverages Adaptive Lab s research understanding of financial sector to provide insight on user experience of sending a payment online or with an app. The report sets out a summary of areas where lessons can be learned and is intended to be useful to anyone interested in field of digital design of online and mobile banking applications. 2 Preventing payments in error report
Contents Introduction Methodology Cognitive load and user experience Research findings 2 4 7 9 About Adaptive Lab Adaptive Lab is a digital innovation company. We partner with ambitious leaders at companies experiencing digital disruption, to help m to compete, innovate and grow. Our radically customer-centric approach brings design thinking, lean startup, and agile product development toger to deliver brilliant results in compressed timeframes. Find about more about what we do at end of this report. About Payments UK Payments UK is trade association launched in June 2015 to support rapidly evolving payments industry. Payments UK brings its members and wider stakeholders toger to make UK s payment services better for customers and to ensure UK payment services remain world-class. 3 Preventing payments in error report
Research methodology The conclusions in this report are based on user experience (UX) best practice and analysis of two phases of user research. Phase 1: one-on-one user observations In first phase of research, 24 UK residents aged between 19 and 69 were observed using multiple banking apps and websites. These users were asked to make a dozen payments of different types on each app/website, including paying new and existing payees, paying people and organisations, paying via Paym, and setting up regular payments. During se observations, researchers noted all errors made by users, as well as errors nearly made, or made and subsequently corrected, as well as anything that caused confusion or misunderstanding. 4 Preventing payments in error report
Phase 2: large scale unmoderated, remote testing Different versions of prototypes were made for testing on smartphone and on laptop/desktop computers. Based on insights from first stage of research, project team developed hyposes about what aspects of payments UX would increase or decrease error rates. The team n built 11 fully interactive digital prototypes of a payment journey: websites that mocked up payment form and confirmation step, without attempting to appear like any particular bank s website. Each prototype was slightly different, with different field types, input interactions, label text, confirmation screens, etc. For instance, one prototype allowed dates to be input using a calendar picker, while anor had a simple text field; one prototype asked for additional information, like payee s bank name, while anor had just essential fields. On one prototype s confirmation screen payment data is in large print, with a spacious layout, while anor prototype used standard small print size with a compact layout. Over 400 UK residents (aged 16-67) were recruited online to test se prototypes, by inputting payment data provided to m by project team. The age breakdown of se users matched age breakdown of online/ app banking users measured by Office of National Statistics in 2015. In total, payment forms were tested more than 4,000 times, on smartphones and laptop/desktop computers. We recorded how quickly users completed each payment, as well as how long y spent on each field, how many errors y made, and how many of those errors were corrected. By testing all 11 prototypes, we were able to collect evidence for effect on error rate of se different elements individually and in combination. 5 Preventing payments in error report
Research participants profiles Phase 1 Phase 2 12 banking app users, aged between 18 and 69 6 use banking app fortnightly or more often 6 use banking app 1-3 times per quarter 4 had never made a payment on a banking app 175 UK residents, testing on smartphone (Age breakdown of digital banking users from ONS, 2015) 17% aged 16-24 23% aged 25-34 20% aged 35-44 18% aged 45-54 12% aged 55-64 10% aged 65+ 12 banking website users, aged between 18 and 69 6 use banking websites fortnightly or more often 6 use banking websites 1-3 times per quarter 4 had never made a payment on a banking website 175 UK residents, testing on desktop/laptop (Age breakdown of digital banking users from ONS, 2015) 17% aged 16-24 23% aged 25-34 20% aged 35-44 18% aged 45-54 12% aged 55-64 10% aged 65+
The Cognitive relationship Load: between concept good UX and error prevention Our findings often overlap with advice on good UX for banking websites and apps. In However, field of we user have experience, identified we se use elements following of UX definition: best cognitive load imposed by a user practice as being interface particularly is amount effective of mental at preventing resources user that errors. is required to operate system. Informally, you can think of mental resources as brain power more formally, we re talking about slots in working This does not memory. mean that UX guidance not included here will contribute nothing to error prevention. Ensuring banking apps and websites offer high using website/app quality user The experiences term cognitive does a great load was deal originally to prevent coined user error, by psychologists by reducing to describe mental effort overall cognitive required load to learn of new payment information. experience. Though web browsing is a much more casual activity than formal education, cognitive load is still important: users must learn how to use a site s navigation, layout, Cognitive load and transactional is a term to describe forms. And total even amount when of mental site is fairly effort familiar, users must still carry around required of a information person at any that given is relevant time. Inputting to ir goal. payment For instance, data correctly when planning a vacation, users cognitive accuracy requires a certain load includes amount interface-related of mental effort from knowledge users, but and using specific a website vacation-related or constraints that y may have Fewer cognitive resources app also requires (such some as price mental and timeframe). effort. are available for accurately filling in payment forms The mental effort When (or a computer cognitive can t load) handle demanded our processing by a website demands, or app with we can simply upgrade to a newer, more poor UX is considerably powerful machine. higher, But leaving to date users re s with no less way mental to increase energy to actual processing power of our brains. focus on making Instead, accurate designers payments. must understand and accommodate se limits. As a result, one of best ways to reduce error rate is to improve overall Kathryn Whitenton - More Nielsen likely Norman to make Grouperrors UX of banking website or app, and thus removing any distracting, and fail to spot m confusing or interruptive elements. Poor UX Complex, hard to use and/or confusing website or app High cognitive load More attention taken up by Less attention to Errors increase 87 Preventing payments in error report
The relationship between good UX and error prevention Our findings often overlap with advice on good UX for banking websites and apps. However, we have identified se elements of UX best practice as being particularly effective at preventing user errors. This does not mean that UX guidance not included here will contribute nothing to error prevention. Ensuring banking apps and websites offer high quality user experiences does a great deal to prevent user error, by reducing overall cognitive load of payment experience. Cognitive load is a term to describe total amount of mental effort required of a person at any given time. Inputting payment data correctly requires a certain amount of mental effort from users, but using a website or app also requires some mental effort. The mental effort (or cognitive load) demanded by a website or app with poor UX is considerably higher, leaving users with less mental energy to focus on making accurate payments. As a result, one of best ways to reduce error rate is to improve overall UX of banking website or app, and thus removing any distracting, confusing or interruptive elements. Poor UX Complex, hard to use and/or confusing website or app High cognitive load More attention taken up by using website/app Less attention to accuracy Fewer cognitive resources are available for accurately filling in payment forms Errors increase More likely to make errors and fail to spot m 8 Preventing payments in error report
The Cognitive relationship Load: between concept Findings - Factors which influence error rates good UX and prevention The app or website Poor UX Complex, hard to use and/or confusing website or app Our findings often overlap with advice on good UX for banking websites and apps. However, we have Our findings often overlap with advice on good UX for banking identified se elements of UX best practice as being particularly effective at preventing user errors. websites and apps. However, we have identified se elements of UX best This does not mean that UX guidance not included here will contribute nothing to error prevention. practice The overall as being user experience particularly of effective banking at preventing website user errors. Ensuring banking apps and websites ofer high quality user experiences does a great deal to prevent user or app (outside of payment interfaces) can have a error, by reducing overall cognitive load of payment experience. This significant does not impact mean on that UX number guidance of payments not included made here will contribute nothing in error. to error prevention. Ensuring banking apps and websites offer high using website/app Cognitive load is a term to describe total amount of mental effort required of a person at any given quality user experiences does a great deal to prevent user error, by reducing time. Inputting payment data correctly requires a certain amount of mental effort from users, but using When overall website cognitive or load app is of hard payment to use or experience. hard to a website or app also requires some mental effort.the mental effort (or cognitive load) demanded by a understand, customers reach point of making a website or app with poor UX is considerably higher, leaving users with less mental energy to focus on Cognitive payment with load a higher is a term cognitive to describe load, and total less amount focus of mental effort making accurate payments. required available of for a avoiding person at and any correcting given time. errors. Inputting payment data correctly High cognitive load More attention taken up by Less attention to accuracy requires a certain amount of mental effort from users, but using a website or Fewer cognitive resources As a result, one of best ways to reduce error rate is to improve overall UX of banking website app Improving also requires overall some usability mental effort. of website or app are available for accurately or app, and thus removing any distracting, confusing or interruptive elements. Our findings often will refore help reduce payment errors. filling in payment forms overlap with advice on good UX for banking websites and apps. However, we have identified se The mental effort (or cognitive load) demanded by a website or app with elements of UX best practice as being particularly effective at preventing user errors. This does not poor UX is considerably higher, leaving users with less mental energy to mean that UX guidance not included here will contribute nothing to error prevention. Ensuring banking focus on making accurate payments. apps and websites offer high quality user experiences does a great deal to prevent user error, by reducing Errors increase More likely to make errors overall cognitive load of payment experience. As a result, one of best ways to reduce error rate is to improve overall UX of banking website or app, and thus removing any distracting, and fail to spot m Dr. Sarah Wiseman, Postdoctoral Researcher in HIC confusing or interruptive elements. 87 9 Preventing payments in error report
The Cognitive relationship Load: between concept Findings - Factors which influence error rates good UX and prevention The payment journey Poor UX Complex, hard to use and/or confusing website or app Our findings often overlap with advice on good UX for banking websites and apps. However, we have Our findings often overlap with advice on good UX for banking identified se elements of UX best practice as being particularly effective at preventing user errors. websites and apps. However, we have identified se elements of UX best This does not mean that UX guidance not included here will contribute nothing to error prevention. practice Making a as payment being particularly is a multi-step effective journey at preventing in all user errors. Ensuring banking apps and websites ofer high quality user experiences does a great deal to prevent user apps and websites included in this research. There error, by reducing overall cognitive load of payment experience. This are three does distinct not mean phases that UX of guidance journey not in included which here will contribute nothing errors can to occur: error prevention. Ensuring banking apps and websites offer high using website/app Cognitive load is a term to describe total amount of mental effort required of a person at any given quality Inputting user experiences data: users can does input a great deal wrong to prevent data, user error, by reducing time. Inputting payment data correctly requires a certain amount of mental effort from users, but using eir overall accidentally cognitive load via typos, of or payment deliberately, experience. when a website or app also requires some mental effort.the mental effort (or cognitive load) demanded by a y have wrong data in mind. website or app with poor UX is considerably higher, leaving users with less mental energy to focus on Cognitive Checking load is a term to describe total amount of mental effort Less attention to making data: users accurate can check payments. data on input required screen of or a person confirmation any given screen, time. but Inputting may miss payment data correctly accuracy requires errors. a certain amount of mental effort from users, but using a website or Fewer cognitive resources As a result, one of best ways to reduce error rate is to improve overall UX of banking website app also requires some mental effort. are available for accurately Correcting or data: app, and when thus users removing correct any errors distracting, or confusing or interruptive elements. Our findings often filling in payment forms invalid data, overlap y with can sometimes advice on good introduce UX for more banking websites and apps. However, we have identified se The mental effort (or cognitive load) demanded by a website or app with errors. elements of UX best practice as being particularly effective at preventing user errors. This does not poor UX is considerably higher, leaving users with less mental energy to mean that UX guidance not included here will contribute nothing to error prevention. Ensuring banking focus on making accurate payments. apps and websites offer high quality user experiences does a great deal to prevent user error, by reducing High cognitive load More attention taken up by Errors increase More likely to make errors overall cognitive load of payment experience. As a result, one of best ways to reduce error rate is to improve overall UX of banking website or app, and thus removing any distracting, and fail to spot m Dr. Sarah Wiseman, Postdoctoral Researcher in HIC confusing or interruptive elements. 87 10 Preventing payments in in error report
Findings - Factors which influence error rates The form Most of errors we observed in our research originated in input errors made on payment form. Some of se errors were compounded by correcting errors on same screen, or poor checking on confirmation screen, but ir origin was in payment form. This underlines importance of payment form s structure and layout, and appearance and input interactions of specific fields, such as sort code, account number or amount. 11 Preventing payments in error report
The Cognitive relationship Load: between concept Findings - Factors which influence error rates good UX and prevention The fields Poor UX Complex, hard to use and/or confusing website or app Our findings often overlap with advice on good UX for banking websites and apps. However, we have Our findings often overlap with advice on good UX for banking identified se elements of UX best practice as being particularly effective at preventing user errors. websites and apps. However, we have identified se elements of UX best This does not mean that UX guidance not included here will contribute nothing to error prevention. practice The easier as that being users particularly found it effective to recognise at preventing which field user errors. Ensuring banking apps and websites ofer high quality user experiences does a great deal to prevent user was which, and to input data into fields, fewer error, by reducing overall cognitive load of payment experience. This mistakes does y not mean made. that UX guidance not included here will contribute nothing to error prevention. Ensuring banking apps and websites offer high using website/app Cognitive load is a term to describe total amount of mental effort required of a person at any given quality In addition, user we experiences observed does that different a great deal kinds to prevent of data user error, by reducing time. Inputting payment data correctly requires a certain amount of mental effort from users, but using input overall caused cognitive different load levels of of errors. payment Selecting experience. a website or app also requires some mental effort.the mental effort (or cognitive load) demanded by a information from a dropdown has less potential for website or app with poor UX is considerably higher, leaving users with less mental energy to focus on Cognitive errors than load requiring is a term users to to describe type in information total amount of mental effort making accurate payments. required into text of fields. a person at any given time. Inputting payment data correctly High cognitive load More attention taken up by Less attention to accuracy requires a certain amount of mental effort from users, but using a website or Fewer cognitive resources As a result, one of best ways to reduce error rate is to improve overall UX of banking website app also requires some mental effort. are available for accurately or app, and thus removing any distracting, confusing or interruptive elements. Our findings often filling in payment forms overlap with advice on good UX for banking websites and apps. However, we have identified se The mental effort (or cognitive load) demanded by a website or app with elements of UX best practice as being particularly effective at preventing user errors. This does not poor UX is considerably higher, leaving users with less mental energy to mean that UX guidance not included here will contribute nothing to error prevention. Ensuring banking focus on making accurate payments. apps and websites offer high quality user experiences does a great deal to prevent user error, by reducing Errors increase More likely to make errors overall cognitive load of payment experience. As a result, one of best ways to reduce error rate is to improve overall UX of banking website or app, and thus removing any distracting, and fail to spot m Dr. Sarah Wiseman, Postdoctoral Researcher in HIC confusing or interruptive elements. 87 12 Preventing payments in in error report
The Cognitive Factors relationship which Load: do not between influence concept error rates good UX and error prevention Poor UX Complex, hard to use and/or As part of our research, we considered a large number of factors that might increase or decrease confusing error rates. website or app Our findings often overlap with advice on good UX for banking websites and apps. However, we have Our findings results showed often overlap that some with of advice se on factors good had UX no for impact banking on error rates. identified se elements of UX best practice as being particularly effective at preventing user errors. websites and apps. However, we have identified se elements of UX best This does not mean that UX guidance not included here will contribute nothing to error prevention. practice as being particularly effective at preventing user errors. Ensuring banking apps and websites ofer high quality user experiences does a great deal to prevent user Auto-advancing between sort code fields High cognitive load More attention taken up by error, by reducing overall cognitive load of payment experience. This does not mean that UX guidance not included here will contribute nothing Some apps to error and websites prevention. tested Ensuring automatically banking moved apps and websites offer high using website/app Cognitive load is a term to describe total amount of mental effort required of a person at any given quality cursor to user experiences next field when does a user great has deal finished to prevent inputting user error, by reducing time. Inputting payment data correctly requires a certain amount of mental effort from users, but using into overall previous cognitive field. load In of particular, payment this was experience. used when a website or app also requires some mental effort.the mental effort (or cognitive load) demanded by a sort codes were split into three fields, each accepting two website or app with poor UX is considerably higher, leaving users with less mental energy to focus on Cognitive digits. While load users is a strongly term to preferred describe auto-advancing total amount sort of mental effort making accurate payments. required code fields, of a y person had at no any impact given on time. error Inputting rates. payment data correctly Less attention to accuracy requires a certain amount of mental effort from users, but using a website or Fewer cognitive resources As a result, one of best ways to reduce error rate is to improve overall UX of banking website app also requires some mental effort. are available for accurately or app, and thus removing any distracting, confusing or interruptive elements. Our findings often Length of field labels filling in payment forms overlap with advice on good UX for banking websites and apps. How However, much we do have you identified se The We tested mental forms effort with (or cognitive concise field load) labels demanded (eg payee by a website or app with elements of UX best practice as being particularly effective at preventing want to user send? errors. This does not poor name ) UX as is considerably well as longer higher, labels (eg leaving Who users would with you less like mental energy to mean that UX guidance not included here will contribute nothing to error prevention. Ensuring banking focus to pay? ). on making We hyposised accurate payments. that se would be harder to apps and websites offer high quality user experiences does a great deal to prevent user error, by reducing scan, and refore increase errors. The longer labels resulted a result, in one same of amount best ways of errors to reduce as error shorter rate labels. is to improve overall More likely to make errors Errors increase overall cognitive load of payment experience. Amount As UX of banking website or app, and thus removing any distracting, and fail to spot m Dr. Sarah Wiseman, Postdoctoral Researcher in HIC confusing or interruptive elements. 87 13 Preventing payments in error report
Using a single field for amount The Cognitive relationship Load: between concept We tested two varieties of amount field: a single field, or good two adjacent fields, UX one and for for pounds error and one for prevention pence. Although users expressed a strong preference for a single Poor UX Complex, hard to use and/or confusing website or app Our findings often overlap with advice on good UX for banking websites and apps. However, we have Our field, findings we did not often find overlap that two with fields advice increased on good (or UX reduced) for banking identified se elements of UX best practice as being particularly effective Amount at preventing user errors. websites ir error and rate. apps. However, we have identified se elements of UX best. This does not mean that UX guidance not included here will contribute nothing to error prevention. practice as being particularly effective at preventing user errors. Ensuring banking apps and websites ofer high quality user experiences does a great deal to prevent user High cognitive load More attention taken up by error, by reducing overall cognitive load of payment experience. This does not mean that UX guidance not included here will contribute nothing to error prevention. Ensuring banking apps and websites offer high using website/app Cognitive load is a term to describe total amount of mental effort required of a person at any given quality user experiences does a great deal to prevent user error, by reducing time. Inputting payment data correctly requires a certain amount of mental effort from users, but using overall cognitive load of payment experience. a website or app also requires some mental effort.the mental effort (or cognitive load) demanded by a website or app with poor UX is considerably higher, leaving users with less mental energy to focus on Cognitive load is a term to describe total amount of mental effort making accurate payments. required of a person at any given time. Inputting payment data correctly Less attention to accuracy requires a certain amount of mental effort from users, but using a website or Fewer cognitive resources As a result, one of best ways to reduce error rate is to improve overall UX of banking website app also requires some mental effort. are available for accurately or app, and thus removing any distracting, confusing or interruptive elements. Our findings often filling in payment forms overlap with advice on good UX for banking websites and apps. However, we have identified se The mental effort (or cognitive load) demanded by a website or app with elements of UX best practice as being particularly effective at preventing user errors. This does not poor UX is considerably higher, leaving users with less mental energy to mean that UX guidance not included here will contribute nothing to error prevention. Ensuring banking focus on making accurate payments. apps and websites offer high quality user experiences does a great deal to prevent user error, by reducing Errors increase More likely to make errors overall cognitive load of payment experience. As a result, one of best ways to reduce error rate is to improve overall UX of banking website or app, and thus removing any distracting, and fail to spot m Dr. Sarah Wiseman, Postdoctoral Researcher in HIC confusing or interruptive elements. Amount 87 14 Preventing payments in in error report
Adaptive Lab are pioneering digital product and service specialists Accelerating change in technology and customer behaviour is transforming every sector of economy. With new competitors emerging virtually overnight, success is dependent on a company s ability to embrace disruption. We partner with forward looking leaders who recognise imperative to rethink as world around ir company changes. We help to transform ir existing businesses and to develop new propositions by deploying smart-working methods of world s fastest growth tech startups. Our clients include Associated Press, Barclays, Barclaycard, Experian, Johnston Press, Tesco, Three Mobile, and Vodafone. Get in touch to discuss how Adaptive Lab can help your business. hey@adaptivelab.com 020 3772 4630 15 Preventing payments in error report