Stress test of QR payment at the supermarket checkout. Comparing mobile interfaces of banks
Motivation
The mobile banking application has become one of the most frequently used applications for many. Payment by QR for housing and communal services or groceries in a supermarket, collecting money for a gift or transferring to a street musician. We can perform these or other operations several times a day.
There are also seasonal changes and weekends when the payment process can increase exponentially.
For example, on a seaside vacation, there are souvenir and handicraft shops all around, fresh fruits and berries, bathing accessories, etc. Often, you can only pay in cash or by transferring money to a phone number, and you would probably prefer to leave your wallet in your hotel room rather than give it to a clever passerby.
Target
Find an app with quick access to QR payment or transfer by phone number. Ideally, the payment button is located on the first screen and is accessible when using the phone with one hand.
Situation
Paying at the supermarket checkout. Forgotten wallet with card.
Let's assume that the main payment method for the user in the supermarket is still payment by plastic card. But sometimes something goes wrong.
You left the house for wine, oh… for bread, reflexively grabbed your phone, took an umbrella (it's raining outside), but your wallet remained in your purse (different pants, different jacket).
You put bread and cheese in your basket, chose wine, stood in line at the checkout, and at the moment of payment you try to automatically take out your wallet… but it’s not there.
Of course, if you don’t have a phone or an app, you shrug your shoulders, leave everything at the checkout and sadly go home without a chance to have a good evening, especially since the time for selling alcoholic beverages in your region ends early… However, even if you have a phone with an app installed, there is no guarantee that you will cope with the stressful situation that has arisen and will be able to perform a quick manipulation that is not as well-practiced as pulling out a wallet.
So, you are standing in front of the cash register, holding a wet umbrella in your hand.
Throw up your hands and loudly announce to the cashier and the line that you forgot your wallet.
Take out and unlock your phone.
Launch the banking application.
Wait for it to load… Wait a little longer.
Unlock the application.
The first screen loads and… you're out of luck, there's no QR payment button.
The line is agitated, the cashier is checking to see if it's time to refresh your manicure, your phone starts jumping in your hand, you try to help with your other hand and shower those around you with invigorating drops.
Found a small button “Payments” and go to the second screen and… the QR button is not in the priority block and does not fit on the screen – scrolling is needed.
Finally, the button is found and pressed. All that remains is the payment procedure. If your internet connection is not too bad, you wipe the sweat from your forehead, take your bread and everything else, and hurry home to drink some water.
The result of this experience for the user: with some probability and in the presence of an alternative and more suitable application, the user will transfer some funds to another bank to perform daily quick transactions.
Prioritizing banking application tasks
Of course, the priority of operations is determined by business requirements. If payment by QR is not something important for the business, then you will find it only on the second or even third screen.
The user's choice is then obvious: become a client of yet another bank. This is sometimes easier than figuring out and/or setting up an existing application.
Nevertheless, let's try to briefly rank several operations by frequency of use, from daily to less frequent.
Buying coffee and buns at a kiosk.
Payment for goods in a grocery or hardware store.
View balance.
Transferring money to relatives, as a gift to a colleague, to the owner of an apartment…
Transfer by phone number for souvenirs and other goods in the kiosk (weekends and holidays).
Payment for the Internet, mobile communications, housing and communal services, and other bills.
Introducing a new product.
From this simple list, it is easy to conclude that purchases, including QR or transfers by phone number, are more frequent actions than creating a new product. However, with some probability, on the first screen you will find a link “All my products” or “New product”, and not “Transfer by phone number”.
Phone used
Asus Zenfone 3 ZE552KL. Diagonal 5.5”, without NFC. 720×1280 (now to buy a phone with Gorilla Glass on both sides, you need to pay an order of magnitude more)
Choice of banks
The main reasons for choosing three banks: direct client, three applications installed on the phone and they are used more or less often and almost simultaneously. Additionally, during the writing of the article, the T-Bank application was installed and the debit card delivery process was launched.
Application screens
There is no doubt that when developing an application there are many influencing factors that we as users know nothing about. Therefore, we will not discuss how it happened, but only how we use what happened.
The emphasis will be on the Alfa-Bank application, since it was with this application that the case under study arose.
Alfa-Bank's first screen
The top part, according to the accessibility zones, is given to the least used buttons.
A message about loading a new version. …This link is always hanging. Why? Because it's too lazy to update, given the modern specifics. And when you finally updated, something new had already appeared.
Next, “Products.” In this case, there are two, debit and credit cards.
Advertisement. If you click the cross to clear the space, a new one appears. You need to click several times until you delete all the offers. After rebooting, the block will appear again…
Link “All my products”. In this case, there are only two and they already on the first screen.
Next are the blocks with advertisements.
The bottom menu includes the “Payments” button.
Summary. For our case with quick payment, there is not a single button on this screen. Again, from the point of view of operational management of funds, the screen seems almost useless.
Sberbank's first screen
The upper part still interests us little.
Large title “Wallet” is a link and leads to a screen with duplicate information on products. The “eye” button and theme settings.
Finally, the most useful button for our case is payment by QR code.
The “Security” button is useful. Considering the popularity of fraudulent activity with Sberbank, it is difficult to overestimate.
Product information. Compared to Alfa-Bank, we saved space.
Advertising. The saved space is used by advertising. To delete it, you only need to click the cross once. But it appears again after restarting the application. That is, after two or three clicks you get tired and the advertising remains forever.
The next block, which fits into our resolution only partially, is useful buttons for our case. Translation options and templates.
The bottom menu includes the “Payments” button.
Summary. For our case, there are 1.3 quick payment buttons (given the resolution of the current device). The QR button has a permanent place. If desired, you can find a permanent place for transfers by phone.
Raiffeisen Bank's first screen
The top part contains buttons for your personal account, search and messages.
Information about funds in the wallet. Very compact.
Quick payment buttons. There are both QR and payment by phone number. Additionally, QR is highlighted by inversion.
A place for content. After a quick look, it seemed like useful content, not advertising.
Product information. Again, compact.
The bottom menu contains a “Payments” button.
Summary. This screen most fully meets our goal: there are two buttons for quick payment, they are in visual priority and have a predictable position, i.e. they always occupy the same place during initial loading and scrolling “to the limit”. But, they are still difficult to physically reach when using the phone with one hand.
T-Bank's first screen (at the time of writing, the debit card delivery had just been initiated)
There is a lot of free space at the top, one button for additional information. Large link to the personal account and a separate search field. Quite generous for such a resolution.
Entertainment content area.
Product information.
Creation of a new product.
Bottom menu with the “Payments” button.
Summary. In its current state, the screen does not contain quick payment buttons.
Second screen of Alfa-Bank
The screen is entirely dedicated to payments, so there are all the necessary quick operation buttons. But, as before, we note that QR payment is not a priority and at this resolution does not fit on the screen and you need to scroll.
Second screen of T-Bank
Here we will use the official image from the site, where it is clear that the QR button is located in the upper right corner and is quite small in size, from which we can conclude that this operation is meaningfully highlighted, but at the same time remains physically difficult to access.
On the benefits of writing articles
While working on the article, I was motivated to study the Alfa-Bank interface more thoroughly and, unexpectedly, I discovered both the “Payment by QR” button and the button for setting up the main screen.
Screen customization allows you to change the order in which widgets are displayed.
The widgets themselves, including the “Payment by QR” button, are located under the main area with products and an advertising block.
Why didn't I notice this button right away? Interesting question.
By exploring adjacent areas, the user protects his information space, which literally everyone is trying to get into.
Seeing a block with advertising after blocks of your product, you can assume that there will be only advertising in the future, and even to check this assumption you need to spend time, and if you are in a time crunch at the checkout, then the fact of a completed study with a negative result will be recorded in the subconscious.
Having finally moved the widget higher, we already get almost what we need. But, it is still not good enough.
The quick payment button already has a chance to get to the first screen and even at the bottom, where it would be convenient to press. But, it is not fixed in relation to the bottom edge of the phone and will “float” both during scrolling and due to changes in the top content. So you will have to spend additional effort to hit the button. Plus, the widget looks like a link, although it works as a button, which is further misleading.
After all the research and testing, there is a strong desire to separate the “clean” interface from the “semi-useful” content, with which the interface elements are well mixed, so that it is difficult to separate buttons, widgets and advertising.
Alternative interface option
In my opinion, an electronic wallet literally needs a remote control, it is not just an application like a website with information, advertising and more or less meaningfully located buttons.
Examples of such remote controls have long been music track players, audiobooks, image galleries, where all the main controls are located at the bottom of the screen or at least in permanent places, which increases the convenience and speed of use.
Below is a mockup of a possible version of a banking application, in which the operational buttons on the first screen are in a permanent position and are physically accessible when operated with one hand.
You could think about setting up the “remote control” and giving the user the ability to change the location and visibility of the buttons.
The author is not a permanent mobile app designer, so the layout may contain errors. I will be glad to receive comments and suggestions, if any.
Conclusion
Of the four apps reviewed for the current resolution, only two clearly highlight quick payments on the first screen, and of those, only one provides quick access to transfers by phone number.
And none of the apps we reviewed provide easy physical access to the button when using the phone with one hand.
Yes, it is very difficult to change the familiar interface due to the conservatism of users, so all that remains is to hope and wait until personal “wants” are transformed into a common experience.
