Best Practices for UI/UX Design in Banking Applications

Posted by KMS Solutions on Jul 21, 2021 2:23:21 PM

best practices of uiux in banking apps

Bankers are competing in a digital era where banking applications are their face to the public. Thus, user experience and user interface (UX/UI) rules all. While eCommerce (Shopee or Lazada) or even fintech startups (Google Pay or Momo) have embraced and even embodied this transformation, UI/UX in banking is not so much. Most banking applications are still poorly designed where the UI/UX is like a matrix that leads users nowhere.

In this article, let's explore the 20 best practices of designing UI/UX for banking applications.

Table of Contents

1. Why UI/UX is important to the Digital Banking experience

2. Best practices for UI/UX in banking

#1 - Let users discover the app before using

#2 - Help users find ATMs or branches

#3 - Make application registration simple

#4 - Make account balance easy to see and hide

#5 - Flatten menu hierarchy

#6 - Use visual cues and reduce texts

#7 - Make menu choices as actions

#8 - Build on users' familiarity with smartphones

#9 - Choose icons appropriate to actions

#10 - Reassure with Transaction Confirmations

#11 - Leave a clear trail of transaction histories

#12 - Provide instruction when needed

#13 - Customize and simplify keyboards

#14 - Use simple menu terms

#15 - Customize menu choices

#16 - Autofill from the address book and transaction history

#17 - Auto-check to minimize human error

#18 - Display Information in Digestible Chunks

#19 - Auto-Calculate feeds during transactions

#20 - Provide full transaction details on one screen to finalize transactions

3. UI/UX Design Principles for Digital Banking

Why UI/UX is important to the Digital Banking experience

According to a report by Siebel+Gale, retail banks are ranked as low as 19th out of 25 on the global simplicity index of industries, even after Automotive, Travel/Booking, or Retail.

To understand why UI/UX has become so important to the banking industry, it helps to consider these Money Summit’s findings:

  • 71% of customers favor a simple and easy digital experience than friendly and helpful staff
  • 33% of customers have no longer used a mobile banking app due to bad user experience
  • 34% of customers have switched financial service providers because of digital experiences 

Poor UI/UX design may be partly attributable to why customers are so frustrated with banks. 73% of respondents in a survey by GMC Software Technology said that they don’t feel valued by banks.

To be fair, banks are not so careless about designing UI/UX for their applications and websites. But customers' expectations have largely been influenced by tech giants. Google redefined simplicity with its homepage that is elegantly simple, which helps users focus on doing the one thing they need to: searching. Or Facebook and Amazon embody personalization with their recommendation engine and a myriad of algorithms. Customers see the UI/UX provided by these giants as points of reference.

While it may take thousands of engineers to even mimic those applications and banks have only so much time and manpower, there are some best practices banks can apply to improve their banking application’s UI/UX.

Best Practices for Banking UI/UX

In what follows, this article will offer a number of tips for your next banking application’s UI/UX design.

#1 - Let users discover the app before using

Letting users explore your banking application before asking them for registration information is a great UI/UX technique to explain how the app can help them. This also helps to create a positive first impression of the app.

This tip works particularly well for first-time users. A short video or intro slider that pops up after they open the app helps to show what’s in there for them. Remember to be creative with this technique. You can try storytelling or interactive design.

app sliders for banking ui uxSource: Pinterest

#2 - Help users find ATMs or branches

Even if you have an all-in-one banking application that includes all the banking services, there are times when users want to drop by ATMs for some cash or visit physical branches for papers. Therefore, when strategizing your banking applications, don't forget to embed in-app guidance that leverages geo-location APIs such as Google Maps. This is what the “ATMs near me” feature is all about.

atm near me for banking ui ux

Source: Dribble

#3 - Make Application Registration Simple

Due to security requirements, it's essential for the banking app to ask users for a wide range of data. But for users, filling in all the information when they sign up can be time-consuming. But don’t let that hold back your UI/UX creativity. You can try to reduce the number of steps and make each step as simple as possible. Another way to improve the user experience of the registration process is by applying electronic Know-your-Custome (eKYC).

#4 - Make account balance easy to see and hide

Displaying the account balance visibly on the home screen can be very helpful and reassuring for users. However, UI/UX experts also need to account for privacy.  Best-of-bread banking applications always allow users to hide their balance from the prying eyes of others. They let users easily hide the balance and related information by tapping on it on the homepage. Users then can make the balance appear again by tapping again, which now is shown as the user’s name.

#5 - Flatten menu hierarchy

Hierarchical menus where users have to tap a menu for others menus to pop up proved to confuse users. Users want to see all the menus in one interface and go directly to the thing they want to do with one tap. To save their time, you want to consider using a UI technique called flat menus or shallow navigation, where users can find everything on one interface.

#6 - Use visual cues and reduce texts

It’s a basic UI/UX principle that people naturally favor visual cues (symbols or pictures) over long texts. You should choose visual cues carefully that illustrate the actions that users will make; only choose enough visuals coupled with texts to communicate, not overwhelming users with icons and images.

#7 - Make menu choices as actions

Avoiding “navigating” menu choices is another great UI/UX technique for your banking app. Instead, you should use “doing” menu choices. For example, a “payments” menu that navigates to another screen of other types of payment menus is “navigating”, whereas the “Transfer Money” button that directly leads users to the transaction screen is a “doing” menu. 

#8 - Build on Users’ familiarity with smartphones

Depending on the operating systems (iOS or Android) that the app is designed for, you want to mimic the UI/UX design patterns to create a sense of similarity for users. In other words, the input fields, push notifications, header bars, menus, and other types of patterns should be consistent with the operating system familiar to your users.

#9 - Choose icons appropriate to actions

The use of icons is great to communicate actions. However, some icons that are expected to work often end up confusing users. In our experience, icons that have multiple colors and concrete, rather than abstract, are the ones to go for. For example, the “Help” button was better presented as an icon of “person with headsets”, rather than the question mark. When it comes to icons for UI/UX, A/B Testing and Multivariate can help. Experiment and choose the one that works best for your banking app.

icons for banking ui uxAppropriate icons guide users throughout the app experience. Source: Pinterest

#10 - Reassure with Transaction Confirmations

Every decision or action in the banking application can lead to costly missteps. Therefore, one UI/UX guideline for banking applications is to always ask customers to confirm each step and reassure them throughout the journey by reinforcing each action. For example, after the user hits the “Transact” button, the app shows a pop-up asking if he’s sure about it with a simple yes-no question. Or it could be a brief “SENDING…” animation to let users know that their transactions are being processed. Even if the transaction is processed instantly in real-time, the animation makes the user feel that their transaction was successfully made.

#11 - Leave a Clear Trail of Transaction Histories

A “Transaction History” menu is considered a must-have UI/UX technique for a banking application. Most people using banking applications want to revisit their past transactions as reminders to know if they made mistakes or to gain peace of mind. If possible, the application should also show the status of each transaction, whether it’s being processed, has been successfully transferred, or failed.

#12 - Provide Instructions when needed

The application should display instructions when and where users need them. It’s even better to have a digital bot that provides contextual support throughout the transaction flow. This assures customers they will receive constant help. Though developing such digital bots are costly and time-consuming, it can go a long way in improving your app’s UI/UX.

chatbot for digital banking-01Chatbot is nice-to-have when it comes to UI/UX for banking apps

#13 - Customize and simplify keyboards

It’s important to develop customized keyboards that are consistent with the overall theme of the app in terms of color, design, or icons. Even more important, customized keyboards make it easier for users to input and navigate. For example, there are actions that ask users to type numbers only. In times like these, the app should display a simplified numeric keyboard,  instead of a full QWERTY keyboard with unnecessary characters.

inpoutmode-1

Different actions call for different keyboards

#14 - Use simple menu terms

The banking application should use colloquial and plain language. It’s even better if you can use terms that are consistent with how people communicate every day. For example, instead of using “ATM locations”, consider using “ATMs near me”.

#15 - Customize Menu Choices

Rather than showing all the actions that users rarely use or think of, the UI should prioritize only a few based on users’ past activities. For example, “Pay Bill” is a choice that users may use every month, therefore it should be presented on the home screen so that customers don’t have to find it every time they need it.

#16 - Autofill from the Address book and Transaction History

By automatically pulling information from users’ contact lists and past activities, the application can help users speed up many transactions and decisions. Furthermore, by using past data that is saved to the phone, the app can help users complete transactions and avoid typing errors, in turn improving UX.

#17 - Auto-Check to Minimize Human Error

It can help to minimize human errors if the banking application has the ability to auto-check. For example, when a user is trying to transfer more money than what he has left in the balance, the design pops up a short line notifying the user. With auto-check capability, banks can reduce customer frustration, improve complaints handling, and increase users’ confidence.

#18 - Display Information in Digestible Chunks

Too much information and too many choices can overwhelm users. With simple, focused, and consistent UX/UI, the banking application can make it easier for customers to make decisions.

#19 - Auto-Calculate Feeds During Transactions

Adding a calculator that automatically computes the total cost of a transaction lets users know how much they will pay for the transaction, which acts as a feedback tool for users.

#20 - Provide full transaction details on one screen to finalize transactions

Typically, the transaction flow can happen across multiple screens. But it’s the best UI/UX practice to summarize transaction information on one screen. With this summary screen, users will have more confidence because they know what they are doing and will be less likely to experience errors. 

UX/UI Design principles for Digital Banking

McKinsey has found that two-thirds of the decisions customers make are influenced by the quality of their experience across all the touchpoints of the customer journey. In our experience, banks that succeed in designing stellar UI/UX has two goals in mind:

  • Designing user experience that’s simple, personalized, and secure
  • Enrich customers’ financial lives with modern features and applications

Based on these two goals, there are certain UI/UX Design Principles that banking businesses need to focus on. They are Functionality, Reliability, Usability, Proficiency, and Creativity being ordered on a hierarchy of Banking UI/UX, adapted from Maslow’s hierarchy of needs. Which is a model we use to guide banking businesses on designing a stellar user experience.

hierarchy of digital banking uiux-02The hierarchy of Banking UI/UX

Functionality: The UI/UX meets the basic functional requirements. The aesthetic aspect has little to no value. For a banking product, what’s important at this stage is security.

Reliability: the UI/UX is there but offers low value for users. The design is so simple to the point of being simplistic to ensure stable and consistent performance; in other words. In other words, the purpose of UI/UX is to support the foundation for the product.

Usability: The design is easy on the eye and easy to use. At this point, it is considered to have as much value as other requirements. To ensure the usability of the product or application, the UI/UX must be workable and be enabled with data and insights

Proficiency: UI/UX empowers users to do more and do better. Its design is deemed strategically important. For a banking product, proficiency means it has all accounts and needed features in one place.

Creativity: UI/UX now has both aesthetic beauty and modern interaction. It becomes the prerequisite for any application and is handled by experts. At this final stage, the UI/UX ensures both the functionality and aesthetic look of the app.

Conclusion

To win in the battle of Banking UI/UX, bankers should think of their business as a start-up and software company. Their banking products should be simple and intuitive and speak right to the inherent nature of human minds. Having the 20 best practices for UI/UX Design, you are now ready to design your next banking application.

To learn more about how to design a steller Digital Banking Experience, read our whitepaper "Design Thinking for Digital Banking".

Design Thinking for Digital Banking

Topics: Digital Banking, Digital Transformation

Our Editorial Mission

With KMS Solutions Blogs, we would like to provide you precious content and offers for the top-notch solutions that work for your business

Recent Posts

Subscribe Here!